@extends('admin.layouts.admin')

    @section('content')
        <div class="main-side">
            <style>
                .contract-container {
                    position: relative;
                    max-width: 800px;
                    padding: 32px;
                    margin: 0px auto;
                    color: #222;
                    background-color: #fff;

                    border: 1px solid #222;
                    border-radius: 8px;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
                }

                .logo {
                    text-align: right;
                }

                .logo img {
                    width: 120px;
                }

                .title {
                    text-align: center;
                    font-weight: bold;
                    font-size: 18px;
                    margin-bottom: 20px;
                }

                p {
                    margin: 10px 0;
                }

                .bold {
                    font-weight: bold;
                }

                .red {
                    color: red;
                }

                .underline {
                    text-decoration: underline;
                }


                ul {
                    padding-right: 20px;
                }

                .signature-area div {
                    font-weight: bold;
                }

                .footer {
                    font-size: 14px;
                    text-align: left;
                    color: #000;
                    border-inline-end: 3px solid #00113d;
                    color: #00113d;
                    padding-inline-end: 10px;
                }

                .footer p {
                    margin: 4px 0;
                }

                .footer a {
                    color: #000;
                    text-decoration: none;
                }

                .footer span {
                    vertical-align: middle;
                    width: 18px;
                    height: 18px;
                    margin-left: 5px;
                    color: #fff;
                    background-color: #00113d;
                    border-radius: 50%;
                    padding: 3px;
                    text-align: center;
                    display: inline-block;
                }

                @media print {
                    .main-side {
                        width: 100% !important;
                        padding: 0px !important;
                    }

                    * {
                        font-size: 12.5px !important;
                    }

                    .contract-container {
                        max-width: 100%;
                        padding: 15px;
                    }

                    .logo img {
                        width: 65px;
                    }

                    .signature-area {
                        .col-md-6 {
                            width: 50% !important;
                        }
                    }
                }
            </style>

            <div class="contract-container" id="html2pdf">
                <div class="logo">
                    <img src="{{ display_file(setting('logo')) }}" alt="Falak Logo" />
                </div>
                @php
                    use Carbon\Carbon;
                    use Alkoumi\LaravelHijriDate\Hijri;

                    $contract->load('client', 'bankAccount', 'deals');
                    $contractDate = Carbon::parse($contract->contract_date);
                    $contractDay = $contractDate->translatedFormat('l');

                    $hijriDateCustom = Hijri::Date('Y/m/d', $contractDate);
                @endphp

                <p>في يوم {{ $contractDay }} {{ $hijriDateCustom }} هـ الموافق
                    {{ $contractDate->translatedFormat('Y/m/d') }} تم الاتفاق بين:</p>

                <p><span class="bold">الطرف الأول:</span> {{ setting('website_name') }}</p>
                <p><span class="bold">السجل التجاري :</span> {{ setting('commercial_register') }}</p>

                <p><span class="bold">الطرف الثاني:</span> <span class="underline">{{ $contract->client?->name }} </span>،
                    هوية وطنية رقم: <span class="underline">{{ $contract->client_national_id }}</span><br>
                    جوال رقم: <span class="underline">{{ $contract->client?->phone }}</span></p>

                @if ($contract->clause_1)
                    <p>{!! $contract->clause_1 !!}</p>
                @endif

                {{-- <p class="bold">المادة رقم (2): نطاق الخدمات</p> --}}
                @if ($contract->clause_2)
                    <p>{!! $contract->clause_2 !!}</p>
                @endif


                {{-- <p class="bold">المادة رقم (3): مدة العقد والإلغاء</p> --}}
                @if ($contract->clause_3)
                    <p>{!! $contract->clause_3 !!}</p>
                @endif


                {{-- <p class="bold">المادة رقم (4): الأسعار والدفع</p> --}}
                @if ($contract->clause_4)
                    <p>{!! $contract->clause_4 !!}</p>
                @endif

                @if ($contract->clause_5)
                    <p>{!! $contract->clause_5 !!}</p>
                @endif

                @if ($contract->clause_6)
                    <p>{!! $contract->clause_6 !!}</p>
                @endif

                @if ($contract->clause_7)
                    <p>{!! $contract->clause_7 !!}</p>
                @endif

                @if ($contract->clauses()->count() > 0)
                    @foreach ($contract->clauses as $clause)
                        <p>{!! $clause->content !!}</p>
                    @endforeach
                @endif

                <div class="row signature-area mb-2">
                    <div class="col-md-6">
                        الطرف الأول<br>
                        الاسم: {{ setting('website_name') }}<br>
                        الختم:
                    </div>
                    <div class="col-md-6">
                        الطرف الثاني<br>
                        الاسم: {{ $contract->client?->name }}<br>
                        التوقيع أو الختم:
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between gap-2">
                    <img src="{{ setting('signature_stamp') ? display_file(setting('signature_stamp')) : asset('admin-asset/img/institution-signature.png') }}"
                        alt="" width="120" style="transform: rotate(10deg)">
                    <div class="footer">
                        <p>
                            @falakagency.sa
                            <span>
                                <i class="fab fa-instagram mb-2"></i>
                            </span>
                            <span>
                                <i class="fab fa-twitter mb-2"></i>
                            </span>
                        </p>
                        <!-- <p>
                                            {{ setting('phone') }}
                                        </p> -->
                    </div>
                </div>
            </div>
            <div class="btn-holder d-flex align-items-center justify-content-center gap-1 mb-4 pb-2 mt-3 not-print">
                <button class="main-btn bg-warning" onclick="window.print()"><i class="fas fa-print fs-13px"></i>
                    طباعه</button>
                {{-- <button class="main-btn bg-danger" onclick="generateHTML2PDF()"><i class="fas fa-file-pdf fs-13px"></i>
                    تصدير
                    PDF</button> --}}
                <a href="{{ route('admin.contracts.pdf', $contract->id) }}" class="main-btn bg-danger"><i class="fas fa-file-pdf fs-13px"></i>
                    تصدير
                    PDF</a>
                <a href="{{ route('admin.contracts.index') }}" class="main-btn bg-secondary">رجوع <i
                        class="fas fa-angle-left fs-13px"></i></a>
            </div>
        </div>

        <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
        <script>
            function generateHTML2PDF() {
                var element = document.getElementById('html2pdf');
                element.querySelectorAll('*').forEach(el => {
                    el.style.fontSize = "12px";
                });
                html2canvas(element, {
                    backgroundColor: '#ffffff',
                    scale: 2,
                    useCORS: true
                }).then(function(canvas) {
                    var imgData = canvas.toDataURL('image/jpeg', 1.0);
                    var pdf = new jspdf.jsPDF('p', 'mm', 'a4');
                    var imgWidth = 206;
                    var pageHeight = 289;
                    var imgHeight = canvas.height * imgWidth / canvas.width;
                    var heightLeft = imgHeight;

                    var margin = 2;
                    var position = margin;

                    pdf.addImage(imgData, 'JPEG', margin, position, imgWidth, imgHeight);
                    heightLeft -= pageHeight;

                    while (heightLeft > 0) {
                        position = heightLeft - imgHeight + margin;
                        pdf.addPage();
                        pdf.addImage(imgData, 'JPEG', margin, position, imgWidth, imgHeight);
                        heightLeft -= pageHeight;
                    }

                    pdf.save("contract.pdf");
                });
            }
        </script>
    @endsection