@extends('layouts.admin')

@section('title')
    <title>Print Request #{{ $request->request_number }} | Inspectorate</title>
@endsection

@section('css')
<style>
    @media print {
        @page {
            size: A4;
            margin: 0.5cm;
        }
        body {
            background: white !important;
            color: black !important;
            font-size: 11px !important;
            line-height: 1.2 !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        .container-fluid {
            max-width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }
        .no-print {
            display: none !important;
        }
        .card {
            border: 1px solid #dee2e6 !important;
            box-shadow: none !important;
            margin-bottom: 4px !important;
            page-break-inside: avoid;
        }
        .card-body {
            padding: 6px !important;
        }
        .print-header {
            background: #000 !important;
            color: white !important;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
            padding: 6px !important;
        }
        .table th, .table td {
            padding: 3px !important;
            font-size: 10px !important;
        }
        .badge {
            font-size: 9px !important;
            padding: 1px 4px !important;
        }
        h3 { font-size: 16px !important; }
        h4 { font-size: 14px !important; }
        h5 { font-size: 12px !important; }
        h6 { font-size: 11px !important; }
        .fs-1 { font-size: 18px !important; }
        .fs-4 { font-size: 14px !important; }
        .fs-6 { font-size: 9px !important; }
        .mb-1, .mb-2, .mb-3, .mb-4 { margin-bottom: 2px !important; }
        .mt-1, .mt-2, .mt-3, .mt-4 { margin-top: 2px !important; }
        .p-2 { padding: 4px !important; }
        .g-2 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
        .signature-section {
            margin-top: 15px !important;
            padding-top: 8px !important;
        }
        .border { border-width: 1px !important; }
        .rounded { border-radius: 2px !important; }
        .text-truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    /* Screen styles for preview */
    .print-header {
        background: #000;
        color: white;
        padding: 8px;
    }

    .compact-card {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    .info-badge {
        font-size: 10px;
        padding: 2px 6px;
        margin-bottom: 4px;
    }

    .compact-table th,
    .compact-table td {
        padding: 4px;
        font-size: 11px;
    }

    .signature-section {
        border-top: 1px solid #dee2e6;
        margin-top: 20px;
        padding-top: 10px;
    }

    .company-logo {
        font-size: 18px;
        font-weight: bold;
    }

    .request-title {
        font-size: 14px;
        font-weight: bold;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Print Header -->
    <div class="row no-print mb-3">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h4 class="mb-0">Print Preview - Request #{{ $request->request_number }}</h4>
                <div>
                    <button onclick="window.print()" class="btn btn-primary me-2">
                        <i class="mdi mdi-printer me-1"></i>Print
                    </button>
                    <button onclick="window.close()" class="btn btn-secondary">
                        <i class="mdi mdi-close me-1"></i>Close
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Invoice Header -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body print-header">
                    <div class="row align-items-center">
                        <div class="col-6">
                            <div class="d-flex align-items-center">
                                <i class="mdi mdi-office-building fs-4 me-2"></i>
                                <div>
                                    <div class="company-logo mb-0">Inspectorate</div>
                                    <small class="text-white-50">Property Inspection Services</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 text-end">
                            <div class="request-title mb-1">
                                <span class="text-white-50">Request:</span> #{{ $request->request_number }}
                            </div>
                            <div class="mb-1">
                                <span class="text-white-50">Date:</span> {{ $request->created_at->format('d/m/Y') }}
                            </div>
                            <span class="badge bg-{{ $request->status === 'approved' ? 'success' : ($request->status === 'rejected' ? 'danger' : 'warning') }}">
                                {{ ucfirst($request->status) }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Compact Request Details -->
                <div class="card-body compact-card">
                    <div class="row g-2">
                        <!-- Consumer Information -->
                        <div class="col-md-4">
                            <div class="border rounded p-2">
                                <span class="badge bg-primary info-badge">Consumer</span>
                                <div class="fw-semibold">{{ $request->user->name }}</div>
                                <small class="text-muted">{{ $request->user->email }}</small>
                                @if($request->user->phone)
                                    <br><small class="text-muted">{{ $request->user->phone }}</small>
                                @endif
                            </div>
                        </div>

                        <!-- Property Information -->
                        <div class="col-md-4">
                            <div class="border rounded p-2">
                                <span class="badge bg-info info-badge">Property</span>
                                <div class="fw-semibold">{{ ucfirst($request->property_type) }}</div>
                                <small>{{ $request->property_address }}</small>
                                <br><small>{{ $request->property_city }}, {{ $request->property_state }}</small>
                            </div>
                        </div>

                        <!-- Request Information -->
                        <div class="col-md-4">
                            <div class="border rounded p-2">
                                <span class="badge bg-success info-badge">Request</span>
                                <div class="fw-semibold">{{ ucfirst(str_replace('_', ' ', $request->request_type)) }}</div>
                                <small>Status: {{ ucfirst($request->status) }}</small>
                                <br><small>Submitted: {{ $request->created_at->format('M d, Y') }}</small>
                            </div>
                        </div>
                    </div>

                    <!-- Description (if exists) -->
                    @if($request->description)
                        <div class="mt-2">
                            <span class="badge bg-secondary info-badge">Description</span>
                            <p class="mb-1 small">{{ $request->description }}</p>
                        </div>
                    @endif

                    <!-- Preferred Schedule (if exists) -->
                    @if($request->preferred_date || $request->preferred_time)
                        <div class="mt-2">
                            <span class="badge bg-warning info-badge">Schedule</span>
                            <small>
                                @if($request->preferred_date)
                                    Date: {{ $request->preferred_date->format('M d, Y') }}
                                @endif
                                @if($request->preferred_time)
                                    @if($request->preferred_date) | @endif
                                    Time: {{ $request->preferred_time->format('g:i A') }}
                                @endif
                            </small>
                        </div>
                    @endif

                    <!-- Documents Table (Compact) -->
                    @if($request->inspectionDocuments->count() > 0)
                        <div class="mt-2">
                            <span class="badge bg-secondary info-badge">Documents ({{ $request->inspectionDocuments->count() }})</span>
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered compact-table mb-2">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Name</th>
                                            <th>Type</th>
                                            <th>Size</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($request->inspectionDocuments as $document)
                                            <tr>
                                                <td class="text-truncate" style="max-width: 150px;">{{ $document->file_name }}</td>
                                                <td>
                                                    @if(str_contains($document->mime_type, 'pdf'))
                                                        <span class="badge bg-danger">PDF</span>
                                                    @elseif(str_contains($document->mime_type, 'image'))
                                                        <span class="badge bg-success">IMG</span>
                                                    @else
                                                        <span class="badge bg-secondary">{{ strtoupper(pathinfo($document->file_name, PATHINFO_EXTENSION)) }}</span>
                                                    @endif
                                                </td>
                                                <td>{{ $document->getFormattedFileSizeAttribute() }}</td>
                                                <td>
                                                    <span class="badge {{ $document->getStatusColorAttribute() }}">{{ ucfirst($document->status) }}</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endif

                    <!-- Admin Notes (Compact) -->
                    @if($request->admin_notes)
                        <div class="mt-2">
                            <span class="badge bg-warning info-badge">Admin Notes</span>
                            <p class="mb-1 small">{{ $request->admin_notes }}</p>
                        </div>
                    @endif

                    <!-- Terms and Conditions -->
                    <div class="row mt-2">
                        <div class="col-lg-8">
                            <span class="badge bg-dark info-badge">Terms & Conditions</span>
                            <ul class="ps-3 mb-0 small">
                                <li>All inspection requests are subject to availability and scheduling.</li>
                                <li>Property owners must ensure access to the property during inspection.</li>
                                <li>Inspection reports will be provided within 7-10 business days.</li>
                            </ul>
                        </div>

                        <!-- Signature Section -->
                        <div class="col-lg-4">
                            <div class="signature-section text-center">
                                <small class="fw-semibold">Inspectorate Management</small>
                                <div class="mt-2">
                                    <div style="border-bottom: 1px solid #dee2e6; height: 40px;"></div>
                                    <small>Authorized Signature</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Footer -->
                    <hr class="my-2">
                    <div class="text-center">
                        <small class="text-muted">Thank you for choosing Inspectorate. For questions, contact our support team.</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Auto-print when page loads (optional - can be removed if not wanted)
    // window.onload = function() {
    //     setTimeout(function() {
    //         window.print();
    //     }, 500);
    // };
</script>
@endsection