@extends('frontend.vendor_dashboard.dashboard.layouts.app')

@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-12">
                <!-- Print Controls -->
                <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>

                <!-- Document Container -->
                <div class="card printable-document">
                    <div class="card-body p-4">
                        <div class="document-container">
                            <!-- Header Section -->
                            <div class="document-header mb-4">
                                <div style="overflow: hidden; margin-bottom: 10px;">
                                    <div style="float: left; width: 50%;">
                                        <div style="font-size: 14px;">
                                            <strong>Dispatch No.:</strong> {{ $marriageVerification->chalani_no ?? '' }}
                                        </div>
                                    </div>
                                    <div style="float: right; width: 50%; text-align: right;">
                                        <div style="font-size: 14px;">
                                            <strong>Date:</strong>
                                            {{ \Carbon\Carbon::parse($marriageVerification->date ?? now())->format('d F, Y') }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Title Section -->
                            <div class="title-section mb-4" style="text-align: center;">
                                <h3
                                    style="font-size: 20px; font-weight: bold; margin-bottom: 15px; text-decoration: underline;">
                                    {{ $marriageVerification->subject ?? 'Marriage Verification' }}
                                </h3>
                            </div>

                            <!-- Content Section -->
                            <div class="content-section" style="font-size: 14px; line-height: 1.6; text-align: justify;">
                                <p style="margin-bottom: 15px; text-indent: 50px;">
                                    This is to verify that
                                    <strong>Mr. {{ $marriageVerification->groom_name ?? '' }}</strong>,
                                    holder of Nepali Citizenship Certificate No.
                                    <strong>{{ $marriageVerification->groom_citizen_no ?? '' }}</strong>
                                    @if ($marriageVerification->groom_id_no)
                                        , National Identity Card No.
                                        <strong>{{ $marriageVerification->groom_id_no }}</strong>
                                    @endif
                                    @if ($marriageVerification->groom_passport)
                                        , Passport No. <strong>{{ $marriageVerification->groom_passport }}</strong>
                                    @endif
                                    , grandson of
                                    <strong>Mr. {{ $marriageVerification->groom_grandfather ?? '' }}</strong>
                                    son of
                                    <strong>Mr. {{ $marriageVerification->groom_father ?? '' }}</strong> and
                                    <strong>Mrs. {{ $marriageVerification->groom_mother ?? '' }}</strong>,
                                    permanent resident of
                                    <strong>

                                        Ward No. {{ $marriageVerification->ward->name ?? '' }},
                                        {{ $marriageVerification->municipality->name ?? '' }},

                                        {{ $marriageVerification->groom_district ?? '' }},
                                        {{ $marriageVerification->groom_provinance ?? '' }}, Nepal
                                    </strong>
                                    got married to
                                    <strong>Ms. {{ $marriageVerification->bride_name ?? '' }}</strong>,
                                    holder of Nepali Citizenship Certificate No.
                                    <strong>{{ $marriageVerification->bride_citizen_no ?? '' }}</strong>
                                    @if ($marriageVerification->bride_id_no)
                                        , National Identity Card No.
                                        <strong>{{ $marriageVerification->bride_id_no }}</strong>
                                    @endif
                                    @if ($marriageVerification->bride_passport)
                                        , Passport No. <strong>{{ $marriageVerification->bride_passport }}</strong>
                                    @endif
                                    , granddaughter of
                                    <strong>Mr. {{ $marriageVerification->bride_grandfather ?? '' }}</strong>
                                    daughter of
                                    <strong>Mr. {{ $marriageVerification->bride_father ?? '' }}</strong> and
                                    <strong>Mrs. {{ $marriageVerification->bride_mother ?? '' }}</strong>,
                                    permanent resident of
                                    <strong>
                                        @if ($marriageVerification->groom_previous_ward_no)
                                            Ward No. {{ $marriageVerification->groom_previous_ward_no }},
                                        @endif
                                        {{ $marriageVerification->groom_previous_municipality ?? '' }},
                                        {{ $marriageVerification->bride_district ?? '' }},
                                        {{ $marriageVerification->bride_provinance ?? '' }}, Nepal
                                    </strong>
                                    on
                                    <strong>{{ $marriageVerification->marriage_date_in_nepali }} B.S</strong>
                                    <strong>{{ \Carbon\Carbon::parse($marriageVerification->marriage_date)->format('d F, Y') }}</strong>
                                    in accordance with
                                    <strong>{{ $marriageVerification->marriage_type ?? 'social customs and traditions' }}</strong>.
                                </p>
                            </div>

                            <!-- Photos Section -->
                            <div class="photos-section" style="margin-top: 30px; margin-bottom: 30px; overflow: hidden;">
                                <!-- Groom Photo -->
                                <div style="float: left; width: 45%; text-align: center;">
                                    <div
                                        style="width: 32mm; height: 42mm; border: 1px solid #000; margin: 0 auto 10px; padding: 2mm; background: #fff;">
                                        @if (isset($marriageVerification->groom_photo) && $marriageVerification->groom_photo)
                                            <img src="{{ asset('storage/' . $marriageVerification->groom_photo) }}"
                                                alt="Groom Photo" style="width: 100%; height: 100%; object-fit: cover;">
                                        @else
                                            <div
                                                style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5;">
                                                <span style="font-size: 11px; color: #999;">Photo</span>
                                            </div>
                                        @endif
                                    </div>
                                    <div style="font-size: 13px; font-weight: bold;">Mr.
                                        {{ $marriageVerification->groom_name ?? '' }}</div>
                                    <div style="font-size: 11px;">Groom</div>
                                </div>

                                <!-- Bride Photo -->
                                <div style="float: right; width: 45%; text-align: center;">
                                    <div
                                        style="width: 32mm; height: 42mm; border: 1px solid #000; margin: 0 auto 10px; padding: 2mm; background: #fff;">
                                        @if (isset($marriageVerification->bride_photo) && $marriageVerification->bride_photo)
                                            <img src="{{ asset('storage/' . $marriageVerification->bride_photo) }}"
                                                alt="Bride Photo" style="width: 100%; height: 100%; object-fit: cover;">
                                        @else
                                            <div
                                                style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5;">
                                                <span style="font-size: 11px; color: #999;">Photo</span>
                                            </div>
                                        @endif
                                    </div>
                                    <div style="font-size: 13px; font-weight: bold;">Ms.
                                        {{ $marriageVerification->bride_name ?? '' }}</div>
                                    <div style="font-size: 11px;">Bride</div>
                                </div>
                            </div>

                            <div style="clear: both;"></div>

                            <!-- Footer Note -->
                            <div class="footer-note" style="margin-top: 30px;">
                                <p style="font-size: 12px; line-height: 1.5; text-align: justify; font-style: italic;">
                                    This letter is issued on the basis of the applicant's written self-declaration,
                                    official inquiry and investigation carried out at the local level, marriage registration
                                    records of the couple, and confirmation by competent witnesses, in accordance with the
                                    Section 12 of the Local Government Operation Act, 2074 BS (2017 AD).
                                </p>
                            </div>

                            <!-- Signature Section - Compact, Right Corner -->
                                <div style="float: right; width: 45%; text-align: right; margin-top: 8px;">
                                    <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>

    <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;
                /* Remove the margin-top from here */
            }

            /* Set EXACT margins: 2.5" top, 1" left, 0.5" right */
            @page {
                size: A4;
                margin: 2.2in 0.5in 0in 0.5in !important;
                /* top: 2.5in, right: 0.5in, bottom: 0in, left: 1in */
            }

            /* 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;
            }

            /* Prevent page breaks inside elements */

            .signature-section,
            .documents-section,
            .content-section {
                page-break-inside: avoid;
                break-inside: avoid;
            }
        }

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

        .card-body.p-4 {
            padding: 10px !important;
        }
    </style>
@endsection




<!-- Document Container -->