<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><?= lang('finance.fiscal_years') ?></h4>
    <?php if (auth_can('invoices.create')): ?>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fy-modal"><i class="fas fa-plus me-1"></i><?= lang('common.create') ?></button>
    <?php endif; ?>
</div>

<?php foreach ($years as $year): ?>
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h6 class="mb-0"><?= e($year['name_en']) ?> (<?= e($year['year_code']) ?>) — <?= format_date($year['start_date']) ?> to <?= format_date($year['end_date']) ?></h6>
        <?= status_badge($year['status']) ?>
    </div>
    <div class="card-body">
        <?php if (!empty($periods[$year['id']])): ?>
        <table class="table table-sm mb-0">
            <thead><tr><th>#</th><th>Name (EN)</th><th>Start</th><th>End</th><th>Status</th></tr></thead>
            <tbody>
            <?php foreach ($periods[$year['id']] as $p): ?>
            <tr>
                <td><?= $p['period_number'] ?></td>
                <td><?= e($p['name_en']) ?></td>
                <td><?= format_date($p['start_date']) ?></td>
                <td><?= format_date($p['end_date']) ?></td>
                <td><?= status_badge($p['status']) ?></td>
            </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
        <?php else: ?>
        <p class="text-muted mb-0">No periods defined yet.</p>
        <?php endif; ?>
    </div>
</div>
<?php endforeach; ?>

<?php if (empty($years)): ?>
<div class="card"><div class="card-body text-center py-5 text-muted"><i class="fas fa-calendar-alt fa-3x mb-3"></i><p>No fiscal years configured.</p></div></div>
<?php endif; ?>

<!-- Modal -->
<div class="modal fade" id="fy-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="/finance/fiscal-years" data-ajax="true">
                <?= csrf_field() ?>
                <div class="modal-header"><h5 class="modal-title">New Fiscal Year</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <div class="mb-3"><label class="form-label">Year Code <span class="text-danger">*</span></label><input type="text" name="year_code" class="form-control" placeholder="FY-2026" required></div>
                    <div class="mb-3"><label class="form-label">Name (EN) <span class="text-danger">*</span></label><input type="text" name="name_en" class="form-control" required></div>
                    <div class="mb-3"><label class="form-label">Name (AR) <span class="text-danger">*</span></label><input type="text" name="name_ar" class="form-control" required></div>
                    <div class="row">
                        <div class="col-6 mb-3"><label class="form-label">Start Date <span class="text-danger">*</span></label><input type="date" name="start_date" class="form-control" required></div>
                        <div class="col-6 mb-3"><label class="form-label">End Date <span class="text-danger">*</span></label><input type="date" name="end_date" class="form-control" required></div>
                    </div>
                    <div class="mb-3"><label class="form-label">Status</label><select name="status" class="form-select"><option value="planning">Planning</option><option value="open">Open</option></select></div>
                </div>
                <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button><button type="submit" class="btn btn-primary">Save</button></div>
            </form>
        </div>
    </div>
</div>