@extends('layouts/contentLayoutMaster')

@section('title', 'Bank Book Report')

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

@section('page-style')
<style>
    .report-back { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; margin-bottom: 1rem; }

    .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; }

    .account-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 pt-2">
        <div class="card-body">
            <form id="bankBookReportForm" action="{{ route('generate.system.report', 'BANK_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>Bank 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="ao_account_id" class="form-label">Bank Account <span class="text-danger">*</span></label>
                                <select class="form-select @error('ao_account_id') is-invalid @enderror"
                                        id="ao_account_id" name="ao_account_id" required disabled>
                                    <option value="">Select area office first</option>
                                </select>
                                @error('ao_account_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <div class="account-status d-none" id="accountStatus"></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>Funds added to the 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>Transfers to petty cash wallets, expenses paid from the bank, and account 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 account. 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 bankAccounts = @json($bankAccounts);
const oldAccountId = @json(old('ao_account_id'));

document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('bankBookReportForm');
    const fromInput = document.getElementById('from_date');
    const toInput = document.getElementById('to_date');
    const areaOfficeSelect = document.getElementById('area_office_id');
    const accountSelect = document.getElementById('ao_account_id');
    const accountStatus = document.getElementById('accountStatus');
    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');

    const accountLabel = (a) => (a.title || 'Untitled')
        + (a.account_no ? ' - A/C ' + a.account_no : '')
        + (a.bank ? ' (' + a.bank + ')' : '')
        + (a.closed ? ' (Closed)' : '');

    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 updateAccountStatus() {
        const account = bankAccounts.find(a => a.id === accountSelect.value);
        if (!account) {
            accountStatus.classList.add('d-none');
            return;
        }
        accountStatus.innerHTML = account.closed
            ? '<span class="badge bg-light-secondary text-secondary">Closed account</span> history up to closure is included'
            : '<span class="badge bg-light-success text-success">Active account</span>';
        accountStatus.classList.remove('d-none');
    }

    function populateAccounts(selectedAccountId) {
        const areaOfficeId = areaOfficeSelect.value;
        accountSelect.innerHTML = '';

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

        const accounts = bankAccounts.filter(a => a.area_office_id === areaOfficeId);

        if (accounts.length === 0) {
            accountSelect.add(new Option('No bank accounts for this area office', ''));
            accountSelect.disabled = true;
            updateAccountStatus();
            return;
        }

        accountSelect.add(new Option('Select bank account', ''));
        accounts.forEach(a => {
            const option = new Option(accountLabel(a), a.id);
            option.selected = a.id === selectedAccountId;
            accountSelect.add(option);
        });
        accountSelect.disabled = false;
        updateAccountStatus();
    }

    populateAccounts(oldAccountId);
    areaOfficeSelect.addEventListener('change', () => populateAccounts(null));
    accountSelect.addEventListener('change', updateAccountStatus);

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

        if (!fromInput.value || !toInput.value || !areaOfficeSelect.value || !accountSelect.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 accountText = escapeHtml(accountSelect.options[accountSelect.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>Bank Account:</strong> ${accountText}</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