@extends('frontend.layouts.app')
@push('title')
    {{ __(@$pageTitle) }}
@endpush
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <div class="min-vh-100 bg-light py-4 py-lg-5">
        <div class="container">
            <div class="text-center mb-4 mb-lg-5">
                <img src="{{ getSettingImage('app_preloader') }}" alt="Logo" class="mb-3" style="max-height: 60px;">
                <p class="text-muted">Complete your purchase securely</p>
            </div>

            <!-- OTP Modal -->
            <div class="modal fade" id="otpModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header border-0">
                            <h5 class="modal-title fw-bold" id="otpModalTitle"><i class="fa fa-envelope"></i> Verify Email</h5>
                        </div>
                        <div class="modal-body p-4">
                            <div id="emailVerification">
                                <p class="text-muted mb-3">Enter the 6-digit code sent to <strong id="emailDisplay"></strong></p>
                                <input type="text" class="form-control form-control-lg text-center mb-3" id="emailOtp" maxlength="6" placeholder="000000">
                                <button type="button" class="btn btn-dark w-100" id="verifyEmailBtn">Verify Email</button>
                            </div>
                            <div id="phoneVerification" class="d-none">
                                <p class="text-muted mb-3">Enter the 6-digit code sent to <strong id="phoneDisplay"></strong></p>
                                <input type="text" class="form-control form-control-lg text-center mb-3" id="phoneOtp" maxlength="6" placeholder="000000">
                                <button type="button" class="btn btn-dark w-100" id="verifyPhoneBtn">Verify Phone</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <form class="ajax" action="{{ route('checkout.order') }}" method="POST" data-handler="checkoutOrderResponse">
                @csrf
                <input type="hidden" id="selectGateway" name="gateway">
                <input type="hidden" id="selectCurrency" name="currency">
                <input type="hidden" value="{{ request()->route()->parameters('hash')['hash'] }}" name="checkout_details">

                <div class="row g-4">
                    <div class="col-lg-8">
                        <!-- Basic Info -->
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-body p-4">
                                <h5 class="card-title fw-bold mb-4">
                                    <i class="bi bi-person-circle me-2"></i>{{ __('Basic Information') }}
                                </h5>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">{{ __('First Name') }}</label>
                                        <input type="text" name="basic_first_name" class="form-control form-control-lg" placeholder="John" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">{{ __('Last Name') }}</label>
                                        <input type="text" name="basic_last_name" class="form-control form-control-lg" placeholder="Doe" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">{{ __('Email') }}</label>
                                        <input type="email" name="basic_email" class="form-control form-control-lg" placeholder="john@example.com" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">{{ __('Phone') }}</label>
                                        <input type="text" name="basic_phone" class="form-control form-control-lg" placeholder="+233 123 456 789" required>
                                    </div>
                                    
                                    @if (json_decode($checkoutPage?->basic_info))
                                        @foreach (json_decode($checkoutPage?->basic_info) ?? [] as $basicInfo)
                                            @if ($basicInfo->type == 'text' || $basicInfo->type == 'number' || $basicInfo->type == 'email')
                                                <div class="col-md-6">
                                                    <label class="form-label fw-semibold">{{ __($basicInfo->label) }}</label>
                                                    <input type="{{ $basicInfo->type }}" name="basic_info[{{ $basicInfo->name }}]" class="form-control form-control-lg" placeholder="{{ __($basicInfo->label) }}">
                                                </div>
                                            @elseif ($basicInfo->type == 'textarea')
                                                <div class="col-12">
                                                    <label class="form-label fw-semibold">{{ __($basicInfo->label) }}</label>
                                                    <textarea name="basic_info[{{ $basicInfo->name }}]" class="form-control" rows="3" placeholder="{{ __($basicInfo->label) }}"></textarea>
                                                </div>
                                            @endif
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Billing Info -->
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-body p-4">
                                <h5 class="card-title fw-bold mb-4">
                                    <i class="bi bi-credit-card me-2"></i>{{ __('Billing Information') }}
                                </h5>
                                <div class="row g-3">
                                    <div class="col-12">
                                        <label class="form-label fw-semibold">{{ __('Address') }}</label>
                                        <input type="text" name="billing_address" class="form-control form-control-lg" placeholder="123 Main Street" required>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">{{ __('Country') }}</label>
                                        <select class="gds-cr form-select form-select-lg" 
                                                name="billing_country" 
                                                country-data-region-id="stateSelect" 
                                                data-language="en" 
                                                required>
                                        </select>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">{{ __('State/Region') }}</label>
                                        <select id="stateSelect" 
                                                class="form-select form-select-lg" 
                                                name="billing_state" 
                                                required>
                                            <option value="">{{ __('Select State') }}</option>
                                        </select>
                                    </div>

                                    <div class="col-lg">
                                        <label class="form-label fw-semibold">{{ __('City') }}</label>
                                        <input type="text" 
                                               name="billing_city" 
                                               class="form-control form-control-lg" 
                                               placeholder="Enter City" 
                                               required>
                                    </div>

                                   
                                    
                                    @if (json_decode($checkoutPage?->billing_info))
                                        @foreach (json_decode($checkoutPage?->billing_info) ?? [] as $billingInfo)
                                            @if ($billingInfo->type == 'text' || $billingInfo->type == 'number' || $billingInfo->type == 'email')
                                                <div class="col-md-6">
                                                    <label class="form-label fw-semibold">{{ __($billingInfo->label) }}</label>
                                                    <input type="{{ $billingInfo->type }}" name="billing_info[{{ $billingInfo->name }}]" class="form-control form-control-lg" placeholder="{{ __($billingInfo->label) }}">
                                                </div>
                                            @elseif ($billingInfo->type == 'textarea')
                                                <div class="col-12">
                                                    <label class="form-label fw-semibold">{{ __($billingInfo->label) }}</label>
                                                    <textarea name="billing_info[{{ $billingInfo->name }}]" class="form-control" rows="3" placeholder="{{ __($billingInfo->label) }}"></textarea>
                                                </div>
                                            @endif
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Payment Method -->
                        <div class="card border-0 shadow-sm mb-4" style="visibility: hidden;height:0px !important">
                            <div class="card-body p-4">
                                <h5 class="card-title fw-bold mb-4">
                                    <i class="bi bi-wallet2 me-2"></i>{{ __('Payment Method') }}
                                </h5>
                                <div class="row g-3 checkoutPaymentItem">
                                    @foreach ($gateways as $key => $gateway)
                                        @if (in_array($gateway->id, json_decode($checkoutPage?->payment) ?? []))
                                            <div class="col-6 col-md-4 col-lg-3">
                                                <input type="radio" class="btn-check paymentGateway" name="payment_gateway" id="gateway{{ $key }}" value="{{ $gateway->id }}" data-gateway="{{ $gateway->slug }}">
                                                <label class="btn btn-outline-dark w-100 h-100 d-flex align-items-center justify-content-center p-3" for="gateway{{ $key }}" style="min-height: 80px;">
                                                    <img src="{{ asset($gateway->image) }}" alt="{{ $gateway->name }}" class="img-fluid" style="max-height: 40px; max-width: 100%;">
                                                </label>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <!-- Bank Deposit -->
                        <div class="card border-0 shadow-sm mb-4 d-none" id="bankSection">
                            <div class="card-body p-4">
                                <h5 class="card-title fw-bold mb-4">
                                    <i class="bi bi-bank me-2"></i>{{ __('Bank Deposit') }}
                                </h5>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">{{ __('Bank Name') }}</label>
                                    <select class="form-select form-select-lg sf-select-two" id="bank_id" name="bank_id">
                                        <option value="">{{ __('Select Bank') }}</option>
                                        @foreach ($banks as $bank)
                                            <option value="{{ $bank->id }}" data-details="{{ nl2br($bank->details) }}">{{ $bank->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="alert alert-info d-none" id="bankDetails"></div>
                                <div>
                                    <label class="form-label fw-semibold">{{ __('Upload Deposit Slip') }}</label>
                                    <input type="file" class="form-control form-control-lg" id="bank_slip" name="bank_slip">
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-dark btn-lg w-100 py-3 fw-bold" id="paymentNowBtn">
                            <i class="bi bi-lock-fill me-2"></i>{{ __('Complete Payment') }} <span id="gatewayCurrencyAmount"></span>
                        </button>
                    </div>

                    <!-- Order Summary -->
                    <div class="col-lg-4">
                        <div class="sticky-lg-top" style="top: 20px;">
                            <div class="card border-0 shadow-sm mb-4">
                                <div class="card-body p-4">
                                    <h5 class="card-title fw-bold mb-4">
                                        <i class="bi bi-receipt me-2"></i>{{ __('Order Summary') }}
                                    </h5>
                                    
                                    <div class="mb-3 pb-3 border-bottom">
                                        <h6 class="fw-bold text-dark mb-3">{{ $plan->name }}</h6>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-muted">{{ __('Plan Code') }}</span>
                                            <span class="fw-semibold">{{ $plan->code }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-muted">{{ __('Quantity') }}</span>
                                            <span class="fw-semibold">1</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-muted">{{ __('Price') }}</span>
                                            <span class="fw-semibold">{{ showPrice($plan->price) }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-muted">{{ __('Setup Fee') }}</span>
                                            <span class="fw-semibold">{{ showPrice($plan->setup_fee) }}</span>
                                        </div>
                                    </div>

                                    <div class="mb-3 pb-3 border-bottom">
                                        <label class="form-label fw-semibold mb-2">{{ __('Discount Code') }}</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" name="coupon_code" id="couponCode" placeholder="Enter code">
                                            <button type="button" class="btn btn-outline-dark" id="couponCodeApplyBtn">{{ __('Apply') }}</button>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-muted">{{ __('Discount') }}</span>
                                            <span class="fw-semibold text-success" id="discountShowAmount">$0.00</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-3">
                                            <span class="h6 mb-0 fw-bold">{{ __('Total') }}</span>
                                            <span class="h6 mb-0 fw-bold text-dark" id="totalShowAmount">{{ showPrice($plan->price + $plan->setup_fee + $plan->shipping_charge) }}</span>
                                        </div>
                                    </div>

                                    <div id="gatewayCurrencyAppend"></div>
                                </div>
                            </div>

                            @if($plan->details != null)
                                <div class="card border-0 shadow-sm">
                                    <div class="card-body p-4">
                                        <h5 class="card-title fw-bold mb-3">
                                            <i class="bi bi-info-circle me-2"></i>{{ __('Plan Details') }}
                                        </h5>
                                        <div class="text-muted small">
                                            {!! $plan->details !!}
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <input type="hidden" id="waitingRoute" value="{{ route('waiting') }}">
    <input type="hidden" id="planPrice" value="{{ $plan->price }}">
    <input type="hidden" id="planSetupFee" value="{{ $plan->setup_fee }}">
    <input type="hidden" id="planShippingCharge" value="{{ $plan->shipping_charge }}">
    <input type="hidden" id="discountAmount" value="0.00">
    <input type="hidden" id="planId" value="{{ $plan->id }}">
    <input type="hidden" id="userId" value="{{ $plan->user_id }}">
    <input type="hidden" id="getCouponInfoRoute" value="{{ route('get.coupon.info') }}">
    <input type="hidden" id="getCurrencyByGatewayRoute" value="{{ route('gateway.currency') }}">
@endsection

@push('style')
    <style>
        .zMain-checkout-content .title {
            font-size: {{ __($checkoutPage?->text_size) }};
            color: {{ __($checkoutPage?->text_color) }};
        }
        .card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1) !important;
        }
        .btn-check:checked + .btn-outline-dark {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .form-control:focus, .form-select:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
        }
        @media (max-width: 991.98px) {
            .sticky-lg-top {
                position: relative !important;
                top: 0 !important;
            }
        }
    </style>
@endpush

@push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/country-region-dropdown-menu/2.4.2/js/Gettext.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/country-region-dropdown-menu/2.4.2/js/geodatasource-cr.min.js"></script>
<script src="{{ asset('user/custom/js/checkout.js') }}"></script>

<script>
(function($) {
    "use strict";
    
    const AUTO_SELECT_CONFIG = {
        gateway: 'paystack',
        currency: 'GHS'
    };
    
    function autoSelectCurrency(targetCurrency) {
        const gatewayCurrencyAppend = $('#gatewayCurrencyAppend');
        if (gatewayCurrencyAppend.length === 0) return false;
        
        const currencyLabels = gatewayCurrencyAppend.find('.form-check-label');
        let found = false;
        
        currencyLabels.each(function() {
            const labelText = $(this).text().trim();
            if (labelText === targetCurrency) {
                const radioId = $(this).attr('for');
                const radioButton = $('#' + radioId);
                
                if (radioButton.length) {
                    radioButton.prop('checked', true).trigger('click');
                    $('#selectCurrency').val(labelText);
                    const currencyValue = radioButton.val();
                    $('#gatewayCurrencyAmount').text('(' + currencyValue + ')');
                    console.log('✓ Currency auto-selected:', targetCurrency);
                    found = true;
                    return false;
                }
            }
        });
        return found;
    }
    
    let otpModal;
    let formData;
    let formSubmitting = false;
    
    $(document).ready(function() {
        otpModal = new bootstrap.Modal(document.getElementById('otpModal'));
        
        // Clean up country/state dropdown text after library loads
        setTimeout(function() {
            // Clean country dropdown
            $('select[name="billing_country"] option').each(function() {
                let text = $(this).text();
                text = text.replace(/_[A-Z]{2}_[A-Z]$/, '').replace(/_/g, ' ');
                $(this).text(text);
            });
            
            // Clean state dropdown when country changes
            $('select[name="billing_country"]').on('change', function() {
                setTimeout(function() {
                    $('#stateSelect option').each(function() {
                        let text = $(this).text();
                        text = text.replace(/_[A-Z]{2}$/, '').replace(/_/g, ' ');
                        $(this).text(text);
                    });
                }, 200);
            });
        }, 1000);
        
        // Auto-select gateway
        setTimeout(function() {
            const gateway = $('input[data-gateway="' + AUTO_SELECT_CONFIG.gateway + '"]');
            if (gateway.length) {
                console.log('✓ Auto-selecting gateway:', AUTO_SELECT_CONFIG.gateway);
                gateway.prop('checked', true).trigger('click');
                
                const targetNode = document.getElementById('gatewayCurrencyAppend');
                if (targetNode) {
                    const observer = new MutationObserver(function() {
                        const hasRadios = $('#gatewayCurrencyAppend input[type="radio"]').length > 0;
                        if (hasRadios) {
                            setTimeout(function() {
                                if (autoSelectCurrency(AUTO_SELECT_CONFIG.currency)) {
                                    observer.disconnect();
                                }
                            }, 200);
                        }
                    });
                    
                    observer.observe(targetNode, { childList: true, subtree: true });
                    setTimeout(function() {
                        if (autoSelectCurrency(AUTO_SELECT_CONFIG.currency)) {
                            observer.disconnect();
                        }
                    }, 800);
                    setTimeout(function() { observer.disconnect(); }, 5000);
                }
            }
        }, 500);
        
        // Form submission
        $('form.ajax').on('submit', function(e) {
            if (!formSubmitting) {
                e.preventDefault();
                e.stopImmediatePropagation();
                
                formData = new FormData(this);
                
                const email = $('input[name="basic_email"]').val();
                const phone = $('input[name="basic_phone"]').val();
                
                $.ajax({
                    url: '{{ route("send.email.otp") }}',
                    method: 'POST',
                    data: { email: email, _token: '{{ csrf_token() }}' },
                    success: function(response) {
                        if(response.success) {
                            $('#emailDisplay').text(email);
                            $('#phoneDisplay').text(phone);
                            otpModal.show();
                        } else {
                            alert('Failed to send OTP');
                        }
                    },
                    error: function() {
                        alert('Error sending OTP');
                    }
                });
                
                return false;
            }
        });
        
        $('#verifyEmailBtn').click(function() {
            const otp = $('#emailOtp').val();
            const email = $('input[name="basic_email"]').val();
            
            if(otp.length !== 6) {
                alert('Please enter 6-digit OTP');
                return;
            }
            
            $.ajax({
                url: '{{ route("verify.email.otp") }}',
                method: 'POST',
                data: { email: email, otp: otp, _token: '{{ csrf_token() }}' },
                success: function(response) {
                    if(response.success) {
                        $('#emailVerification').addClass('d-none');
                        $('#phoneVerification').removeClass('d-none'); 
                        $('#otpModalTitle').html(`<i class="fa fa-phone"></i> Verify Phone`);
                        
                        $.ajax({
                            url: '{{ route("send.phone.otp") }}',
                            method: 'POST',
                            data: { phone: $('input[name="basic_phone"]').val(), _token: '{{ csrf_token() }}' }
                        });
                    } else {
                        alert('Invalid OTP');
                    }
                }
            });
        });
        
        $('#verifyPhoneBtn').click(function() {
            const otp = $('#phoneOtp').val();
            const phone = $('input[name="basic_phone"]').val();
            
            if(otp.length !== 6) {
                alert('Please enter 6-digit OTP');
                return;
            }
            
            $.ajax({
                url: '{{ route("verify.phone.otp") }}',
                method: 'POST',
                data: { phone: phone, otp: otp, _token: '{{ csrf_token() }}' },
                success: function(response) {
                    if(response.success) {
                        otpModal.hide();
                        submitPayment();
                    } else {
                        alert('Invalid OTP');
                    }
                }
            });
        });
        
        function submitPayment() {
            formSubmitting = true;
            
            $.ajax({
                url: '{{ route("checkout.order") }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    checkoutOrderResponse(response);
                },
                error: function() {
                    alert('Payment failed');
                    formSubmitting = false;
                }
            });
        }
    });
    
})(jQuery);
</script>
@endpush