@extends(getTemplate().'.view.layout.layout')
@section('title')
    {{ !empty($setting['site']['site_title']) ? $setting['site']['site_title'] : '' }}
    - {{ $product->title }}
@endsection
@section('meta_description',$product->meta_description)
@section('meta_keyword',$product->meta_keyword)
@section('page')

@php
    $subscriptionSettings = \App\Models\SubscriptionSetting::first();
    $monthlySubscriptionPrice = $subscriptionSettings && $subscriptionSettings->monthly_subscription_price
        ? (float) $subscriptionSettings->monthly_subscription_price
        : 15000;
    $showSubscriptionOnPaymentPage = !$subscriptionSettings || (bool) $subscriptionSettings->show_subscription_cart;
@endphp


<div class="container-fluid" >
                    <div class="modal-dialog">
                        <!-- Modal content-->

                        @if (session('message'))
                            <div class="alert {{ session('alert-class', 'alert-info') }} alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                {{ session('message') }}
                            </div>
                        @endif
                        <div class="modal-content payment-page-main-box" style="border: 0; box-shadow: none;">
        

                            <div class="modal-body">
 
                                <div class="table-responsive ">
                   
                                    <div class="payment-page-course-title mb-6">
                                        <a href="/product/{{ $payment->content['id']  }}" class="text-decoration-none">
                                            <h1 class="payment-page-title-text">{{ $payment->content['title'] }}</h1>
                                        </a> 
                                    </div>

<div class="panel-body">
    @if (session('status'))
        <div class="alert alert-success">
            {{ session('status') }}
        </div>
    @endif

<div class="payment-page-subtitle text-center mb-3">
    Choose your payment option below
    <i class="bi bi-arrow-down"></i>
</div>

{{-- Scarcity & urgency banners --}}
@if($product->bonus_ends_at && strtotime($product->bonus_ends_at) > time())
<div class="text-center mb-4 p-4 bg-yellow-100 border-2 border-yellow-400 rounded-lg">
    <div class="text-lg font-bold text-yellow-800">
        @if($product->bonus_message)
            {{ $product->bonus_message }}
        @else
            Bonus offer active!
        @endif
    </div>
    <div class="text-md text-yellow-700 mt-2">
        Offer expires in <span class="bonus-countdown font-mono font-bold"
        data-end="{{ strtotime($product->bonus_ends_at) }}"></span>
    </div>
</div>
@endif

@if($product->enrollment_limit && $spotsRemaining !== null && $spotsRemaining <= 5 && $spotsRemaining > 0)
<div class="text-center mb-4">
    <span class="inline-block bg-red-100 text-red-700 text-lg font-bold px-6 py-2 rounded-full animate-pulse">
        Only {{ $spotsRemaining }} {{ Str::plural('spot', $spotsRemaining) }} left!
    </span>
</div>
@endif

@if($product->sale_ends_at && strtotime($product->sale_ends_at) > time())
<div class="text-center mb-4">
    <span class="text-sm text-red-600 font-semibold">Sale ends in </span>
    <span class="sale-countdown text-sm text-red-700 font-mono font-bold"
          data-end="{{ strtotime($product->sale_ends_at) }}"></span>
</div>
@endif

@if($addedPayments && count($addedPayments) > 0)
    <div class="payment-options-container mb-4">
        <div class="cart-summary-box" style="background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:16px; margin-bottom:16px;">
            <strong style="font-size:15px; color:#374151;">Items in your cart</strong>
            <div style="margin-top:8px;">
                <div style="display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #e5e7eb;">
                    <span style="font-size:14px; font-weight:600; color:#1f2937; flex:1;">{{ $payment->content['title'] }}</span>
                    <span style="font-size:14px; font-weight:600;">{{ currencySign() }}{{ number_format($payment->amount) }}</span>
                </div>
                @foreach($addedPayments as $child)
                    @php $childCourse = App\Models\Content::find($child->content_id); @endphp
                    @if($childCourse)
                        <div style="display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #f3f4f6;">
                            <span style="font-size:13px; color:#6b7280; flex:1;">{{ $childCourse->title }}</span>
                            <span style="font-size:13px;">{{ currencySign() }}{{ number_format($child->amount) }}</span>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
@endif

