@extends('layouts.app')

@section('title', __('Payment') . ' - Order #' . $order->order_number)

@section('content')
    <div class="payment-page">
        <div class="container py-4">
            <!-- Breadcrumb -->
            <nav aria-label="breadcrumb" class="mb-4">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('home') }}">{{ __('Home') }}</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('cart.index') }}">{{ __('Cart') }}</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('checkout.index') }}">{{ __('Checkout') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ __('Payment') }}
                    </li>
                </ol>
            </nav>

            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="card payment-card">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">
                                <i class="fas fa-credit-card me-2"></i>
                                {{ __('Complete Your Payment') }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <!-- Order Summary -->
                            <div class="alert alert-info mb-4">
                                <div class="row">
                                    <div class="col-md-6">
                                        <strong>{{ __('Order Number') }}:</strong> #{{ $order->order_number }}<br>
                                        <strong>{{ __('Customer') }}:</strong> {{ $order->customer_name }}
                                    </div>
                                    <div class="col-md-6 text-md-end">
                                        <strong>{{ __('Total Amount') }}:</strong>
                                        <span class="h5 text-primary">{{ number_format($order->total_amount, 2) }} {{ __('SAR') }}</span>
                                    </div>
                                </div>
                            </div>

{{--                            <!-- Test Cards Info (only in test mode) -->--}}
{{--                            @if($isTestMode)--}}
{{--                                <div class="alert alert-warning">--}}
{{--                                    <h6><i class="fas fa-exclamation-triangle me-2"></i>{{ __('Test Mode - Use Test Cards') }}</h6>--}}
{{--                                    <div class="row">--}}
{{--                                        <div class="col-md-6">--}}
{{--                                            <strong>{{ __('Successful Payment') }}:</strong><br>--}}
{{--                                            <code>4111 1111 1111 1111</code> - Visa<br>--}}
{{--                                            <code>5555 5555 5555 4444</code> - Mastercard--}}
{{--                                        </div>--}}
{{--                                        <div class="col-md-6">--}}
{{--                                            <strong>{{ __('Failed Payment') }}:</strong><br>--}}
{{--                                            <code>4000 0000 0000 0002</code> - Declined<br>--}}
{{--                                            <code>4000 0000 0000 0069</code> - Expired--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <small class="text-muted">--}}
{{--                                        {{ __('Use any future expiry date (e.g., 12/25) and any 3-digit CVV (e.g., 123)') }}--}}
{{--                                    </small>--}}
{{--                                </div>--}}
{{--                            @endif--}}

                            <!-- OFFICIAL MOYASAR FORM CONTAINER -->
                            <div class="moyasar-form-container">
                                <h6 class="mb-3">
                                    <i class="fas fa-credit-card me-2"></i>
                                    {{ __('Enter Your Payment Details') }}
                                </h6>

                                <!-- This is where Moyasar's official form will be rendered -->
                                <div class="mysr-form" style="min-height: 400px; padding: 20px; border: 1px solid #e9ecef; border-radius: 8px; background: #f8f9fa;">
                                    <!-- Moyasar form will be automatically inserted here -->
                                </div>
                            </div>

                            <!-- Payment Status Messages -->
                            <div id="payment-messages" class="mt-3" style="display: none;">
                                <!-- Payment status messages will appear here -->
                            </div>

                            <!-- Security Info -->
                            <div class="mt-4">
                                <div class="row text-center">
                                    <div class="col-md-4">
                                        <div class="security-badge">
                                            <i class="fas fa-shield-alt text-success fa-2x mb-2"></i>
                                            <small>{{ __('SSL Secure') }}</small>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="security-badge">
                                            <i class="fas fa-lock text-primary fa-2x mb-2"></i>
                                            <small>{{ __('PCI Compliant') }}</small>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="security-badge">
                                            <i class="fas fa-credit-card text-info fa-2x mb-2"></i>
                                            <small>{{ __('3D Secure') }}</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Cancel Payment Button -->
                    <div class="text-center mt-3">
                        <a href="{{ route('payment.cancel', $order->id) }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>
                            {{ __('Cancel Payment') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div id="loading-overlay" class="d-none">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">{{ __('Processing...') }}</span>
        </div>
    </div>
@endsection

@push('styles')
    <!-- OFFICIAL MOYASAR CSS -->
    <link rel="stylesheet" href="https://cdn.moyasar.com/mpf/1.14.0/moyasar.css" />

    <style>
        .payment-card {
            border: 1px solid #e9ecef;
            border-radius: 0.5rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .moyasar-form-container {
            background: white;
            border-radius: 8px;
        }

        .security-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.5rem;
            font-size: 0.75rem;
        }

        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .moyasar-form-container {
                margin: 0 -15px;
            }
        }
    </style>
@endpush

@push('scripts')
    <!-- OFFICIAL MOYASAR JAVASCRIPT SDK -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=fetch"></script>
    <script src="https://cdn.moyasar.com/mpf/1.14.0/moyasar.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            console.log('🚀 Initializing Official Moyasar Payment Form');

            // OFFICIAL MOYASAR RECOMMENDED IMPLEMENTATION
            Moyasar.init({
                // REQUIRED: Form container
                element: '.mysr-form',

                // REQUIRED: Payment details
                amount: {{ intval($order->total_amount * 100) }}, // Convert to halalas
                currency: 'SAR',
                description: 'Order #{{ $order->order_number }} - {{ config("app.name") }}',

                // REQUIRED: API Key
                publishable_api_key: '{{ $moyasarPublishableKey }}',

                // REQUIRED: Success URL
                callback_url: '{{ route("payment.success", $order->id) }}',

                // PAYMENT METHODS
                methods: ['creditcard'],

                // WORLDWIDE SUPPORT
                supported_networks: ['visa', 'mastercard', 'mada', 'amex'],
                supported_countries: [
                    'SA', 'AE', 'KW', 'BH', 'QA', 'OM', // GCC
                    'US', 'GB', 'CA', 'AU', 'DE', 'FR', 'IT', 'ES' // International
                ],

                // LANGUAGE SUPPORT
                language: '{{ app()->getLocale() }}', // 'en' or 'ar'

                // METADATA
                metadata: {
                    order_id: '{{ $order->id }}',
                    order_number: '{{ $order->order_number }}',
                    customer_email: '{{ $order->customer_email }}',
                    store_name: '{{ config("app.name") }}'
                },

                // ENHANCED SECURITY
                credit_card: {
                    save_card: false, // For security in production
                    three_d_secure: 'required' // Force 3D Secure
                },

                // CALLBACKS - Save payment before 3D Secure
                on_completed: function(payment) {
                    console.log('✅ Payment completed successfully!', payment);
                    handlePaymentSuccess(payment);
                },

                on_failed: function(payment) {
                    console.error('❌ Payment failed:', payment);
                    handlePaymentFailure(payment);
                },

                on_redirect: function(url) {
                    console.log('🔄 Redirecting to 3D Secure:', url);
                    showMessage('info', '{{ __("Redirecting to secure payment verification...") }}');
                }
            });

            // SUCCESS HANDLER
            function handlePaymentSuccess(payment) {
                console.log('🎉 Processing successful payment...');

                showMessage('success', '{{ __("Payment successful! Creating your order...") }}');
                disableForm();

                // Send payment confirmation to server
                fetch('{{ route("payment.process", $order->id) }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        moyasar_payment_id: payment.id,
                        payment_status: payment.status
                    })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showMessage('success', data.message);
                            setTimeout(() => {
                                window.location.href = data.redirect_url;
                            }, 2000);
                        } else {
                            showError(data.message || '{{ __("Order processing failed") }}');
                            enableForm();
                        }
                    })
                    .catch(error => {
                        console.error('💥 Network error:', error);
                        showError('{{ __("Network error. Please contact support.") }}');
                        enableForm();
                    });
            }

            // FAILURE HANDLER
            function handlePaymentFailure(payment) {
                const message = payment.source?.message || payment.message || '{{ __("Payment failed. Please try again.") }}';
                console.error('💥 Payment failed:', message);
                showError(message);
            }

            // UTILITY FUNCTIONS
            function showMessage(type, message) {
                const alertClass = type === 'success' ? 'alert-success' :
                    type === 'error' ? 'alert-danger' : 'alert-info';
                const iconClass = type === 'success' ? 'check-circle' :
                    type === 'error' ? 'exclamation-circle' : 'info-circle';

                const messageHtml = `
                    <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                        <i class="fas fa-${iconClass} me-2"></i>
                        ${message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `;

                const messagesContainer = document.getElementById('payment-messages');
                if (messagesContainer) {
                    messagesContainer.innerHTML = messageHtml;
                    messagesContainer.style.display = 'block';
                    messagesContainer.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }
            }

            function showError(message) {
                showMessage('error', message);
            }

            function disableForm() {
                const loadingOverlay = document.getElementById('loading-overlay');
                if (loadingOverlay) {
                    loadingOverlay.classList.remove('d-none');
                }
            }

            function enableForm() {
                const loadingOverlay = document.getElementById('loading-overlay');
                if (loadingOverlay) {
                    loadingOverlay.classList.add('d-none');
                }
            }
        });
    </script>
@endpush