{{--
 * LaraClassifier - Classified Ads Web Application
 * Copyright (c) BeDigit. All Rights Reserved
 *
 * Website: https://laraclassifier.com
 *
 * LICENSE
 * -------
 * This software is furnished under a license and may be used and copied
 * only in accordance with the terms of such license and with the inclusion
 * of the above copyright notice. If you Purchased from CodeCanyon,
 * Please read the full License from here - http://codecanyon.net/licenses/standard
--}}
@extends('layouts.master')

@php
    $currentUrl = request()->url();
    $allAccPerms = config('larapen.core.SpacialPermissions', []);
    $iCurAccT = data_get($user, 'acctType');
    $currentPrice = data_get($iCurAccT, 'p_type.price', 0);

    // Find all higher priced plans for upgrade
    $upgradablePlans = collect($account_types)->filter(fn($plan) => data_get($plan, 'p_type.price', 0) > $currentPrice);

@endphp

@php
    if (!function_exists('subscriptionStatusClass')) {
        function subscriptionStatusClass($status)
        {
            return match ($status) {
                'active' => 'success',
                'pending', 'in_progress' => 'warning',
                'trial' => 'info',
                'suspended' => 'secondary',
                'cancelled' => 'danger',
                'expired' => 'dark',
                'failed' => 'danger',
                default => 'secondary',
            };
        }
    }
@endphp

