@extends('frontend.vendor_dashboard.dashboard.layouts.app')
@section('content')
    <div class="container-xl">
        <div class="row">
            <div class="col-12">

                <div class="card no-print mb-4">
                    <div class="card-body">
                        <div class="d-flex justify-content-end">
                            <button onclick="window.print()" class="btn btn-warning btn-icon icon-left mr-3">
                                <i class="fas fa-print"></i> Print
                            </button>
                            <a href="{{ url()->previous() }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back
                            </a>
                        </div>
                    </div>
                </div>


                <div class="card printable-document">
                    <div class="card-body p-4">
                        <div class="document-container">

                            <div class="document-header mb-2">
                                <div class="row">
                                    <div class="col-md-9">
                                        <div style="font-size: 11px; font-weight: bold;">Dispatch no.:
                                            {{ $VerRelation->chalani_no ?? '' }}</div>
                                    </div>
                                    <div class="col-md-3" style="text-align: right;">
                                        <div style="font-size: 11px; font-weight: bold;">
                                            Date: {{ \Carbon\Carbon::parse($VerRelation->date ?? now())->format('d F, Y') }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="title-section mb-2" style="text-align: center;">
                                <h3
                                    style="font-size: 16px; font-weight: bold; margin-bottom: 10px; text-decoration: underline;">
                                    Verification of Relationship
                                </h3>
                            </div>

                            <div class="content-section" style="font-size: 11px; line-height: 1.4; text-align: justify;">
                                <div class="paragraph">
                                    @php
                                        // Helper function to get title based on gender and marital status
                                        if (!function_exists('getTitle')) {
                                            function getTitle($gender, $maritalStatus = null)
                                            {
                                                if ($gender == 'Male') {
                                                    return 'Mr.';
                                                } else {
                                                    return $maritalStatus == 'Married' ? 'Mrs.' : 'Ms.';
                                                }
                                            }
                                        }

                                        // Decode relations
                                        $relations = is_string($VerRelation->relations ?? '')
                                            ? json_decode($VerRelation->relations, true)
                                            : $VerRelation->relations ?? [];

                                        // Calculate how many photos can fit on first page (approximately)
                                        // Applicant photo + relations photos
                                        $totalPhotos = count($relations) + 1;

                                        // Define max photos per page (adjust based on your layout)
                                        // With 20% width, you can fit 5 per row, so ~10 photos per page (2 rows)
                                        $maxPhotosPerPage = 8; // Adjust this number based on your needs
                                    @endphp

                                    <p style="margin-bottom: 8px; page-break-inside: avoid;">
                                        This is to verify that applicant
                                        <span style="font-weight: bold;">
                                            {{ getTitle($VerRelation->gender ?? 'Male', $VerRelation->applicant_marital_status ?? null) }}
                                            {{ $VerRelation->applicant_name ?? '' }}
                                        </span>
                                        holder of Nepali Citizenship Certificate No.
                                        {{ $VerRelation->applicant_citizen ?? '' }}
                                        @if (!empty($VerRelation->applicant_id_no))
                                            and National ID No. {{ $VerRelation->applicant_id_no }}
                                        @endif
                                        @if (!empty($VerRelation->applicant_passport))
                                            and Passport No. {{ $VerRelation->applicant_passport }}
                                        @endif
                                        @if (($VerRelation->gender ?? 'Male') == 'Male')
                                            grandson
                                        @else
                                            granddaughter
                                        @endif
                                        of
                                        <span style="font-weight: bold;">{{ getTitle('Male') }}
                                            {{ $VerRelation->applicant_grandfather ?? '' }}</span>,
                                        @if (($VerRelation->gender ?? 'Male') == 'Male')
                                            son
                                        @else
                                            daughter
                                        @endif
                                        of
                                        <span style="font-weight: bold;">{{ getTitle('Male') }}
                                            {{ $VerRelation->applicant_father ?? '' }}</span> and
                                        <span style="font-weight: bold;">{{ getTitle('Female', 'Married') }}
                                            {{ $VerRelation->applicant_mother ?? '' }}</span>,
                                        permanent resident of
                                        <span style="font-weight: bold;">
                                            ward No.
                                            {{ $VerRelation->ward->name ?? ($VerRelation->previous_ward_no ?? '') }}
                                            @if (!empty($VerRelation->previous_ward_no))
                                                (Previous ward No. {{ $VerRelation->previous_ward_no ?? '' }})
                                            @endif
                                            , {{ $VerRelation->municipality->name ?? '' }},
                                            {{ $VerRelation->district ?? '' }},
                                            {{ $VerRelation->provinance ?? '' }}, Nepal.
                                        </span>
                                        has the following relationship with the under mentioned persons.
                                    </p>

                                    <!-- Table with page-break control -->
                                    <div class="card-body p-0 mt-1" style="page-break-inside: avoid;">
                                        <table class="table table-bordered card-table" style="font-size: 9px;">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th style="width: 5%; padding: 4px;">S.N</th>
                                                    <th style="width: 25%; padding: 4px;">Name</th>
                                                    <th style="width: 20%; padding: 4px;">Citizenship Certificate No</th>
                                                    <th style="width: 20%; padding: 4px;">Relationship with the Applicant
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                <tr>
                                                    <td class="text-center" style="padding: 4px;">1</td>
                                                    <td style="padding: 4px;">
                                                        {{ getTitle($VerRelation->gender ?? 'Male', $VerRelation->applicant_marital_status ?? null) }}
                                                        {{ $VerRelation->applicant_name ?? '' }}
                                                    </td>
                                                    <td style="padding: 4px;">{{ $VerRelation->applicant_citizen ?? '' }}
                                                    </td>
                                                    <td style="padding: 4px;">Self (Applicant)</td>
                                                </tr>


                                                @if (isset($relations) && is_array($relations) && count($relations) > 0)
                                                    @foreach ($relations as $index => $relation)
                                                        <tr>
                                                            <td class="text-center" style="padding: 4px;">
                                                                {{ $index + 2 }}</td>
                                                            <td style="padding: 4px;">
                                                                {{ getTitle($relation['relation_gender'] ?? 'Male', $relation['married_status'] ?? null) }}
                                                                {{ $relation['relation_name'] ?? '' }}
                                                            </td>
                                                            <td style="padding: 4px;">
                                                                {{ $relation['relation_citizen'] ?? '' }}</td>
                                                            <td style="padding: 4px;">{{ $relation['relation'] ?? '' }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- Photo Verification - Page break controlled -->
                                    <div class="page-break-avoid mt-2" style="page-break-after: avoid;">
                                        <u>Photo Verification</u>
                                    </div>

                                    <!-- Photos - Allow page break between photos -->
                                    <div class="photo-section mt-1 mb-2">
                                        <div class="row" id="photo-container">

                                            <!-- Applicant Photo -->
                                            <div class="photo-col mb-2" data-type="applicant">
                                                <div class="passport-photo-box text-center">
                                                    <div class="passport-photo-frame"
                                                        style="width: 28mm; height: 36mm; border: 1px solid #000; margin: 0 auto 3px; padding: 1.5mm; background: #fff;">
                                                        @if (isset($VerRelation->applicant_photo) && $VerRelation->applicant_photo)
                                                            <img src="{{ asset('storage/' . $VerRelation->applicant_photo) }}"
                                                                alt="{{ $VerRelation->applicant_name ?? 'Applicant' }}"
                                                                style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
                                                        @else
                                                            <div
                                                                style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5;">
                                                                <div
                                                                    style="text-align: center; color: #999; font-size: 8px;">
                                                                    PHOTO</div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <div class="relation-info" style="font-size: 11px; text-align: center;">
                                                        <div style="color: #555;">Applicant</div>
                                                        <div style="font-weight: bold; font-size: 9px;">
                                                            {{ getTitle($VerRelation->gender ?? 'Male', $VerRelation->applicant_marital_status ?? null) }}
                                                            {{ $VerRelation->applicant_name ?? '' }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Relations Photos with page-break control -->
                                            @if (isset($relations) && is_array($relations) && count($relations) > 0)
                                                @foreach ($relations as $index => $relation)
                                                    @php
                                                        // Determine if this photo should have a page break before it
                                                        // Break after every 4 photos (1 row in print)
                                                        $photoNumber = $index + 2; // +2 because applicant is 1
                                                        $shouldBreak = ($photoNumber - 1) % 4 == 0 && $index > 0;
                                                    @endphp

                                                    <div class="photo-col mb-2" data-type="relation"
                                                         @if($shouldBreak) style="page-break-before: avoid; page-break-inside: avoid;" @endif>
                                                        <div class="passport-photo-box text-center">
                                                            <div class="passport-photo-frame"
                                                                style="width: 28mm; height: 36mm; border: 1px solid #000; margin: 0 auto 3px; padding: 1.5mm; background: #fff;">
                                                                @if (isset($relation['photo']) && $relation['photo'])
                                                                    <img src="{{ asset('storage/' . $relation['photo']) }}"
                                                                        alt="{{ $relation['relation_name'] ?? 'Photo' }}"
                                                                        style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
                                                                @else
                                                                    <div
                                                                        style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5;">
                                                                        <div
                                                                            style="text-align: center; color: #999; font-size: 8px;">
                                                                            PHOTO</div>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                            <div class="relation-info"
                                                                style="font-size: 11px; text-align: center;">
                                                                <div style="color: #555;">
                                                                    {{ ucfirst($relation['relation'] ?? 'Relation') }}
                                                                </div>
                                                                <div style="font-weight: bold; font-size: 9px;">
                                                                    {{ getTitle($relation['relation_gender'] ?? 'Male', $relation['married_status'] ?? null) }}
                                                                    {{ $relation['relation_name'] ?? '' }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="col-12">
                                                    <div class="no-relations text-center mt-2 mb-2"
                                                        style="font-size: 12px; color: #666;">
                                                        No relations information available.
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <!-- Last paragraph - will go to next page if needed -->
                                    <p style="font-size: 11px; margin-bottom: 15px; page-break-inside: avoid;">
                                        This letter is issued on the basis of the applicant's written self-declaration,
                                        official inquiry and investigation carried out at the local level, confirmation
                                        by competent witnesses, and in accordance with the Section 12 of the Local
                                        Government Operation Act, 2074 BS (2017 AD).
                                    </p>

                                    <!-- Signature section with page break control -->
                                    <div style="float: right; width: 45%; text-align: right; margin-top: 15px; page-break-inside: avoid;">
                                        <div style="height: 40px;"></div>
                                        <div style="font-size: 14px; font-weight: bold; margin-bottom: 2px;">
                                            {{ $Wardchairman->name ?? '' }}
                                        </div>
                                        <div style="font-size: 11px; margin-bottom: 2px;">
                                            {{ $Wardchairman->position ?? 'Ward Chairman' }}
                                        </div>
                                        <div style="font-size: 8px;">
                                            {{ $Wardchairman->municipality->name ?? 'Bhaktapur Municipality' }},
                                            Ward {{ $Wardchairman->ward->name ?? '2' }}
                                        </div>
                                    </div>
                                    <div style="clear: both;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        /* Print Styles - EXACT MARGINS: 2.5" top, 1" left, 0.5" right */
        @media print {

            /* Reset all margins and padding */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body,
            html {
                margin: 0 !important;
                padding: 0 !important;
                width: 100%;
                background: white;
            }

            /* Hide print controls */
            .no-print,
            .no-print * {
                display: none !important;
            }

            /* Show only document */
            body * {
                visibility: hidden;
            }

            .printable-document,
            .printable-document * {
                visibility: visible;
            }

            .printable-document {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                margin: 0 !important;
                padding: 0 !important;
                border: none !important;
                box-shadow: none !important;
                background: white;
            }

            /* Set EXACT margins */
            @page {
                size: A4;
                margin: 2in 0.2in 0.5in 0.5in !important;
            }

            /* Add top margin to content for better positioning */
            .document-container {
                padding-top: 0;
                margin-top: 0;
            }

            /* Compact card body */
            .card-body.p-4 {
                padding: 0 !important;
                margin: 0 !important;
            }

            /* Reduce spacing between elements to fit content */
            .mb-1,
            .mt-1 {
                margin-bottom: 1mm !important;
                margin-top: 1mm !important;
            }

            .mb-2,
            .mt-2 {
                margin-bottom: 2mm !important;
                margin-top: 2mm !important;
            }

            /* Font sizes optimized for print */
            .document-header div {
                font-size: 10pt !important;
            }

            .title-section h3 {
                font-size: 12pt !important;
                margin: 1mm 0 !important;
            }

            .content-section {
                font-size: 9.5pt !important;
                line-height: 1.25 !important;
            }

            .table {
                font-size: 8.5pt !important;
            }

            .table th,
            .table td {
                padding: 1.5mm !important;
            }

            .relation-info {
                font-size: 7.5pt !important;
            }

            .passport-photo-frame {
                width: 30mm !important;
                height: 35mm !important;
            }

            .photo-col {
                flex: 0 0 20% !important;
                max-width: 20% !important;
                padding: 0 0.5mm !important;
                page-break-inside: avoid;
                break-inside: avoid;
            }

            /* Allow the photo container to break naturally */
            #photo-container {
                display: flex;
                flex-wrap: wrap;
                page-break-inside: auto;
                break-inside: auto;
            }

            /* Group photos in rows of 5 */
            .photo-row {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                page-break-inside: avoid;
                break-inside: avoid;
            }

            /* Prevent page breaks inside elements */
            .signature-section,
            .documents-section,
            .passport-photo-box {
                page-break-inside: avoid;
                break-inside: avoid;
            }

            /* Ensure table doesn't break */
            table {
                page-break-inside: avoid;
                break-inside: avoid;
            }

            /* Remove any background colors for clean print */
            .table th {
                background-color: #f5f5f5 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .passport-photo-frame {
                border: 0.5pt solid #000 !important;
            }

            /* Allow photos to naturally flow to next page */
            .photo-section {
                page-break-inside: auto;
                break-inside: auto;
            }
        }

        /* Screen styles with minimum margins */
        .container-fluid {
            padding: 0 5px;
        }

        .photo-col {
            flex: 0 0 20%;
            max-width: 20%;
            text-align: center;
            padding: 0 1px;
            margin-bottom: 10px;
        }

        #photo-container {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
        }

        .passport-photo-frame {
            width: 60px;
            height: 80px;
            margin: 0 auto;
            border: 1px solid #ddd;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .table-sm th,
        .table-sm td {
            padding: 4px;
            font-size: 12px;
        }

        .card-body.p-4 {
            padding: 10px !important;
        }

        @media (max-width: 768px) {
            .photo-col {
                flex: 0 0 50%;
                max-width: 50%;
                margin-bottom: 5px;
            }

            .passport-photo-frame {
                width: 80px;
                height: 100px;
            }

            .relation-info {
                font-size: 10px;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Ensure consistent photo layout for 5 per row
            const photoContainer = document.getElementById('photo-container');
            if (photoContainer) {
                const photoCols = document.querySelectorAll('.photo-col');
                const photoCount = photoCols.length;

                // If we have exactly 5 photos (applicant + 4 relations), ensure 20% each
                if (photoCount <= 5) {
                    photoCols.forEach(col => {
                        col.style.flex = '0 0 20%';
                        col.style.maxWidth = '20%';
                    });
                } else if (photoCount <= 4) {
                    // For fewer photos, adjust percentage
                    const percent = 100 / photoCount;
                    photoCols.forEach(col => {
                        col.style.flex = `0 0 ${percent}%`;
                        col.style.maxWidth = `${percent}%`;
                    });
                }

                // Group photos into rows for better page break control
                const rows = [];
                const photosPerRow = 5;
                for (let i = 0; i < photoCols.length; i += photosPerRow) {
                    const row = document.createElement('div');
                    row.className = 'photo-row';
                    row.style.display = 'flex';
                    row.style.flexWrap = 'wrap';
                    row.style.width = '100%';

                    for (let j = i; j < Math.min(i + photosPerRow, photoCols.length); j++) {
                        row.appendChild(photoCols[j].cloneNode(true));
                    }

                    // Replace original photo cols with rows
                    if (i === 0) {
                        photoContainer.innerHTML = '';
                    }
                    photoContainer.appendChild(row);
                }
            }

            // For print, ensure everything is visible
            const printButton = document.querySelector('button[onclick*="print"]');
            if (printButton) {
                printButton.addEventListener('click', function() {
                    setTimeout(function() {
                        window.print();
                    }, 100);
                });
            }
        });
    </script>
@endsection