<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="card">
            <div class="card-header"><h5 class="mb-0"><?= e($title) ?></h5></div>
            <div class="card-body">
                <form method="POST" action="<?= e($formAction) ?>" data-ajax="true">
                    <?= csrf_field() ?>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label"><?= lang('board.term') ?> <span class="text-danger">*</span></label>
                            <select name="term_id" class="form-select" required>
                                <option value="">-- Select --</option>
                                <?php foreach ($terms as $t): ?>
                                <option value="<?= $t['id'] ?>" <?= selected($t['id'], $meeting['term_id'] ?? '') ?>><?= e($t['term_name_en']) ?></option>
                                <?php endforeach; ?>
                            </select><div class="invalid-feedback" data-field="term_id"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Committee (optional)</label>
                            <select name="committee_id" class="form-select">
                                <option value="">-- Full Board --</option>
                                <?php foreach ($committees as $c): ?>
                                <option value="<?= $c['id'] ?>" <?= selected($c['id'], $meeting['committee_id'] ?? '') ?>><?= e($c['name_en']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Meeting Type <span class="text-danger">*</span></label>
                            <select name="meeting_type" class="form-select" required>
                                <option value="regular" <?= selected('regular', $meeting['meeting_type'] ?? 'regular') ?>>Regular</option>
                                <option value="emergency" <?= selected('emergency', $meeting['meeting_type'] ?? '') ?>>Emergency</option>
                                <option value="special" <?= selected('special', $meeting['meeting_type'] ?? '') ?>>Special</option>
                                <option value="annual_general" <?= selected('annual_general', $meeting['meeting_type'] ?? '') ?>>Annual General</option>
                            </select><div class="invalid-feedback" data-field="meeting_type"></div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Title (EN) <span class="text-danger">*</span></label>
                            <input type="text" name="title_en" class="form-control" value="<?= e($meeting['title_en'] ?? '') ?>" required>
                            <div class="invalid-feedback" data-field="title_en"></div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Title (AR)</label>
                            <input type="text" name="title_ar" class="form-control" value="<?= e($meeting['title_ar'] ?? '') ?>" dir="rtl">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Date <span class="text-danger">*</span></label>
                            <input type="date" name="meeting_date" class="form-control" value="<?= e($meeting['meeting_date'] ?? '') ?>" required>
                            <div class="invalid-feedback" data-field="meeting_date"></div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Start Time</label>
                            <input type="time" name="start_time" class="form-control" value="<?= e($meeting['start_time'] ?? '') ?>">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">End Time</label>
                            <input type="time" name="end_time" class="form-control" value="<?= e($meeting['end_time'] ?? '') ?>">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Quorum Required <span class="text-danger">*</span></label>
                            <input type="number" name="quorum_required" class="form-control" value="<?= e($meeting['quorum_required'] ?? 0) ?>" min="0" required>
                            <div class="invalid-feedback" data-field="quorum_required"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Location</label>
                            <input type="text" name="location" class="form-control" value="<?= e($meeting['location'] ?? '') ?>">
                        </div>
                        <?php if ($meeting): ?>
                        <div class="col-12">
                            <label class="form-label">Minutes</label>
                            <textarea name="minutes_text" class="form-control" rows="5"><?= e($meeting['minutes_text'] ?? '') ?></textarea>
                        </div>
                        <?php endif; ?>
                        <div class="col-12">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="form-control" rows="2"><?= e($meeting['notes'] ?? '') ?></textarea>
                        </div>
                    </div>

                    <hr>
                    <h6>Agenda Items</h6>
                    <div id="agendaContainer">
                        <?php
                        $items = $agendaItems ?: [['title_en' => '', 'description' => '']];
                        foreach ($items as $idx => $ai):
                        ?>
                        <div class="row g-2 mb-2 agenda-row">
                            <div class="col-md-5">
                                <input type="text" name="agenda_title[]" class="form-control" placeholder="Agenda title" value="<?= e($ai['title_en'] ?? '') ?>">
                            </div>
                            <div class="col-md-5">
                                <input type="text" name="agenda_description[]" class="form-control" placeholder="Description (optional)" value="<?= e($ai['description'] ?? '') ?>">
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-outline-danger btn-remove-agenda w-100"><i class="fas fa-times"></i></button>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                    <button type="button" id="addAgendaBtn" class="btn btn-sm btn-outline-primary mt-2"><i class="fas fa-plus me-1"></i>Add Agenda Item</button>

                    <div class="mt-4 d-flex gap-2">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i><?= lang('common.save') ?></button>
                        <a href="/board/meetings" class="btn btn-secondary"><?= lang('common.cancel') ?></a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
document.getElementById('addAgendaBtn').addEventListener('click', function() {
    var row = document.createElement('div');
    row.className = 'row g-2 mb-2 agenda-row';
    row.innerHTML = '<div class="col-md-5"><input type="text" name="agenda_title[]" class="form-control" placeholder="Agenda title"></div><div class="col-md-5"><input type="text" name="agenda_description[]" class="form-control" placeholder="Description"></div><div class="col-md-2"><button type="button" class="btn btn-outline-danger btn-remove-agenda w-100"><i class="fas fa-times"></i></button></div>';
    document.getElementById('agendaContainer').appendChild(row);
});
document.addEventListener('click', function(e) {
    if (e.target.closest('.btn-remove-agenda')) {
        var rows = document.querySelectorAll('.agenda-row');
        if (rows.length > 1) e.target.closest('.agenda-row').remove();
    }
});
</script>
<?php $__view->endPush() ?>