<div
    style="font-family: 'Noto Sans Arabic', sans-serif; direction: rtl; width: 100%; max-width: 280mm; height: 190mm; margin: 0 auto; background: white; padding: 0.75rem;">
    <div style="border: 3px solid #3b82f6; padding: 0.75rem; height: 100%; display: flex; flex-direction: column;">

        <!-- Header Section -->
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
            <img src="{{ Vite::asset('resources/images/sekaya-association-admin-brand-logo.svg') }}" alt="Sekaya Logo"
                style="height: 2.5rem;">

            <!-- License Title -->
            <div
                style="text-align: center; background: #eff6ff; padding: 0.6rem 1.5rem; border-radius: 0.4rem; border: 2px solid #3b82f6; flex: 1; margin: 0 1.5rem;">
                <h2 style="font-size: 1.2rem; font-weight: 700; color: #1e40af; margin: 0;">
                    {{ $license_title_ar ?? 'رخصة بئر أنبوبي' }}
                </h2>
            </div>

            <img src="{{ Vite::asset('resources/images/sekaya-association-admin-brand-logo.svg') }}" alt="Sekaya Logo"
                style="height: 2.5rem; opacity: 0.3;">
        </div>

        <!-- Main Content in Two Columns -->
        <div style="display: flex; gap: 1rem; flex: 1;">

            <!-- Left Column -->
            <div style="flex: 1; display: flex; flex-direction: column; gap: 1rem;">

                <!-- License Information Section -->
                <div style="background: white; border-radius: 0.5rem; border: 2px solid #bfdbfe; overflow: hidden;">
                    <div
                        style="background: linear-gradient(45deg, #2563eb, #3b82f6); color: white; padding: 0.6rem 1rem;">
                        <h3 style="font-size: 1rem; font-weight: 700; margin: 0;">معلومات الرخصة</h3>
                    </div>

                    <div>
                        <div
                            style="display: flex; justify-content: space-between; padding: 0.6rem 1rem; border-bottom: 2px solid #dbeafe;">
                            <span style="font-weight: 600; color: #1e40af; min-width: 140px; font-size: 0.85rem;">
                                رقم التفويض الصادر من مؤسسة سقاية:
                            </span>
                            <span
                                style="font-weight: 700; color: #1f2937; flex: 1; text-align: left; font-size: 0.85rem;">{{ $sekaya_license_number ?? '—' }}</span>
                        </div>

                        <div
                            style="display: flex; justify-content: space-between; padding: 0.6rem 1rem; border-bottom: 2px solid #dbeafe;">
                            <span style="font-weight: 600; color: #1e40af; min-width: 140px; font-size: 0.85rem;">
                                رقم رخصة الهيئة السعودية للمياه:
                            </span>
                            <span
                                style="font-weight: 700; color: #1f2937; flex: 1; text-align: left; font-size: 0.85rem;">{{ $ministry_license_number ?? '—' }}</span>
                        </div>

                        <div
                            style="display: flex; justify-content: space-between; padding: 0.6rem 1rem; border-bottom: 2px solid #dbeafe;">
                            <span style="font-weight: 600; color: #1e40af; min-width: 140px; font-size: 0.85rem;">تاريخ
                                البداية:</span>
                            <span
                                style="font-weight: 700; color: #1f2937; flex: 1; text-align: left; font-size: 0.85rem;">{{ $ministry_license_start_date ? $ministry_license_start_date->format('Y/m/d') : '—' }}</span>
                        </div>

                        <div style="display: flex; justify-content: space-between; padding: 0.6rem 1rem;">
                            <span style="font-weight: 600; color: #1e40af; min-width: 140px; font-size: 0.85rem;">تاريخ
                                الانتهاء:</span>
                            <span
                                style="font-weight: 700; color: #1f2937; flex: 1; text-align: left; font-size: 0.85rem;">{{ $ministry_license_end_date ? $ministry_license_end_date->format('Y/m/d') : '—' }}</span>
                        </div>
                    </div>
                </div>

                <!-- Association Information Section -->
                <div style="background: white; border-radius: 0.5rem; border: 2px solid #bfdbfe; overflow: hidden;">
                    <div
                        style="background: linear-gradient(45deg, #2563eb, #3b82f6); color: white; padding: 0.6rem 1rem;">
                        <h3 style="font-size: 1rem; font-weight: 700; margin: 0;">معلومات الجهة المفوضة</h3>
                    </div>

                    <div>
                        <div
                            style="display: flex; justify-content: space-between; padding: 0.6rem 1rem; border-bottom: 2px solid #dbeafe;">
                            <span style="font-weight: 600; color: #1e40af; min-width: 140px; font-size: 0.85rem;">
                                اسم الجهة:
                            </span>
                            <span
                                style="font-weight: 700; color: #1f2937; flex: 1; text-align: left; font-size: 0.85rem;">{{ $association_name ?? '—' }}</span>
                        </div>

                        <div style="display: flex; justify-content: space-between; padding: 0.6rem 1rem;">
                            <span style="font-weight: 600; color: #1e40af; min-width: 140px; font-size: 0.85rem;">رقم
                                ترخيص الجهة:</span>
                            <span
                                style="font-weight: 700; color: #1f2937; flex: 1; text-align: left; font-size: 0.85rem;">{{ $association_license_number ?? '—' }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column -->
            <div style="flex: 1;">

                <!-- Location Information Section -->
                <div
                    style="background: white; border-radius: 0.5rem; border: 2px solid #bfdbfe; overflow: hidden; height: 100%;">
                    <div
                        style="background: linear-gradient(45deg, #2563eb, #3b82f6); color: white; padding: 0.6rem 1rem;">
                        <h3 style="font-size: 1rem; font-weight: 700; margin: 0;">معلومات الموقع</h3>
                    </div>

                    <div>
                        <div
                            style="display: flex; justify-content: space-between; padding: 0.6rem 1rem; border-bottom: 2px solid #dbeafe;">
                            <span
                                style="font-weight: 600; color: #1e40af; min-width: 140px; font-size: 0.85rem;">المنطقة:</span>
                            <span
                                style="font-weight: 700; color: #1f2937; flex: 1; text-align: left; font-size: 0.85rem;">{{ $state ?? '—' }}</span>
                        </div>

                        <div
                            style="display: flex; justify-content: space-between; padding: 0.6rem 1rem; border-bottom: 2px solid #dbeafe;">
                            <span
                                style="font-weight: 600; color: #1e40af; min-width: 140px; font-size: 0.85rem;">المدينة:</span>
                            <span
                                style="font-weight: 700; color: #1f2937; flex: 1; text-align: left; font-size: 0.85rem;">{{ $city ?? '—' }}</span>
                        </div>

                        <div
                            style="display: flex; justify-content: space-between; padding: 0.6rem 1rem; border-bottom: 2px solid #dbeafe;">
                            <span
                                style="font-weight: 600; color: #1e40af; min-width: 140px; font-size: 0.85rem;">المركز:</span>
                            <span
                                style="font-weight: 700; color: #1f2937; flex: 1; text-align: left; font-size: 0.85rem;">{{ $center ?? '—' }}</span>
                        </div>

                        <div
                            style="display: flex; justify-content: space-between; padding: 0.6rem 1rem; border-bottom: 2px solid #dbeafe;">
                            <span style="font-weight: 600; color: #1e40af; min-width: 140px; font-size: 0.85rem;">خط
                                العرض:</span>
                            <span
                                style="font-weight: 700; color: #1f2937; flex: 1; text-align: left; font-size: 0.85rem;">{{ $lat ?? '—' }}</span>
                        </div>

                        <div style="display: flex; justify-content: space-between; padding: 0.6rem 1rem;">
                            <span style="font-weight: 600; color: #1e40af; min-width: 140px; font-size: 0.85rem;">خط
                                الطول:</span>
                            <span
                                style="font-weight: 700; color: #1f2937; flex: 1; text-align: left; font-size: 0.85rem;">{{ $lng ?? '—' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer Section -->
        <div
            style="border-top: 2px solid #3b82f6; padding-top: 0.5rem; margin-top: 0.75rem; display: flex; justify-content: center; align-items: center;">
            <img src="{{ Vite::asset('resources/images/sekaya-association-admin-brand-logo.svg') }}" alt="Sekaya Logo"
                style="height: 2rem; opacity: 0.5;">
        </div>
    </div>
</div>