@section('content')
    @includeFirst([config('larapen.core.customizedViewPath') . 'common.spacer', 'common.spacer'])

    <div class="main-container">
        <div class="container">
            <div class="row">

                {{-- Sidebar --}}
                <div class="col-md-3 page-sidebar">
                    @includeFirst([
                        config('larapen.core.customizedViewPath') . 'account.inc.sidebar',
                        'account.inc.sidebar',
                    ])
                </div>

                {{-- Main Content --}}
                <div class="col-md-9 page-content">

                    @include('flash::message')

                    @if (isset($errors) && $errors->any())
                        <div class="alert alert-danger alert-dismissible">
                            <button type="button" class="btn-close" data-bs-dismiss="alert"
                                aria-label="{{ t('Close') }}"></button>
                            <h5><strong>{{ t('oops_an_error_has_occurred') }}</strong></h5>
                            <ul class="list list-check">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    {{-- Current Account Type --}}
                    <div id="account_types" class="inner-box default-inner-box" style="overflow: visible;">
                        <div class="card card-default mb-3">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="card-title text-primary">{{ data_get($iCurAccT, 'name', '') }}</h4>
                                <button class="btn btn-primary" style="pointer-events: none">Current</button>
                            </div>
                            <div class="card-body">
                                <h5>This Account Has Following Permissions:</h5>
                                <ul>
                                    @foreach (data_get($iCurAccT, 'p_type.description_array', []) as $option)
                                        <li>- {!! $option !!}</li>
                                    @endforeach
                                    @foreach (data_get($iCurAccT, 'permissions', []) as $permission)
                                        <li>- {!! data_get($permission, 'display_name') !!}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>

                        {{-- Current Subscription --}}
                        @if (!empty($subscription))
                            <div class="card border-0 shadow-sm rounded-3">
                                <div class="card-body p-4">

                                    {{-- Main Info & Actions --}}
                                    <div
                                        class="d-flex flex-column flex-md-row justify-content-between align-items-md-start gap-3">

                                        {{-- Left Side: Plan Details --}}
                                        <div>
                                            <div class="d-flex align-items-center gap-2 mb-2">
                                                <i class="fas fa-crown text-warning" style="font-size: 1.5rem;"></i>
                                                <h4 class="fw-bold mb-0 pb-0">{{ $subscription->plan_name ?? 'N/A' }}</h4>
                                                <span
                                                    class="badge bg-{{ subscriptionStatusClass($subscription->status) }} text-uppercase ms-1">
                                                    {{ str_replace('_', ' ', ucfirst($subscription->status)) }}
                                                </span>
                                            </div>
                                            <p class="text-muted mb-0">
                                                <i class="fa fa-calendar-check text-success me-1"></i>
                                                Renews on
                                                <strong>{{ \Carbon\Carbon::parse($subscription->next_billing_date)->format('M d, Y') }}</strong>
                                                @if (!empty($daysLeft))
                                                    <span class="text-success">({{ $daysLeft }} days left)</span>
                                                @endif
                                            </p>
                                        </div>

                                        {{-- Right Side: Price & Cancel Button --}}
                                        <div class="text-md-end">
                                            <div class="mb-2">
                                                <span class="text-muted">Amount</span>
                                                <h4 class="fw-bold d-inline-block mb-0 ms-2">
                                                    {{ $subscription->currency }}
                                                    {{ number_format($subscription->amount, 2) }}
                                                </h4>
                                            </div>
                                            <button class="btn btn-sm btn-outline-danger w-100 w-md-auto"
                                                onclick="cancelSubscription()">
                                                <i class="fas fa-times-circle me-1"></i> Cancel Subscription
                                            </button>
                                        </div>
                                    </div>

                                    <hr class="my-3">

                                    {{-- Footer Details --}}
                                    <div
                                        class="d-flex flex-column flex-sm-row justify-content-between small text-muted gap-2">
                                        <div>
                                            <i class="fa fa-play-circle me-1" title="Start Date"></i>
                                            Started on
                                            {{ \Carbon\Carbon::parse($subscription->start_date)->format('M d, Y') }}
                                        </div>
                                        <div>
                                            <i class="fa fa-credit-card me-1" title="Payment Gateway"></i>
                                            Billed via {{ ucfirst($subscription->gateway_name) }}
                                        </div>
                                        <div class="d-flex align-items-baseline">
                                            <i class="fa fa-receipt me-1" title="Subscription ID"></i>
                                            ID:
                                            <span id="subscription-id"
                                                class="fw-semibold">{{ $subscription->gateway_subscription_id }}</span>
                                            <button class="btn btn-sm btn-light py-0 px-1 ms-1"
                                                onclick="copySubscriptionId()" data-bs-toggle="tooltip"
                                                data-bs-title="Copy ID">
                                                <i class="fa fa-copy small"></i>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        @endif

                        {{-- Change Account Type Button --}}
                        @if (empty($subscription))
                            <a href="/pricing" role="button" class="btn btn-primary w-100 mb-3 mt-3">
                                Upgrade Account
                            </a>
                        @endif

                        {{-- Subscription History --}}
                        @if ($subscriptionHistory->isNotEmpty())
                            <div class="mb-3 mt-3">
                                <h5 class="fw-bold">Subscription History</h5>
                                <p class="text-muted small">View all your past and current subscriptions</p>
                            </div>

                            <table class="table table-responsive-stack align-middle">
                                <thead class="d-none d-md-table-header-group">
                                    <tr>
                                        <th scope="col">Subscription</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Amount</th>
                                        <th scope="col" class="text-end">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="subscriptionHistoryAccordion">
                                    @foreach ($subscriptionHistory as $sub)
                                        <tr>
                                            <td data-label="Subscription">
                                                <strong>
                                                    {{-- Display plan name and upgrades --}}
                                                    {{ $sub->plan_name }}
                                                    @if ($sub->replacedBy)
                                                        → {{ $sub->replacedBy->plan_name }}
                                                    @endif
                                                </strong>
                                                <div class="small text-muted">
                                                    {{ \Carbon\Carbon::parse($sub->start_date)->format('M d, Y') }}
                                                    @if ($sub->status === 'cancelled' && $sub->end_date)
                                                        | End:
                                                        {{ \Carbon\Carbon::parse($sub->end_date)->format('M d, Y') }}
                                                    @elseif($sub->next_billing_date)
                                                        | Next:
                                                        {{ \Carbon\Carbon::parse($sub->next_billing_date)->format('M d, Y') }}
                                                    @endif
                                                </div>
                                            </td>
                                            <td data-label="Status">
                                                @if ($sub->replaced_by_id)
                                                    <span class="badge bg-info text-uppercase">
                                                        Updated
                                                    </span>
                                                @else
                                                    <span
                                                        class="badge bg-{{ subscriptionStatusClass($sub->status) }} text-uppercase">
                                                        {{ str_replace('_', ' ', ucfirst($sub->status)) }}
                                                    </span>
                                                @endif
                                            </td>
                                            <td data-label="Amount">
                                                <span class="fw-semibold">{{ $sub->currency }}
                                                    {{ number_format($sub->amount, 2) }}</span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                @if ($subscriptionHistory->hasPages())
                                    <tfoot>
                                        <tr>
                                            <td colspan="4">
                                                @php
                                                    $p = $subscriptionHistory;
                                                    $current = $p->currentPage();
                                                    $last = $p->lastPage();
                                                    $start = max(1, $current - 2);
                                                    $end = min($last, $current + 2);
                                                @endphp

                                                <nav aria-label="Page navigation">
                                                    <ul class="pagination justify-content-center mb-0">
                                                        <li class="page-item {{ $p->onFirstPage() ? 'disabled' : '' }}">
                                                            <a class="page-link" href="{{ $p->previousPageUrl() }}"
                                                                tabindex="-1"
                                                                aria-disabled="{{ $p->onFirstPage() ? 'true' : 'false' }}">&lsaquo;</a>
                                                        </li>
                                                        @if ($start > 1)
                                                            <li class="page-item"><a class="page-link"
                                                                    href="{{ $p->url(1) }}">1</a></li>
                                                            @if ($start > 2)
                                                                <li class="page-item disabled"><span
                                                                        class="page-link">…</span>
                                                                </li>
                                                            @endif
                                                        @endif
                                                        @for ($i = $start; $i <= $end; $i++)
                                                            <li class="page-item {{ $i == $current ? 'active' : '' }}">
                                                                <a class="page-link"
                                                                    href="{{ $p->url($i) }}">{{ $i }}</a>
                                                            </li>
                                                        @endfor
                                                        @if ($end < $last)
                                                            @if ($end < $last - 1)
                                                                <li class="page-item disabled"><span
                                                                        class="page-link">…</span>
                                                                </li>
                                                            @endif
                                                            <li class="page-item"><a class="page-link"
                                                                    href="{{ $p->url($last) }}">{{ $last }}</a>
                                                            </li>
                                                        @endif
                                                        <li class="page-item {{ $p->hasMorePages() ? '' : 'disabled' }}">
                                                            <a class="page-link" href="{{ $p->nextPageUrl() }}"
                                                                aria-disabled="{{ $p->hasMorePages() ? 'false' : 'true' }}">&rsaquo;</a>
                                                        </li>
                                                    </ul>
                                                </nav>
                                            </td>
                                        </tr>
                                    </tfoot>
                                @endif
                            </table>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('after_styles')
    <style>
        .table tbody tr:last-child td {
            border-bottom: 1px solid #dee2e6 !important;
        }

        /* Responsive Table Styling for screens smaller than 768px */
        @media screen and (max-width: 767.98px) {
            .table-responsive-stack {
                display: block;
                width: 100%;
            }

            .table-responsive-stack thead,
            .table-responsive-stack tbody,
            .table-responsive-stack tr {
                display: block;
                width: 100%;
            }

            .table-responsive-stack tr {
                margin-bottom: 1rem;
                border: 1px solid #dee2e6;
                border-radius: 0.375rem;
                /* Bootstrap's default card border-radius */
            }

            /* Hide the special row for the collapse content border */
            .table-responsive-stack tr.collapse-row {
                border: none;
                margin-bottom: 0;
            }

            .table-responsive-stack td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.75rem 1rem;
                border: none;
                border-bottom: 1px solid #dee2e6;
                text-align: right;
                /* Align cell content to the right */
            }

            .table-responsive-stack tr:last-child td:last-child,
            .table-responsive-stack td:last-child {
                border-bottom: 0;
            }

            .table-responsive-stack td[data-label]::before {
                content: attr(data-label);
                font-weight: 600;
                margin-right: auto;
                text-align: left;
                /* Align label to the left */
            }

            .table-responsive-stack td[data-label="Actions"] .d-flex {
                width: 100%;
            }

        }
    </style>


