<?php
// =============================================
// VUE - application/views/caisse/confirmation_modification.php
// Formulaire pour encaisser les frais de modification
// =============================================
?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-pencil-square text-warning"></i> Frais de Modification</h2>
    <a href="<?= base_url('caisse') ?>" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> Retour Caisse
    </a>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">Encaisser Frais de Modification</h5>
            </div>
            <div class="card-body">
                <table class="table table-borderless">
                    <tr>
                        <td><strong>Billet:</strong></td>
                        <td><?= $billet->numero_billet ?></td>
                    </tr>
                    <tr>
                        <td><strong>Passager:</strong></td>
                        <td><?= $billet->nom ?> <?= $billet->prenom ?></td>
                    </tr>
                    <tr>
                        <td><strong>Téléphone:</strong></td>
                        <td><?= $billet->telephone ?: '-' ?></td>
                    </tr>
                    <tr>
                        <td><strong>Voyage:</strong></td>
                        <td>
                            <?= $billet->numero_voyage ?><br>
                            <small><?= $billet->port_depart ?> → <?= $billet->port_arrivee ?></small><br>
                            <small><?= date('d/m/Y', strtotime($billet->date_voyage)) ?> <?= $billet->heure_depart ?></small>
                        </td>
                    </tr>
                </table>
                
                <hr>
                
                <div class="text-center mb-4">
                    <span class="text-muted">Frais de modification</span>
                    <h2 class="text-warning"><?= number_format($billet->frais_modification) ?> FC</h2>
                </div>
                
                <?= form_open('caisse/confirmer_paiement_modification/' . $billet->id) ?>
                
                <div class="mb-3">
                    <label class="form-label">Mode de Paiement *</label>
                    <select class="form-select" name="mode_paiement" id="mode_paiement" required onchange="toggleMontantRecu()">
                        <option value="ESPECES">Espèces</option>
                        <option value="MOBILE_MONEY">Mobile Money</option>
                        <option value="CARTE">Carte Bancaire</option>
                        <option value="VIREMENT">Virement</option>
                    </select>
                </div>
                
                <div class="mb-3" id="montant_recu_section">
                    <label class="form-label">Montant Reçu (FC)</label>
                    <input type="number" class="form-control" name="montant_recu" id="montant_recu" 
                           placeholder="<?= $billet->frais_modification ?>" onchange="calculerMonnaie()">
                    <div id="monnaie_display" class="form-text text-success" style="display:none;"></div>
                </div>
                
                <div class="mb-3" id="numero_transaction_section" style="display:none;">
                    <label class="form-label">Référence Transaction</label>
                    <input type="text" class="form-control" name="numero_transaction" placeholder="Numéro de référence">
                </div>
                
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-success btn-lg">
                        <i class="bi bi-check-circle"></i> Encaisser <?= number_format($billet->frais_modification) ?> FC
                    </button>
                    <a href="<?= base_url('caisse') ?>" class="btn btn-secondary">Annuler</a>
                </div>
                
                <?= form_close() ?>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Information</h5>
            </div>
            <div class="card-body">
                <p>Ce billet a été modifié et des frais de modification s'appliquent.</p>
                <p>Une fois le paiement effectué :</p>
                <ul>
                    <li>Le billet passera de <span class="badge bg-secondary">EMIS</span> à <span class="badge bg-success">PAYE</span></li>
                    <li>Le passager pourra s'enregistrer normalement</li>
                </ul>
                
                <hr>
                
                <h6>Tarif initial du billet</h6>
                <p class="text-muted"><?= number_format($billet->tarif_total) ?> FC (déjà payé)</p>
            </div>
        </div>
    </div>
</div>

<script>
const fraisModification = <?= $billet->frais_modification ?>;

function toggleMontantRecu() {
    const mode = document.getElementById('mode_paiement').value;
    const montantSection = document.getElementById('montant_recu_section');
    const transactionSection = document.getElementById('numero_transaction_section');
    
    if (mode === 'ESPECES') {
        montantSection.style.display = 'block';
        transactionSection.style.display = 'none';
    } else {
        montantSection.style.display = 'none';
        transactionSection.style.display = 'block';
    }
}

function calculerMonnaie() {
    const montantRecu = parseFloat(document.getElementById('montant_recu').value) || 0;
    const monnaieDisplay = document.getElementById('monnaie_display');
    
    if (montantRecu >= fraisModification) {
        const monnaie = montantRecu - fraisModification;
        if (monnaie > 0) {
            monnaieDisplay.textContent = 'Monnaie à rendre: ' + monnaie.toLocaleString() + ' FC';
            monnaieDisplay.style.display = 'block';
        } else {
            monnaieDisplay.style.display = 'none';
        }
    } else if (montantRecu > 0) {
        monnaieDisplay.textContent = 'Montant insuffisant !';
        monnaieDisplay.className = 'form-text text-danger';
        monnaieDisplay.style.display = 'block';
    } else {
        monnaieDisplay.style.display = 'none';
    }
}
</script>