<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-lock"></i> Nouvelle Clôture de Caisse</h5>
                <a href="<?= site_url('cashboxes/closings'); ?>" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Retour
                </a>
            </div>
            <div class="card-body">
                <?= form_open('cashboxes/close' . ($selected_cashbox ? '/' . $selected_cashbox->id : '')); ?>

                <div class="row">
                    <!-- Caisse -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Caisse <span class="text-danger">*</span></label>
                        <select name="cashbox_id" class="form-select" required id="cashbox_select">
                            <option value="">-- Sélectionner --</option>
                            <?php foreach ($cashboxes as $cb): ?>
                            <option value="<?= $cb->id; ?>" 
                                data-balance="<?= $cb->current_balance; ?>"
                                <?= ($selected_cashbox && $selected_cashbox->id == $cb->id) ? 'selected' : set_select('cashbox_id', $cb->id); ?>>
                                <?= $cb->name; ?> (<?= number_format($cb->current_balance, 0, ',', ' '); ?> KMF)
                            </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <!-- Période début -->
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Début période <span class="text-danger">*</span></label>
                        <input type="date" name="period_start" class="form-control" required
                               value="<?= set_value('period_start', date('Y-m-d', strtotime('-7 days'))); ?>">
                    </div>

                    <!-- Période fin -->
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Fin période <span class="text-danger">*</span></label>
                        <input type="date" name="period_end" class="form-control" required
                               value="<?= set_value('period_end', date('Y-m-d')); ?>">
                    </div>

                    <!-- Solde initial -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Solde initial (début de période) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="number" name="opening_balance" class="form-control" 
                                   step="0.01" required
                                   value="<?= set_value('opening_balance'); ?>">
                            <span class="input-group-text">KMF</span>
                        </div>
                        <div class="form-text">Solde au début de la période de clôture.</div>
                    </div>

                    <!-- Solde final -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Solde final (calculé) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="number" name="closing_balance" class="form-control" 
                                   step="0.01" required
                                   value="<?= set_value('closing_balance'); ?>">
                            <span class="input-group-text">KMF</span>
                        </div>
                        <div class="form-text">Les entrées et sorties seront calculées automatiquement.</div>
                    </div>

                    <!-- Comptage physique -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Comptage physique</label>
                        <div class="input-group">
                            <input type="number" name="physical_count" class="form-control" 
                                   step="0.01"
                                   value="<?= set_value('physical_count'); ?>">
                            <span class="input-group-text">KMF</span>
                        </div>
                        <div class="form-text">Montant compté physiquement dans la caisse (optionnel).</div>
                    </div>

                    <!-- Notes -->
                    <div class="col-12 mb-3">
                        <label class="form-label">Notes / Observations</label>
                        <textarea name="notes" class="form-control" rows="3"><?= set_value('notes'); ?></textarea>
                    </div>
                </div>

                <div class="alert alert-info py-2">
                    <i class="bi bi-info-circle"></i>
                    La clôture sera créée en <strong>brouillon</strong>. Vous pourrez la confirmer après vérification.
                </div>

                <hr>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-lock"></i> Créer la clôture
                    </button>
                    <a href="<?= site_url('cashboxes/closings'); ?>" class="btn btn-outline-secondary">Annuler</a>
                </div>

                <?= form_close(); ?>
            </div>
        </div>
    </div>
</div>

<script>
// Pré-remplir le solde initial depuis le solde actuel de la caisse
document.getElementById('cashbox_select').addEventListener('change', function() {
    var opt = this.options[this.selectedIndex];
    var balance = opt.getAttribute('data-balance');
    if (balance) {
        // Suggestion dans le champ solde
        var openField = document.querySelector('input[name="opening_balance"]');
        if (!openField.value) openField.value = balance;
    }
});
</script>
