@extends('admin.layout.app')

@section('body')
    @php
        // Try to read company name from relations; fallback to app.name
        $companyName = optional(optional($expense->machinery)->company)->name ?? config('app.name', 'Your Company');
    @endphp

    <div class="container">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0"><i class="far fa-eye me-2"></i>Fuel Expense #{{ $expense->id }}</h4>
            <div class="d-flex gap-2">
                <button class="btn btn-dark" onclick="printContent()" title="Print">
                    <i class="fas fa-print me-2"></i> Print
                </button>
                <a href="{{ route('machinery-fuel-expenses.edit', $expense) }}" class="btn btn-outline-primary">
                    <i class="far fa-edit me-2"></i>Edit
                </a>
                <a href="{{ route('machinery-fuel-expenses.index') }}" class="btn btn-secondary">Back</a>
            </div>
        </div>

        {{-- PRINT AREA START --}}
        <div id="printArea">
            {{-- Print Header (visible only when printing) --}}
            <div class="print-header text-center mb-3">
                <h3 class="mb-0">{{ $companyName }}</h3>
                <small class="text-muted">Fuel Expense Detail</small>
                <hr class="mt-2 mb-0">
            </div>

            <div class="card shadow-sm">
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-md-3">Date</dt>
                        <dd class="col-md-9">{{ optional($expense->spent_at)->format('Y-m-d') }}</dd>

                        <dt class="col-md-3">Machinery</dt>
                        <dd class="col-md-9">{{ optional($expense->machinery)->name ?? '#' . $expense->machinery_id }}</dd>

                        <dt class="col-md-3">Liters</dt>
                        <dd class="col-md-9">{{ number_format($expense->quantity_liters, 2) }}</dd>

                        <dt class="col-md-3">Unit Price</dt>
                        <dd class="col-md-9">{{ number_format($expense->unit_price, 2) }}</dd>

                        <dt class="col-md-3">Total</dt>
                        <dd class="col-md-9">{{ number_format($expense->total_amount, 2) }}</dd>

                        <dt class="col-md-3">Vendor</dt>
                        <dd class="col-md-9">{{ $expense->vendor ?? '—' }}</dd>

                        <dt class="col-md-3">Meter Reading</dt>
                        <dd class="col-md-9">{{ $expense->meter_reading ?? '—' }}</dd>

                        <dt class="col-md-3">Notes</dt>
                        <dd class="col-md-9">{{ $expense->notes ?? '—' }}</dd>

                        <dt class="col-md-3">Attachments</dt>
                        <dd class="col-md-9">
                            @php $files = is_array($expense->attachments) ? $expense->attachments : (json_decode($expense->attachments ?? '[]', true) ?: []); @endphp
                            @if (empty($files))
                                <span class="text-muted">No files.</span>
                            @else
                                <div class="d-flex flex-wrap gap-2">
                                    @foreach ($files as $path)
                                        @php
                                            $url = asset('storage/' . $path);
                                            $ext = strtolower(pathinfo($path, PATHINFO_EXTENSION));
                                            $isImg = in_array($ext, ['png', 'jpg', 'jpeg', 'gif', 'webp']);
                                            $isPdf = $ext === 'pdf';
                                        @endphp
                                        <div class="border rounded p-2 d-flex align-items-center gap-2">
                                            @if ($isImg)
                                                <img src="{{ $url }}" alt="img"
                                                    style="height:56px;width:56px;object-fit:cover;border-radius:4px;">
                                            @elseif($isPdf)
                                                <i class="far fa-file-pdf fa-2x text-danger"></i>
                                            @else
                                                <i class="far fa-file fa-2x text-secondary"></i>
                                            @endif
                                            <div class="d-flex align-items-center gap-2">
                                                <a href="{{ $url }}" target="_blank"
                                                    class="btn btn-sm btn-outline-info"><i class="far fa-eye"></i> View</a>
                                                <a href="{{ $url }}" download class="btn btn-sm btn-outline-dark">
                                                    <i class="fas fa-download"></i> Download
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </dd>
                    </dl>
                </div>
            </div>

            {{-- Print Footer (visible only when printing) --}}
            <div class="print-footer text-center mt-3">
                <hr class="mt-0">
                <small class="text-muted">
                    Printed from {{ $companyName }} — {{ now()->format('Y-m-d H:i') }}
                </small>
            </div>
        </div>
        {{-- PRINT AREA END --}}
    </div>

    {{-- Print only the content area --}}
    <script>
        function printContent() {
            const area = document.getElementById('printArea').innerHTML;
            const win = window.open('', '', 'height=900,width=800');
            win.document.write('<html><head><title>Print</title>');
            // Minimal styles for print header/footer + content
            win.document.write(`
                <style>
                    * { box-sizing: border-box; }
                    body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin: 0; padding: 16px; }
                    .text-center { text-align: center; }
                    .print-header h3 { margin: 0; }
                    .card { border: 1px solid #ddd; border-radius: 8px; }
                    .card-body { padding: 16px; }
                    dl { margin: 0; }
                    dt { font-weight: 600; }
                    .row { display: flex; flex-wrap: wrap; }
                    .col-md-3 { width: 25%; padding: 6px 8px; }
                    .col-md-9 { width: 75%; padding: 6px 8px; }
                    .border { border: 1px solid #ddd; }
                    .rounded { border-radius: 6px; }
                    .p-2 { padding: 8px; }
                    .gap-2 { gap: 8px; }
                    .d-flex { display: flex; }
                    .align-items-center { align-items: center; }
                    .mt-3 { margin-top: 1rem; }
                    .mb-0 { margin-bottom: 0; }
                    .mb-3 { margin-bottom: 1rem; }
                    .me-2 { margin-right: 0.5rem; }
                    hr { border: 0; border-top: 1px solid #ddd; }
                    /* Ensure header/footer stay within the printed page margins */
                    @page { margin: 16mm; }
                </style>
            `);
            win.document.write('</head><body>');
            win.document.write(area);
            win.document.write('</body></html>');
            win.document.close();
            win.focus();
            win.print();
            win.close();
        }
    </script>

    {{-- Screen-only styles for header/footer visibility control --}}
    <style>
        /* Hide print header/footer on screen, show only when printing via CSS (if you use Ctrl+P) */
        @media screen {

            .print-header,
            .print-footer {
                display: none;
            }
        }

        @media print {

            .print-header,
            .print-footer {
                display: block;
            }

            /* Hide action buttons on print */
            .btn,
            a.btn,
            .d-flex.gap-2 {
                display: none !important;
            }
        }
    </style>
@endsection