@section('after_scripts')
    <script>
        function copySubscriptionId() {
            const id = document.getElementById('subscription-id').innerText;
            navigator.clipboard.writeText(id);
            Swal.fire({
                icon: 'success',
                title: 'Copied!',
                timer: 1200,
                showConfirmButton: false
            });
        }
    </script>

    <script>
        function cancelSubscription() {
            Swal.fire({
                title: '<p style="line-height:1.1">Are you sure you want to cancel the subscription?</p>',
                html: '<p style="color: red;">If you cancel the subscription, your account will be downgraded to standard from now.</p>',
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: "btnDanger",
                },
                confirmButtonText: "Yes, Cancel it!",
                cancelButtonText: "No"
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Processing...',
                        text: 'Please wait while we cancel your subscription.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => Swal.showLoading()
                    });

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

                            let timeLeft = 3; // 3 seconds countdown

                            Swal.fire({
                                icon: response.success ? 'success' : 'error',
                                title: response.success ? 'Canceled!' : 'Error!',
                                html: response.success ?
                                    `Your subscription has been canceled. Reloading in <b>${timeLeft}</b> seconds...` :
                                    response.message,
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                                showConfirmButton: !response
                                    .success, // show button only if error
                                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 =
                                                    @json($currentUrl);
                                            }
                                        }, 1000);
                                    }
                                }
                            });
                        },
                        error: function(xhr) {
                            Swal.close(); // close loading

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

                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: message, // show server-side error message
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                            });
                        }
                    });
                }
            });
        }
    </script>
@endsection