<!-- Payment Options Selection -->
<div class="payment-options-container mb-8">
    <div class="payment-option-card one-time-option-row">
        <div class="payment-option-content">
            <div class="payment-option-text">
                <strong>One-Time Payment {{ currencySign() }}{{ number_format($payment->amount) }}</strong>
                <p class="text-muted mb-0">Pay once for this course only.</p>
            </div>
            <div class="payment-option-action">
                <button class="btn btn-primary select-payment-option" data-option="one-time" data-toggle="modal" data-target="#paymentMethodModal">
                    <i class="bi bi-credit-card"></i> Pay once for this course only
                </button>
            </div>
        </div>
    </div>

    @if($showSubscriptionOnPaymentPage)
        <div class="payment-option-card">
            <div class="payment-option-content">
                <div class="payment-option-text">
                    <strong>Monthly Subscription {{ currencySign() }}{{ number_format($monthlySubscriptionPrice) }}/month</strong>
                    <p class="text-muted mb-0">Get access to all courses with one monthly plan.</p>
                </div>
                <div class="payment-option-action">
                    <button class="btn btn-success" id="subscribe-paystack-btn">
                        <i class="bi bi-calendar-check"></i> Subscribe Monthly
                    </button>
                </div>
            </div>
        </div>
    @endif
</div>

<!-- Payment Method Modal -->
<div class="modal fade" id="paymentMethodModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Select Payment Method</h4>
            </div>
            <div class="modal-body">
                <div class="list-group">
                    <button class="list-group-item list-group-item-action list-group-item-primary" id="paystack-option" style="min-height: 80px;">
                        <h5 class="mb-1"><i class="bi bi-credit-card"></i> Pay with Paystack (Card Payment)</h5>
                        <p class="mb-1">Pay securely with your debit/credit card</p>
                    </button>
                    <button class="list-group-item list-group-item-action list-group-item-secondary" id="bank-transfer-option" style="min-height: 80px; margin-top: 10px;">
                        <h5 class="mb-1"><i class="bi bi-bank"></i> Bank Transfer</h5>
                        <p class="mb-1">Contact us on WhatsApp for bank transfer details</p>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>






<div id="product_id" style="display: none;">{{ $payment->content['id'] }}</div>                               
            </div>
            </div>       
        </div>
</div>




                                @if(count($addedPayments) >= 0)

<div id="product_id" style="display: none;">{{ $payment->content['id'] }}</div>

<div class="h-10"></div> 
                        
                                </div>
                                @endif 




                                 <div class="mt-10 col-xs-12 text-center"></div>


                          
                                <p >

                               <!-- <h3 id="payment_method"  class="pr-60 text-right text-2xl font-semibold col-xs-12 pull-right">
                                    {{ trans('main.select_payment_method') }}</h3>
                -->
                                    


                                @if(get_option('gateway_paypal') == 1)
                                    <div class="radio ">
                                        <input type="radio" class="buy-mode" id="mode-2" value="paypal" name="buyMode">
                                        &nbsp;
                                        <label class="radio-label text-2xl" for="mode-2"> Paypal </label>
                                    </div>
                                @endif
                                
                 
                               
                                @if(get_option('gateway_paytm') == 1)
                                    <div class="radio">
                                        <input type="radio" class="buy-mode" id="mode-4" value="paytm" name="buyMode">
                                        &nbsp;
                                        <label class="radio-label text-2xl" for="mode-4"> Paytm </label>
                                    </div>
                                @endif

                                
                                @if(get_option('gateway_payu') == 1)
                                    <div class="radio">
                                        <input type="radio" class="buy-mode" id="mode-5" value="payu" name="buyMode">
                                        &nbsp;
                                        <label class="radio-label text-2xl" for="mode-5"> Payu </label>
                                    </div>
                                @endif


                                @if(get_option('gateway_razorpay') == 1)
                                    <div class="radio">
                                        <input type="radio" class="buy-mode" id="mode-6" value="razorpay" name="buyMode">
                                        &nbsp;
                                        <label class="radio-label text-2xl" for="mode-6"> Razorpay </label>
                                    </div>
                                @endif
                                @if(get_option('gateway_cinetpay') == 1)
                                    <div class="radio">
                                        <input type="radio" class="buy-mode" id="mode-6" value="cinetpay" name="buyMode">
                                        &nbsp;
                                        <label class="radio-label text-2xl" for="mode-6"> Cinetpay </label>
                                    </div>
                                @endif
                                @if(get_option('gateway_stripe') == 1)
                                    <div class="radio">
                                        <input type="radio" class="buy-mode" id="mode-7" value="stripe" name="buyMode">
                                        &nbsp;
                                        <label class="radio-label text-2xl" for="mode-7"> Stripe </label>
                                    </div>
                                @endif









                                

                                <div class="h-10"></div> 



                                </p>



              
                     

                      


                           
                            <div class="modal-footer text-center">
                               
                             
                                <div class="h-10"></div> 

                                {{-- <div class="col-md-12 text-muted">
                                      <p>Note: if the "{{ trans('main.purchase') }}" button above does not click, refresh this page and make sure you select a payment method above</p>
                                </div> --}}
                            </div>
                        </div>

                    </div>
                </div>


            </div>
        </div>


    </div>

    @endsection
    @endsection
    @endsection


    @section('script')

