<?php include 'header.php'; ?>

<!-- Normal Sub Header -->
<?php include 'template-parts/breadcrumb-only.php'; ?>

<div class="uk-container">

    <!-- Progress Steps -->
    <div class="checkout-progress">
        <div class="progress-steps">
            <div class="step active">
                <span uk-icon="icon: credit-card; ratio: 1" class="uk-icon" aria-hidden="true"></span>
                <span class="step-label">Payment</span>
            </div>
            <div class="step">
                <span uk-icon="icon: check-circle; ratio: 1" class="uk-icon" aria-hidden="true"></span>
                <span class="step-label">Confirmation</span>
            </div>
        </div>
    </div>

    <div class="uk-grid" uk-grid>

        <!-- Order Summary -->
        <div class="uk-width-1-1@s uk-width-2-3@m">

            <!-- Session Details -->
            <div class="checkout-card">
                <h3 class="uk-heading-line card-title">
                    <span>Session Details</span>
                </h3>

                <div class="trainer-info uk-margin-bottom">
                    <img src="assets/svg/avatar-small.svg"
                        alt="Ahmed Al-Rashid" class="uk-border-circle" width="80" height="80">
                    <div class="trainer-details">
                        <h4>Ahmed Al-Rashid</h4>
                        <p>Senior HR Manager • Technical Interviews Expert</p>

                        <div class="trainer-rating star-rate uk-flex uk-flex-middle gap-2">
                            <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                            <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                            <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                            <span uk-icon="icon: star-bold; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                            <span uk-icon="icon: star; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                            <span class="trainer-rate f600 uk-text-secondary">(4.9)</span>
                        </div>

                    </div>
                </div>

                <div class="session-detail">
                    <span class="detail-label">Session Type</span>
                    <span class="detail-value">Technical Interview Preparation</span>
                </div>

                <div class="session-detail">
                    <span class="detail-label">Duration</span>
                    <span class="detail-value">45 minutes</span>
                </div>

                <div class="session-detail">
                    <span class="detail-label">Date & Time</span>
                    <span class="detail-value">December 15, 2024 • 2:00 PM</span>
                </div>

                <div class="session-detail">
                    <span class="detail-label">Language</span>
                    <span class="detail-value">English</span>
                </div>

                <div class="session-detail">
                    <span class="detail-label">Goal</span>
                    <span class="detail-value">Prepare for software engineer interview at tech startup</span>
                </div>
            </div>

            <!-- Payment Methods -->
            <div class="checkout-card uk-margin-medium-top">

                <h3 class="card-title uk-heading-line">
                    <span>Payment Method</span>
                </h3>

                <!-- Wallet Option -->
                <div class="wallet-option">
                    <div class="wallet-info">
                        <div class="wallet-icon">
                            <img src="assets/images/payment/wallet.svg" alt="Wallet">
                        </div>
                        <div>
                            <h4>Use Wallet Balance</h4>
                            <p>Available: 1,250 SAR</p>
                        </div>
                    </div>
                    <div class="toggle-switch" id="walletToggle"></div>
                </div>

                <!-- Credit/Debit Cards -->
                <div class="payment-method" data-method="visa">
                    <div class="payment-icon">
                        <img src="assets/images/payment/visa.jpg" alt="Visa">
                    </div>
                    <div class="payment-info" id="visa-text">
                        <h4>Visa</h4>
                        <p>Credit or Debit Card</p>
                    </div>
                    <div class="uk-margin-left-auto">
                        <input class="uk-radio" type="radio" name="payment" value="visa" aria-labelledby="visa-text">
                    </div>
                </div>

                <div class="payment-method" data-method="mastercard">
                    <div class="payment-icon">
                        <img src="assets/images/payment/mastercard.jpg" alt="Master Card">
                    </div>
                    <div class="payment-info" id="mastercard-text">
                        <h4>Mastercard</h4>
                        <p>Credit or Debit Card</p>
                    </div>
                    <div class="uk-margin-left-auto">
                        <input class="uk-radio" type="radio" name="payment" value="mastercard" aria-labelledby="mastercard-text">
                    </div>
                </div>

                <div class="payment-method" data-method="mada">
                    <div class="payment-icon">
                        <img src="assets/images/payment/mada.jpg" alt="Mada">
                    </div>
                    <div class="payment-info" id="mada-text">
                        <h4>MADA</h4>
                        <p>Saudi Payments Network</p>
                    </div>
                    <div class="uk-margin-left-auto">
                        <input class="uk-radio" type="radio" name="payment" value="mada" aria-labelledby="mada-text">
                    </div>
                </div>

                <div class="payment-method" data-method="tabby">
                    <div class="payment-icon">
                        <img src="assets/images/payment/tabby.jpg" alt="Tabby">
                    </div>
                    <div class="payment-info" id="tabby-text">
                        <h4>Tabby</h4>
                        <p>Pay in 4 installments</p>
                    </div>
                    <div class="uk-margin-left-auto">
                        <input class="uk-radio" type="radio" name="payment" value="tabby" aria-labelledby="tabby-text">
                    </div>
                </div>

                <div class="payment-method uk-margin-remove-bottom" data-method="tamara">
                    <div class="payment-icon">
                        <img src="assets/images/payment/tamara.jpg" alt="Tamara">
                    </div>
                    <div class="payment-info" id="tamara-text">
                        <h4>Tamara</h4>
                        <p>Buy now, pay later</p>
                    </div>
                    <div class="uk-margin-left-auto">
                        <input class="uk-radio" type="radio" name="payment" value="tamara" aria-labelledby="tamara-text">
                    </div>
                </div>
            </div>
        </div>

        <!-- Invoice Summary -->
        <div class="uk-width-1-1@s uk-width-1-3@m">
            <div class="sidebar-sticky" uk-sticky="offset: 20; bottom: true">
                <div class="checkout-card order-summary-card">
                    <h3 class="card-title uk-heading-line">
                        <span>Booking Summary</span>
                    </h3>

                    <div class="invoice-row">
                        <span class="invoice-label">Session (45 min)</span>
                        <span class="invoice-value">180 SAR</span>
                    </div>

                    <div class="invoice-row">
                        <span class="invoice-label">Platform Fee</span>
                        <span class="invoice-value">15 SAR</span>
                    </div>

                    <div class="invoice-row">
                        <span class="invoice-label">Subtotal</span>
                        <span class="invoice-value">195 SAR</span>
                    </div>

                    <div class="invoice-row">
                        <span class="invoice-label">VAT (15%)</span>
                        <span class="invoice-value">29.25 SAR</span>
                    </div>

                    <div class="invoice-row invoice-total">
                        <span class="invoice-label">Total Amount</span>
                        <span class="invoice-value total-value">224.25 SAR</span>
                    </div>

                    <div class="uk-margin-medium-top">
                        <button class="uk-button uk-button-primary uk-width-1-1 payment-btn" id="confirmPayment">
                            Complete Your Booking
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div><!-- .uk-container -->



