@extends('layouts.nav')
@section('title')
Dashboard
@endsection
@section('content')

                    <!-- Page Heading -->
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">Account Types</h1>
                      </div>

                      
                      <div class="row">

                      <!-- Donut Chart -->
                      <div class="col-xl-4 col-lg-5">
                            <div class="card shadow mb-4">
                                <!-- Card Header - Dropdown -->
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary"  id="formHeader">Add Account Type</h6>
                                </div>
                                <!-- Card Body -->
                                <div class="card-body">
                                @if (session('success'))
                            <div class="alert alert-success" id="successMessage"  style="margin: 20px;">
                                {{ session('success') }}
                            </div>
                        @endif
                      
                        @if ($errors->any())

                                    <div class="form-group"  id="successMessage"  style="margin: 20px;">
                                        <div class="card bg-warning text-white shadow">
                                            <div class="card-body">
                                        
                                                @foreach ($errors->all() as $error)
                                                <div style="color: red; ">{{ $error }}</div>
                                                @endforeach
                                        
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                            <form class="card-body" action="{{route('addAccountType')}}" method="post" id="accountTypeForm">
                            @csrf
                            <input type="hidden" id="accountId" name="id" value="">
                                <div class="form-group">
                                        <input type="text" class="form-control form-control-user" id="name" placeholder="Account Type" name="name"  value="{{ old('name') }}" required>
                                    
                                </div>
                               
                               <div style="display: flex;">
                               <input type="submit" style="width: 100px;height: 40px; margin-right: 10px; margin-top: 6px" value="Create" class="btn btn-primary btn-user btn-block"  id="submitButton"/>

                                <input style="width: 100px;" onclick="refreshAccountType('', '')"  type="reset" value="Refresh" class="btn btn-secondary btn-user btn-block"  onclick="hideMessages()"/>
                                    
                               </div>
                                
                                <hr>
                             </form>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-8 col-lg-7">

                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary">Available Account Types</h6>
                                </div>
                                <div class="card-body">
                                <div class="table-responsive">
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                         
                                            <th>Account Type</th> 
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                           
                                            <th>Account Type</th> 
                                            <th>Action</th>

                                        </tr>
                                    </tfoot>
                                    <tbody>
                                       
                                        
                                    @foreach ($accounts as $account)
                                            <tr>
                                        
                                                <td>{{ $account->Name }}</td>
                                               
                                                <td style="justify-content: center; align-items: center;">
                                                    <a href="" class="btn btn-primary btn-circle" onclick="editAccountType(event,'{{ $account->ID }}', '{{ $account->Name }}')">
                                                    <i class="fas fa-edit"></i>
                                                    </a>
                                                    <a href="{{ route('deleteAccountTypes', ['id' => $account->ID]) }}" class="btn btn-danger btn-circle"  onclick="return confirmDelete('{{ $account->Name }}');">
                                                        <i class="fas fa-trash"></i>
                                                    </a>
                                                </td>
                                                
                                            </tr>
                                        @endforeach

                                           
                                    </tbody>
                                </table>
                            </div>
                                
                        </div>
                            
                    </div>


                           

                        
                </div>

                        
                        
            </div>

                        <script>
                             function editAccountType(event,id, name) 
                             {
                                event.preventDefault();
                                document.getElementById('accountId').value = id;
                                document.getElementById('name').value = name;
                                document.getElementById('formHeader').innerText = 'Edit Account Type';
                                document.getElementById('submitButton').value = 'Update';
                                document.getElementById('accountTypeForm').action = '{{route("editAccountType")}}';
                            }
                
                            function refreshAccountType(id, name) 
                            {
                                document.getElementById('accountId').value = id;
                                document.getElementById('name').value = name;
                                document.getElementById('formHeader').innerText = 'Add Account Type';
                                document.getElementById('submitButton').value = 'Create';
                                document.getElementById('accountTypeForm').action = '{{route("addAccountType")}}';
                                hideMessages();
                            
                            }

                            function confirmDelete(Name) {
                                return confirm("Are you sure you want to delete the Account Type: " + Name + "?");
                            }


                
                </script>

                    
@endsection