<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sales RFQ #{{ $rfq->rfq_no }} - Print</title>
    <style>
        /* ===================================
           CSS VARIABLES - PURPLE THEME
           =================================== */
        :root {
            --purple-primary: #8b5cf6;
            --purple-dark: #7c3aed;
            --purple-light: #a78bfa;
            --purple-lighter: #c4b5fd;
            --purple-pale: #f3f0ff;
            --text-dark: #1e293b;
            --text-medium: #475569;
            --text-light: #64748b;
            --border-color: #e2e8f0;
            --bg-section: #f8fafc;
        }

        /* ===================================
           PAGE SETUP FOR PRINTING
           =================================== */
        @page {
            size: A4 landscape;
            margin: 15mm 10mm 12mm 10mm;
        }

        @media print {
            html, body {
                width: 100%;
                height: 100%;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            .no-print {
                display: none !important;
            }
            body {
                background: #fff !important;
            }
            .container {
                box-shadow: none !important;
                margin: 0 !important;
                padding: 0 0 5mm 0 !important;
                width: 100% !important;
                border-radius: 0 !important;
            }
            .header-gradient {
                background: var(--purple-primary) !important;
            }
            .section-header {
                background: var(--purple-pale) !important;
                border-left-color: var(--purple-primary) !important;
            }
        }

        /* ===================================
           GLOBAL STYLES
           =================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            color: var(--text-dark);
            line-height: 1.6;
            padding: 0;
            margin: 0;
        }

        .container {
            width: 1000px;
            margin: 15px auto;
            background: #ffffff;
            padding: 25px 30px 20px 30px;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(139, 92, 246, 0.08);
        }

        /* ===================================
           PRINT BUTTONS (NO-PRINT)
           =================================== */
        .no-print {
            margin-bottom: 15px;
            text-align: right;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .btn {
            background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
            color: #ffffff;
            padding: 8px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn-close {
            background: linear-gradient(135deg, #64748b 0%, #475569 100%);
            box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3);
        }

        .btn-close:hover {
            box-shadow: 0 4px 12px rgba(100, 116, 139, 0.4);
        }

        /* ===================================
           HEADER SECTION
           =================================== */
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 3px solid var(--purple-primary);
            padding-bottom: 15px;
            margin-bottom: 20px;
            position: relative;
        }

        .header::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 120px;
            height: 3px;
            background: linear-gradient(90deg, var(--purple-light) 0%, transparent 100%);
        }

        .logo-section {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .logo {
            width: 75px;
            height: auto;
            filter: drop-shadow(0 2px 6px rgba(139, 92, 246, 0.15));
        }

        .company-details h2 {
            color: var(--purple-dark);
            font-size: 24px;
            font-weight: 700;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .company-details p {
            color: var(--text-medium);
            font-size: 11.5px;
            line-height: 1.5;
            margin: 3px 0;
        }

        .company-details .email {
            font-size: 11px;
            color: var(--purple-primary);
            font-weight: 500;
        }

        .rfq-meta {
            text-align: right;
            font-size: 12px;
            color: var(--text-medium);
            min-width: 180px;
        }

        .rfq-meta .rfq-number {
            font-size: 16px;
            font-weight: 700;
            color: var(--purple-primary);
            margin-bottom: 4px;
        }

        .rfq-meta .rfq-date {
            font-size: 12px;
            color: var(--text-light);
        }

        .rfq-meta strong {
            color: var(--text-dark);
            font-weight: 600;
        }

        /* ===================================
           DOCUMENT TITLE
           =================================== */
        .document-title {
            text-align: center;
            margin: 20px 0 25px 0;
            padding: 12px 20px;
            background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
            color: #ffffff;
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 2px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
        }

        /* ===================================
           SECTION HEADERS
           =================================== */
        .section-header {
            background: var(--purple-pale);
            color: var(--purple-dark);
            font-weight: 700;
            font-size: 15px;
            padding: 8px 15px;
            border-radius: 6px;
            margin-bottom: 12px;
            margin-top: 18px;
            border-left: 4px solid var(--purple-primary);
            box-shadow: 0 2px 4px rgba(139, 92, 246, 0.08);
        }

        /* ===================================
           INFO TABLE (GRID LAYOUT)
           =================================== */
        .info-table {
            width: 100%;
            margin-bottom: 15px;
            border-collapse: collapse;
        }

        .info-table td {
            padding: 8px 10px;
            vertical-align: top;
            font-size: 12px;
            color: var(--text-medium);
            line-height: 1.7;
        }

        .info-table td b,
        .info-table td strong {
            color: var(--text-dark);
            font-weight: 600;
            display: inline-block;
            min-width: 120px;
        }

        .info-table tr {
            border-bottom: 1px solid var(--border-color);
        }

        .info-table tr:last-child {
            border-bottom: none;
        }

        /* ===================================
           DETAILS TABLE
           =================================== */
        .details-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 15px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            overflow: hidden;
        }

        .details-table thead {
            background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
        }

        .details-table th {
            color: #ffffff;
            font-weight: 600;
            padding: 10px 12px;
            font-size: 12px;
            text-align: left;
            letter-spacing: 0.3px;
        }

        .details-table td {
            border: 1px solid var(--border-color);
            padding: 8px 12px;
            font-size: 11.5px;
            color: var(--text-medium);
        }

        .details-table tbody tr:nth-child(even) {
            background: var(--bg-section);
        }

        .details-table tbody tr:hover {
            background: var(--purple-pale);
        }

        .details-table td[colspan] {
            text-align: center;
            color: var(--text-light);
            font-style: italic;
        }

        /* ===================================
           MATERIAL TABLE SPECIFIC
           =================================== */
        .material-number {
            text-align: center;
            font-weight: 600;
            color: var(--purple-primary);
        }

        .material-name {
            color: var(--text-dark);
            font-weight: 500;
        }

        /* ===================================
           ATTACHMENTS (IF ENABLED)
           =================================== */
        .attachment-row th {
            background: var(--bg-section);
            color: var(--text-dark);
            font-weight: 600;
            width: 200px;
            border: 1px solid var(--border-color);
        }

        .attachment-row td {
            background: #ffffff;
            color: var(--text-medium);
        }

        /* ===================================
           SIGNATORY SECTION
           =================================== */
        .signatory {
            margin-top: 40px;
            text-align: right;
            font-size: 13px;
            color: var(--text-dark);
            padding-right: 30px;
        }

        .signatory .company-name {
            font-weight: 700;
            color: var(--purple-dark);
            margin-bottom: 40px;
        }

        .signatory .signature-line {
            margin-top: 50px;
            padding-top: 10px;
            border-top: 2px solid var(--text-dark);
            display: inline-block;
            min-width: 250px;
            font-weight: 600;
            color: var(--text-medium);
        }

        /* ===================================
           UTILITY CLASSES
           =================================== */
        .text-center {
            text-align: center;
        }

        .text-right {
            text-align: right;
        }

        .font-bold {
            font-weight: 700;
        }

        /* ===================================
           EMPTY STATE
           =================================== */
        .empty-state {
            text-align: center;
            padding: 20px;
            color: var(--text-light);
            font-style: italic;
            font-size: 12px;
        }

        /* ===================================
           RESPONSIVE (SCREEN ONLY)
           =================================== */
        @media screen and (max-width: 1024px) {
            .container {
                width: 95%;
                margin: 10px auto;
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        {{-- PRINT/CLOSE BUTTONS --}}
        <div class="no-print">
            <button class="btn" onclick="window.print()">
                <i class="fas fa-print"></i> Print
            </button>
            <button class="btn btn-close" onclick="window.close()">
                <i class="fas fa-times"></i> Close
            </button>
        </div>

        {{-- HEADER SECTION --}}
        <div class="header">
            <div class="logo-section">
                <img class="logo" src="{{ asset('cbimage.png') }}" alt="Company Logo">
                <div class="company-details">
                    <h2>UMBREY ENGINEERING PVT LTD</h2>
                    <p>No. 31, 2nd Phase, Peenya Industrial Area, Bengaluru 560 058, Karnataka, India</p>
                    <p>GSTN: 29AAACU2461N1ZY &nbsp; | &nbsp; PAN: AAACU2461N</p>
                    <p class="email">Email: info@umbreygroups.com</p>
                </div>
            </div>
            <div class="rfq-meta">
                <div class="rfq-number">{{ $rfq->rfq_no }}</div>
                <div class="rfq-date">
                    <strong>Date:</strong> {{ \Carbon\Carbon::parse($rfq->rfq_date)->format('d/m/Y') }}
                </div>
            </div>
        </div>

        {{-- DOCUMENT TITLE --}}
        <h1 class="document-title">REQUEST FOR QUOTATION</h1>

        {{-- CUSTOMER DETAILS SECTION --}}
        <div class="section-header">Customer Details</div>
        <table class="info-table">
            <tr>
                <td style="width: 33%;">
                    <b>Company:</b> {{ $rfq->customerInfo->company ?? '-' }}<br>
                    <b>Contact:</b> {{ $rfq->customerInfo->mobile ?? '-' }}<br>
                    <b>Email:</b> {{ $rfq->customerInfo->email ?? '-' }}<br>
                    <b>GST No:</b> {{ $rfq->customerInfo->gstno ?? '-' }}
                </td>
                <td style="width: 33%;">
                    <b>Address:</b><br>{{ $rfq->customerInfo->billing_address ?? '-' }}
                </td>
                <td style="width: 34%;">
                    <b>Customer Ref #:</b> {{ $rfq->cus_ref_no ?? '-' }}<br>
                    <b>RFQ Type:</b> {{ $rfq->rfq_type ?? '-' }}<br>
                    <b>Product Type:</b> {{ $rfq->product_type ?? '-' }}
                </td>
            </tr>
        </table>

        {{-- RFQ DETAILS SECTION --}}
        <div class="section-header">RFQ Details</div>
        <table class="info-table">
            <tr>
                <td style="width: 33%;"><b>Part No:</b> {{ $rfq->part_no ?? '-' }}</td>
                <td style="width: 33%;"><b>Project Mat No:</b> {{ $rfq->project_material_no ?? '-' }}</td>
                <td style="width: 34%;"><b>Drawing No:</b> {{ $rfq->drawing_no ?? '-' }}</td>
            </tr>
            <tr>
                <td><b>Drawing Rev:</b> {{ $rfq->drawing_rev ?? '-' }}</td>
                <td><b>Quantity:</b> {{ $rfq->quantity ?? '-' }}</td>
                <td><b>UOM:</b> {{ $rfq->uom ?? '-' }}</td>
            </tr>
            @if($rfq->note)
            <tr>
                <td colspan="3"><b>Note:</b> {{ $rfq->note }}</td>
            </tr>
            @endif
        </table>

        {{-- RAW MATERIALS SECTION --}}
        <div class="section-header">Raw Materials</div>
        <table class="details-table">
            <thead>
                <tr>
                    <th style="width: 80px;">Sl. No.</th>
                    <th>Material Name</th>
                </tr>
            </thead>
            <tbody>
                @forelse($rawMaterialNames as $i => $matName)
                    <tr>
                        <td class="material-number">{{ $i + 1 }}</td>
                        <td class="material-name">{{ $matName }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="2" class="empty-state">No raw materials specified</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        {{-- ATTACHMENTS SECTION (OPTIONAL - UNCOMMENT IF NEEDED) --}}
        {{--
        <div class="section-header">Attachments</div>
        <table class="details-table">
            <tbody>
                @php
                    $hasAttachments = false;
                @endphp

                @if ($rfq->drawing_file)
                    @php $hasAttachments = true; @endphp
                    <tr class="attachment-row">
                        <th>Drawing File</th>
                        <td>{{ basename($rfq->drawing_file) }}</td>
                    </tr>
                @endif

                @if ($rfq->material_specification_file)
                    @php $hasAttachments = true; @endphp
                    <tr class="attachment-row">
                        <th>Material Specification</th>
                        <td>{{ basename($rfq->material_specification_file) }}</td>
                    </tr>
                @endif

                @if ($rfq->rfq_form_file)
                    @php $hasAttachments = true; @endphp
                    <tr class="attachment-row">
                        <th>RFQ Form</th>
                        <td>{{ basename($rfq->rfq_form_file) }}</td>
                    </tr>
                @endif

                @if ($rfq->annexure_file)
                    @php $hasAttachments = true; @endphp
                    <tr class="attachment-row">
                        <th>Annexure</th>
                        <td>{{ basename($rfq->annexure_file) }}</td>
                    </tr>
                @endif

                @if (!$hasAttachments)
                    <tr>
                        <td colspan="2" class="empty-state">No attachments available</td>
                    </tr>
                @endif
            </tbody>
        </table>
        --}}

        {{-- SIGNATORY SECTION --}}
        <div class="signatory">
            <div class="company-name">For Umbrey Engineering PVT LTD,</div>
            <div class="signature-line">Authorised Signatory</div>
        </div>
    </div>
</body>
</html>
