@extends('company.layout.content')

@section('customHead')
<meta name="token" content="{{ csrf_token() }}">
@endsection

@section('customTitle')
{{ __('general.add_contract') }}
@endsection

@section('customStyle')
<link href='{{ asset("company/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
<link href="{{ asset('company/en/assets/css/apps/invoice-preview.css') }}" rel="stylesheet" type="text/css" />
<style>
    @import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@700&display=swap');
</style>


<style>
    @font-face {
        font-family: 'GE_SS';
        src: url('https://arbfonts.com//wp-content/fonts/new-arabic-fonts//GE_SS_Two_Light.otf');
        font-weight: normal;
        font-style: normal;
    }

    body * {
        font-family: "GE_SS";
        font-weight: bold;
    }

    .table-style {
        border: none !important;
    }

    tr {
        border: none !important;
    }

    .tr-style {
        background-color: #2FBCE3 !important;
    }

    .tr-style td {
        color: #FFFFFF !important;
        font-weight: bold !important;
        font-size: 14px !important;
    }

    .td-style {
        text-align: center !important;
        border: 1.5px solid black !important;
        font-weight: bold !important;
    }
</style>
@endsection


@section('customBody')
<div id="content" class="main-content">
    <div class="layout-px-spacing">
        <div class="row invoice layout-top-spacing layout-spacing">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">

                <div class="doc-container">

                    <div class="row">

                        <div class="col-xl-10">

                            <div class="invoice-container">
                                <div class="invoice-inbox">

                                    <div id="ct" class="">

                                        <div class="
                                            invoice-00001">
                                            <div class="content-section">

                                                <div class="inv--head-section inv--detail-section">

                                                    <div class="row">

                                                        <div class="col-sm-4 text-sm-left">
                                                            <h4>{{ $reservation?->company->ar_name }}</h4>
                                                            <h6>هاتف: {{ $reservation?->company->contact_number }}</h6>
                                                            <h6>الترخيص:
                                                                {{ $reservation?->company->cr_number }}
                                                            </h6>
                                                            <h6>رقم العقد: {{ $reservation?->serial_number }}#</h6>
                                                        </div>

                                                        <div class="col-sm-4 text-sm-center flex-column align-self-center">
                                                            <img class="" src="{{ $reservation?->company->logo }}" width="120">
                                                        </div>

                                                        <div class="col-sm-4 text-sm-right">
                                                            <h4 style="font-family: Asap Condensed;">{{ $reservation?->company->en_name }}</h4>
                                                            <h6 style="font-family: Asap Condensed;">Tel: {{ $reservation?->company->contact_number }}</h6>
                                                            <h6 style="font-family: Asap Condensed;">license:
                                                                {{ $reservation?->company->cr_number }}
                                                            </h6>
                                                            <h6 style="font-family: Asap Condensed;">Contract No: #{{ $reservation?->serial_number }}</h6>
                                                        </div>

                                                    </div>

                                                </div>

                                                <div class="col-sm-4 text-sm-center flex-column align-self-center m-auto" style="margin-bottom: 30px !important;">
                                                    <div class="p-2" style="border: 2px solid black;border-radius: 8px;">
                                                        <h5 style="font-family: GE_SS">عقد تأجير سيارة</h5>
                                                        <h5 style="font-family: Asap Condensed">Rent Car Agreement</h5>
                                                    </div>
                                                </div>


                                                <div dir="rtl" class="mb-4">

                                                    <div class="container">

                                                        <h5 dir="rtl" class="align-right">بيانات المستأجر :</h5>
                                                        <div class="table-responsive">
                                                            <table class="table table-style">
                                                                <tbody>
                                                                    <tr class="text-center tr-style">
                                                                        <td class="td-style">الاسم</td>
                                                                        <td class="td-style">رقم الهوية</td>
                                                                        <td class="td-style">تاريخها</td>
                                                                        <td class="td-style">مصدرها</td>
                                                                    </tr>

                                                                    <tr class="text-center">
                                                                        <td class="td-style">
                                                                            {{ $reservation?->user->name }}</td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->user->identification_number }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->user->driver_license_expiry }}
                                                                        </td>
                                                                        <td class="td-style">لا يوجد</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>


                                                </div>


                                                <div dir="rtl" class="mb-4">

                                                    <div class="container">
                                                        <h5 dir="rtl" class="align-right">بيانات الرخصة :</h5>
                                                        <div class="table-responsive">
                                                            <table class="table table-style">
                                                                <tbody>
                                                                    <tr class="text-center tr-style">
                                                                        <td class="td-style">رقم الرخصة</td>
                                                                        <td class="td-style">نوع الرخصة</td>
                                                                        <td class="td-style">تاريخها</td>
                                                                        <td class="td-style">مصدرها</td>
                                                                    </tr>

                                                                    <tr class="text-center">
                                                                        <td class="td-style">
                                                                            {{ $reservation?->user->identification_number }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->user->driver_license_type }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->user->driver_license_expiry }}
                                                                        </td>
                                                                        <td class="td-style">لا يوجد</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>


                                                <div dir="rtl" class="mb-4">

                                                    <div class="container">
                                                        <h5 dir="rtl" class="align-right">بيانات العنوان :</h5>
                                                        <div class="table-responsive">
                                                            <table class="table table-style">
                                                                <tbody>
                                                                    <tr class="text-center tr-style">
                                                                        {{-- <td class="td-style" colspan="2">عنوان
                                                                            العمل</td>
                                                                        --}} 
                                                                        <td class="td-style" colspan="2">عنوان
                                                                            المنزل</td>
                                                                        <td class="td-style">رقم الجوال</td>
                                                                        <td class="td-style">البريد</td>
                                                                    </tr>

                                                                    <tr class="text-center">
                                                                        {{-- <td class="td-style" colspan="2">
                                                                            {{ $reservation?->user->work_address ?? 'لا يوجد' }}
                                                                        </td>
                                                                        --}} <td class="td-style" colspan="2">
                                                                            {{ $reservation?->user->address ?? 'لا يوجد' }}
                                                                        <td dir="ltr" class="td-style">
                                                                            {{ $reservation?->user->mobile ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->user->email ?? 'لا يوجد' }}
                                                                        </td>
                                                                    </tr>

                                                                    {{-- <tr class="text-center tr-style">
                                                                        <td class="td-style">هاتف العمل</td>
                                                                        <td class="td-style">هاتف المنزل</td>
                                                                        <td class="td-style">رقم الجوال</td>
                                                                        <td class="td-style">البريد</td>
                                                                    </tr>

                                                                    <tr class="text-center">
                                                                        <td dir="ltr" class="td-style">
                                                                            {{ $reservation?->user->work_phone_number ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td dir="ltr" class="td-style">
                                                                            {{ $reservation?->user->home_phone_number ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td dir="ltr" class="td-style">
                                                                            {{ $reservation?->user->mobile ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->user->email ?? 'لا يوجد' }}
                                                                        </td>
                                                                    </tr>
                                                                    --}}
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>


                                                <div dir="rtl" class="mb-4">

                                                    <div class="container">
                                                        <h5 dir="rtl" class="align-right">بيانات السيارة :</h5>
                                                        <div class="table-responsive">
                                                            <table class="table table-style">
                                                                <tbody>
                                                                    <tr class="text-center tr-style">
                                                                        <td class="td-style">رقم اللوحة</td>
                                                                        <td class="td-style">الموديل</td>
                                                                        <td class="td-style">النوع</td>
                                                                        <td class="td-style">اللون</td>
                                                                    </tr>

                                                                    <tr class="text-center">
                                                                        <td class="td-style">
                                                                            {{ $reservation?->contract->carDetails->plate ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->car->model ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->car->models->brand->ar_name ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">{{ 'لا يوجد' }}
                                                                        </td>
                                                                    </tr>

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


                                                <div dir="rtl" class="mb-4">

                                                    <div class="container">
                                                        <h5 dir="rtl" class="align-right">تفاصيل أجرة السيارة :</h5>
                                                        <div class="table-responsive">
                                                            <table class="table table-style">
                                                                <tbody>
                                                                    <tr class="text-center tr-style">
                                                                        <td class="td-style">مدة الإيجار</td>
                                                                        <td class="td-style">قيمة الأجرة</td>
                                                                        <td class="td-style">سعر الكيلو الإضافي</td>
                                                                        <td class="td-style">سعر الساعة الإضافي
                                                                        </td>
                                                                    </tr>

                                                                    <tr class="text-center">
                                                                        <td class="td-style">
                                                                            {{ $reservation?->days_number ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->total_price_with_tax ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->car->extra_miles_price ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->car->extra_hour_price ?? 'لا يوجد' }}
                                                                        </td>
                                                                    </tr>

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

                                                <div dir="rtl" class="mb-4">

                                                    <div class="container">
                                                        <h5 dir="rtl" class="align-right">المالية :</h5>
                                                        <div class="table-responsive">
                                                            <table class="table table-style">
                                                                <tbody>
                                                                    <tr class="text-center tr-style">
                                                                        <td class="td-style">إجمالي سعر الأيام</td>
                                                                        <td class="td-style">اجمالي الخدمات
                                                                            المدفوعة</td>
                                                                        <td class="td-style">اجمالي الضرائب</td>
                                                                        <td class="td-style">اجمالي التأمين</td>
                                                                        <td class="td-style" colspan="2">الخصومات</td>
                                                                    </tr>

                                                                    <tr class="text-center">
                                                                        <td class="td-style">
                                                                            {{ $reservation?->duration_price ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->total_services_price ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->vat_amount + $reservation?->vot_amount ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->insurance_total_price ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style" colspan="2">
                                                                            {{ $reservation?->discount_amount ?? 'لا يوجد' }}
                                                                        </td>
                                                                    </tr>

                                                                    <tr class="text-center tr-style">
                                                                        <td class="td-style">الإجمالي النهائي شامل الضريبة</td>
                                                                        <td class="td-style">المدفوع</td>
                                                                        <td class="td-style">الدفعة الأولى</td>
                                                                        {{-- <td class="td-style">مبلغ التأمين</td> --}}
                                                                        <td class="td-style" colspan="2">المتبقي</td>
                                                                    </tr>

                                                                    <tr class="text-center">
                                                                        <td class="td-style">
                                                                            {{ $reservation?->total_price_with_tax ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->paid_amount ?? 'لا يوجد' }}
                                                                        </td>
                                                                        <td class="td-style">
                                                                            {{ $reservation?->down_payment ?? 'لا يوجد' }}
                                                                        </td>
                                                                        {{-- <td class="td-style">
                                                                            {{ $reservation?->insurance_amount ?? 'لا يوجد' }}
                                                                        </td> --}}
                                                                        <td class="td-style" colspan="2">
                                                                            {{ $reservation?->remaining_amount ?? 'لا يوجد' }}
                                                                        </td>
                                                                    </tr>

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

                                                <div dir="rtl" class="mb-3">
                                                    <div class="container mb-5">
                                                        <h5 dir="rtl" class="align-right">الاعتمادات :</h5>
                                                    </div>
                                                    <div class="row">
                                                        @if ($reservation?->client_signature == null)
                                                        <div class="col-sm-6 text-center">
                                                            <h6>توقيع المستأجر
                                                                <a href="#" class="helpLabel" header='
                                                                        توقيع المستأجر : 
                                                                        ' body='
                                                                        
                                                                        <h4><small class="text-danger h6">الشرح العام : </small></h4>
                                                                        
                                                                        - يجب إتمام حقل توقيع المستأجر (العميل) وفي حال إمكانية تجاوز التوقيع فإن المسؤولية تقع على الموظف ، وفي حال وجود مشكلة تقنية في ذلك فيجب فتح تذكرة دعم فني للفريق التقني لحل المشكلة.
                                        
                                                                        <hr style="border-top: 1px solid #2e9bd8;">
                                                                        
                                                                        شكراُ لك ...
                                                                        '>
                                                                    <i class="fas fa-info-circle text-muted"></i>
                                                                </a>
                                                            </h6>
                                                            <div class="col-md-10 m-auto">
                                                                <div id="client_signature" style="
                                                                                                height: auto;
                                                                                                border: 3px solid;
                                                                                                color: black;
                                                                                                margin: 0 auto;
                                                                                                margin-top: 30px;
                                                                                                position:relative;
                                                                                                ">
                                                                    <hr style="position:absolute; top:40%; width:100%;border-top: 2px solid grey;">
                                                                </div>
                                                            </div>
                                                            <button class="btn btn-warning mt-2" id="client_signature_clear">مسح</button>
                                                        </div>
                                                        @else
                                                        <div class="col-sm-6 text-center">
                                                            <h6>توقيع المستأجر</h6>
                                                            <img src="{{ $reservation?->client_signature }}">
                                                        </div>
                                                        @endif

                                                        <div class="col-sm-6 text-center">
                                                            @if ($reservation?->company_signature == null)
                                                            <h6>توقيع المؤجر
                                                                <a href="#" class="helpLabel" header='
                                                                    توقيع المؤجر : 
                                                                    ' body='
                                                                    
                                                                    <h4><small class="text-danger h6">الشرح العام : </small></h4>
                                                                    
                                                                    - يجب إتمام حقل توقيع المؤجر (الشركة أو الموظف الذي ينوب عنها المخول له بالتوقيع هنا) وفي حال إمكانية تجاوز التوقيع فإن المسؤولية تقع على الموظف ، وفي حال وجود مشكلة تقنية في ذلك فيجب فتح تذكرة دعم فني للفريق التقني لحل المشكلة.
                                    
                                                                    <hr style="border-top: 1px solid #2e9bd8;">
                                                                    
                                                                    شكراُ لك ...
                                                                    '>
                                                                    <i class="fas fa-info-circle text-muted"></i>
                                                                </a>

                                                            </h6>
                                                            <div class="col-md-10 m-auto">
                                                                <div id="company_signature" style="
                                                                                                height: auto;
                                                                                                border: 3px solid;
                                                                                                color: black;
                                                                                                margin: 0 auto;
                                                                                                margin-top: 30px;
                                                                                                position:relative;
                                                                                                ">
                                                                    <hr style="position:absolute; top:40%; width:100%;border-top: 2px solid grey;">
                                                                </div>
                                                            </div>
                                                            <button class="btn btn-warning mt-2" id="company_signature_clear">مسح</button>
                                                        </div>
                                                        @else
                                                        <div class="col-sm-6 text-center">
                                                            <h6>توقيع المؤجر</h6>
                                                            <img src="{{ $reservation?->company_signature }}">
                                                        </div>
                                                        @endif

                                                    </div>
                                                </div>

                                                @if ($reservation?->company_signature == null && $reservation?->company_signature == null)
                                                <div class="col-sm-12 mb-4 mt-5 text-center">
                                                    <button id="save_signature" style="background-color: #FF5757;color:#FFFFFF;font-weight:bold; border-radius:20px;" class="btn col-4">{{ __('general.submit') }}</button>
                                                </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

@endsection

@section('customScript')

<script>
    $("#contracts-menu-box").attr("data-active", "true");
</script>

@if ($reservation?->company_signature != null && $reservation?->company_signature != null)
<script>
    print();
</script>
@endif

<script src="{{ asset('jSignature.min.js') }}"></script>

<script>
    $(document).ready(function() {
            $("#client_signature").jSignature()
        });

        $("#client_signature_clear").click(function() {
            var canvas = $('#client_signature .jSignature')[0];
            canvas.width = canvas.width;
        });

        $(document).ready(function() {
            $("#company_signature").jSignature()
        });

        $("#company_signature_clear").click(function() {
            var canvas = $('#company_signature .jSignature')[0];
            canvas.width = canvas.width;
        });
</script>

<script>
    function empty_get_client_signature() {
            var empty_get_client_signature = $('#client_signature .jSignature')[0];
            var empty_client_signature = empty_get_client_signature.toDataURL();
            return empty_client_signature;
        }

        function empty_get_company_signature() {
            var empty_get_company_signature = $('#company_signature .jSignature')[0];
            var empty_company_signature = empty_get_company_signature.toDataURL();
            return empty_company_signature;
        }

        $(document).ready(function() {
            var empty_get_client_signature = $('#client_signature .jSignature')[0];
            var empty_get_company_signature = $('#company_signature .jSignature')[0];
            var empty_client_signature = empty_get_client_signature.toDataURL();
            var empty_company_signature = empty_get_company_signature.toDataURL();
            $('#save_signature').on('click', function() {
                var get_client_signature = $('#client_signature .jSignature')[0];
                var get_company_signature = $('#company_signature .jSignature')[0];
                var client_signature = get_client_signature.toDataURL();
                var company_signature = get_company_signature.toDataURL();
                if (client_signature == empty_client_signature || company_signature ==
                    empty_company_signature) {
                    swal({
                        title: "{{ __('company.Contracts.messages.you must complete the necessary signatures') }}",
                        type: 'warning',
                        confirmButtonText: '{{ __('general.ok') }}',
                    });
                } else {

                    $.ajax({
                        url: "{{ route('signature_pad.store') }}",
                        type: 'GET',
                        data: {
                            client_signature: client_signature,
                            company_signature: company_signature,
                            contract_id: "{{ $reservation?->contract->id }}"
                        },
                        success: function(result) {
                            swal({
                                title: result,
                                type: 'success',
                                confirmButtonText: '{{ __('general.ok') }}',
                            });
                            setTimeout(() => {
                                window.location =
                                    "{{ route('company.check.create', ['contract' => $reservation?->contract->id]) }}"
                            }, 1500);

                        },
                    });
                }
            });
        });
</script>

@endsection