@extends('layouts.dashboard')

@section('page_title', 'BATCH INVOICING')

@section('content')
<div class="ff-toolbar d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
    <div class="d-flex align-items-center gap-3">
        <a href="{{ route('accounting.index') }}" 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">Batch Invoicing</h5>
    </div>
    <div class="d-flex align-items-center gap-2">
        <button class="btn btn-sm btn-outline-secondary"><i class="fa fa-eye me-1"></i> Preview</button>
        <button class="btn btn-sm btn-primary"><i class="fa fa-bolt me-1"></i> Generate Batch</button>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-4">
        <div class="ff-table-card">
            <h5 class="mb-3 fw-bold">Batch Options</h5>
            <div class="mb-3">
                <label class="small fw-bold text-muted mb-1">Select Customer</label>
                <select class="form-select ff-input">
                    <option>CLT International</option>
                    <option>Standard Product Inc</option>
                    <option>DUSCO DOORS LTD</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="small fw-bold text-muted mb-1">Invoice Type</label>
                <select class="form-select ff-input">
                    <option>Invoice</option>
                    <option>Invoice / Paid</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="small fw-bold text-muted mb-1">Date Range</label>
                <div class="d-flex gap-2">
                    <input type="date" class="form-control ff-input" value="2026-04-01">
                    <input type="date" class="form-control ff-input" value="{{ date('Y-m-d') }}">
                </div>
            </div>

            <div class="alert alert-info mb-0" style="background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.35); color: var(--text-main);">
                <div class="fw-bold mb-1"><i class="fa-solid fa-circle-info me-2"></i>Batch Note</div>
                <div class="small">This is a static UI preview. Backend logic will be connected later.</div>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="ff-table-card table-responsive">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="m-0 fw-bold">Loads Included</h5>
                <div class="small text-muted">3 selected</div>
            </div>

            <table class="ff-table" style="min-width: 900px;">
                <thead>
                    <tr>
                        <th width="40px"><input type="checkbox" class="form-check-input" checked></th>
                        <th>Load #</th>
                        <th>Ship Date</th>
                        <th>Customer</th>
                        <th>Driver/Carrier</th>
                        <th class="text-end">Amount</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $loads = [
                            ['load' => '233', 'date' => '2026-03-31', 'customer' => 'CLT International', 'entity' => 'Perrella Group Inc', 'amount' => '2,450.00', 'status' => 'Delivered'],
                            ['load' => '201', 'date' => '2026-02-13', 'customer' => 'CLT International', 'entity' => 'HUNA TRANSPORT INC', 'amount' => '1,950.00', 'status' => 'Delivered'],
                            ['load' => '189', 'date' => '2026-01-23', 'customer' => 'CLT International', 'entity' => 'ON ROUTE TRANSPORTATION', 'amount' => '3,120.00', 'status' => 'Delivered'],
                        ];
                    @endphp
                    @foreach($loads as $l)
                    <tr>
                        <td><input type="checkbox" class="form-check-input" checked></td>
                        <td class="fw-bold">{{ $l['load'] }}</td>
                        <td>{{ $l['date'] }}</td>
                        <td>{{ $l['customer'] }}</td>
                        <td class="text-muted small">{{ $l['entity'] }}</td>
                        <td class="text-end fw-bold">${{ $l['amount'] }}</td>
                        <td><span class="ff-badge ff-done">{{ strtoupper($l['status']) }}</span></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="d-flex justify-content-end mt-3 gap-2">
                <button class="btn btn-outline-secondary">Cancel</button>
                <button class="btn btn-primary"><i class="fa-solid fa-file-invoice me-2"></i> Create Invoices</button>
            </div>
        </div>
    </div>
</div>

<style>
    /* Dark Theme Readability Fixes */
    [data-theme="dark"] .text-muted { color: #cbd5e1 !important; opacity: 0.8; }
    [data-theme="dark"] .ff-table td.text-muted { color: #cbd5e1 !important; opacity: 1; }
    [data-theme="dark"] .ff-table .small.text-muted { color: #94a3b8 !important; }
</style>
@endsection