@extends('layouts.nav')
@section('title')
Chart Of Accounts Report
@endsection
@section('content')               


<div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">Chart Of Accounts Report</h1>
                      </div>

                  
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary"   id="formHeader">Chart Of Accounts</h6>
                        </div>
                        @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('fetchChartOfAccounts')}}" method="post"  id="accountTypeForm">
                            @csrf
                               
                                <div class="form-group row">
                                    <div class="col-sm-4 mb-3 mb-sm-0">
                                    <select class="form-control form-control-user" id="account" name="account"  value="{{ old('account') }}"  required>
                                        <option value="All" disabled selected>Account Type</option>

                                        @foreach ($Accounts as $Account)
                                        
                                        <option value="{{ $Account->ID }}">{{ $Account->Name }}</option>
                                          
                                        @endforeach
                                    </select>
                                    </div>
                                 
                                    
                                </div>


                               <div style="display: flex;">
                               <input type="submit" style="width: 100px;height: 40px; margin-right: 10px; margin-top: 6px" value="View" class="btn btn-primary btn-user btn-block" id="submitButton"/>

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

                        <div class="card-body">
                            <div class="table-responsive">
                            <button id="download-pdf" style="float: right; margin: 5px;" class="btn btn-primary">Download PDF</button>
 
                             <div>
    <div class="py-4">
      <div class="px-14 py-6">
        <table class="w-full border-collapse border-spacing-0">
          <tbody>
            <tr>
              <td class="w-full align-top">
              <div style="display: flex;">
                    <img style="width: 100px; height: 100px;" src="{!! asset('img/logo.png') !!}" class="h-12" />
                    <p class="whitespace-nowrap font-bold text-main text-10xl ml-4" style="margin-top: 30px; font: 30px;">{{$type}} Accounts</p>
                </div>
              </td>

              <td class="align-top">
                <div class="text-sm">
                  <table class="border-collapse border-spacing-0">
                    <tbody>
                      <tr>
                        <td class="border-r pr-4">
                          <div>
                            <p class="whitespace-nowrap text-slate-400 text-right">Date</p>
                            @php
                            use Carbon\Carbon;
                            $todayLongDate = Carbon::now()->format(' F j, Y'); 
                            @endphp
                            <p class="whitespace-nowrap font-bold text-main text-right">{{$todayLongDate}}</p>
                          </div>
                        </td>
                        <td class="pl-4">
                          <div>
                            <p class="whitespace-nowrap text-slate-400 text-right">Account Type</p>
                            <p class="whitespace-nowrap font-bold text-main text-right">{{$type}} Accounts</p>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="bg-slate-100 px-14 py-6 text-sm">
        <table class="w-full border-collapse border-spacing-0">
          <tbody>
            <tr>
              <td class="w-1/2 align-top">
                <div class="text-sm text-neutral-600">
                
              
               
                </div>
              </td>
              <td class="w-1/2 align-top text-right">
                <div class="text-sm text-neutral-600">
               


                

                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="px-14 py-10 text-sm text-neutral-700">
        <table class="w-full border-collapse border-spacing-0">
          <thead>
            <tr>
           
              <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Accounts Descriptions </td> 
            
            </tr>
          </thead>
          <tbody>



          @foreach ($Accs as $acc)
            <tr>
              <td class="border-b py-3 pl-2">{{$acc->AccCode.'/'.$acc->AccName}}</td>

            </tr>
            @endforeach


            <tr>
              <td colspan="9">
                <table class="w-full border-collapse border-spacing-0">
                  <tbody>
                    <tr>
                      <td class="w-full"></td>
                      <td>
                        <table class="w-full border-collapse border-spacing-0">
                          <tbody>
                        
                            
                          
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

     
     

      </div>
    </div>


 
                            </div>
                        </div>
                    
                    </div>

                    <script>
document.getElementById('download-pdf').addEventListener('click', function () {
    var element = document.querySelector('.py-4'); // Select the specific section you want to print
    var opt = {
        margin:       -0.3,
        filename:     'ChartOfAccount.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'A4', orientation: 'portrait' }
    };
    html2pdf().from(element).set(opt).save();
});
</script>

                    @endsection