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




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

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

    @endsection
    {{-- endHead --}}






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





    <div class="container position-relative">


        {{-- invoice --}}
        <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-', '', $serviceSubInvoice->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($serviceSubInvoice->invoiceDate)) }}</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>{{ $serviceSubInvoice?->client?->{__('name')} }}</p>
                        <p>{{ $serviceSubInvoice?->client?->{__('address')} ?? '—' }}</p>
                        <p>{{ $profile->{__('country')} }}</p>
                        <p>{{ $serviceSubInvoice?->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>


                                    {{-- fileNumber --}}
                                    <td>{{ $serviceSubInvoice->serviceFee->fileNumber ?? '—' }}</td>


                                    {{-- invoiceNumber --}}
                                    <td>{{ $serviceSubInvoice?->fullInvoiceNumber() }}</td>



                                    {{-- information --}}
                                    <td>{{ $serviceSubInvoice->{__('information')} }}</td>
                                    <td>{{ date('d / m / Y', strtotime($serviceSubInvoice->invoiceDate)) }}</td>



                                    {{-- invoiceAmount --}}
                                    <td>{{ number_format($serviceSubInvoice->invoiceAmount ?? 0, 2) }}</td>


                                </tr>
                                {{-- endTR --}}




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




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





                                {{-- tax --}}
                                <tr>
                                    <td colspan="3"></td>
                                    <td class="fw-500 text-uppercase">{{__('Tax')}} (5%)</td>
                                    <td class="fw-500">+{{ $serviceSubInvoice->invoiceAmount * 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($serviceSubInvoice->invoiceAmount +
                                        ($serviceSubInvoice->invoiceAmount * 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 ($serviceSubInvoice?->terms?->count() > 0)




                        {{-- loop - terms --}}
                        @foreach ($serviceSubInvoice?->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 --}}