{{-- Budget Modals --}}

{{-- Create/Edit Budget Modal --}}
<div class="modal fade" id="budgetModal" tabindex="-1" aria-labelledby="budgetModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="budgetModalLabel">Create New Budget</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="budgetForm" method="POST" action="{{ route('accounting.budgets.store') }}">
                @csrf
                <input type="hidden" id="budgetId" name="id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="budgetAccountId" class="form-label">Account <span class="text-danger">*</span></label>
                        <select class="form-select" id="budgetAccountId" name="account_id" required>
                            <option value="">Select Account</option>
                            @isset($accounts)
                                @foreach($accounts as $account)
                                    <option value="{{ $account->id }}">{{ $account->code }} - {{ $account->name }}</option>
                                @endforeach
                            @endisset
                        </select>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="budgetFiscalYear" class="form-label">Fiscal Year <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="budgetFiscalYear" name="fiscal_year" value="{{ date('Y') }}" min="2000" max="2100" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="budgetPeriod" class="form-label">Period <span class="text-danger">*</span></label>
                            <select class="form-select" id="budgetPeriod" name="period" required>
                                <option value="monthly">Monthly</option>
                                <option value="quarterly">Quarterly</option>
                                <option value="yearly">Yearly</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="budgetAmount" class="form-label">Budget Amount (UGX) <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="budgetAmount" name="amount" step="1000" min="0" required>
                    </div>

                    <div class="mb-3">
                        <label for="budgetNotes" class="form-label">Notes</label>
                        <textarea class="form-control" id="budgetNotes" name="notes" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Budget</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- View Budget Modal --}}
<div class="modal fade" id="viewBudgetModal" tabindex="-1" aria-labelledby="viewBudgetModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewBudgetModalLabel">Budget Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="viewBudgetContent">
                {{-- Content loaded dynamically --}}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- Variance Analysis Modal --}}
<div class="modal fade" id="varianceModal" tabindex="-1" aria-labelledby="varianceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="varianceModalLabel">Budget Variance Analysis</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="varianceContent">
                {{-- Content loaded dynamically --}}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" onclick="exportVariance()">Export Report</button>
            </div>
        </div>
    </div>
</div>