<style>
    .payment-page-course-title {
        text-align: center;
        padding: 20px 0;
    }

    .payment-page-title-text {
        font-size: 28px;
        font-weight: 700;
        color: #1f2937;
        line-height: 1.3;
        margin: 0;
        transition: color 0.2s ease;
    }

    .payment-page-title-text:hover {
        color: #2563eb;
    }

    .payment-page-subtitle {
        font-size: 20px;
        color: #374151;
        line-height: 1.4;
    }

    .payment-options-container {
        width: 100%;
        max-width: 840px;
        margin: 0 auto;
    }

    .payment-option-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
        margin-bottom: 12px;
        padding: 16px;
    }

    .payment-option-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .payment-option-text {
        text-align: left;
        flex: 1;
        min-width: 0;
        font-size: 17px;
        line-height: 1.45;
    }

    .payment-option-action {
        flex-shrink: 0;
    }

    .payment-page-main-box {
        border-color: transparent !important;
        box-shadow: none !important;
    }

    .payment-options-container .btn {
        max-width: 100%;
        white-space: nowrap;
    }

    @media (max-width: 767px) {
        .payment-page-title-text {
            font-size: 22px;
        }

        .payment-page-subtitle {
            font-size: 18px;
        }

        .payment-option-content {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
        }

        .payment-option-text {
            text-align: center;
        }

        .payment-options-container .btn {
            width: 100%;
        }
    }
</style>

<script src="https://js.paystack.co/v1/inline.js"></script>

<script>
    // Payment method modal functionality
    $(document).ready(function() {
        // Paystack option click
        $('#paystack-option').click(function() {
            $('#paymentMethodModal').modal('hide');
            
            const amount = {{ $payment->amount }};
            const email = '{{ Auth::user()->email }}';
            const userId = {{ Auth::user()->id }};
            const paymentId = {{ $payment->id }};
            
            const handler = PaystackPop.setup({
                key: '{{ get_paystack_public_key() }}',
                email: email,
                amount: amount * 100, // in kobo
                currency: 'NGN',
                ref: ''+Math.floor((Math.random() * 1000000000) + 1),
                metadata: {
                    custom_fields: [
                        {
                            display_name: "User ID",
                            variable_name: "user_id",
                            value: userId
                        },
                        {
                            display_name: "Payment ID",
                            variable_name: "payment_id",
                            value: paymentId
                        },
                        {
                            display_name: "Payment Type",
                            variable_name: "payment_type",
                            value: "one-time"
                        }
                    ]
                },
                callback: function(response) {
                    window.location.href = '/paystack/callback?reference=' + response.reference + '&payment_id=' + paymentId;
                },
                onClose: function() {
                    alert('Transaction was not completed');
                }
            });
            
            handler.openIframe();
        });
        
        // Bank transfer option click - open WhatsApp
        $('#bank-transfer-option').click(function() {
            $('#paymentMethodModal').modal('hide');

            const email = '{{ Auth::user()->email }}';
            const amount = '{{ currencySign() }}{{ number_format($payment->amount) }}';
            const courseTitle = '{{ $payment->content['title'] }}';
            const courseLink = 'https://braintem.org/product/{{ $payment->content['id'] }}';

            const message = `Hello, I want to pay for a course via bank transfer.\n\nEmail: ${email}\nCourse: ${courseTitle}\nAmount: ${amount}\nCourse Link: ${courseLink}`;

            const whatsappUrl = `https://wa.me/{{ env('WHATSAPP_ADMIN_NUMBER', '2348108163037') }}?text=${encodeURIComponent(message)}`;
            window.open(whatsappUrl, '_blank');
        });

        // Monthly subscription button - inline Paystack payment
        $('#subscribe-paystack-btn').click(function() {
            const email = '{{ Auth::user()->email }}';
            const userId = {{ Auth::user()->id }};
            const planCode = '{{ get_paystack_plan_code() }}';

            if (!planCode || !planCode.trim()) {
                alert('Subscription is temporarily unavailable. Please contact support.');
                return;
            }

            const handler = PaystackPop.setup({
                key: '{{ get_paystack_public_key() }}',
                email: email,
                plan: planCode,
                ref: ''+Math.floor((Math.random() * 1000000000) + 1),
                metadata: {
                    custom_fields: [
                        {
                            display_name: "User ID",
                            variable_name: "user_id",
                            value: userId
                        },
                        {
                            display_name: "Payment Type",
                            variable_name: "payment_type",
                            value: "subscription"
                        }
                    ]
                },
                callback: function(response) {
                    // Handle successful subscription payment
                    window.location.href = '/subscription/success?reference=' + response.reference;
                },
                onClose: function() {
                    // Handle when modal is closed
                    alert('Transaction was not completed');
                }
            });

            handler.openIframe();
        });
    });
