@extends('layouts.details')

@section('content')
<div class="container mx-auto">
    <br>
    <!--h1 class="text-2xl font-bold my-4">Démonstration de Paiement PLENIPAY</h1-->
    <h2 class="text-center font-bold">Démonstration de Paiement PLENIPAY</h2>
    <div id="step1" class="step active">
        <h3>Étape 1: Sélectionner le Montant et la Devise</h3>
        <form id="step1-form">
            <div class="form-group">
                <label for="montant">Montant</label>
                <input type="number" id="montant" class="form-control" min="1" required>
            </div>
            <div class="form-group">
                <label for="devise">Choisir la Devise</label>
                <select id="devise" class="form-control" required>
                    <option value="FCFA" data-symbol="CFA">FCFA</option>
                    <option value="EUR" data-symbol="€">EURO</option>
                    <option value="USD" data-symbol="$">USD</option>
                    <option value="GBP" data-symbol="£">GBP</option>
                    <option value="JPY" data-symbol="¥">JPY</option>
                    <option value="CAD" data-symbol="C$">CAD</option>
                </select>
            </div>
            <button type="button" class="btn btn-primary btn-next" onclick="nextStep(1)">Suivant</button>
        </form>
    </div>

    <div id="step2" class="step">
        <h3>Étape 2: Choisir le Mode de Paiement</h3>
        <form id="step2-form">
            <div class="form-group">
                <label for="mode">Mode de paiement</label>
                <select class="form-control" id="mode" required onchange="updatePaymentMethod()">
                    <option value="Carte">Carte bancaire</option>
                    <option value="Mobile">Paiement mobile</option>
                    <option value="Virement">Virement bancaire</option>
                    <option value="Paypal">Paypal</option>
                    <option value="Transfert">Transfert d'argent</option>
                </select>
            </div>
            <button type="button" class="btn btn-secondary btn-back" onclick="prevStep(2)">Précédent</button>
            <button type="button" class="btn btn-primary btn-next" onclick="nextStep(2)">Suivant</button>
        </form>
    </div>
    
    <div id="step3" class="step">
        <h3>Étape 3: Saisir les Détails du Paiement</h3>
        <div id="payment-details">
            <div id="mobile-payment" class="payment-method">
                <div class="form-group">
                    <label for="operator">Choisir l'opérateur</label>
                    <select class="form-control" id="operator" required>
                        <optgroup label="Côte d'Ivoire">
                            <option value="orange-money-ci" data-image="https://flagcdn.com/w320/ci.png">
                                <img src="https://flagcdn.com/w320/ci.png" style="width: 20px; margin-right: 10px;" /> Orange Money
                            </option>
                            <option value="mtn-money-ci" data-image="https://flagcdn.com/w320/ci.png">
                                <img src="https://flagcdn.com/w320/ci.png" style="width: 20px; margin-right: 10px;" /> MTN Money
                            </option>
                            <option value="wave-ci" data-image="https://flagcdn.com/w320/ci.png">
                                <img src="https://flagcdn.com/w320/ci.png" style="width: 20px; margin-right: 10px;" /> Wave
                            </option>
                        </optgroup>
            
                        <optgroup label="Burkina Faso">
                            <option value="orange-money-bf" data-image="https://flagcdn.com/w320/bf.png">
                                <img src="https://flagcdn.com/w320/bf.png" style="width: 20px; margin-right: 10px;" /> Orange Money
                            </option>
                            <option value="mtn-money-bf" data-image="https://flagcdn.com/w320/bf.png">
                                <img src="https://flagcdn.com/w320/bf.png" style="width: 20px; margin-right: 10px;" /> MTN Money
                            </option>
                            <option value="wave-bf" data-image="https://flagcdn.com/w320/bf.png">
                                <img src="https://flagcdn.com/w320/bf.png" style="width: 20px; margin-right: 10px;" /> Wave
                            </option>
                        </optgroup>
            
                        <optgroup label="Sénégal">
                            <option value="orange-money-sn" data-image="https://flagcdn.com/w320/sn.png">
                                <img src="https://flagcdn.com/w320/sn.png" style="width: 20px; margin-right: 10px;" /> Orange Money
                            </option>
                            <option value="mtn-money-sn" data-image="https://flagcdn.com/w320/sn.png">
                                <img src="https://flagcdn.com/w320/sn.png" style="width: 20px; margin-right: 10px;" /> MTN Money
                            </option>
                            <option value="wave-sn" data-image="https://flagcdn.com/w320/sn.png">
                                <img src="https://flagcdn.com/w320/sn.png" style="width: 20px; margin-right: 10px;" /> Wave
                            </option>
                        </optgroup>
            
                        <optgroup label="Autres pays">
                            <option value="moov" data-image="https://flagcdn.com/w320/ci.png">
                                <img src="https://flagcdn.com/w320/ci.png" style="width: 20px; margin-right: 10px;" /> Moov
                            </option>
                            <option value="togocel" data-image="https://flagcdn.com/w320/tg.png">
                                <img src="https://flagcdn.com/w320/tg.png" style="width: 20px; margin-right: 10px;" /> Togocel
                            </option>
                            <option value="airtel" data-image="https://flagcdn.com/w320/ci.png">
                                <img src="https://flagcdn.com/w320/ci.png" style="width: 20px; margin-right: 10px;" /> Airtel
                            </option>
                            <option value="free" data-image="https://flagcdn.com/w320/fr.png">
                                <img src="https://flagcdn.com/w320/fr.png" style="width: 20px; margin-right: 10px;" /> Free
                            </option>
                        </optgroup>
                    </select>
                </div>
                <div class="form-group">
                    <label for="phone-number">Numéro de téléphone</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="country-flag"><img src="https://flagcdn.com/w320/ci.png" style="width: 20px;" /></span>
                        </div>
                        <input type="text" id="phone-number" class="form-control" required>
                    </div>
                </div>
            </div>
            <div id="account-payment" class="payment-method" style="display: none;">
                <div class="form-group">
                    <label for="account-number">Numéro de compte</label>
                    <input type="text" id="account-number" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="iban">IBAN</label>
                    <input type="text" id="iban" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="bank-name">Nom de la banque</label>
                    <input type="text" id="bank-name" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="bank-address">Adresse de la banque</label>
                    <input type="text" id="bank-address" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="swift-code">Code SWIFT</label>
                    <input type="text" id="swift-code" class="form-control" required>
                </div>
            </div>
            <div id="paypal-payment" class="payment-method" style="display: none;">
                <div class="form-group">
                    <label for="paypal-email">Email PayPal</label>
                    <input type="email" id="paypal-email" class="form-control" required>
                </div>
            </div>
            <div id="transfer-payment" class="payment-method" style="display: none;">
                <div class="form-group">
                    <label for="transfer-type">Choisir le service</label>
                    <select class="form-control" id="transfer-type">
                        <option value="western-union">Western Union</option>
                        <option value="moneygram">MoneyGram</option>
                        <option value="ria">RIA</option>
                    </select>
                </div>
            </div>
        </div>

        <button type="button" class="btn btn-secondary btn-back" onclick="prevStep(3)">Précédent</button>
        <button type="button" class="btn btn-primary btn-next" onclick="nextStep(3)">Suivant</button>
    </div>

    <div id="step4" class="step">
        <h3>Étape 4: Confirmation du Paiement</h3>
        <p>Montant: <span id="confirm-montant"></span> €</p>
        <p>Mode de paiement choisi: <span id="confirm-mode"></span></p>
        <button type="button" class="btn btn-secondary btn-back" onclick="prevStep(4)">Précédent</button>
        <button type="submit" class="btn btn-success" onclick="submitPayment()">Confirmer le Paiement</button>
    </div>
