@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-3">
                            <div style="overflow: hidden; margin-bottom: 10px;">
                                <div style="float: left; width: 70%;">
                                    @if($VerRelation->chalani_no)
                                    <div style="font-size: 16px;">
                                        चलानी न‌ं : {{ $VerRelation->chalani_no }}
                                    </div>
                                    @endif
                                </div>
                                <div style="float: right; width: 30%; text-align: right;">
                                    <div style="font-size: 16px; font-weight: bold;">
                                        मिति: {{ $VerRelation->date_in_nepali }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="address-section mb-3">
                            <h3 style="font-size: 12px; font-weight: bold; margin-bottom: 15px;">
                                <span>याे जाे जससँग सम्बन्ध छ ।</span><br>
                                <br>
                            </h3>
                        </div>

                        <!-- Title Section -->
                        <div class="title-section mb-3" style="text-align: center;">
                            <h3
                                style="font-size: 20px; font-weight: bold; margin-bottom: 15px; text-decoration: underline;">
                                {{ $VerRelation->subject ?? 'अविवाहित प्रमाणित' }}
                            </h3>
                        </div>

                        <!-- Content Section -->
                        <div class="content-section" style="font-size: 14px; line-height: 1.5; text-align: justify;">
                            <div class="paragraph">
                                <p style="margin-bottom: 10px;">
                                    <span class="nepali-input">pk/f]Qm ;DaGwdf o;</span>
                                    @if ($VerRelation->previous_ward_no != null)
                                    <span class="nepali-input">;fljs {{ $VerRelation->municipality->name_in_nepali }} j8f g+= {{ $VerRelation->previous_ward_no }} xfn {{ $VerRelation->ward->name_in_nepali }}</span>
                                    @else
                                    <span class="nepali-input">{{ $VerRelation->municipality->name_in_nepali }} j8f g+= {{ $VerRelation->ward->name_in_nepali }}</span>
                                    @endif
                                    <span class="nepali-input"> sf lgjf;L a'af {{ $VerRelation->applicant_father }} tyf cfdf {{ $VerRelation->applicant_mother }}sf]
                                        @if ($VerRelation->gender == 'Male')
                                        5f]/f
                                        @else
                                        5f]/L
                                        @endif
                                        gful/stf g+= {{ $VerRelation->applicant_citizen }},
                                        @if (!empty($VerRelation->applicant_id_no))
                                        /fli6«o kl/ro kq g+= {{ $VerRelation->applicant_id_no }},
                                        @endif
                                        @if (!empty($VerRelation->applicant_passport))
                                        /fxfbfgL g+= {{ $VerRelation->applicant_passport }}
                                        @endif
                                        sf d
                                        @if ($VerRelation->gender == 'Male')
                                        lgj]bs
                                        @else
                                        lgj]lbsf
                                        @endif
                                        {{ $VerRelation->applicant_name }} ldlt</span> {{ $VerRelation->unmarried_date }} <span class="nepali-input">ut];Dd cljjflxt /x]sf] x'bfF cljjflxt k|dfl0ft
                                        l;kmfl/; kfpF elg o; {{ $VerRelation->municipality->name_in_nepali }} j8f g+= {{ $VerRelation->ward->name_in_nepali }} a:g]
                                        {{ $VerRelation->applicant_name }}sf] o; j8f sfof{nodf k]z ePsf] lgj]bg cg';f/ ;h{ldg a'em\bf Aoxf]/f dgflzj b]lvg cfPsf] x'bf lgh
                                        @if ($VerRelation->gender == 'Male')
                                        lgj]bs
                                        @else
                                        lgj]lbsf
                                        @endif
                                        ;f]xL ldlt;Dd cljjflxt /x]sf] Aoxf]/f l;kmfl/; ub{5' .
                                    </span>
                                </p>

                                <!-- Relations Section - Only show if relations exist and are not empty -->
                                @php
                                    $relations = null;
                                    if (!empty($VerRelation->relations)) {
                                        $relations = is_string($VerRelation->relations) 
                                            ? json_decode($VerRelation->relations, true) 
                                            : $VerRelation->relations;
                                    }
                                    
                                    // Filter out empty relations if needed
                                    $hasValidRelations = false;
                                    if (is_array($relations) && count($relations) > 0) {
                                        foreach ($relations as $relation) {
                                            if (!empty($relation['relation']) || !empty($relation['citizen_no'])) {
                                                $hasValidRelations = true;
                                                break;
                                            }
                                        }
                                    }
                                @endphp

                                @if($hasValidRelations)
                                <div style="page-break-inside: avoid; margin-top: 15px;">
                                    <b>साक्षीहरु</b>
                                </div>

                                <table class="table table-bordered card-table" style="font-size: 12px; margin-top: 5px;">
                                    <thead class="thead-light">
                                        <tr style="background-color: #f8f9fa;">
                                            <th style="width: 5%; padding: 6px;">क्र.शं</th>
                                            <th style="width: 25%; padding: 6px;">नाम</th>
                                            <th style="width: 15%; padding: 6px;">नागरिकता नं</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($relations as $index => $source)
                                            @if(!empty($source['relation']) || !empty($source['citizen_no']))
                                            <tr>
                                                <td class="text-center" style="padding: 5px;">{{ $index + 1 }}</td>
                                                <td style="padding: 5px;" class="nepali-input">{{ $source['relation'] ?? '-' }}</td>
                                                <td style="padding: 5px;" class="nepali-input">{{ $source['citizen_no'] ?? '-' }}</td>
                                            </tr>
                                            @endif
                                        @endforeach
                                    </tbody>
                                </table>
                                @endif

                                <!-- Photo Section -->
                                <div style="page-break-inside: avoid; margin-top: 15px;">
                                    <u>फोटो</u>
                                </div>
                            </div>
                        </div>

                        <!-- Bottom Section with Photo and Signature -->
                        <div class="bottom-section" style="margin-top: 20px; overflow: hidden;">
                            <!-- Left Side - Applicant Photo -->
                            <div style="float: left; width: 50%;">
                                <div style="float: left; margin-right: 15px; margin-bottom: 10px;">
                                    <div style="text-align: center;">
                                        <div
                                            style="width: 30mm; height: 35mm; border: 1px solid #000; margin: 0 auto 5px; padding: 2mm; 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;">
                                                    <div style="font-size: 10px; font-weight: bold;">फोटो</div>
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                        <div style="font-size: 12px; text-align: center;">
                                            <div style="font-size: 11px; color: #555; margin-bottom: 2px;">
                                                @if ($VerRelation->gender == 'Male')
                                                    निवेदक
                                                @else
                                                    निवेदिका
                                                @endif
                                            </div>
                                            <div class="nepali-input">
                                                {{ $VerRelation->applicant_name ?? '' }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Right Side - Ward Chairman Signature -->
                            <div style="float: right; width: 45%; text-align: right;">
                                <div style="margin-top: 20px;">
                                    <div style="height: 60px;"></div>
                                    <div style="font-size: 16px; font-weight: bold; margin-bottom: 3px;">
                                        <span>{{ $Wardchairman->name_in_nepali ?? '' }}</span>
                                    </div>
                                    <div style="font-size: 14px; margin-bottom: 3px;">
                                        {{ $Wardchairman->positioned->name_in_nepali ?? 'वडाध्यक्ष' }}
                                    </div>
                                    <div style="font-size: 16px;" class="nepali-input">
                                        {{ $Wardchairman->municipality->name_in_nepali ?? 'भक्तपुर नगरपालिका' }},
                                       j8f g+=  {{ $Wardchairman->ward->name_in_nepali ?? '२' }}
                                    </div>
                                </div>
                            </div>
                        </div>

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

<style>
    /* Print Styles - EXACT MARGINS */
    @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.5in 0in 0.5in !important;
        }

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

        /* Reduce spacing between elements */
        .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,
        table {
            page-break-inside: avoid;
            break-inside: avoid;
        }
    }

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

    .card-body.p-4 {
        padding: 10px !important;
    }
    
    /* Table styling */
    .table {
        width: 100%;
        margin-bottom: 1rem;
        border-collapse: collapse;
    }
    
    .table-bordered {
        border: 1px solid #dee2e6;
    }
    
    .table-bordered th,
    .table-bordered td {
        border: 1px solid #dee2e6;
    }
    
    .table thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
    }
    
    .table td, .table th {
        padding: 0.5rem;
        vertical-align: top;
    }
</style>
@endsection