@extends('layouts/contentLayoutMaster')

@section('title', 'Expense Petty Cash Book Report')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
@endsection

@section('page-style')
<style>
    .report-page { --rs-color: 255, 159, 67; }

    .report-back { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; margin-bottom: 1rem; }

    .report-hero { display: flex; align-items: center; gap: 1rem; }
    .report-hero__icon { flex: 0 0 52px; height: 52px; border-radius: .6rem; display: flex; align-items: center;
        justify-content: center; font-size: 1.35rem; background: rgba(var(--rs-color), .12); color: rgb(var(--rs-color)); }
    .report-hero h3 { margin: 0; font-weight: 600; }
    .report-hero p { margin: .2rem 0 0; opacity: .7; }

    .form-step { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
    .form-step__num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
        justify-content: center; font-size: .8rem; font-weight: 600; background: rgba(115, 103, 240, .12); color: #7367f0; }
    .form-step h5 { margin: 0; font-weight: 600; }

    .date-presets { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
    .date-presets .btn { border-radius: 2rem; padding: .25rem .8rem; font-size: .8rem; }

    .wallet-status { margin-top: .5rem; font-size: .8rem; }

    .report-info { border-radius: .5rem; padding: 1.1rem 1.2rem; background: rgba(34, 41, 47, .03);
        border: 1px solid rgba(34, 41, 47, .08); }
    .report-info h6 { font-weight: 600; margin-bottom: .9rem; }
    .report-info__row { display: flex; gap: .7rem; margin-bottom: .9rem; font-size: .85rem; line-height: 1.4; }
    .report-info__row:last-child { margin-bottom: 0; }
    .report-info__badge { flex: 0 0 auto; height: fit-content; font-size: .7rem; font-weight: 600; padding: .2rem .5rem; border-radius: .3rem; }
    .report-info__badge--debit { background: rgba(40, 199, 111, .12); color: #28c76f; }
    .report-info__badge--credit { background: rgba(234, 84, 85, .12); color: #ea5455; }
    .report-info__badge--note { background: rgba(0, 207, 232, .12); color: #00cfe8; }

    .report-actions { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; border-top: 1px solid rgba(34, 41, 47, .08);
        padding-top: 1.25rem; margin-top: 1.5rem; }

    .dark-layout .report-info { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
    .dark-layout .report-actions { border-top-color: rgba(255, 255, 255, .08); }
</style>
@endsection

@section('content')
<section class="report-page">

    <a href="{{ route('system.reports') }}" class="report-back">
        <i class="fa-solid fa-arrow-left"></i> All Reports
    </a>

    {{-- <div class="card">
        <div class="card-body">
            <div class="report-hero">
                <span class="report-hero__icon"><i class="fa-solid fa-wallet"></i></span>
                <div>
                    <h3>Expense Petty Cash Book</h3>
                    <p>Petty cash wallet ledger with opening balance, transactions and running balance.</p>
                </div>
            </div>
        </div>
    </div> --}}

    <div class="card pt-2">
        <div class="card-body">
            <form id="pettyCashBookReportForm" action="{{ route('generate.system.report', 'PETTY_CASH_BOOK_REPORT') }}" method="POST" novalidate>
                @csrf

                <div class="row g-2">
                    <div class="col-lg-7">

                        {{-- Step 1: period --}}
                        <div class="form-step">
                            <span class="form-step__num">1</span>
                            <h5>Report Period</h5>
                        </div>
                        <div class="row g-1">
                            <div class="col-sm-6">
                                <label for="from_date" class="form-label">From Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('from_date') is-invalid @enderror"
                                       id="from_date" name="from_date" value="{{ old('from_date') }}" required>
                                @error('from_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="to_date" class="form-label">To Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('to_date') is-invalid @enderror"
                                       id="to_date" name="to_date" value="{{ old('to_date') }}" required>
                                @error('to_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="date-presets">
                            <button type="button" class="btn btn-outline-secondary" data-preset="this-month">This month</button>
                            <button type="button" class="btn btn-outline-secondary" data-preset="last-month">Last month</button>
                            <button type="button" class="btn btn-outline-secondary" data-preset="this-year">This year</button>
                        </div>

                        {{-- Step 2: account --}}
                        <div class="form-step mt-2">
                            <span class="form-step__num">2</span>
                            <h5>Cash Account</h5>
                        </div>
                        <div class="row g-1">
                            <div class="col-sm-6">
                                <label for="area_office_id" class="form-label">Area Office <span class="text-danger">*</span></label>
                                <select class="form-select @error('area_office_id') is-invalid @enderror"
                                        id="area_office_id" name="area_office_id" required>
                                    <option value="">Select area office</option>
                                    @foreach($areaOffices as $ao)
                                        <option value="{{ $ao->_id }}" {{ old('area_office_id') == $ao->_id ? 'selected' : '' }}>
                                            {{ $ao->ao_name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('area_office_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6">
                                <label for="petty_cash_wallet_id" class="form-label">Petty Cash Wallet <span class="text-danger">*</span></label>
                                <select class="form-select @error('petty_cash_wallet_id') is-invalid @enderror"
                                        id="petty_cash_wallet_id" name="petty_cash_wallet_id" required disabled>
                                    <option value="">Select area office first</option>
                                </select>
                                @error('petty_cash_wallet_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <div class="wallet-status d-none" id="walletStatus"></div>
                            </div>
                        </div>
                    </div>

                    {{-- Help panel --}}
                    <div class="col-lg-5 align-self-center">
                        <div class="report-info">
                            <h6><i class="fa-regular fa-circle-question me-50"></i>About this report</h6>
                            <div class="report-info__row">
                                <span class="report-info__badge report-info__badge--debit">DEBIT</span>
                                <span>Amounts received from bank, and refunds of rejected or reverted expense claims.</span>
                            </div>
                            <div class="report-info__row">
                                <span class="report-info__badge report-info__badge--credit">CREDIT</span>
                                <span>Expenses paid from the wallet, and wallet closure.</span>
                            </div>
                            <div class="report-info__row">
                                <span class="report-info__badge report-info__badge--note">NOTE</span>
                                <span>Transactions are dated by when they were posted to the wallet. The report is generated in the background and appears under report statuses.</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="report-actions">
                    <a href="{{ route('system.reports') }}" class="btn btn-outline-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary" id="generateBtn">
                        <i class="fa-solid fa-file-excel me-50"></i> Generate Report
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@section('vendor-script')
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
@endsection

@section('page-script')
<script>
const pettyCashWallets = @json($pettyCashWallets);
const oldWalletId = @json(old('petty_cash_wallet_id'));

document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('pettyCashBookReportForm');
    const fromInput = document.getElementById('from_date');
    const toInput = document.getElementById('to_date');
    const areaOfficeSelect = document.getElementById('area_office_id');
    const walletSelect = document.getElementById('petty_cash_wallet_id');
    const walletStatus = document.getElementById('walletStatus');
    const generateBtn = document.getElementById('generateBtn');

    // Local-date formatting; toISOString() would shift the day for UTC+ timezones
    const fmt = (d) => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');

    document.querySelectorAll('[data-preset]').forEach(btn => {
        btn.addEventListener('click', () => {
            const now = new Date();
            let from, to;
            if (btn.dataset.preset === 'this-month') {
                from = new Date(now.getFullYear(), now.getMonth(), 1);
                to = now;
            } else if (btn.dataset.preset === 'last-month') {
                from = new Date(now.getFullYear(), now.getMonth() - 1, 1);
                to = new Date(now.getFullYear(), now.getMonth(), 0);
            } else {
                from = new Date(now.getFullYear(), 0, 1);
                to = now;
            }
            fromInput.value = fmt(from);
            toInput.value = fmt(to);
        });
    });

    function updateWalletStatus() {
        const wallet = pettyCashWallets.find(w => w.id === walletSelect.value);
        if (!wallet) {
            walletStatus.classList.add('d-none');
            return;
        }
        walletStatus.innerHTML = wallet.closed
            ? '<span class="badge bg-light-secondary text-secondary">Closed wallet</span> history up to closure is included'
            : '<span class="badge bg-light-success text-success">Active wallet</span>';
        walletStatus.classList.remove('d-none');
    }

    function populateWallets(selectedWalletId) {
        const areaOfficeId = areaOfficeSelect.value;
        walletSelect.innerHTML = '';

        if (!areaOfficeId) {
            walletSelect.add(new Option('Select area office first', ''));
            walletSelect.disabled = true;
            updateWalletStatus();
            return;
        }

        const wallets = pettyCashWallets.filter(w => w.area_office_id === areaOfficeId);

        if (wallets.length === 0) {
            walletSelect.add(new Option('No wallets for this area office', ''));
            walletSelect.disabled = true;
            updateWalletStatus();
            return;
        }

        walletSelect.add(new Option('Select wallet', ''));
        wallets.forEach(w => {
            const option = new Option(w.title + (w.closed ? ' (Closed)' : ''), w.id);
            option.selected = w.id === selectedWalletId;
            walletSelect.add(option);
        });
        walletSelect.disabled = false;
        updateWalletStatus();
    }

    populateWallets(oldWalletId);
    areaOfficeSelect.addEventListener('change', () => populateWallets(null));
    walletSelect.addEventListener('change', updateWalletStatus);

    form.addEventListener('submit', function (e) {
        e.preventDefault();

        if (!fromInput.value || !toInput.value || !areaOfficeSelect.value || !walletSelect.value) {
            Swal.fire({ icon: 'error', title: 'Missing details', text: 'Please fill in all required fields.',
                customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false });
            return;
        }

        if (toInput.value < fromInput.value) {
            Swal.fire({ icon: 'error', title: 'Invalid period', text: 'To Date must be on or after From Date.',
                customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false });
            return;
        }

        const escapeHtml = (s) => s.replace(/[&<>"']/g, c => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'}[c]));
        const areaOfficeText = escapeHtml(areaOfficeSelect.options[areaOfficeSelect.selectedIndex].text.trim());
        const walletText = escapeHtml(walletSelect.options[walletSelect.selectedIndex].text.trim());

        Swal.fire({
            title: 'Generate report?',
            html: `<div style="text-align: left; font-size: .95rem;">
                        <p class="mb-50"><strong>Period:</strong> ${fromInput.value} to ${toInput.value}</p>
                        <p class="mb-50"><strong>Area Office:</strong> ${areaOfficeText}</p>
                        <p class="mb-1"><strong>Wallet:</strong> ${walletText}</p>
                        <small class="text-muted">The report is generated in the background. You will be taken to the report statuses page.</small>
                    </div>`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Generate',
            cancelButtonText: 'Cancel',
            customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-outline-secondary ms-1' },
            buttonsStyling: false
        }).then((result) => {
            if (result.isConfirmed) {
                generateBtn.disabled = true;
                generateBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-50"></span> Generating...';
                form.submit();
            }
        });
    });
});
</script>
@endsection