</div>
@endsection

<!-- CDN pour jQuery (Select2 dépend de jQuery) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- CDN pour Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
    function nextStep(currentStep) {
        // Get current step element
        let currentElement = document.getElementById("step" + currentStep);
        currentElement.classList.remove('active');

        // Move to next step
        let nextStep = currentStep + 1;
        let nextElement = document.getElementById("step" + nextStep);
        nextElement.classList.add('active');

        // Update confirmation details in step 4
        if (nextStep === 3) {
            let montant = document.getElementById('montant').value;
            let mode = document.getElementById('mode').value;
            document.getElementById('confirm-montant').textContent = montant;
            document.getElementById('confirm-mode').textContent = mode;
        }
    }

    function prevStep(currentStep) {
        // Get current step element
        let currentElement = document.getElementById("step" + currentStep);
        currentElement.classList.remove('active');

        // Move to previous step
        let prevStep = currentStep - 1;
        let prevElement = document.getElementById("step" + prevStep);
        prevElement.classList.add('active');
    }

    function submitPayment() {
        // Simulate payment submission logic here
        alert("Paiement effectué avec succès !");
    }

    function updatePaymentMethod() {
        const mode = document.getElementById('mode').value;
        
        // Hide all payment method sections
        document.getElementById('card-payment').style.display = 'none';
        document.getElementById('mobile-payment').style.display = 'none';
        document.getElementById('account-payment').style.display = 'none';
        document.getElementById('paypal-payment').style.display = 'none';
        document.getElementById('trnasfer-payment').style.display = 'none';

        // Show selected payment method
        if (mode === 'carte') {
            document.getElementById('card-payment').style.display = 'block';
        } else if (mode === 'mobile') {
            document.getElementById('mobile-payment').style.display = 'block';
        } else if (mode === 'virement') {
            document.getElementById('account-payment').style.display = 'block';
        } else if (mode === 'paypal') {
            document.getElementById('paypal-payment').style.display = 'block';
        } else if (mode === 'transfer') {
            document.getElementById('transfer-payment').style.display = 'block';
        }
    }
    
    $(document).ready(function() {
        $('#operator').select2();
        $('#devise').select2();
        $('#mode').select2();
    });
    
    document.getElementById('operator').addEventListener('change', function() {
        var selectedOption = this.options[this.selectedIndex];
        var flagImage = selectedOption.getAttribute('data-image');
        var countryFlag = document.getElementById('country-flag').querySelector('img');
        countryFlag.src = selectedOption.getAttribute('data-image');
        var countryFlag = document.getElementById('country-flag');
        countryFlag.innerHTML = '<img src="' + flagImage + '" style="width: 20px;" />';
    });
    
</script>

</body>
</html>