@extends('layouts.nav')
@section('title')
{{$Type}} Listing
@endsection
@section('content')               


<div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">Affiliates Listing</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">{{$Type}} Listing</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('fetchAffiliateslisting')}}" method="post"  id="accountTypeForm">
                            @csrf
                            <input type="hidden" id="accountId" name="id" value="">
                            <input type="hidden" class="form-control form-control-user" id="Type" placeholder="" name="Type"  value="{{$Type}}" required >
                                    
                                <div class="form-group row">
                                    <div class="col-sm-4 mb-3 mb-sm-0">
                                    <select class="form-control form-control-user" id="from" name="from"  value="{{ old('from') }}"  required>
                                        <option value="" disabled selected>From {{$Type}}</option>

                                        @foreach ($Accounts as $Account)
                                        
                                        <option value="{{$Account->ID}}">{{$Account->AccCode.'/'.$Account->AccName}}</option> 
                                        @endforeach
                                    </select>
                                    </div>
                                    <div class="col-sm-4 mb-3 mb-sm-0">
                                    <select class="form-control form-control-user" id="to" name="to"  value="{{ old('to') }}"  required>
                                        <option value="" disabled selected>To {{$Type}}</option>

                                        @foreach ($Accounts as $Account)
                                        
                                        <option value="{{$Account->ID}}">{{$Account->AccCode.'/'.$Account->AccName}}</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}} Listing</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</p>
                            <p class="whitespace-nowrap font-bold text-main text-right">{{$Type}}s</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>


            @php
            if($Type == "Tenant") {
        @endphp
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Code</td> 
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Name</td> 
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Contact Person</td>
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Address</td>
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Floor</td>
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Space</td>
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Rooms</td>
        @php
            } else {
                @endphp
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Code</td> 
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Name</td> 
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Contact Person</td>
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Address</td>
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Tel</td>
                <td class="border-b-2 border-main pb-3 pl-2 font-bold text-main">Email</td>


                @php
            
            }
        @endphp
           
          

            </tr>
          </thead>
          <tbody>





          @foreach ($Affs as $Aff)
    <tr>
        @php
            if($Type == "Tenant") {
        @endphp
                <td class="border-b py-3 pl-2">{{$Aff->TenantCode}}</td>
                <td class="border-b py-3 pl-2">{{$Aff->Name}}</td> 
                <td class="border-b py-3 pl-2">{{$Aff->ContactPerson}}</td> 
                <td class="border-b py-3 pl-2">{{$Aff->Address}}</td>
                <td class="border-b py-3 pl-2">{{$Aff->Floor}}</td>
                <td class="border-b py-3 pl-2">{{$Aff->Space}}</td>
                <td class="border-b py-3 pl-2">{{$Aff->Rooms}}</td>
        @php
            } else {
        @endphp
        <td class="border-b py-3 pl-2">{{$Aff->AccCodes}}</td>
                <td class="border-b py-3 pl-2">{{$Aff->Name}}</td> 
                <td class="border-b py-3 pl-2">{{$Aff->ContactPerson}}</td> 
                <td class="border-b py-3 pl-2">{{$Aff->Address}}</td>
                <td class="border-b py-3 pl-2">{{$Aff->Contact1}}</td>
                <td class="border-b py-3 pl-2">{{$Aff->Email}}</td> 
        @php
            }
        @endphp
    </tr>
@endforeach



          </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:     '{{$Type}}Listing.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