{{-- section --}}
<section class="invoice--section">




   {{-- head --}}
   @section('head')

   <link rel="stylesheet" href="{{url('assets/css/invoice.css')}}">

   @endsection
   {{-- endHead --}}






   {{-- ------------------------------------------------ --}}
   {{-- ------------------------------------------------ --}}
   {{-- ------------------------------------------------ --}}





   {{-- container --}}
   <div class="container position-relative">



      {{-- capture - invoiceWrapper --}}
      <div id='invoice--capture' class="invoice--wrapper">



         {{-- top --}}
         <div class="row align-items-center invoice--top mb-4 ar--flex-row-reverse">


            {{-- image --}}
            <div class="col-6 text-start">
               <img class="invoice--logo" src="{{ url('assets/img/Logo/logo@2x.png') }}">
            </div>




            {{-- title --}}
            <div class="col-6 align-self-end">
               <h1 class="invoice--main-title text-uppercase fw-bold mb-0 d-flex justify-content-end ar--flex-row-reverse"
                  style="letter-spacing: 0.6px;">{{ __('Invoice') }}
               </h1>
            </div>





            {{-- ----------------------- --}}
            {{-- ----------------------- --}}



            {{-- hr --}}
            <div class="col mt-3">
               <div class="invoice--hr"></div>
            </div>



            {{-- wrapper --}}
            <div class="col-auto mt-3">
               <div class="d-flex align-items-center justify-content-end ar--flex-row-reverse">

                  {{-- invoiceNumber --}}
                  <div class="d-flex align-items-center me-5 ms-4 ar--flex-row-reverse">
                     <span class="me-2 fs-17 invoice--dot-after rtl--direction">{{ __('Invoice No') }}</span>
                     <span class="fw-600
                            fs-17">#{{ str_replace('INV-', '', $serviceFee?->invoiceNumber) }}</span>
                  </div>



                  {{-- date --}}
                  <div class="d-flex align-items-center ar--flex-row-reverse ">
                     <span class="me-2 fs-17 invoice--dot-after rtl--direction">{{ __('Date') }}</span>
                     <span class="fw-600 fs-17">{{ date('d.m.Y', strtotime($serviceFee?->serviceDate)) }}</span>
                  </div>
               </div>
            </div>


         </div>
         {{-- endRow --}}





         {{-- -------------------------------------- --}}
         {{-- -------------------------------------- --}}




         {{-- midRow --}}
         <div class="row align-items-center invoice--middle mb-4 pb-2 ar--flex-row-reverse">


            {{-- leftSide --}}
            <div class="col-6">
               <div class="invoice--mid-box text-start">

                  {{-- title --}}
                  <h2 class="fs-18 fw-700 mb-1 invoice--mid-box-subtitle invoice--dot-after ar--direction">{{
                     __('INVOICE TO')
                     }}</h2>

                  {{-- name - address - country - email --}}
                  <p>{{ $serviceFee->client?->{__('name')} }}</p>
                  <p>{{ $serviceFee->client?->{__('address')} ?? '—' }}</p>
                  <p>{{ $profile->{__('country')} }}</p>
                  <p>{{ $serviceFee->client?->{__('email')} }}</p>
               </div>
            </div>





            {{-- rightSide --}}
            <div class="col-6">
               <div class="invoice--mid-box text-end">
                  <h2 class="fs-18 fw-700 mb-1 invoice--mid-box-subtitle invoice--dot-after ar--direction">{{
                     __('PAY TO') }}
                  </h2>

                  {{-- details --}}
                  <p>{{ $profile->{__('name')} }}</p>
                  <p>{{ $profile->{__('address')} }}</p>
                  <p>{{ $profile->{__('country')} }}</p>
                  <p>{{ $profile->email }}</p>
               </div>
            </div>
         </div>
         {{-- endRow --}}






         {{-- -------------------------------------- --}}
         {{-- -------------------------------------- --}}


         {{-- content --}}
         <div class="row align-items-center invoice--content mb-4 pb-2">
            <div class="col">
               <div class="table-responsive  invoice--table">
                  <table class="table mb-0">

                     {{-- head --}}
                     <thead class="table-light">
                        <tr>
                           <th>{{__('File No.')}}</th>
                           <th>{{__('Invoice No.')}}</th>
                           <th>{{__('Title')}}</th>
                           <th>{{__('Date')}}</th>
                           <th>{{__('Amount')}}</th>
                        </tr>
                     </thead>



                     {{-- -------------------- --}}
                     {{-- -------------------- --}}



                     {{-- body --}}
                     <tbody>


                        {{-- loop - items --}}
                        <tr>
                           <td>{{ $serviceFee?->fileNumber ?? '—' }}</td>
                           <td>{{ $serviceFee?->invoiceNumber ?? "—" }}</td>
                           <td>{{ $serviceFee?->{__('information')} }}</td>
                           <td>{{ date('d / m / Y', strtotime($serviceFee?->serviceDate)) }}</td>
                           <td>{{ number_format($serviceFee?->totalFees() ?? 0, 2) }}</td>
                        </tr>



                        {{-- ------------------- --}}
                        {{-- ------------------- --}}




                        {{-- subtotal --}}
                        <tr>
                           <td colspan="3"></td>
                           <td class="fw-500 text-uppercase">{{__('Subtotal')}}</td>
                           <td class="fw-500">{{ number_format($serviceFee?->totalFees(), 2) }}</td>
                        </tr>


                        {{-- tax --}}
                        <tr>
                           <td colspan="3"></td>
                           <td class="fw-500 text-uppercase">{{__('Tax')}} (5%)</td>
                           <td class="fw-500">+{{ $serviceFee?->totalFees() * 0.05 }}</td>
                        </tr>



                        {{-- total --}}
                        <tr>
                           <td colspan="3"></td>
                           <td class="fw-700 text-uppercase">{{__('Grand Total')}}</td>
                           <td class="fw-700">{{ number_format($serviceFee?->totalFees() +
                              ($serviceFee?->totalFees() * 0.05), 2) }}</td>
                        </tr>
                     </tbody>
                     {{-- endBody --}}


                  </table>
               </div>
            </div>
         </div>
         {{-- endRow --}}





         {{-- -------------------------------------- --}}
         {{-- -------------------------------------- --}}





         {{-- invoiceBottom --}}
         <div class="row align-items-center invoice--bottom mb-4">
            <div class="col-12">


               {{-- terms --}}
               <div class="invoice--terms text-start">


                  {{-- title --}}
                  <h1 class="fs-16 fw-700 mb-3 invoice--subtitle text-uppercase">{{ __('Terms & Conditions') }}
                  </h1>



                  {{-- 1: termsExists --}}
                  @if ($serviceFee?->terms?->count() > 0)



                  {{-- loop - terms --}}
                  @foreach ($serviceFee?->terms ?? [] as $term)


                  {{-- singlePoint --}}
                  <div class="invoice--terms-point ar--flex-row-reverse d-flex justify-content-start">
                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                        viewBox="0 0 16 16" class="bi bi-circle-fill me-2">
                        <circle cx="8" cy="8" r="8"></circle>
                     </svg><span>{{ $term->{__('information')} }}</span>
                  </div>


                  @endforeach
                  {{-- end loop --}}






                  {{-- ------------------------------ --}}
                  {{-- ------------------------------ --}}
                  {{-- ------------------------------ --}}
                  {{-- ------------------------------ --}}




                  {{-- 2: defaults --}}
                  @else




                  {{-- loop - defaultTerms --}}
                  @foreach ($defaultTerms ?? [] as $defaultTerm)


                  {{-- singlePoint --}}
                  <div class="invoice--terms-point ar--flex-row-reverse d-flex justify-content-start">
                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"
                        viewBox="0 0 16 16" class="bi bi-circle-fill me-2">
                        <circle cx="8" cy="8" r="8"></circle>
                     </svg><span>{{ $defaultTerm }}</span>
                  </div>


                  @endforeach
                  {{-- end loop --}}



                  @endif
                  {{-- end if --}}


               </div>
               {{-- endTerms --}}


            </div>
         </div>
         {{-- endRow --}}





      </div>





      {{-- ----------------------------- --}}
      {{-- ----------------------------- --}}
      {{-- ----------------------------- --}}



      {{-- captureButton --}}
      <button id='invoice--capture-button' class="btn btn--scheme btn--scheme-4 invoice--capture-button px-3">{{
         __('Download') }}</button>



   </div>
   {{-- endContainer --}}









   {{-- ------------------------------------------------ --}}
   {{-- ------------------------------------------------ --}}
   {{-- ------------------------------------------------ --}}







   {{-- section --}}
   @section('scripts')





   {{-- 1: html2canvas --}}
   <script src="{{url('assets/js/html2canvas.js')}}"></script>


   <script>
      $(document).ready(function() {



            // 1: captureEvent
            $('#invoice--capture-button').click(function() {


                // 1.2: vars
                var elementToSave = $("#invoice--capture")[0];


                // 1.3: startAction
                html2canvas(elementToSave).then(canvas => {
                    const a = document.createElement("a");
                    a.href = canvas.toDataURL("image/jpeg");
                    a.download = "invoice.jpeg";
                    a.append(canvas);
                    a.click();
                });

            }); // end function

        }); // end function

   </script>




   @endsection
   {{-- endSection --}}






   {{-- ------------------------------------------------ --}}
   {{-- ------------------------------------------------ --}}
   {{-- ------------------------------------------------ --}}





</section>
{{-- endSection --}}