@extends('layouts.app')

@section('title', 'Driver Pay Out')

@section('content')
<div class="page-head">
    <div>
        <h1 class="page-title">Driver Pay Out</h1>
        <p class="page-subtitle">Prepare Canadian driver settlements for bank portal upload. Total Amount = Settlement Amount + Addition - Deficit.</p>
    </div>
    <div class="actions">
        <a class="btn" href="{{ route('driver-payouts.export') }}">Export Bank CSV</a>
    </div>
</div>

<div class="grid grid-2">
    <div class="card">
        <h2 style="margin-top:0;">Add Single Payout</h2>
        <form method="POST" action="{{ route('driver-payouts.store') }}" class="grid">
            @csrf
            <div class="form-grid">
                <div>
                    <label>Driver Name</label>
                    <input name="driver_name" value="{{ old('driver_name') }}" required>
                </div>
                <div>
                    <label>Driver Bank</label>
                    <input name="driver_bank" value="{{ old('driver_bank') }}" required>
                </div>
                <div>
                    <label>Institution No</label>
                    <input name="institution_number" value="{{ old('institution_number') }}" placeholder="003">
                </div>
                <div>
                    <label>Transit No</label>
                    <input name="transit_number" value="{{ old('transit_number') }}" placeholder="00001">
                </div>
                <div>
                    <label>Account No</label>
                    <input name="driver_account_no" value="{{ old('driver_account_no') }}" required>
                </div>
            </div>
            <div class="form-grid">
                <div>
                    <label>Settlement Amount</label>
                    <input type="number" step="0.01" min="0" name="settlement_amount" value="{{ old('settlement_amount', 0) }}" required>
                </div>
                <div>
                    <label>Date</label>
                    <input type="date" name="payout_date" value="{{ old('payout_date') }}">
                </div>
                <div>
                    <label>Deficit</label>
                    <input type="number" step="0.01" min="0" name="deficit" value="{{ old('deficit', 0) }}">
                </div>
            </div>
            <div class="form-grid two">
                <div>
                    <label>Addition</label>
                    <input type="number" step="0.01" min="0" name="addition" value="{{ old('addition', 0) }}">
                </div>
                <div style="display:flex; align-items:end;">
                    <button class="btn" type="submit">Save Payout</button>
                </div>
            </div>
        </form>
    </div>

    <div class="card">
        <h2 style="margin-top:0;">Bulk Upload</h2>
        <p class="muted">Upload CSV or XLSX with headers: driver name, driver bank, institution number, transit number, account no, settlement amount, date. Optional headers: deficit, addition.</p>
        <form method="POST" action="{{ route('driver-payouts.import') }}" enctype="multipart/form-data" class="grid">
            @csrf
            <div>
                <label>CSV / Excel File</label>
                <input type="file" name="bulk_file" accept=".csv,.txt,.xlsx" required>
            </div>
            <button class="btn" type="submit">Import Payouts</button>
        </form>
        <div class="metric" style="margin-top:16px;">
            <span>Grand Total</span>
            <strong>C${{ number_format((float) $grandTotal, 2) }}</strong>
        </div>
    </div>
</div>

<div class="card">
    <h2 style="margin-top:0;">Settlement Table</h2>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Driver Name</th>
                    <th>Driver Bank</th>
                    <th>Institution No</th>
                    <th>Transit No</th>
                    <th>Account No</th>
                    <th>Settlement Amount</th>
                    <th>Date</th>
                    <th>Deficit</th>
                    <th>Addition</th>
                    <th>Save Button</th>
                    <th>Total Amount</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                @forelse($payouts as $payout)
                    @php($formId = 'payout-form-'.$payout->id)
                    @php($deleteId = 'payout-delete-'.$payout->id)
                    <tr data-payout-row>
                        <td><input form="{{ $formId }}" name="driver_name" value="{{ $payout->driver_name }}" required></td>
                        <td><input form="{{ $formId }}" name="driver_bank" value="{{ $payout->driver_bank }}" required></td>
                        <td><input form="{{ $formId }}" name="institution_number" value="{{ $payout->institution_number }}" placeholder="003"></td>
                        <td><input form="{{ $formId }}" name="transit_number" value="{{ $payout->transit_number }}" placeholder="00001"></td>
                        <td><input form="{{ $formId }}" name="driver_account_no" value="{{ $payout->driver_account_no }}" required></td>
                        <td><input form="{{ $formId }}" data-settlement type="number" step="0.01" min="0" name="settlement_amount" value="{{ $payout->settlement_amount }}" required></td>
                        <td><input form="{{ $formId }}" type="date" name="payout_date" value="{{ optional($payout->payout_date)->format('Y-m-d') }}"></td>
                        <td><input form="{{ $formId }}" data-deficit type="number" step="0.01" min="0" name="deficit" value="{{ $payout->deficit }}"></td>
                        <td><input form="{{ $formId }}" data-addition type="number" step="0.01" min="0" name="addition" value="{{ $payout->addition }}"></td>
                        <td><button form="{{ $formId }}" class="btn small" type="submit">Save</button></td>
                        <td><strong data-total>C${{ number_format((float) $payout->total_amount, 2) }}</strong></td>
                        <td><button form="{{ $deleteId }}" class="btn small danger" type="submit" onclick="return confirm('Delete this payout row?')">Delete</button></td>
                    </tr>
                @empty
                    <tr><td colspan="12">No payout records yet. Add one or import a CSV/XLSX file.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @foreach($payouts as $payout)
        <form id="payout-form-{{ $payout->id }}" method="POST" action="{{ route('driver-payouts.update', $payout) }}" hidden>
            @csrf
            @method('PUT')
        </form>
        <form id="payout-delete-{{ $payout->id }}" method="POST" action="{{ route('driver-payouts.destroy', $payout) }}" hidden>
            @csrf
            @method('DELETE')
        </form>
    @endforeach

    <div class="pagination">{{ $payouts->links() }}</div>
</div>
@endsection

@push('scripts')
<script>
    const formatCad = value => new Intl.NumberFormat('en-CA', { style: 'currency', currency: 'CAD' }).format(value || 0);

    document.querySelectorAll('[data-payout-row]').forEach(row => {
        const settlement = row.querySelector('[data-settlement]');
        const deficit = row.querySelector('[data-deficit]');
        const addition = row.querySelector('[data-addition]');
        const total = row.querySelector('[data-total]');

        const recalc = () => {
            const settlementValue = Number(settlement.value || 0);
            const deficitValue = Number(deficit.value || 0);
            const additionValue = Number(addition.value || 0);
            total.textContent = formatCad(settlementValue + additionValue - deficitValue);
        };

        [settlement, deficit, addition].forEach(input => input.addEventListener('input', recalc));
    });
</script>
@endpush