@extends('front.layouts.master-auth')
@section('content')
    <!-- Start Page Content -->
    <section class="page-content">
        <div class="container">
            <div class="money-form-page-title">
                <h2 class="money-form-name">
                    @lang('Charge') رصيد الحساب
                </h2>
            </div>
            <div class="money-form-page-cont">
                <div class="money-form-cont">

                    <!-- Payment method tabs -->
                    <div class="methods" style="margin-bottom:28px;">
                        <label class="method-icon" id="tab-card">
                            <input type="radio" name="payment-method-choice" value="card" checked>
                            <span class="img">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" style="margin-left:8px; flex-shrink:0;"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
                                @lang('front.Pay by Card')
                            </span>
                        </label>
                        <label class="method-icon" id="tab-voucher">
                            <input type="radio" name="payment-method-choice" value="voucher">
                            <span class="img">
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" style="margin-left:8px; flex-shrink:0;"><path d="M20 12V22H4V12"/><path d="M22 7H2v5h20V7z"/><path d="M12 22V7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></svg>
                                @lang('front.Pay by Voucher')
                            </span>
                        </label>
                    </div>

                    <!-- Card Payment Section -->
                    <div id="card-payment-section">
                        <form id="payment-form" method="POST" action="{{ route('user.transactions.chargeCard') }}">
                            @csrf
                            @if(request()->has('amount'))
                                <input type="hidden" name="amount" value="{{request()->amount}}">
                            @endif
                            @if(request()->has('offer_id'))
                                <input type="hidden" name="offer_id" value="{{request()->offer_id}}">
                            @endif
                            @if(request()->has('project_id'))
                                <input type="hidden" name="project_id" value="{{request()->project_id}}">
                            @endif
                            @if(request()->has('pay_milestone_offer_id'))
                                <input type="hidden" name="pay_milestone_offer_id" value="{{request()->pay_milestone_offer_id}}">
                            @endif
                            <div class="pay-inputs" id="payment-section">
                                <div class="form-group">
                                    <label>المبلغ</label>
                                    <div class="input-cont">
                                        <input type="number" name="amount" id="amount-input" value="{{old('amount',request()->amount?request()->amount:"")}}" class="form-control">
                                        <span>$</span>
                                    </div>
                                </div>

                                <!-- Fee Breakdown -->
                                <div id="fee-breakdown">
                                    <style>
                                        .fee-tooltip-wrap:hover .fee-tooltip-text,
                                        .fee-tooltip-wrap.active .fee-tooltip-text {
                                            visibility: visible !important;
                                            opacity: 1 !important;
                                        }
                                    </style>
                                    <div style="display: flex; justify-content: space-between; color: #888;">
                                        <span style="display: flex; align-items: center; gap: 5px;">
                                            رسوم الخدمة ({{ $stripe_fee_percentage }}%)
                                            <span class="fee-tooltip-wrap" style="position: relative; display: inline-flex;" onclick="this.classList.toggle('active')">
                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="cursor: pointer;">
                                                    <circle cx="12" cy="12" r="11" stroke="#14965A" stroke-width="2" fill="#14965A"/>
                                                    <text x="12" y="17" text-anchor="middle" fill="#fff" font-size="14" font-weight="bold" font-family="Arial">?</text>
                                                </svg>
                                                <span class="fee-tooltip-text" style="visibility: hidden; opacity: 0; position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 12px; line-height: 1.8; width: 260px; text-align: center; z-index: 999; transition: opacity 0.3s, visibility 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
                                                    تشمل رسوم الخدمة: تأمين المعاملات المالية، حماية حقوقك كصاحب مشروع، الدعم الفني على مدار الساعة، ومتابعة سير العمل حتى التسليم.
                                                    <span style="position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #333 transparent transparent transparent;"></span>
                                                </span>
                                            </span>
                                        </span>
                                        <span id="fee-processing">$0.00</span>
                                    </div>
                                    <div style="display: flex; justify-content: space-between; font-size: 16px; font-weight: bold; color: #333;">
                                        <span>الإجمالي</span>
                                        <span id="fee-total">$0.00</span>
                                    </div>
                                </div>

                                <div id="payment-message" class="text-danger" style="display: none; margin-top: 5px; margin-bottom: 15px; font-weight: bold;"></div>

                                <!-- Loading spinner -->
                                <div id="payment-loading" style="text-align: center;">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="sr-only">جاري التحميل...</span>
                                    </div>
                                    <p style="margin-top: 10px; color: #666;">جاري تحميل بيانات الدفع...</p>
                                </div>

                                <div id="payment-element" class="form-control" style="display: none;"></div>

                                <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:20px;">
                                    <button id="submit-button" type="submit" class="money-form-submit" style="margin-top:0 !important;">
                                        <span id="button-text">شحن الرصيد</span>
                                        <span id="spinner" style="display: none;">جاري المعالجة...</span>
                                    </button>
                                    <span style="display:flex; align-items:center; gap:6px; color:#888;">
                                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                        ادفع بأمان، اتصالك مشفر
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Voucher Payment Section -->
                    <div id="voucher-payment-section" style="display:none;">
                        <form id="voucher-form" method="POST" action="{{ route('user.transactions.redeemVoucher') }}">
                            @csrf
                            @if(request()->has('offer_id'))
                                <input type="hidden" name="offer_id" value="{{request()->offer_id}}">
                            @endif
                            @if(request()->has('project_id'))
                                <input type="hidden" name="project_id" value="{{request()->project_id}}">
                            @endif
                            @if(request()->has('pay_milestone_offer_id'))
                                <input type="hidden" name="pay_milestone_offer_id" value="{{request()->pay_milestone_offer_id}}">
                            @endif
                            <div class="pay-inputs" id="voucher-pay-inputs">
                                <div class="form-group">
                                    <label>@lang('front.Voucher code')</label>
                                    <div class="input-cont">
                                        <input type="text"
                                               name="code"
                                               id="voucher-code-input"
                                               value="{{ old('code') }}"
                                               class="form-control @error('code') is-invalid @enderror"
                                               placeholder="أدخل كود القسيمة"
                                               autocomplete="off"
                                               style="letter-spacing:2px; text-transform:uppercase;">
                                        <span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>
                                    </div>
                                    @error('code')
                                        <div class="text-danger" style="margin-top:5px; font-size:13px;">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:auto;">
                                    <button type="submit" class="money-form-submit" style="margin-top:0 !important;">
                                        شحن الرصيد
                                    </button>
                                    <span style="display:flex; align-items:center; gap:6px; color:#888;">
                                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                        ادفع بأمان، اتصالك مشفر
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
                <div class="side-cont">
                    <h3 class="side-title">
                        @lang('Important Tips')
                    </h3>
                    <ol class="help" style="padding: 10px 30px !important;">
                        <li class="fs-15">@lang('front.Charge wallet note 1')</li>
                        <li class="fs-15">{!! __('front.Charge wallet note 3_voucher_html', ['url' => route('support.create')]) !!}</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <style>
        .fs-15{ font-size: 15px !important;line-height: unset !important; }

        /* Fix Payment Element Layout */
        #payment-element {
            min-height: 200px !important;
            height: auto !important;
            padding: 0 !important;
            margin-bottom: 20px !important;
            position: relative !important;
            display: block !important;
            width: 100% !important;
            border: 0 !important;
        }

        #payment-element iframe {
            position: relative !important;
            display: block !important;
        }

        #payment-message {
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .money-form-submit {
            margin-top: 20px !important;
            width: auto !important;
            clear: both !important;
            position: relative !important;
            z-index: 1 !important;
            padding: 0 20px !important;
        }

        .form-group {
            margin-bottom: 20px !important;
            clear: both !important;
            position: relative !important;
        }

        .pay-inputs {
            position: relative !important;
            display: block !important;
        }

        #voucher-pay-inputs {
            display: flex !important;
            flex-direction: column !important;
            min-height: 320px !important;
        }

        #voucher-code-input {
            text-transform: uppercase;
        }
    </style>
    <!-- End Page Content -->
