@extends('admin.layouts.app')

@section('content')
    <div class="container-fluid">
        <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-between align-items-center">
                            <h4 class="mb-0">माग फाराम रिपोर्ट</h4>
                            <div>
                                <button onclick="window.print()" class="btn btn-warning">
                                    <i class="fas fa-print"></i> प्रिन्ट गर्नुहोस्
                                </button>
                                <a href="{{ route('panel.maag-forms.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left"></i> फर्कनुहोस्
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Document Container -->
                <div class="card printable-document">
                    <div class="card-body p-0">
                        <div class="document-container"
                            style="padding: 20px; font-family: 'Times New Roman', Arial, sans-serif;">

                            <!-- Header Section with 3 columns exactly like the image -->
                            <div style="display: flex; align-items: flex-start; margin-bottom: 15px;">
                                <!-- Left: Government Logo Box -->
                                <div style="width: 25%;">
                                    <div
                                        style="border: 2px solid #000; padding: 8px 8px; text-align: center; display: inline-block;">
                                        <div style="font-size: 11px; font-weight: bold; line-height: 1.3;">नेपाल सरकार</div>
                                        <div style="font-size: 11px; font-weight: bold; line-height: 1.3;">प्रदेश सरकार /
                                            <br> स्थानीय सरकारको <br> छाप</div>
                                    </div>
                                </div>

                                <!-- Center: Title -->
                                <div style="width: 50%; text-align: center;">
                                    <div style="font-size: 16px; font-weight: bold;">सङ्घ/ प्रदेश / स्थानीय तह</div>
                                    <div style="font-size: 15px; font-weight: bold;">२ नं वडा कार्यालय</div>
                                    <div style="font-size: 11px;">कार्यालय कोड नं.: ........</div>
                                    <div
                                        style="font-size: 18px; font-weight: bold; margin-top: 5px; text-decoration: underline;">
                                        माग फाराम</div>
                                </div>

                                <!-- Right: Form Number -->
                                <div style="width: 25%; text-align: right;">
                                    <div style="font-size: 12px;">फाराम नं: ४०१ - म.ले.प.</div>
                                </div>
                            </div>

                            <!-- Date and Fiscal Year Section -->
                            <div style="text-align: right; margin-bottom: 15px; font-size: 12px;">
                                <div><strong>आर्थिक वर्ष :</strong><span class="nepali-input" >{{ $fiscal_year ?? '२०८०/८१' }}</span></div>
                                <div><strong>माग फाराम नं:</strong> {{ $maagForm->id_no ?? '२०८१/०३/२३' }}</div>
                                <div><strong>मिति:</strong> {{ $nepali_date ?? '' }}</div>
                            </div>

                            <!-- Products Table - Exactly matching the image structure -->
                            <table class="report-table"
                                style="width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 12px;">
                                <thead>
                                    <tr>
                                        <th rowspan="2"
                                            style="border: 1px solid #000; padding: 6px 8px; text-align: center; font-weight: bold; vertical-align: middle;">
                                            क्र.सं.</th>
                                        <th rowspan="2"
                                            style="border: 1px solid #000; padding: 6px 8px; text-align: center; font-weight: bold; vertical-align: middle;">
                                            सामानको नाम</th>
                                        <th rowspan="2"
                                            style="border: 1px solid #000; padding: 6px 8px; text-align: center; font-weight: bold; vertical-align: middle;">
                                            स्पेसिफिकेसन</th>
                                        <th colspan="2"
                                            style="border: 1px solid #000; padding: 6px 8px; text-align: center; font-weight: bold;">
                                            माग गरिएको</th>
                                        <th rowspan="2"
                                            style="border: 1px solid #000; padding: 6px 8px; text-align: center; font-weight: bold; vertical-align: middle;">
                                            कैफियत</th>
                                    </tr>
                                    <tr>
                                        <th
                                            style="border: 1px solid #000; padding: 6px 8px; text-align: center; font-weight: bold;">
                                            एकाइ</th>
                                        <th
                                            style="border: 1px solid #000; padding: 6px 8px; text-align: center; font-weight: bold;">
                                            परिमाण</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $products = is_string($maagForm->products ?? '')
                                            ? json_decode($maagForm->products, true)
                                            : $maagForm->products ?? [];
                                    @endphp

                                    @forelse($products as $index => $product)
                                        <tr>
                                            <td style="border: 1px solid #000; padding: 6px 8px; text-align: center;">
                                                {{ $index + 1 }}
                                            </td>
                                            <td style="border: 1px solid #000; padding: 6px 8px;">
                                                {{ $product['product_name'] ?? ($product['सामानको नाम'] ?? '-') }}
                                            </td>
                                            <td style="border: 1px solid #000; padding: 6px 8px;">
                                                {{ $product['specification'] ?? ($product['स्पेसिफिकेसन'] ?? '-') }}
                                            </td>
                                            <td style="border: 1px solid #000; padding: 6px 8px; text-align: center;">
                                                {{ $product['unit'] ?? ($product['एकाइ'] ?? '-') }}
                                            </td>
                                            <td style="border: 1px solid #000; padding: 6px 8px; text-align: center;">
                                                {{ $product['qty'] ?? ($product['परिमाण'] ?? ($product['quantity'] ?? '-')) }}
                                            </td>
                                            <td style="border: 1px solid #000; padding: 6px 8px;">
                                                {{ $product['remarks'] ?? ($product['कैफियत'] ?? '-') }}
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6"
                                                style="border: 1px solid #000; padding: 6px 8px; text-align: center;">कुनै
                                                सामानहरू छैनन्</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>

                            <!-- ROW 1: 3 Columns - माग गर्ने, सिफारिस गर्ने, स्वीकृत गर्ने -->
                            <div style="display: flex; gap: 30px; margin-top: 10px;">
                                <div style="flex: 1;">
                                    <div style="border-top: 1px dashed #000; margin-top: 20px; width: 100%;"></div>
                                    <div style="margin-top: 5px;">
                                        <strong>माग गर्ने:</strong><br>
                                        नाम:
                                        {{ $maagForm->requestedBy->name_in_nepali ??  '_______________' }}<br>
                                        पद: <span
                                            class="nepali-input">{{ $maagForm->requestedBy->positioned->name ?? '_______________' }}</span><br>
                                        मितिः {{ $nepali_date ?? '_______________' }}
                                    </div>
                                </div>
                                <div style="flex: 1;">
                                    <div style="border-top: 1px dashed #000; margin-top: 20px; width: 100%;"></div>
                                    <div style="margin-top: 5px;">
                                        <strong>सिफारिस गर्ने:</strong><br>
                                        नाम: {{ $maagForm->recommended_by ?? '_______________' }}<br>
                                        पद: {{ $maagForm->recommended_position ?? '_______________' }}<br>
                                        मितिः {{ $nepali_date ?? '' }}
                                    </div>
                                </div>
                                <div style="flex: 1;">
                                    <div style="border-top: 1px dashed #000; margin-top: 20px; width: 100%;"></div>
                                    <div style="margin-top: 5px;">
                                        <strong>स्वीकृत गर्ने:</strong><br>
                                        नाम: <span>{{ $maagForm->wardchairman->name_in_nepali ?? '' }}</span><br>
                                        पद: वडा अध्यक्ष<br>
                                        मितिः {{ $nepali_date ?? '' }}
                                    </div>
                                </div>
                            </div>
                            </div>

                            <!-- ROW 2: 3 Columns - स्टोरकिपर, मालसामान बुझ्ने, खर्च निकासा -->
                            <div style="display: flex; gap: 30px; margin-top: 15px;">
                                <div style="flex: 1;">
                                    <div style="border-top: 1px dashed #000; margin-top: 20px; width: 100%;"></div>
                                    <div style="margin-top: 5px;">
                                        <strong>स्टोरकिपरले भर्ने</strong><br>
                                        क) बजारबाट खरिद गर्नुपर्ने<br>
                                        ख) मौज्दातमा रहेको<br>
                                        स्टोरकिपरको दस्तखतः........<br>
                                        नाम: _______________
                                    </div>
                                </div>
                                <div style="flex: 1;">
                                    <div style="border-top: 1px dashed #000; margin-top: 20px; width: 100%;"></div>
                                    <div style="margin-top: 5px;">
                                        <strong>मालसामान बुझ्ने:</strong><br>
                                        नाम: <span>
                                        {{ $maagForm->checkedBy->name_in_nepali ?? ($maagForm->checked_by ? 'User ID: ' . $maagForm->checked_by : '_______________') }}</span><br>
                                        पद: <span
                                            class="nepali-input">{{ $maagForm->checkedBy->positioned->name ?? '_______________' }}</span><br>
                                        मितिः {{ $nepali_date ?? '२०८१/०३/२३' }}
                                    </div>
                                </div>
                                <div style="flex: 1;">
                                    <div style="border-top: 1px dashed #000; margin-top: 20px; width: 100%;"></div>
                                    <div style="margin-top: 5px;">
                                        <strong>खर्च निकासा खातामा चढाउने:</strong><br>
                                        नाम: _______________<br>
                                        पद: _______________<br>
                                        मितिः _______________
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Screen styles */
        .printable-document {
            background: white;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .document-container {
            max-width: 100%;
            overflow-x: auto;
        }

        /* Fix for table printing */
        .report-table {
            width: 100%;
            border-collapse: collapse;
        }

        .report-table td,
        .report-table th {
            border: 1px solid #000 !important;
        }

        /* Print Styles - Optimized for A4 */
        @media print {

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

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

            /* Reset body for print */
            body {
                background: white;
                margin: 0;
                padding: 0;
            }

            /* Make document visible at full width */
            .printable-document {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                border: none !important;
                box-shadow: none !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            .card-body {
                padding: 0 !important;
            }

            .document-container {
                padding: 0 !important;
                margin: 0 !important;
            }

            /* Remove Bootstrap row/col margins if any */
            .row {
                margin: 0 !important;
                padding: 0 !important;
            }

            [class*="col-"] {
                padding: 0 !important;
                margin: 0 !important;
            }

            /* Page settings for A4 */
            @page {
                size: A4;
                margin: 12mm 10mm 12mm 10mm;
            }

            /* Force table borders to print consistently */
            .report-table,
            .report-table tr,
            .report-table td,
            .report-table th {
                border: 1px solid #000 !important;
                border-collapse: collapse !important;
            }

            /* Ensure table rows don't break across pages */
            .report-table tr {
                page-break-inside: avoid;
                break-inside: avoid;
            }

            /* Prevent page breaks inside signature sections */
            div[style*="display: flex"] {
                page-break-inside: avoid;
                break-inside: avoid;
            }

            /* Ensure fonts are readable in print */
            body,
            .document-container,
            .report-table,
            .report-table td,
            .report-table th {
                font-family: 'Times New Roman', Arial, sans-serif !important;
                font-size: 11pt !important;
            }

            /* Make header text appropriately sized */
            .document-container div[style*="font-size: 18px"] {
                font-size: 14pt !important;
            }

            .document-container div[style*="font-size: 16px"] {
                font-size: 12pt !important;
            }

            /* Remove background colors */
            .report-table th {
                background-color: transparent !important;
            }

            /* Reduce gaps between sections */
            .date-section {
                margin: 0 !important;
            }

            /* Ensure the government logo box prints correctly */
            div[style*="border: 2px solid #000"] {
                border: 2px solid #000 !important;
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
            }

            /* Ensure all borders are visible */
            .report-table td,
            .report-table th,
            .report-table tr {
                border: 1px solid #000 !important;
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
            }

            /* Dashed lines for signature sections */
            div[style*="border-top: 1px dashed"] {
                border-top: 1px dashed #000 !important;
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
            }
        }
    </style>

    <script>
        // Fix for table printing in some browsers
        window.onbeforeprint = function() {
            var tables = document.querySelectorAll('.report-table');
            tables.forEach(function(table) {
                var cells = table.querySelectorAll('td, th');
                cells.forEach(function(cell) {
                    cell.style.border = '1px solid #000';
                });
            });
        };

        window.onafterprint = function() {
            var tables = document.querySelectorAll('.report-table');
            tables.forEach(function(table) {
                var cells = table.querySelectorAll('td, th');
                cells.forEach(function(cell) {
                    cell.style.border = '';
                });
            });
        };
    </script>
@endsection