</script>

<script>
        $('#gift-card-check').click(function () {
            var code = $('#gift-card').val();
            if (code == '') {
                $.notify({
                    message: 'Please fillout all inputs.'
                }, {
                    type: 'danger',
                    allow_dismiss: false,
                    z_index: '99999999',
                    placement: {
                        from: "bottom",
                        align: "right"
                    },
                    position: 'fixed'
                });
            } else {
                $('#gift-card-result').html('<div class="loader"></div> Please wait...');
                $.get('/gift/' + code, function (data) {
                    if (data == 0) {
                        $('#gift-card-result').html('<b class="red-r">Sorry code is invalid.</b>');
                    } else {
                        if (data.type == 'gift')
                            $('#gift-card-result').html('<b class="green-s"> Congratulations! {!! currencySign() !!}' + data.off + ' Discount applied successfully!</b>');
                        if (data.type == 'off')
                            $('#gift-card-result').html('<b class="green-s"> Congratulations! %' + data.off + ' Discount applied successfully!</b>');
                    }
                })
            }
        });
    </script>




<script>
    $(document).ready(function () {
        $('input[type=radio][name=buy_mode]').change(function () {
            $('#buy-price').html($(this).val() + ' {!! currencySign() !!} ');
            $('#buy_method').val($(this).attr('data-mode'));
            $('input[type=radio][name=buyMode]').removeAttr('selected');
            $('#buyBtn').attr('href', '#');
            if ($(this).attr('data-mode') == 'post') {
                $('.table-base-price').hide();
                $('.table-post-price').show();
            } else {
                $('.table-base-price').show();
                $('.table-post-price').hide();
            }
        })
    });
</script>
<script>
    $(document).ready(function () { 
        $('input[type=radio][name=buyMode]').change(function () {
            var buyLink = '/bank/' + $(this).val() + '/pay/{{ $product->id }}/' + $('#buy_method').val();
            $('#buyBtn').attr('href', buyLink);
        })

        $('#buyBtn').click(function(){
            if (!$("input[type=radio][name=buyMode]:checked").val()) {
                        alert('You need to select a payment method first.');
            }
        })
        


      
    });
</script>

<script>
    document.querySelectorAll('.bonus-countdown, .sale-countdown').forEach(function(el) {
        var endTime = parseInt(el.getAttribute('data-end')) * 1000;
        function tick() {
            var now = new Date().getTime();
            var dist = endTime - now;
            if (dist < 0) { el.innerHTML = 'Expired'; return; }
            var d = Math.floor(dist / 86400000);
            var h = Math.floor((dist % 86400000) / 3600000);
            var m = Math.floor((dist % 3600000) / 60000);
            var s = Math.floor((dist % 60000) / 1000);
            var parts = [];
            if (d > 0) parts.push(d + 'd');
            parts.push(('0' + h).slice(-2) + 'h');
            parts.push(('0' + m).slice(-2) + 'm');
            parts.push(('0' + s).slice(-2) + 's');
            el.innerHTML = parts.join(' ');
        }
        tick();
        setInterval(tick, 1000);
    });
</script>




    @endsection