@endsection
@section('js-body')
    <script>
        $(document).ready(function() {
            $('#global-form-loader').hide();

            var $tabs = $('input[name="payment-method-choice"]');

            function switchTab(val, updateHash) {
                if (val === 'voucher') {
                    $('#card-payment-section').hide();
                    $('#voucher-payment-section').show();
                    $tabs.filter('[value="voucher"]').prop('checked', true);
                } else {
                    $('#card-payment-section').show();
                    $('#voucher-payment-section').hide();
                    $tabs.filter('[value="card"]').prop('checked', true);
                }
                if (updateHash !== false) {
                    history.replaceState(null, null, '#' + (val === 'voucher' ? 'voucher' : 'card'));
                }
            }

            // Determine initial tab:
            // Priority 1: validation error on voucher code field → stay on voucher
            // Priority 2: session error came from voucher route → voucher tab
            // Priority 3: URL hash
            // Priority 4: default to card
            var initialTab = 'card';
            @if(old('code') || $errors->has('code'))
                initialTab = 'voucher';
            @else
                var hash = window.location.hash.replace('#', '');
                if (hash === 'voucher' || hash === 'card') {
                    initialTab = hash;
                }
            @endif
            switchTab(initialTab, false);

            $tabs.on('change', function() {
                switchTab($(this).val());
            });

            // Force uppercase voucher input
            $('#voucher-code-input').on('input', function() {
                var pos = this.selectionStart;
                this.value = this.value.toUpperCase();
                this.setSelectionRange(pos, pos);
            });
        });
    </script>
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        const stripe = Stripe("{{ $stripe_key }}");
        let elements;
        let paymentElement;
        let stripeInitialized = false;

        const stripeFeePercentage = {{ $stripe_fee_percentage }};

        // Only initialize Stripe when card tab is visible
        function maybeInitStripe() {
            if (!stripeInitialized) {
                stripeInitialized = true;
                initialize();
            }
        }

        // Initialize on page load (card is default)
        maybeInitStripe();

        // Re-init stripe if user switches back to card tab and it wasn't initialized
        $('input[name="payment-method-choice"]').on('change', function() {
            if ($(this).val() === 'card') {
                maybeInitStripe();
            }
        });

        function calculateFeeClientSide(amount) {
            const feeDecimal = stripeFeePercentage / 100;
            const totalWithFee = parseFloat((amount / (1 - feeDecimal)).toFixed(2));
            const fee = parseFloat((totalWithFee - amount).toFixed(2));
            return { totalWithFee, fee };
        }

        function updateFeeDisplay(amount, fee, total) {
            const feeBreakdown = document.getElementById('fee-breakdown');
            if (amount > 0 && stripeFeePercentage > 0 && fee > 0) {
                feeBreakdown.style.display = 'flex';
                document.getElementById('fee-processing').textContent = '$' + parseFloat(fee).toFixed(2);
                document.getElementById('fee-total').textContent = '$' + parseFloat(total).toFixed(2);
            } else {
                feeBreakdown.style.display = 'none';
            }
        }

        async function initialize() {
            try {
                const amountInput = document.getElementById('amount-input');
                let amount = amountInput.value || {{ request()->amount ?? 10 }};

                if (!amountInput.value) {
                    amountInput.value = amount;
                }

                const clientFee = calculateFeeClientSide(parseFloat(amount));
                updateFeeDisplay(amount, clientFee.fee, clientFee.totalWithFee);

                const response = await fetch("{{ route('user.transactions.createPaymentIntent') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        amount: amount,
                        offer_id: "{{ request()->offer_id ?? '' }}",
                        project_id: "{{ request()->project_id ?? '' }}"
                    })
                });

                const { clientSecret, error, totalWithFee, stripeFee } = await response.json();

                if (error) {
                    showMessage(error);
                    return;
                }

                if (totalWithFee && stripeFee) {
                    updateFeeDisplay(amount, stripeFee, totalWithFee);
                }

                const appearance = {
                    theme: 'stripe',
                    variables: { colorPrimary: '#0570de' }
                };

                elements = stripe.elements({
                    clientSecret,
                    appearance,
                    locale: 'ar'
                });

                paymentElement = elements.create('payment', { layout: 'tabs' });
                paymentElement.mount('#payment-element');

                paymentElement.on('ready', function() {
                    const loadingDiv = document.getElementById('payment-loading');
                    const paymentDiv = document.getElementById('payment-element');
                    if (loadingDiv) loadingDiv.style.display = 'none';
                    if (paymentDiv) paymentDiv.style.display = 'block';
                });

                document.getElementById('amount-input').addEventListener('change', async function() {
                    const newAmount = this.value;
                    if (newAmount && newAmount > 0) {
                        const clientFee = calculateFeeClientSide(parseFloat(newAmount));
                        updateFeeDisplay(newAmount, clientFee.fee, clientFee.totalWithFee);
                        await updatePaymentIntent(newAmount);
                    } else {
                        document.getElementById('fee-breakdown').style.display = 'none';
                    }
                });

                document.getElementById('amount-input').addEventListener('input', function() {
                    const newAmount = parseFloat(this.value);
                    if (newAmount && newAmount > 0) {
                        const clientFee = calculateFeeClientSide(newAmount);
                        updateFeeDisplay(newAmount, clientFee.fee, clientFee.totalWithFee);
                    } else {
                        document.getElementById('fee-breakdown').style.display = 'none';
                    }
                });

            } catch (error) {
                console.error('Error initializing payment:', error);
                showMessage('حدث خطأ في تهيئة نظام الدفع');
            }
        }

        async function updatePaymentIntent(amount) {
            try {
                const response = await fetch("{{ route('user.transactions.updatePaymentIntent') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        amount: amount,
                        offer_id: "{{ request()->offer_id ?? '' }}",
                        project_id: "{{ request()->project_id ?? '' }}"
                    })
                });

                const { clientSecret, error, totalWithFee, stripeFee } = await response.json();

                if (error) { showMessage(error); return; }

                if (totalWithFee && stripeFee) {
                    updateFeeDisplay(amount, stripeFee, totalWithFee);
                }

                if (elements) {
                    elements = stripe.elements({ clientSecret, locale: 'ar' });
                    paymentElement = elements.create('payment', {
                        layout: 'tabs',
                        paymentMethodOrder: ['card', 'paypal', 'apple_pay']
                    });
                    paymentElement.mount('#payment-element');
                }
            } catch (error) {
                console.error('Error updating payment intent:', error);
            }
        }

        const form = document.getElementById('payment-form');
        const submitButton = document.getElementById('submit-button');

        if (form) {
            form.addEventListener('submit', async (e) => {
                e.preventDefault();

                const amount = document.getElementById('amount-input').value;
                if (!amount || amount <= 0) {
                    showMessage('حقل المبلغ مطلوب');
                    return;
                }
                setLoading(true);

                try {
                    const { error } = await stripe.confirmPayment({
                        elements,
                        confirmParams: {
                            return_url: "{{ route('user.transactions.chargeConfirm') }}" +
                                "?offer_id={{ request()->offer_id ?? '' }}" +
                                "&project_id={{ request()->project_id ?? '' }}" +
                                "&pay_milestone_offer_id={{ request()->pay_milestone_offer_id ?? '' }}"
                        }
                    });

                    if (error) {
                        if (error.type === "card_error" || error.type === "validation_error") {
                            showMessage(error.message);
                        } else {
                            showMessage("حدث خطأ غير متوقع. الرجاء المحاولة مرة أخرى.");
                        }
                        setLoading(false);
                    }
                } catch (err) {
                    showMessage("حدث خطأ غير متوقع. الرجاء المحاولة مرة أخرى.");
                    setLoading(false);
                }
            });
        }

        function setLoading(isLoading) {
            if (isLoading) {
                submitButton.disabled = true;
                document.getElementById('button-text').style.display = 'none';
                document.getElementById('spinner').style.display = 'inline';
                $('#global-form-loader').fadeIn();
            } else {
                submitButton.disabled = false;
                document.getElementById('button-text').style.display = 'inline';
                document.getElementById('spinner').style.display = 'none';
                $('#global-form-loader').fadeOut();
            }
        }

        function showMessage(messageText) {
            const messageContainer = document.getElementById('payment-message');
            messageContainer.textContent = messageText;
            messageContainer.style.display = 'block';

            setTimeout(function () {
                messageContainer.style.display = 'none';
                messageContainer.textContent = '';
            }, 5000);
        }
    </script>
@endsection