@extends('admin_pages_master')
@section('styles')
<style type="text/css">
    .checkout-container {
        padding: 50px 0;
    }

    .checkout-card {
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        margin-bottom: 30px;
    }

    .plan-header {
        background-color: #f08237;
        color: white;
        padding: 25px;
        text-align: center;
    }

    .plan-header h3 {
        font-size: 2.2rem;
        font-weight: 700;
        color: white;
        margin-bottom: 5px;
    }

    .plan-header p {
        font-size: 1.5rem;
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.9);
    }

    .plan-details {
        padding: 30px;
        border-bottom: 1px solid #eee;
    }

    .price-tag {
        font-size: 3.2rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 20px;
        text-align: center;
    }

    .price-period {
        font-size: 1.5rem;
        color: #888;
        font-weight: normal;
    }

    .feature-list {
        margin-bottom: 0;
    }

    .feature-list li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;
        font-size: 1.4rem;
    }

    .feature-list li i {
        color: #f08237;
        margin-right: 10px;
        font-size: 1.6rem;
        margin-top: 2px;
    }

    .checkout-form {
        padding: 30px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-control {
        height: 50px;
        border-radius: 8px;
        padding: 10px 15px;
        font-size: 1.4rem;
    }

    .checkout-summary {
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .summary-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 1.4rem;
    }

    .summary-total {
        font-weight: 700;
        font-size: 1.6rem;
        border-top: 1px solid #ddd;
        padding-top: 10px;
        margin-top: 10px;
    }

    .summary-total .summary-value {
        color: #f08237;
    }

    .btn-subscribe {
        background-color: #f08237;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 15px 25px;
        font-size: 1.6rem;
        font-weight: 600;
        width: 100%;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-subscribe:hover {
        background-color: #e67015;
    }

    .payment-methods {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .payment-methods img {
        height: 30px;
        margin: 0 5px;
        opacity: 0.7;
    }

    .secure-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        color: #777;
        margin-top: 15px;
    }

    .secure-badge i {
        color: #3cb371;
        margin-right: 5px;
    }

    .preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        display: none;
    }

    .preloader.show {
        display: flex;
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #f08237;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @media (max-width: 767px) {
        .checkout-container {
            padding: 30px 0;
        }
    }
</style>
@endsection
@section('content')
<main class="main">
    <!-- Start of Breadcrumb -->
   <nav class="breadcrumb-nav">
            <div class="container">
                <ul class="breadcrumb bb-no">
                    <li><a href="/">Home</a></li>
                    <li><a href="{{ route('pricing') }}">Pricing</a></li>
                    <li><a href="javascript:void(0)">Checkout</a></li>
                </ul>
            </div>
        </nav>
        <!-- End of Breadcrumb -->

        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <!-- Back Button -->
                <a class="back-btn d-flex align-items-center" id="back-btn" onclick="goBack()">
                    <i class="w-icon-long-arrow-left"></i>
                    <div>Back</div>
                </a>
            </div>
        </div>

    <!-- Start of Page Content -->

<!-- Start of Page Content -->
<div class="page-content">
            <div class="checkout-container">
                <div class="container">
                    <h2 class="title title-center mb-5">Complete Your Subscription</h2>

                    <div class="row justify-content-center">
                        <!-- Plan Summary Card -->
                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="checkout-card">
                                <div class="plan-header">
                                    <h3>{{ $planInfo['name'] }}</h3>
                                    <p>"{{ $planInfo['nickname'] }}"</p>
                                </div>

                                <div class="plan-details">
                                    <div class="price-tag">
                                        ₦{{ number_format($planInfo['price']) }} <span class="price-period">/ month</span>
                                    </div>

                                    <ul class="feature-list">
                                        @if($plan == 'starter')
                                            <li><i class="w-icon-check-solid"></i> 1 Premium Ad</li>
                                            <li><i class="w-icon-check-solid"></i> ₦2,000 per Ad</li>
                                            <li><i class="w-icon-check-solid"></i> Basic Analytics</li>
                                            <li><i class="w-icon-check-solid"></i> Standard Support</li>
                                        @elseif($plan == 'growth')
                                            <li><i class="w-icon-check-solid"></i> 10 Premium Ads</li>
                                            <li><i class="w-icon-check-solid"></i> Only ₦1,000 per Ad</li>
                                            <li><i class="w-icon-check-solid"></i> Enhanced Analytics</li>
                                            <li><i class="w-icon-check-solid"></i> Priority Support</li>
                                            <li><i class="w-icon-check-solid"></i> Featured in Search Results</li>
                                        @elseif($plan == 'pro')
                                            <li><i class="w-icon-check-solid"></i> 20 Premium Ads</li>
                                            <li><i class="w-icon-check-solid"></i> Only ₦750 per Ad</li>
                                            <li><i class="w-icon-check-solid"></i> Advanced Analytics</li>
                                            <li><i class="w-icon-check-solid"></i> Priority Support</li>
                                            <li><i class="w-icon-check-solid"></i> Featured Listings</li>
                                        @elseif($plan == 'elite')
                                            <li><i class="w-icon-check-solid"></i> Unlimited Premium Ads</li>
                                            <li><i class="w-icon-check-solid"></i> As low as ₦200 per Ad</li>
                                            <li><i class="w-icon-check-solid"></i> Premium Analytics Dashboard</li>
                                            <li><i class="w-icon-check-solid"></i> VIP Support</li>
                                            <li><i class="w-icon-check-solid"></i> Top Featured Listings</li>
                                            <li><i class="w-icon-check-solid"></i> Dedicated Account Manager</li>
                                        @endif
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Checkout Form -->
                        <div class="col-lg-6 col-md-8">
                            <div class="checkout-card">
                                <div class="checkout-form">
                                    <h3 class="mb-4">Payment Details</h3>

                                    <div class="checkout-summary">
                                        <div class="summary-item">
                                            <span class="summary-label">Subscription</span>
                                            <span class="summary-value">{{ $planInfo['name'] }}</span>
                                        </div>
                                        <div class="summary-item">
                                            <span class="summary-label">Period</span>
                                            <span class="summary-value">1 Month</span>
                                        </div>
                                        <div class="summary-item summary-total">
                                            <span class="summary-label">Total</span>
                                            <span class="summary-value">₦{{ number_format($planInfo['price']) }}</span>
                                        </div>
                                    </div>

                                    @if (Session::has('success_message'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                                        <strong>Success!</strong> {{ Session::get('success_message')}}
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    @endif

                                    @if (Session::has('error_message'))
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        <strong>Error!</strong> {{ Session::get('error_message')}}
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    @endif

                                    @if(!Auth::guard('admin')->check())
                                        <div class="alert alert-info">
                                            You need to <a href="{{ route('admin-login-page') }}">log in</a> or <a href="{{ route('vendor.register') }}">create an account</a> to continue.
                                        </div>
                                    @else
                                        <button id="process-order-form" class="btn-subscribe">Subscribe Now</button>

                                        <div class="secure-badge">
                                            <i class="w-icon-lock"></i> Secure Payment
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row justify-content-center mt-4">
                        <div class="col-lg-10">
                            <div class="alert alert-light text-center">
                                <p class="mb-0">Need help? Contact our support team at <a href="mailto:support@234deals.com">support@234deals.com</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Page Content -->
@endsection

@section('scripts')
 <!--paystack js-->
 <script src="https://js.paystack.co/v1/inline.js" defer></script>
<script>
    $('#process-order-form').click(function(e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // $('.preloader').show();
        e.preventDefault();
        // alert("ere")
        var data = {
            plan_id: '{{ $plan }}',
            amount: {{ $planInfo['price'] }},
            return_url: '{{ $return_url ?? "" }}'
        };

        // Process payment with the plan data
        processPayment(data);
    })


    function processPayment(data) {
        data = data;
        $('.preloader').show();
        $.ajax({
            type: 'POST',
            url: 'pay-subscription',
            dataType: 'json',
            data: data,
            success: function(e) {
                $('.preloader').hide();
                $('.preloader').hide();
                payWithPaystack(e);
            },
            error: function(e) {
                $('.preloader').hide();
                // var errorList = '';
                // Object.keys(e.responseJSON.message).forEach(function(key) {
                // errorList += '<li>' + e.responseJSON.message[key][0] + '</li>';
                // });
                new swal("Opss", e.responseJSON.message, "error");
            }
        })

    }

    const paystackSecretKey = @json(env('PAYSTACK_PUBLIC_KEY'));

    function payWithPaystack(data) {
        // console.log(data)
        var orderObj = {
            email: data.email,
            amount: data.amount_paid * 100,
            order_id: data.order_id,
            phone: data.phone,
            process_transaction: "1",
            card: data.card,
        };

        var data = data;
        var handler = PaystackPop.setup({
            key: paystackSecretKey,
            email: orderObj.email,
            amount: orderObj.amount,
            ref: data.transaction_id,
            metadata: {
                custom_fields: [{
                    display_name: "Order ID",
                    variable_name: "order_id",
                    value: orderObj.order_id
                }]
            },
            callback: function(response) {
                $('.preloader').show();
                location.href = "/paystack/transaction-successful?order_id=" + orderObj.order_id +
                    '&reference=' + response.reference;

            },
            onClose: function() {
                $('.preloader').hide();
                alert('Click "Pay online now" to retry payment.');
            }
        });
        handler.openIframe();
    }
</script>

@endsection