@extends('layouts.app')
@section('page-title', 'Field Expense Request')
@section('content')

<style>
    .expense-card .card-header {
        background: #fff;
        border-bottom: 1px solid #eef0f2;
        padding: 1.5rem 1.75rem;
    }
    .expense-card .card-header h2 {
        font-size: 1.35rem;
        font-weight: 600;
        letter-spacing: -0.01em;
    }
    .exp-step {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin: 2rem 0 1.1rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid #eef0f2;
    }
    .exp-step:first-of-type { margin-top: 0.5rem; }
    .exp-step .exp-step-num {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #eef2ff;
        color: #4f5fce;
        font-size: 0.8rem;
        font-weight: 700;
        flex-shrink: 0;
    }
    .exp-step h5 { margin: 0; font-size: 1rem; font-weight: 600; color: #2a2f3a; }
    .exp-step .exp-step-hint { font-size: 0.8rem; color: #8891a0; margin-left: auto; }
    .form-label.fw-semibold { color: #333a45; font-size: 0.9rem; }
    .required-mark { color: #dc3545; margin-left: 2px; }

    #expenseItemsTable th {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8891a0;
        background: #f8f9fb;
        border-bottom: 2px solid #eef0f2;
    }
    #expenseItemsTable td { vertical-align: top; padding: 0.85rem 0.7rem; }
    #expenseItemsTable .row-total {
        font-weight: 600;
        color: #2a2f3a;
        white-space: nowrap;
    }
    .remove-item.is-disabled { opacity: 0.3; pointer-events: none; }

    .exp-grand-total {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.6rem;
        padding: 0.85rem 1rem;
        background: #f8f9fb;
        border: 1px solid #eef0f2;
        border-radius: 8px;
        margin-top: 0.75rem;
        font-size: 0.9rem;
    }
    .exp-grand-total .amount { font-size: 1.15rem; font-weight: 700; color: #1a9f5c; }

    .exp-submit-bar {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 1.25rem;
        border-top: 1px solid #eef0f2;
    }
    .exp-submit-bar .exp-status { font-size: 0.83rem; color: #8891a0; }
    .exp-submit-bar .exp-status.ready { color: #1a9f5c; font-weight: 600; }
    #submitExpenseBtn:disabled { opacity: 0.55; cursor: not-allowed; }

    #expenseForm.is-submitting .form-control,
    #expenseForm.is-submitting .form-select,
    #expenseForm.is-submitting textarea,
    #expenseForm.is-submitting .btn:not(#submitExpenseBtn) {
        opacity: 0.55;
        pointer-events: none;
    }
    #submitExpenseBtn .spinner-border {
        width: 0.95rem;
        height: 0.95rem;
        border-width: 0.15em;
        margin-right: 0.5rem;
        vertical-align: -1px;
    }
</style>

<div class="card expense-card">
    <div class="card-header"><h2 class="mb-0">Field Expense Request</h2></div>
    <div class="card-body">
        <form method="POST" action="{{ route('field-expenses.store') }}" id="expenseForm" novalidate>
            @csrf

            <div class="row g-3">
                <div class="col-md-12">
                    <label class="form-label fw-semibold">Title<span class="required-mark">*</span></label>
                    <input type="text" class="form-control" name="title" placeholder="e.g. Nakuru County field visit — August" required>
                </div>
            </div>

            <div class="exp-step">
                <span class="exp-step-num">1</span>
                <h5>Expense Description</h5>
                <span class="exp-step-hint">What this is for and when</span>
            </div>
            <div class="row g-3">
                <div class="col-md-12">
                    <label class="form-label fw-semibold">Description</label>
                    <textarea class="form-control resize-none" name="description" rows="4" placeholder="Purpose of the trip / activity..."></textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Start Date<span class="required-mark">*</span></label>
                    <input type="date" class="form-control" name="start_date" id="startDateInput" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">End Date<span class="required-mark">*</span></label>
                    <input type="date" class="form-control" name="end_date" id="endDateInput" required disabled>
                </div>
            </div>

            <div class="exp-step">
                <span class="exp-step-num">2</span>
                <h5>Expense Breakdown</h5>
                <span class="exp-step-hint">Add every item you need funds for</span>
            </div>
            <div class="table-responsive mb-2">
                <table class="table table-bordered align-middle" id="expenseItemsTable">
                    <thead>
                        <tr>
                            <th style="width: 16%;">Type<span class="required-mark">*</span></th>
                            <th style="width: 13%;">Amount (KES)<span class="required-mark">*</span></th>
                            <th style="width: 10%;">Units<span class="required-mark">*</span></th>
                            <th style="width: 14%;">Unit Type<span class="required-mark">*</span></th>
                            <th style="width: 24%;">Description</th>
                            <th style="width: 13%;">Total</th>
                            <th style="width: 10%;">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <button type="button" class="btn btn-outline-secondary btn-sm" id="addItemBtn">
                    <i class="fas fa-plus"></i> Add Expense Item
                </button>
            </div>

            <div class="exp-grand-total">
                <span class="text-muted">Total requested</span>
                <span class="amount" id="grandTotalDisplay">KES 0</span>
            </div>

            <div class="exp-submit-bar">
                <button type="submit" class="btn btn-primary" id="submitExpenseBtn" disabled>
                    Submit Request
                </button>
                <span class="exp-status" id="expStatusText">Complete all required fields to continue</span>
            </div>

        </form>
    </div>
</div>

<script>
    // ════════════════════════════════════
    // EXPENSE TYPE / UNIT TYPE OPTIONS
    // ════════════════════════════════════
    const EXPENSE_TYPES = ['DSA', 'Miscellaneous', 'Stationery', 'Venue', 'Transport', 'Others','Vehicle','Hired-Vehicle','Fuel'];
    const UNIT_TYPES     = ['days', 'Equipment', 'Machinery', 'Building', 'others','Trips','Liters'];

    let itemRowCounter = 0;

    function moneyFormat(n) {
        return 'KES ' + (Number(n) || 0).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 });
    }

    function optionsHtml(list, placeholder) {
        let html = `<option value="">${placeholder}</option>`;
        list.forEach(v => { html += `<option value="${v}">${v}</option>`; });
        return html;
    }

    // ════════════════════════════════════
    // CREATE AN EXPENSE ITEM ROW
    // ════════════════════════════════════
    function createItemRow() {
        const rowIndex = itemRowCounter++;
        const tr = document.createElement('tr');

        tr.innerHTML = `
            <td>
                <select class="form-select item-expense-type" name="expense_type[]" required>
                    ${optionsHtml(EXPENSE_TYPES, '-- Select type --')}
                </select>
            </td>
            <td>
                <input type="number" class="form-control item-amount" name="amount[]" min="0" step="0.01" required>
            </td>
            <td>
                <input type="number" class="form-control item-units" name="units[]" min="0.01" step="0.01" value="1" required>
            </td>
            <td>
                <select class="form-select item-unit-type" name="unit_type[]" required>
                    ${optionsHtml(UNIT_TYPES, '-- Select unit --')}
                </select>
            </td>
            <td>
                <textarea class="form-control" name="item_description[]" rows="1" placeholder="Notes..."></textarea>
            </td>
            <td class="row-total" data-row-total>KES 0</td>
            <td>
                <button type="button" class="btn btn-danger btn-sm remove-item" title="Remove">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;

        const amountInput = tr.querySelector('.item-amount');
        const unitsInput  = tr.querySelector('.item-units');
        const totalCell   = tr.querySelector('[data-row-total]');

        function recalcRow() {
            const amount = parseFloat(amountInput.value) || 0;
            const units  = parseFloat(unitsInput.value) || 0;
            totalCell.textContent = moneyFormat(amount * units);
            recalcGrandTotal();
        }

        amountInput.addEventListener('input', function () { recalcRow(); validateExpenseForm(); });
        unitsInput.addEventListener('input', function () { recalcRow(); validateExpenseForm(); });

        tr.querySelector('.remove-item').addEventListener('click', function () {
            if (document.querySelectorAll('#expenseItemsTable tbody tr').length <= 1) return;
            tr.remove();
            updateRemoveButtonsState();
            recalcGrandTotal();
            validateExpenseForm();
        });

        return tr;
    }

    // ════════════════════════════════════
    // GRAND TOTAL
    // ════════════════════════════════════
    function recalcGrandTotal() {
        let total = 0;
        document.querySelectorAll('#expenseItemsTable tbody tr').forEach(function (row) {
            const amount = parseFloat(row.querySelector('.item-amount').value) || 0;
            const units  = parseFloat(row.querySelector('.item-units').value) || 0;
            total += amount * units;
        });
        document.getElementById('grandTotalDisplay').textContent = moneyFormat(total);
    }

    // ════════════════════════════════════
    // REMOVE BUTTON STATE — keep at least one row
    // ════════════════════════════════════
    function updateRemoveButtonsState() {
        const rows = document.querySelectorAll('#expenseItemsTable tbody tr');
        const onlyOneRow = rows.length <= 1;
        rows.forEach(function (row) {
            const btn = row.querySelector('.remove-item');
            if (btn) {
                btn.classList.toggle('is-disabled', onlyOneRow);
                btn.disabled = onlyOneRow;
                btn.title = onlyOneRow ? 'At least one item is required' : 'Remove';
            }
        });
    }

    // ════════════════════════════════════
    // END DATE MIN BOUND — can't end before it starts
    // ════════════════════════════════════
    function applyEndDateBounds() {
        const startInput = document.getElementById('startDateInput');
        const endInput   = document.getElementById('endDateInput');
        if (!startInput.value) {
            endInput.value = '';
            endInput.disabled = true;
            return;
        }
        endInput.disabled = false;
        endInput.min = startInput.value;
        if (endInput.value && endInput.value < startInput.value) {
            endInput.value = startInput.value;
        }
    }

    // ════════════════════════════════════
    // FORM-WIDE VALIDATION / SUBMIT BUTTON STATE
    // ════════════════════════════════════
    function validateExpenseForm() {
        const form = document.getElementById('expenseForm');
        const submitBtn = document.getElementById('submitExpenseBtn');
        const statusText = document.getElementById('expStatusText');

        const nativeValid = form.checkValidity();
        const hasRows = document.querySelectorAll('#expenseItemsTable tbody tr').length > 0;

        const isReady = nativeValid && hasRows;

        submitBtn.disabled = !isReady;
        if (isReady) {
            statusText.textContent = 'All set — ready to submit';
            statusText.classList.add('ready');
        } else {
            statusText.textContent = 'Complete all required fields to continue';
            statusText.classList.remove('ready');
        }
        return isReady;
    }

    // ════════════════════════════════════
    // DOM READY
    // ════════════════════════════════════
    document.addEventListener('DOMContentLoaded', function () {
        const form           = document.getElementById('expenseForm');
        const tableBody      = document.querySelector('#expenseItemsTable tbody');
        const addBtn         = document.getElementById('addItemBtn');
        const startDateInput = document.getElementById('startDateInput');
        const endDateInput   = document.getElementById('endDateInput');

        startDateInput.addEventListener('change', function () {
            applyEndDateBounds();
            validateExpenseForm();
        });
        endDateInput.addEventListener('change', validateExpenseForm);

        addBtn.addEventListener('click', function () {
            tableBody.appendChild(createItemRow());
            updateRemoveButtonsState();
            recalcGrandTotal();
            validateExpenseForm();
        });

        form.addEventListener('input', validateExpenseForm);
        form.addEventListener('change', validateExpenseForm);

        // ════════════════════════════════════
        // SUBMIT: show loader, lock the form, prevent double-submit
        // ════════════════════════════════════
        let isSubmitting = false;
        const submitBtn = document.getElementById('submitExpenseBtn');

        form.addEventListener('submit', function (e) {
            if (isSubmitting) { e.preventDefault(); return; }
            if (!validateExpenseForm()) { e.preventDefault(); return; }

            isSubmitting = true;
            form.classList.add('is-submitting');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Submitting…';
        });

        // Start with one empty row
        tableBody.appendChild(createItemRow());
        updateRemoveButtonsState();
        applyEndDateBounds();
        validateExpenseForm();
    });
</script>
@endsection