@extends('layouts.dashboard')

@section('page_title', 'ACCOUNTING EXPORT')

@section('content')
<div class="ff-toolbar d-flex justify-content-between align-items-center mb-4 ff-no-print">
    <div class="d-flex align-items-center gap-3">
        <a href="{{ route('accounting.export') }}" class="btn btn-outline-secondary btn-sm"><i class="fa fa-arrow-left"></i> Back</a>
        <h5 class="m-0 fw-bold border-start ps-3 border-color"><i class="fa-solid fa-file-export text-accent me-2"></i>Accounting Export Preview</h5>
    </div>
    <div class="d-flex gap-2">
        <button type="button" onclick="window.print()" class="btn btn-outline-secondary btn-sm fw-bold"><i class="fa-solid fa-print me-1"></i> Print</button>
        <a href="{{ route('accounting.export.preview-download', ['date_from' => $rangeFrom, 'date_to' => $rangeTo]) }}" class="btn btn-warning btn-sm fw-bold"><i class="fa-solid fa-download me-1"></i> Download IIF</a>
    </div>
</div>

<div class="ff-ae-report">
    <div class="ff-ae-report-head">
        <h3 class="ff-ae-title">ACCOUNTING EXPORT PREVIEW</h3>
        <div class="ff-ae-id">PREVIEW (NOT YET EXPORTED)</div>
        <div class="ff-ae-sub">Preview of invoices in the selected date range. Nothing has been marked as exported.</div>
        <div class="ff-ae-range">From: {{ $rangeFrom ?? '—' }} &nbsp;&rsaquo;&nbsp; To: {{ $rangeTo ?? '—' }}</div>
    </div>

    <table class="ff-ae-table">
        <thead>
            <tr>
                <th style="width:80px;">Invoice #</th>
                <th style="width:70px;">Load #</th>
                <th style="width:110px;">Invoice Date</th>
                <th>Customer</th>
                <th style="width:70px;">Status</th>
                <th class="text-end" style="width:120px;">Amount</th>
                <th style="width:50px;">$</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($rows as $row)
                <tr>
                    <td>{{ $row['invoice'] }}</td>
                    <td>{{ $row['load'] }}</td>
                    <td>{{ $row['invoice_date'] }}</td>
                    <td>{{ $row['customer'] }}</td>
                    <td>
                        @if ($row['exported'])
                            <span class="ff-ae-tag ff-ae-done">Exported</span>
                        @else
                            <span class="ff-ae-tag ff-ae-new">New</span>
                        @endif
                    </td>
                    <td class="text-end">${{ number_format($row['amount'], 2) }}</td>
                    <td>{{ $row['currency'] }}</td>
                </tr>
            @empty
                <tr><td colspan="7" class="text-center text-muted py-4">No invoices found for the selected date range.</td></tr>
            @endforelse
        </tbody>
        @if ($rows->isNotEmpty())
            <tfoot>
                <tr>
                    <td colspan="5" class="text-end fw-bold">TOTAL</td>
                    <td class="text-end fw-bold">${{ number_format($total, 2) }}</td>
                    <td></td>
                </tr>
            </tfoot>
        @endif
    </table>

    @if ($rows->isNotEmpty())
        <div class="ff-ae-iif-head">QuickBooks IIF Output</div>
        <pre class="ff-ae-iif">{{ $iif }}</pre>
    @endif
</div>

<style>
    .ff-ae-report { background: #fff; color: #1f2937; border-radius: 12px; padding: 28px 32px; border: 1px solid var(--border-color); }
    .ff-ae-report-head { text-align: center; margin-bottom: 18px; }
    .ff-ae-title { font-weight: 800; letter-spacing: 0.5px; margin: 0; color: #111827; }
    .ff-ae-id { font-weight: 700; color: #111827; margin-top: 2px; }
    .ff-ae-sub { color: #dc2626; font-size: 0.85rem; margin-top: 6px; }
    .ff-ae-range { color: #6b7280; font-size: 0.8rem; margin-top: 4px; }
    .ff-ae-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 10px; }
    .ff-ae-table th { background: #1a1a1a; color: #fff; text-align: left; padding: 7px 9px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.4px; }
    .ff-ae-table td { padding: 6px 9px; border-bottom: 1px solid #eef0f3; color: #1f2937; }
    .ff-ae-table tfoot td { border-top: 2px solid #1a1a1a; border-bottom: none; background: #fff7e6; }
    .ff-ae-tag { padding: 2px 8px; border-radius: 20px; font-size: 0.68rem; font-weight: 700; }
    .ff-ae-done { background: #fee2e2; color: #b91c1c; }
    .ff-ae-new { background: #dcfce7; color: #15803d; }
    .ff-ae-iif-head { font-weight: 800; color: #111827; margin: 22px 0 6px; border-bottom: 2px solid #f3b221; padding-bottom: 4px; }
    .ff-ae-iif { background: #0f172a; color: #e2e8f0; padding: 14px; border-radius: 8px; font-size: 0.72rem; overflow-x: auto; white-space: pre; }
    @media print {
        .ff-no-print, .sidebar, .app-sidebar, nav, header, .ff-toolbar { display: none !important; }
        .ff-ae-report { border: none; padding: 0; }
        .ff-ae-iif { background: #fff; color: #111; border: 1px solid #ccc; }
        body { background: #fff !important; }
    }
</style>
@endsection