@extends('layouts.master')

@section('content')
    <div class="container my-5">
        <div class="row justify-content-center g-4">
            {{-- Left Column: Plan Info --}}
            <div class="col-md-6">
                <div class="bg-primary text-white rounded-top py-3 mb-3 shadow-sm text-center">
                    <h2 class="fw-bold mb-1">{{ $accountType->name }}</h2>
                    <small class="text-light">
                        {{ $isPaid ? 'Upgrade your account plan' : 'Switch to a free plan' }}
                    </small>
                </div>

                @php
                    $pricing_details = $accountType->pricing_details ?? [];
                    $currencySymbol = $accountType->currency_code == 'USD' ? '$' : $accountType->currency_code;

                    $count = count($pricing_details);
                    $colClass = match ($count) {
                        1 => 'col-12',
                        2 => 'col-6',
                        default => 'col-4',
                    };
                @endphp

                <div class="mb-4 p-2 bg-light rounded shadow-sm text-center row g-1">

                    @if ($isPaid)
                        @foreach ($pricing_details as $index => $plan)
                            @php
                                $plan_key = $plan['price'] . '_' . $plan['interval'] . '_' . $plan['unit'];
                            @endphp
                            <div class="{{ $colClass }}">
                                <label class="plan-card w-100">
                                    <input type="radio" name="selected_plan" value="{{ $index }}"
                                        data-plan='@json($plan)' class="plan-radio d-none">
                                    <div class="card p-3 selectable-card"
                                        onclick='selected_plan(@json($plan), @json($plan_key))'
                                        role="button" data-plan-key="{{ $plan_key }}">
                                        <h2 class="fw-bold mb-1">
                                            {{ $currencySymbol }}{{ number_format($plan['price'], 2) }}
                                        </h2>

                                        <small class="text-muted fs-6">
                                            / {{ $plan['interval'] }} {{ $plan['unit'] }}
                                        </small>
                                    </div>
                                </label>
                            </div>
                        @endforeach
                    @else
                        <h1 class="text-success fw-bold mb-0">Free</h1>
                    @endif
                </div>

                <h5 class="mb-3 text-uppercase fw-bold">Plan Features</h5>
                <ul class="list-unstyled mb-4">
                    @foreach ($accountType->p_type->description_array ?? [] as $description)
                        <li class="mb-2 d-flex align-items-center">
                            <i class="bi bi-check-circle-fill text-success me-2 fs-5"></i>
                            <span>{{ Str::title(str_replace('-', ' ', $description)) }}</span>
                        </li>
                    @endforeach
                    @foreach ($accountType->permissions ?? [] as $permission)
                        <li class="mb-2 d-flex align-items-center">
                            <i class="bi bi-check-circle-fill text-success me-2 fs-5"></i>
                            <span>{{ Str::title(str_replace('-', ' ', $permission->display_name)) }}</span>
                        </li>
                    @endforeach

                </ul>
            </div>

            {{-- Right Column: Payment Form --}}
            <div class="col-md-6">
                <div class="p-4 bg-white rounded shadow-sm border">
                    <div id="selectedPlanBox" class="text-center p-3 mb-3 d-none pt-0">
                        <div class="selected-plan-card mx-auto p-3 d-flex justify-content-center align-items-center gap-2">
                            <h2 id="plan_price" class="fw-bold mb-0 pb-0"></h2>
                            <h5 id="plan_selected" class="text-muted mb-0 pb-0"></h5>
                        </div>

                    </div>

                    <h6 class="fw-bold text-center mt-3">
                        @if ($isPaid)
                            {{ !empty($savedCards['cards']) && count($savedCards['cards']) > 0 ? 'Choose Payment Method' : 'Use a Credit or Debit Card' }}
                        @else
                            Downgrade to Free Plan
                        @endif
                    </h6>
                    <div class="border-bottom mb-3"></div>
                    @if ($isPaid)
                        <div class="payment-options">
                            @if (!empty($savedCards['cards']) && count($savedCards['cards']) > 0)
                                {{-- Saved Cards --}}
                                <div class="payment-option card mb-3" data-target="#savedCards">
                                    <div class="card-header d-flex justify-content-between align-items-center">
                                        <span>Saved Cards</span>
                                        <span class="toggle-icon">+</span>
                                    </div>
                                    <div class="card-body collapse show" id="savedCards">
                                        @include('common.saved-card')
                                    </div>
                                </div>

                                {{-- New Payment --}}
                                <div class="payment-option card mb-3" data-target="#newPayment">
                                    <div class="card-header d-flex justify-content-between align-items-center">
                                        <span>Pay with New Card</span>
                                        <span class="toggle-icon">+</span>
                                    </div>
                                    <div class="card-body collapse" id="newPayment">
                                        @include('account.upgrade.checkout')
                                    </div>
                                </div>
                            @else
                                @include('account.upgrade.checkout')
                            @endif
                        </div>
                    @else
                        <button class="btn btn-success btn-lg w-100" id="btnFreePlan">
                            <i class="fas fa-check me-2"></i> Continue with Free Plan
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('after_styles')
    @parent
    <style>
        .payment-option .card-header {
            cursor: pointer;
            background-color: #f8f9fa;
            font-weight: 600;
            transition: background 0.3s;
        }

        .payment-option .card-header:hover {
            background-color: #e9ecef;
        }

        .payment-option .toggle-icon {
            font-size: 1.25rem;
            transition: transform 0.3s;
        }

        .payment-option .card-body {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .payment-option.active .toggle-icon {
            transform: rotate(45deg);
        }

        .selectable-card:hover {
            border: 1px solid rgb(130, 230, 130);
        }

        .selected-plan-card {
            background: #ffffff;
            border: 2px solid #0d6efd;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
    </style>
@endsection

@section('after_scripts')
    @parent
    <script>
        $(document).ready(function() {
            $('.payment-option .card-header').on('click', function() {
                const $parent = $(this).closest('.payment-option');
                const targetSelector = $parent.data('target');
                const $target = $(targetSelector);

                // Close all others
                $('.payment-option .card-body').not($target).slideUp();
                $('.payment-option').not($parent).removeClass('active');
                $('.payment-option .toggle-icon').css('transform', 'rotate(0deg)');

                // Toggle the clicked section
                $target.slideToggle();
                $parent.toggleClass('active');

                // Rotate the active icon
                if ($parent.hasClass('active')) {
                    $parent.find('.toggle-icon').css('transform', 'rotate(45deg)');
                } else {
                    $parent.find('.toggle-icon').css('transform', 'rotate(0deg)');
                }
            });

            // Rotate the icon for the initially open section (Saved Cards)
            $('.payment-option[data-target="#savedCards"] .toggle-icon').css('transform', 'rotate(45deg)');


            // select default plan
            const urlPlan = @json(request()->query('plan')) ?? 0;
            const pricingDetails = @json($pricing_details);

            if (urlPlan !== null && pricingDetails[urlPlan]) {
                const plan = pricingDetails[urlPlan];
                const key = `${plan.price}_${plan.interval}_${plan.unit}`;
                selected_plan(plan, key);

                $(`input[name="selected_plan"][value="${urlPlan}"]`).prop('checked', true);
            }
        });

        // Pay with saved card
        $(document).on('click', '#selectedCardBtn', function(e) {
            e.preventDefault();
            const pmId = $('#selectedCardId').val();
            const plan_id = @json($accountType->id);
            const plan = $('input[name="selected_plan"]:checked').data('plan');

            const payload = {
                plan_id,
                pmId,
                payment_method_id: 3,
                payment_type: 'saved-card',
                plan: plan,
            };

            Swal.fire({
                title: 'Confirm Subscription',
                text: 'Are you sure you want to create this subscription?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#aaa',
                confirmButtonText: 'Yes, create it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Processing...',
                        text: 'Please wait while we create your subscription.',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });

                    $.ajax({
                        url: '/account/upgrade',
                        type: 'POST',
                        data: {
                            ...payload,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            Swal.close();

                            Swal.fire({
                                icon: 'success',
                                title: 'Subscription Created!',
                                html: `
                                    <p>${response.message}</p>
                                    <p><strong>Subscription ID: <span style="color:#3085d6;">${response.subscription_id}</span></strong></p>
                                    <p id="swal-timer">Redirecting in <b>3</b> seconds...</p>
                                `,
                                showConfirmButton: false,
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                                timer: 3000,
                                didOpen: () => {
                                    const timerElement = Swal.getHtmlContainer()
                                        .querySelector('#swal-timer');
                                    let timeLeft = 3;
                                    const interval = setInterval(() => {
                                        timeLeft -= 1;
                                        if (timerElement) {
                                            timerElement.innerHTML =
                                                `Redirecting in <b>${timeLeft}</b> seconds...`;
                                        }
                                    }, 1000);

                                    setTimeout(() => {
                                        clearInterval(interval);
                                        window.location.href =
                                            '/account/type';
                                    }, 3000);
                                }
                            });
                        },
                        error: function(xhr) {
                            Swal.close();
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: xhr.responseJSON?.message ||
                                    'Something went wrong. Please try again later.',
                                confirmButtonColor: '#d33'
                            });
                        }
                    });
                }
            });
        });

        $(document).on('click', '#btnFreePlan', function(e) {
            e.preventDefault();

            const activeSubscription = @json($activeSubscription ?? null);

            if (!activeSubscription) {
                Swal.fire({
                    icon: 'info',
                    title: 'No Active Subscription',
                    text: 'You do not have an active subscription to downgrade.',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                });
                return;
            }

            const currentPkgName = activeSubscription.plan_name ?? 'Current Plan';
            const subscription_id = activeSubscription.gateway_subscription_id;

            Swal.fire({
                title: '<p style="line-height:1.1">Are you sure you want to downgrade to the Free Plan?</p>',
                html: `<p style="color: red;">Your ${currentPkgName} features will be removed and your account will revert to the standard plan.</p>`,
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: "btnDanger",
                },
                confirmButtonText: "Yes, Downgrade",
                cancelButtonText: "No"
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Processing...',
                        text: 'Please wait while we downgrade your account.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => Swal.showLoading()
                    });

                    $.ajax({
                        url: '/account/upgrade/subscription/cancel',
                        type: 'POST',
                        data: {
                            subscription_id: subscription_id,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            Swal.close();

                            let timeLeft = 3;

                            Swal.fire({
                                icon: response.success ? 'success' : 'error',
                                title: response.success ? 'Downgraded!' : 'Error!',
                                html: response.success ?
                                    `Your account has been downgraded to the Free Plan. Reloading in <b>${timeLeft}</b> seconds...` :
                                    response.message,
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                                showConfirmButton: !response.success,
                                didOpen: () => {
                                    if (response.success) {
                                        const timerInterval = setInterval(() => {
                                            timeLeft--;
                                            const htmlContainer = Swal
                                                .getHtmlContainer();
                                            if (htmlContainer) {
                                                htmlContainer.querySelector(
                                                        'b').textContent =
                                                    timeLeft;
                                            }
                                            if (timeLeft <= 0) {
                                                clearInterval(
                                                    timerInterval);
                                                window.location.href =
                                                    '/account';
                                            }
                                        }, 1000);
                                    }
                                }
                            });
                        },
                        error: function(xhr) {
                            Swal.close();

                            let message = 'Something went wrong.';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                message = xhr.responseJSON.message;
                            }

                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: message,
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                            });
                        }
                    });
                }
            });
        });

        function selected_plan(plan, key) {
            const clicked = $(`.selectable-card[data-plan-key="${key}"]`);
            $('.selectable-card').removeClass('border border-primary');
            clicked.addClass('border border-primary');

            const currency = plan.currency_symbol ?? '$';

            $('#plan_price').html(`${currency}${Number(plan.price).toFixed(2)}`);
            $('#plan_selected').html(`/ ${plan.interval} ${plan.unit}`);

            $('#selectedPlanBox').removeClass('d-none');
        }
    </script>
@endsection