<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
    <meta charset="UTF-8">
    <style>
        @page {
            margin: 12px 18px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: DejaVu Sans, Arial, sans-serif;
            font-size: 10px;
            direction: rtl;
            color: #1c1c1c;
            line-height: 1.4;
        }

        .page-break {
            page-break-after: always;
        }

        /* ===== Layout table (invisible) ===== */
        .lt {
            width: 100%;
            border-collapse: collapse;
        }

        .lt td {
            border: none;
            padding: 0;
            vertical-align: top;
        }

        /* ===== Blue badge (section header) ===== */
        .badge {
            background-color: #0d3a66;
            color: #ffffff;
            padding: 4px 12px;
            font-weight: bold;
            font-size: 10px;
            display: inline-block;
            border-radius: 4px;
            margin: 6px 0 4px;
        }

        /* ===== Bordered box ===== */
        .bordered-box {
            border: 1.5px solid #b9c0c7;
            border-radius: 10px;
            padding: 8px 10px;
            background-color: #ffffff;
            margin-bottom: 2px;
        }

        /* ===== Form table inside bordered boxes ===== */
        .form-tbl {
            width: 100%;
            border-collapse: collapse;
        }

        .form-tbl td {
            border: none;
            padding: 3px 4px;
            vertical-align: middle;
            font-size: 10px;
        }

        .form-tbl .lbl {
            font-weight: bold;
            color: #111111;
            white-space: nowrap;
            width: 1%;
            padding-left: 6px;
        }

        .form-tbl .val {
            color: #111111;
            border-bottom: 1px dotted #9aa3ad;
            padding-bottom: 2px;
        }

        /* ===== Circle radio/check indicators ===== */
        .ci {
            display: inline-block;
            width: 10px;
            height: 10px;
            border: 1.5px solid #0d3a66;
            border-radius: 50%;
            text-align: center;
            line-height: 8px;
            font-size: 7px;
            vertical-align: middle;
            margin-left: 3px;
        }

        .ci.on {
            background-color: #0d3a66;
            border-color: #0d3a66;
            color: #ffffff;
        }

        /* Square checkbox indicators */
        .sq {
            display: inline-block;
            width: 10px;
            height: 10px;
            border: 1.5px solid #0d3a66;
            text-align: center;
            line-height: 8px;
            font-size: 7px;
            vertical-align: middle;
            margin-left: 3px;
        }

        .sq.on {
            background-color: #0d3a66;
            border-color: #0d3a66;
            color: #ffffff;
        }

        /* ===== Subscription type cards ===== */
        .sub-card {
            border: 1.5px solid #b9c0c7;
            border-radius: 10px;
            padding: 6px 8px;
            text-align: center;
            vertical-align: top;
            background-color: #ffffff;
        }

        .sub-card.active {
            border-color: #F57C00;
            background-color: #FFF8E1;
        }

        .sub-card-title {
            font-weight: bold;
            color: #111111;
            font-size: 10px;
            margin-bottom: 3px;
        }

        .sub-card-desc {
            font-size: 8px;
            color: #555555;
            line-height: 1.4;
        }

        /* ===== Dependents table ===== */
        .dep-tbl {
            width: 100%;
            border-collapse: collapse;
        }

        .dep-tbl th {
            font-weight: bold;
            font-size: 9px;
            color: #111111;
            text-align: center;
            padding: 4px 3px;
            border-bottom: 1px solid #ccc;
        }

        .dep-tbl td {
            text-align: center;
            font-size: 9px;
            padding: 3px;
            border-bottom: 1px dotted #9aa3ad;
            vertical-align: middle;
        }

        .dep-tbl .dep-no {
            color: #8b95a1;
            font-weight: bold;
            width: 20px;
        }

        /* ===== Declaration ===== */
        .declaration-text {
            font-size: 9px;
            line-height: 1.8;
            text-align: right;
            color: #111111;
        }

        /* ===== Board section ===== */
        .board-box {
            border: 1.5px solid #b9c0c7;
            border-radius: 10px;
            padding: 8px 10px;
            background-color: #ffffff;
        }

        /* ===== Dotted line ===== */
        .dot-line {
            display: inline-block;
            min-width: 100px;
            border-bottom: 1px dotted #9aa3ad;
        }

        /* ===== Page 2 styles ===== */
        .section-title-p2 {
            background-color: #0d3a66;
            color: #ffffff;
            padding: 4px 12px;
            font-weight: bold;
            font-size: 10px;
            display: inline-block;
            border-radius: 4px;
            margin: 6px 0 4px;
        }

        .policy-box {
            border: 1.5px solid #b9c0c7;
            border-radius: 10px;
            padding: 8px 10px;
            background-color: #ffffff;
            font-size: 9px;
            line-height: 1.8;
            text-align: right;
            color: #111111;
        }

        .policy-intro {
            font-size: 9px;
            font-weight: bold;
            color: #111111;
            padding: 2px 0;
        }

        .lets-play {
            text-align: center;
            margin-top: 30px;
            font-size: 34px;
            font-weight: bold;
        }

        /* ===== Stamp circle ===== */
        .stamp-circle {
            width: 48px;
            height: 48px;
            border: 2px solid #c7ced6;
            border-radius: 50%;
            text-align: center;
            line-height: 44px;
            color: #9aa3ad;
            font-weight: bold;
            font-size: 10px;
        }
    </style>