<script>
    // Payment method selection
    document.querySelectorAll('.payment-method').forEach(method => {
        method.addEventListener('click', function() {
            // Remove selected class from all methods
            document.querySelectorAll('.payment-method').forEach(m => m.classList.remove('selected'));

            // Add selected class to clicked method
            this.classList.add('selected');

            // Check the radio button
            const radio = this.querySelector('input[type="radio"]');
            if (radio) {
                radio.checked = true;
            }
        });
    });

    // Wallet toggle
    // Wallet toggle
    const walletToggle = document.getElementById('walletToggle');
    let walletEnabled = false;

    walletToggle.addEventListener('click', function() {
        walletEnabled = !walletEnabled;
        this.classList.toggle('active', walletEnabled);
    });

    // Confirm payment
    document.getElementById('confirmPayment').addEventListener('click', function() {
        const hasPaymentMethod = document.querySelector('input[name="payment"]:checked') || walletEnabled;

        if (!hasPaymentMethod) {
            UIkit.notification({
                message: 'Please select a payment method',
                status: 'warning',
                pos: 'top-center',
                timeout: 2000
            });
            return;
        }

        // Show loading state
        this.innerHTML = 'Processing...';
        this.disabled = true;

        // Simulate payment processing
        setTimeout(() => {
            // Randomly simulate success or failure for demo
            const success = Math.random() > 0.2; // 80% success rate

            if (success) {
                window.location.href = 'payment-success.php';
            } else {
                window.location.href = 'payment-failed.php';
            }
        }, 2000);
    });

    // Auto-select first payment method
    document.addEventListener('DOMContentLoaded', function() {
        const firstPaymentMethod = document.querySelector('.payment-method');
        if (firstPaymentMethod) {
            firstPaymentMethod.click();
        }
    });
</script>

<?php include 'footer.php'; ?>