</head>
<body>

    {{-- ===================== PAGE 1 ===================== --}}
    <div class="page-break">

        {{-- ===== HEADER ===== --}}
        <table class="lt" style="margin-bottom: 6px;">
            <tr>
                <td style="text-align: right; width: 60%;">
                    <div style="margin-bottom: 4px;">
                        <span style="display: inline-block; width: 14px; height: 16px; background-color: #f36a21; margin: 0 1px;"></span>
                        <span style="display: inline-block; width: 14px; height: 16px; background-color: #f36a21; margin: 0 1px;"></span>
                        <span style="display: inline-block; width: 14px; height: 16px; background-color: #f36a21; margin: 0 1px;"></span>
                        <span style="display: inline-block; width: 14px; height: 16px; background-color: #f36a21; margin: 0 1px;"></span>
                    </div>
                    <div style="font-size: 20px; font-weight: bold; color: #000000; margin-bottom: 4px;">استمارة التسجيل</div>
                    <div style="font-size: 10px;">
                        <span style="font-weight: bold; color: #000000;">الرقم التسلسلي للطلب</span>
                        &nbsp;
                        <span style="font-weight: bold; color: #0d3a66; letter-spacing: 1px;">S/N:{{ $contract->serial_number }}</span>
                    </div>
                </td>
                <td style="text-align: left; width: 40%; vertical-align: top;">
                    @if(file_exists(public_path('img/logo.png')))
                        <img src="{{ public_path('img/logo.png') }}" style="height: 75px;" alt="Logo">
                    @endif
                </td>
            </tr>
        </table>

        {{-- ===== REQUEST TYPE ===== --}}
        <div class="badge">نوع الطلب</div>
        <div class="bordered-box" style="padding: 5px 10px;">
            <table class="lt">
                <tr>
                    <td style="text-align: center; width: 50%; font-size: 10px; font-weight: bold;">
                        <span class="ci {{ $contract->request_type == 1 ? 'on' : '' }}">{{ $contract->request_type == 1 ? '●' : '' }}</span>
                        الاشتراك الجديد
                    </td>
                    <td style="text-align: center; width: 50%; font-size: 10px; font-weight: bold;">
                        <span class="ci {{ $contract->request_type == 2 ? 'on' : '' }}">{{ $contract->request_type == 2 ? '●' : '' }}</span>
                        تجديد الاشتراك
                    </td>
                </tr>
            </table>
        </div>

        {{-- ===== PERSONAL DATA ===== --}}
        <div class="badge">البيانات الشخصية</div>
        <div class="bordered-box">
            <table class="form-tbl">
                {{-- Row 1: Name - Nationality - DOB - Gender --}}
                <tr>
                    <td class="lbl">الاسم :</td>
                    <td class="val">{{ $contract->name }}</td>
                    <td class="lbl">الجنسية :</td>
                    <td class="val">{{ $contract->nationality }}</td>
                    <td class="lbl">تاريخ الميلاد :</td>
                    <td class="val">{{ $contract->date_of_birth?->format('Y-m-d') }}</td>
                    <td class="lbl">الجنس :</td>
                    <td style="white-space: nowrap;">
                        <span class="ci {{ $contract->gender == 1 ? 'on' : '' }}">{{ $contract->gender == 1 ? '●' : '' }}</span> ذكر
                        &nbsp;
                        <span class="ci {{ $contract->gender == 2 ? 'on' : '' }}">{{ $contract->gender == 2 ? '●' : '' }}</span> أنثى
                    </td>
                </tr>
                {{-- Row 2: Phone - Email - Job --}}
                <tr>
                    <td class="lbl">رقم الهاتف :</td>
                    <td class="val">{{ $contract->phone }}</td>
                    <td class="lbl">البريد الالكتروني :</td>
                    <td class="val" colspan="2">{{ $contract->email }}</td>
                    <td class="lbl">الوظيفة :</td>
                    <td class="val" colspan="2">{{ $contract->job }}</td>
                </tr>
                {{-- Row 3: Address - Area - Gov --}}
                <tr>
                    <td class="lbl">العنوان :</td>
                    <td class="val" colspan="3">{{ $contract->apartment }}</td>
                    <td class="lbl">المنطقة :</td>
                    <td class="val">{{ $contract->area }}</td>
                    <td class="lbl">المحافظة :</td>
                    <td class="val">{{ $contract->governorate }}</td>
                </tr>
            </table>
        </div>

        {{-- ===== ATTACHMENTS ===== --}}
        <table class="lt" style="margin-top: 6px;">
            <tr>
                <td style="width: 1%; vertical-align: middle; padding-left: 14px;">
                    <div class="badge" style="margin: 0;">المرفقات المطلوبة</div>
                </td>
                <td style="vertical-align: middle; padding-top: 2px;">
                    @foreach(\App\Enums\RequiredAttachmentEnum::cases() as $att)
                        <span style="margin-left: 16px; font-weight: bold; font-size: 10px;">
                            <span class="sq {{ in_array($att->value, $contract->attachments ?? []) ? 'on' : '' }}">{{ in_array($att->value, $contract->attachments ?? []) ? '✓' : '' }}</span>
                            {{ __('dashboard.' . strtolower($att->name), [], 'ar') }}
                        </span>
                    @endforeach
                </td>
            </tr>
        </table>

        {{-- ===== SUBSCRIPTION TYPE ===== --}}
        <div class="badge">نوع الاشتراك</div>
        <table class="lt" style="margin-top: 2px;">
            <tr>
                @foreach($subscriptionTypes as $type)
                    <td style="padding: 2px {{ $loop->last ? '0' : '4px' }} 2px {{ $loop->first ? '0' : '4px' }}; width: {{ round(100 / max($subscriptionTypes->count(), 1)) }}%;">
                        <div class="sub-card {{ $contract->subscription_type_id == $type->id ? 'active' : '' }}">
                            <div class="sub-card-title">
                                <span class="ci {{ $contract->subscription_type_id == $type->id ? 'on' : '' }}">{{ $contract->subscription_type_id == $type->id ? '●' : '' }}</span>
                                {{ $type->getTranslation('name', 'ar') }}
                            </div>
                            @if($type->getTranslation('description', 'ar'))
                                <div class="sub-card-desc">{{ $type->getTranslation('description', 'ar') }}</div>
                            @endif
                        </div>
                    </td>
                @endforeach
            </tr>
        </table>

        {{-- ===== DURATION ===== --}}
        <table class="lt" style="margin-top: 6px;">
            <tr>
                <td style="width: 1%; vertical-align: middle; padding-left: 14px;">
                    <div class="badge" style="margin: 0;">مدة الاشتراك</div>
                </td>
                <td style="vertical-align: middle;">
                    @foreach($subscriptionDurations as $duration)
                        <span style="margin-left: 14px; font-weight: bold; font-size: 10px;">
                            <span class="ci {{ $contract->subscription_duration_id == $duration->id ? 'on' : '' }}">{{ $contract->subscription_duration_id == $duration->id ? '●' : '' }}</span>
                            {{ $duration->getTranslation('name', 'ar') }}
                        </span>
                    @endforeach
                </td>
            </tr>
        </table>

        {{-- ===== DEPENDENTS ===== --}}
        <div class="badge">تابع / منتسب</div>
        <div class="bordered-box" style="padding: 4px 8px;">
            <table class="dep-tbl">
                <thead>
                    <tr>
                        <th style="width: 20px;">م</th>
                        <th>الاسم</th>
                        <th>رقم الهاتف</th>
                        <th>صلة القرابة</th>
                        <th>الجنس</th>
                        <th>تاريخ الميلاد</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($contract->dependents as $i => $dep)
                        <tr>
                            <td class="dep-no">{{ $i + 1 }}.</td>
                            <td>{{ $dep->name }}</td>
                            <td>{{ $dep->phone }}</td>
                            <td>{{ $dep->relationship }}</td>
                            <td style="white-space: nowrap;">
                                <span class="ci {{ $dep->gender == 1 ? 'on' : '' }}"></span> ذكر
                                &nbsp;
                                <span class="ci {{ $dep->gender == 2 ? 'on' : '' }}"></span> أنثى
                            </td>
                            <td>{{ $dep->date_of_birth?->format('Y-m-d') }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- ===== DECLARATION ===== --}}
        <div class="badge">اقرار وتعهد</div>
        <div class="bordered-box">
            <div class="declaration-text">
                @if(isset($settings['declaration']))
                    {!! $settings['declaration'] !!}
                @else
                    أقر انا مقدم الطلب برغبتي في الاشتراك في امونت سبورتس كامبس بالمنتزة - الاسكندرية
                    أن جميع البيانات والمعلومات المذكورة في الاستمارة والمرفقات بما صحيحة. كما أتعهد بإحترام النظام
                    واللوائح المعمول بها في هذا الكيان الرياضي الاجتماعي. ألتزم بكافة القرارات الخاصة بإدارة
                    وتوجيهات المدير المسؤول والأمن. كما أتعهد بالمحافظة على المرافق والخدمات الموجودة بالمكان،
                    والوفاء بالالتزامات المالية المقررة والمتفق عليها في مواعيدها المحددة.
                @endif
            </div>

            <table class="lt" style="margin-top: 6px;">
                <tr>
                    <td style="width: 50%;">
                        <span class="badge" style="padding: 3px 8px; font-size: 9px; margin: 0;">توقيع مقدم الطلب</span>
                        &nbsp; <span class="dot-line" style="min-width: 120px;"></span>
                    </td>
                    <td style="width: 50%;">
                        <span class="badge" style="padding: 3px 8px; font-size: 9px; margin: 0;">تاريخ تقديم الطلب</span>
                        &nbsp; {{ $contract->submission_date?->format('Y-m-d') ?? now()->format('Y-m-d') }}
                    </td>
                </tr>
            </table>

            <hr style="border: none; border-top: 1px solid #c7ced6; margin-top: 6px;">
        </div>

        {{-- ===== BOARD SECTION ===== --}}
        <div class="badge">لاستخدام مجلس الادارة</div>
        <div class="board-box">
            <table class="lt">
                <tr>
                    {{-- Right column: decisions --}}
                    <td style="width: 35%; vertical-align: top; padding-left: 10px;">
                        <div style="margin-bottom: 6px;">
                            <span class="ci"></span>
                            <strong style="font-size: 10px;">قبول الطلب</strong>
                        </div>
                        <div style="margin-bottom: 6px;">
                            <span class="ci"></span>
                            <strong style="font-size: 10px;">رفض الطلب</strong>
                        </div>
                        <div>
                            <span class="ci"></span>
                            <strong style="font-size: 10px;">تأجيل البت في الطلب</strong>
                        </div>
                    </td>
                    {{-- Left column: details --}}
                    <td style="vertical-align: top;">
                        <div style="font-size: 10px; font-weight: bold; margin-bottom: 4px;">
                            واعتماده في اجتماع مجلس الادارة رقم <span class="dot-line" style="min-width: 60px;"></span>
                            &nbsp; والمعتمد بتاريخ <span class="dot-line" style="min-width: 80px;"></span>
                        </div>
                        <div style="border: 1px solid #b9c0c7; padding: 4px 6px; font-size: 8px; color: #888888; min-height: 28px;">
                            سبب الرفض أو التأجيل:
                        </div>
                    </td>
                </tr>
            </table>

            <hr style="border: none; border-top: 1px solid #c7ced6; margin: 6px 0;">

            <table class="lt">
                <tr>
                    <td style="width: 40%; font-size: 10px; font-weight: bold;">
                        رئيس مجلس الادارة : <span class="dot-line"></span>
                    </td>
                    <td style="width: 35%; font-size: 10px; font-weight: bold;">
                        أمين السر العام : <span class="dot-line"></span>
                    </td>
                    <td style="width: 25%; text-align: center;">
                        <div class="stamp-circle">ختم</div>
                    </td>
                </tr>
                <tr>
                    <td style="font-size: 10px; font-weight: bold; padding-top: 4px;">
                        التوقيع : <span class="dot-line"></span>
                    </td>
                    <td style="font-size: 10px; font-weight: bold; padding-top: 4px;">
                        التوقيع : <span class="dot-line"></span>
                    </td>
                    <td></td>
                </tr>
            </table>
        </div>

    </div>

    {{-- ===================== PAGE 2: Policies ===================== --}}
    <div class="page">

        {{-- Logo --}}
        <div style="text-align: center; margin-bottom: 10px;">
            @if(file_exists(public_path('img/logo.png')))
                <img src="{{ public_path('img/logo.png') }}" style="height: 65px;" alt="Logo">
            @endif
        </div>

        {{-- General Policies --}}
        @if(isset($settings['general_policies']))
            <div class="section-title-p2">السياسات العامة</div>
            <div class="policy-box">{!! $settings['general_policies'] !!}</div>
        @endif

        {{-- Duties --}}
        @if(isset($settings['duties']))
            <div class="section-title-p2" style="margin-top: 8px;">الواجبات</div>
            <div class="policy-intro">أتعهد أنا / {{ $contract->name }}</div>
            <div class="policy-box">{!! $settings['duties'] !!}</div>
        @endif

        {{-- Rights --}}
        @if(isset($settings['rights']))
            <div class="section-title-p2" style="margin-top: 8px;">الحقوق</div>
            <div class="policy-intro">تلتزم إدارة مونت سبورتس كامب بما يلي:</div>
            <div class="policy-box">{!! $settings['rights'] !!}</div>
        @endif

        {{-- Signature --}}
        <div style="margin-top: 16px;">
            <span class="badge" style="padding: 3px 8px; font-size: 9px;">توقيع مقدم الطلب</span>
            &nbsp;&nbsp; <span class="dot-line" style="min-width: 200px;"></span>
        </div>

        {{-- LET'S PLAY --}}
        <div class="lets-play">
            <span style="color: #0d3a66;">LET'S</span><br>
            <span style="color: #F57C00;">PLAY</span>
        </div>

    </div>

</body>
</html>
