@extends('layouts.app')
@section('title', 'Account')

@section('content')
<div class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6" x-data="{ activeTab: 'overview', paymentOpen: false }">
    
    <!-- Breadcrumb Start -->
    <div class="flex flex-wrap items-center justify-between gap-3 pb-6">
        <div>
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">Account
                <span class="help-icon-wrapper">
                     <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                     <span class="help-popover-text" style="bottom: 100%;width:460px">
                           <span class="popover-header">Account</span>
                           <span class="popover-body">View information about your account, including your current plan, available limits, usage, and account limits.</span>
                     </span>
                  </span>
            </h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Manage your account, plan details, usage, and limits.</p>
        </div>
        <nav>
            <ol class="flex items-center gap-1.5">
                <li>
                    <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="/dashboard">
                        Home
                        <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none">
                            <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </a>
                </li>
                <li class="text-sm text-gray-800 dark:text-white/90">Account</li>
            </ol>
        </nav>
    </div>
    <!-- Breadcrumb End -->

                    <div
                        class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
                     >
                        
                        <!-- <div
                           class="border-t border-gray-100 p-4 sm:p-6 dark:border-gray-800"
                        > -->
                           <div x-data="{ activeTab: 'overview' }">
                              <div
                                 class="rounded-t-xl border border-gray-200 p-3 dark:border-gray-800"
                              >
                                 <nav
                                    class="flex overflow-x-auto rounded-lg bg-gray-100 p-1 dark:bg-gray-900 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-200 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 [&::-webkit-scrollbar-track]:bg-white dark:[&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:h-1.5"
                                 >
                                    <button
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="activeTab === 'overview' ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                                       x-on:click="activeTab = 'overview'"
                                    >
                                       Overview
                                    </button>
                                    <button
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="activeTab === 'usage' ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                                       x-on:click="activeTab = 'usage'"
                                    >
                                       Usage & Limits
                                    </button>
                                    <button
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="activeTab === 'transactions' ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
                                       x-on:click="activeTab = 'transactions'"
                                    >
                                       Transactions
                                    </button>
                                    
                                 </nav>
                              </div>
                              <div
                                 class="rounded-b-xl border border-t-0 border-gray-200 p-6 pt-4 dark:border-gray-800"
                              >
                                <div x-show="activeTab === 'overview'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-6">
    
                                    <!-- Top Header -->
                                    <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
                                        <div>
                                            <h3 class="flex items-center gap-2 text-xl font-semibold text-gray-900 dark:text-white">
                                                Overview
                                                                        <span class="help-icon-wrapper">
                                                                            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                                                                            <span class="help-popover-text" style="bottom: 100%;width:460px">
                                                                                <span class="popover-header">Overview</span>
                                                                                <span class="popover-body">Review the plan associated with your account and the limits available for users, templates, signature requests, and API usage.</span>
                                                                            </span>
                                                                        </span>
                                            </h3>
                                            <p class="text-sm text-gray-500 dark:text-gray-400">View your current plan and account limits.</p>
                                        </div>
                                    </div>

                                    <!-- 2-Column Layout -->
                                    <div class="grid grid-cols-1 gap-6 lg:grid-cols-12">
                                        
                                        <!-- Left Column: Subscription Plan Card (4 cols) -->
                                        <div class="flex flex-col justify-between rounded-2xl border border-gray-200 bg-gradient-to-b from-gray-900 via-gray-900 to-gray-950 p-6 text-gray-900 shadow-xl dark:border-gray-800 lg:col-span-4">
                                            <div>
                                                

                                                <div class="flex items-center justify-between">
                                                    @if(Session::get('company_payment_status') == 'Free')
                                                        <span class="inline-flex items-center gap-1.5 rounded-full border border-amber-500/30 bg-amber-500/20 px-3 py-1 text-xs font-semibold text-amber-300">
                                                            <span class="h-2 w-2 rounded-full bg-amber-400"></span>
                                                            Free Tier
                                                        </span>
                                                    @else
                                                        <span class="inline-flex items-center gap-1.5 rounded-full border border-emerald-500/30 bg-emerald-500/20 px-3 py-1 text-xs font-bold text-emerald-300">
                                                            <span class="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span>
                                                            Active Plan
                                                        </span>
                                                    @endif
                                                    <!-- <span class="text-xs uppercase tracking-wider text-gray-400 font-mono font-medium">Workspace</span> -->
                                                </div>

                                                <!-- Plan Name & Description -->
                                                <div class="mt-6">
                                                    <p class="text-xs font-medium uppercase tracking-widest text-gray-500">Current Plan</p>
                                                    <h4 class="mt-1 text-3xl font-extrabold tracking-tight text-gray-900">
                                                        {{ $plan_details->plan_name }}
                                                    </h4>
                                                    <p class="mt-2 text-xs leading-relaxed text-gray-500">
                                                        Enjoy elevated signature capacities, template automation, and developer API integrations.
                                                    </p>
                                                </div>
                                            </div>

                                            <!-- Action Area -->
                                            <div class="mt-8 pt-6 border-t border-white/10">
                                                @if(Session::get('company_payment_status') == "Free")
                                                    <button 
                                                        @click="paymentOpen = true" 
                                                        class="w-full flex items-center justify-center gap-2 rounded-xl bg-white px-4 py-3 text-sm font-semibold text-gray-950 transition hover:bg-gray-100 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-white/20 active:scale-[0.98]"
                                                    >
                                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                                        Upgrade Subscription
                                                    </button>
                                                @else
                                                    <div class="flex items-center justify-between text-xs text-gray-400">
                                                        <span>Status</span>
                                                        <span class="font-medium text-emerald-400">Active</span>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>

                                        <!-- Right Column: Quota & Entitlements Details (8 cols) -->
                                        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.02] lg:col-span-8">
                                            <div class="border-b border-gray-100 px-6 py-4 dark:border-gray-800">
                                                <h4 class="text-sm font-semibold text-gray-900 dark:text-white">Included Plan Limits & Features</h4>
                                            </div>

                                            <div class="divide-y divide-gray-100 dark:divide-gray-800/60">
                                                
                                                <!-- Max Users Item -->
                                                <div class="flex items-center justify-between p-4 sm:px-6 hover:bg-gray-50/50 dark:hover:bg-white/[0.01] transition-colors">
                                                    <div class="flex items-center gap-3.5">
                                                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
                                                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                                                        </div>
                                                        <div>
                                                            <span class="text-sm font-medium text-gray-900 dark:text-white">Max Team Members</span>
                                                            <p class="text-xs text-gray-500 dark:text-gray-400">Users available for team collaboration</p>
                                                        </div>
                                                    </div>
                                                    <span class="inline-flex items-center rounded-lg bg-gray-100 px-3 py-1 text-sm font-semibold text-gray-800 dark:bg-gray-800 dark:text-gray-200">
                                                        {{ $plan_details->plan_users == 10000 ? 'Unlimited' : $plan_details->plan_users . ' Seats' }}
                                                    </span>
                                                </div>

                                                <!-- Templates Item -->
                                                <div class="flex items-center justify-between p-4 sm:px-6 hover:bg-gray-50/50 dark:hover:bg-white/[0.01] transition-colors">
                                                    <div class="flex items-center gap-3.5">
                                                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400">
                                                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                                        </div>
                                                        <div>
                                                            <span class="text-sm font-medium text-gray-900 dark:text-white">Document Templates</span>
                                                            <p class="text-xs text-gray-500 dark:text-gray-400">Reusable documents and sign workflows</p>
                                                        </div>
                                                    </div>
                                                    <span class="inline-flex items-center rounded-lg bg-gray-100 px-3 py-1 text-sm font-semibold text-gray-800 dark:bg-gray-800 dark:text-gray-200">
                                                        {{ $plan_details->plan_templates == 10000 ? 'Unlimited' : $plan_details->plan_templates }}
                                                    </span>
                                                </div>

                                                <!-- Signature Requests Item -->
                                                <div class="flex items-center justify-between p-4 sm:px-6 hover:bg-gray-50/50 dark:hover:bg-white/[0.01] transition-colors">
                                                    <div class="flex items-center gap-3.5">
                                                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-purple-50 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400">
                                                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                                                        </div>
                                                        <div>
                                                            <span class="text-sm font-medium text-gray-900 dark:text-white">Signature Requests</span>
                                                            <p class="text-xs text-gray-500 dark:text-gray-400">Total document packages allowed to send</p>
                                                        </div>
                                                    </div>
                                                    <span class="inline-flex items-center rounded-lg bg-gray-100 px-3 py-1 text-sm font-semibold text-gray-800 dark:bg-gray-800 dark:text-gray-200">
                                                        {{ $plan_details->plan_signature_requests == 10000 ? 'Unlimited' : $plan_details->plan_signature_requests }}
                                                    </span>
                                                </div>

                                                <!-- API Quota Item -->
                                                <div class="flex items-center justify-between p-4 sm:px-6 hover:bg-gray-50/50 dark:hover:bg-white/[0.01] transition-colors">
                                                    <div class="flex items-center gap-3.5">
                                                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400">
                                                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                                        </div>
                                                        <div>
                                                            <span class="text-sm font-medium text-gray-900 dark:text-white">Monthly API Request Quota</span>
                                                            <p class="text-xs text-gray-500 dark:text-gray-400">Webhook and REST API throughput limit</p>
                                                        </div>
                                                    </div>
                                                    <span class="inline-flex items-center rounded-lg bg-gray-100 px-3 py-1 text-sm font-semibold text-gray-800 dark:bg-gray-800 dark:text-gray-200">
                                                        {{ $plan_details->plan_api_credits == 10000 ? 'Unlimited' : number_format($plan_details->plan_api_credits) . ' requests/month' }}
                                                    </span>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                </div>

                                 <div x-show="activeTab === 'usage'">
                                    <h3
                                       class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90"
                                    >
                                       Usage & Limits
                                       <span class="help-icon-wrapper">
                                            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                                            <span class="help-popover-text" style="bottom: 100%;width:460px">
                                                <span class="popover-header">Usage & Limits</span>
                                                <span class="popover-body">Monitor your plan's allocated resources and track your real-time usage across your account.</span>
                                            </span>
                                        </span>
                                    </h3>
                                    <p
                                       class="text-sm text-gray-500 dark:text-gray-400"
                                    >
                                       This section shows the resources included in your current plan and your ongoing usage.
                                    </p>
                                    <div class="space-y-4">
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-5">
                                            <!-- Storage Card -->
                                            <div class="rounded-xl border border-gray-100 p-5 dark:border-gray-800 bg-gray-50/50 dark:bg-white/5">
                                                <div class="flex justify-between mb-2">
                                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Hosted Document Storage</span>
                                                    <span class="text-xs text-gray-500">{{ Session::get("total_size_used") }} Mb / {{ Session::get("plan_storage") }} Mb Max</span>
                                                </div>
                                                
                                                @php
                                                    $storagePer = Session::get("plan_storage") != 0 ? round((100 * Session::get("total_size_used")) / Session::get("plan_storage")) : 0;
                                                @endphp
                                                <!-- <div class="w-full bg-gray-200 rounded-full h-4 dark:bg-gray-700">
                                                    <div class="bg-green-500 h-4 rounded-full text-[10px] text-white text-center leading-4" style="width: {{ $storagePer }}%">{{ $storagePer }}%</div>
                                                </div> -->
                                                <!-- <div class="relative w-full h-4 rounded-full bg-gray-200 dark:bg-gray-800">
                                                    <div class="absolute left-0 w-[40%] h-full bg-brand-500 rounded-full flex items-center justify-center text-white font-medium text-[10px] leading-tight">
                                                    40%
                                                    </div>
                                                </div>

                                                <div class="relative w-full h-4 rounded-full bg-gray-200 dark:bg-gray-800">
                                                    <div class="absolute left-0 w-[70%] h-full bg-brand-500 rounded-full flex items-center justify-center text-white font-medium text-[10px] leading-tight">
                                                    70%
                                                    </div>
                                                </div> -->

                                                <div class="w-full h-4 rounded-full bg-gray-200 dark:bg-gray-800 overflow-hidden">
                                                    <div 
                                                        class="h-full bg-brand-500 rounded-full flex items-center justify-center text-white font-medium text-[10px] leading-tight transition-all duration-500"
                                                        style="width: {{$storagePer}}%;">
                                                        {{$storagePer}}%
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Users Card -->
                                            <div class="rounded-xl border border-gray-100 p-5 dark:border-gray-800 bg-gray-50/50 dark:bg-white/5">
                                                <div class="flex justify-between mb-2">
                                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Users</span>
                                                    <!-- <span class="text-xs text-gray-500">{{ Session::get("total_user") }} / {{ Session::get("plan_users") }} Max</span> -->
                                                    <span class="text-xs text-gray-500">{{ Session::get("total_user") }} / {{ Session::get('plan_users') == 10000 ? 'Unlimited' : Session::get('plan_users'). ' Max' }}</span>
                                                    
                                                </div>
                                                @php
                                                    $userPer = Session::get("plan_users") != 0 ? round((100 * Session::get("total_user")) / Session::get("plan_users")) : 0;
                                                @endphp
                                                <!-- <div class="w-full bg-gray-200 rounded-full h-4 dark:bg-gray-700">
                                                    <div class="bg-blue-500 h-4 rounded-full text-[10px] text-white text-center leading-4" style="width: {{ $userPer }}%">{{ $userPer }}%</div>
                                                </div> -->
                                                <div class="w-full h-4 rounded-full bg-gray-200 dark:bg-gray-800 overflow-hidden">
                                                    <div 
                                                        class="h-full bg-brand-500 rounded-full flex items-center justify-center text-white font-medium text-[10px] leading-tight transition-all duration-500"
                                                        style="width: {{$userPer}}%;">
                                                        {{$userPer}}%
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Templates Card -->
                                            <div class="rounded-xl border border-gray-100 p-5 dark:border-gray-800 bg-gray-50/50 dark:bg-white/5">
                                                <div class="flex justify-between mb-2">
                                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Templates Created</span>
                                                    <!-- <span class="text-xs text-gray-500">{{ Session::get("template_count") }} / {{ Session::get("plan_templates") }} Max</span> -->
                                                    <span class="text-xs text-gray-500">{{ Session::get("template_count") }} / {{ Session::get('plan_templates') == 10000 ? 'Unlimited' : Session::get('plan_templates').' Max' }} </span>
                                                </div>
                                                @php
                                                    $templatePer = Session::get("plan_templates") != 0 ? round((100 * Session::get("template_count")) / Session::get("plan_templates")) : 0;
                                                @endphp
                                                <!-- <div class="w-full bg-gray-200 rounded-full h-4 dark:bg-gray-700">
                                                    <div class="bg-yellow-500 h-4 rounded-full text-[10px] text-white text-center leading-4" style="width: {{ $templatePer }}%">{{ $templatePer }}%</div>
                                                </div> -->
                                                <div class="w-full h-4 rounded-full bg-gray-200 dark:bg-gray-800 overflow-hidden">
                                                    <div 
                                                        class="h-full bg-brand-500 rounded-full flex items-center justify-center text-white font-medium text-[10px] leading-tight transition-all duration-500"
                                                        style="width: {{$templatePer}}%;">
                                                        {{$templatePer}}%
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="rounded-xl border border-gray-100 p-5 dark:border-gray-800 bg-gray-50/50 dark:bg-white/5">
                                                <div class="flex justify-between mb-2">
                                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Monthly API Request Quota Available </span>
                                                    <span class="text-xs text-gray-500">{{ $api_credit_used }} / {{ $plan_api_credit }} Max</span>
                                                </div>
                                                @php
                                                    $apiPer = $plan_api_credit > 0 ? round(($api_credit_used / $plan_api_credit) * 100, 2) : 0 
                                                @endphp
                                                <!-- <div class="w-full bg-gray-200 rounded-full h-4 dark:bg-gray-700">
                                                    <div class="bg-yellow-500 h-4 rounded-full text-[10px] text-white text-center leading-4" style="width: {{ $templatePer }}%">{{ $templatePer }}%</div>
                                                </div> -->
                                                <div class="w-full h-4 rounded-full bg-gray-200 dark:bg-gray-800 overflow-hidden">
                                                    <div 
                                                        class="h-full bg-brand-500 rounded-full flex items-center justify-center text-white font-medium text-[10px] leading-tight transition-all duration-500"
                                                        style="width: {{$apiPer}}%;">
                                                        {{$apiPer}}%
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                 </div>

                                 <div x-show="activeTab === 'transactions'">
                                    <h3
                                       class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90"
                                    >
                                       Transactions
                                    </h3>
                                    <p
                                       class="text-sm text-gray-500 dark:text-gray-400"
                                    >
                                       This section shows the invoices and bills
                                    </p>
                                    <div class="space-y-4">
                                        <div class="overflow-x-auto mt-5">
                                            @if($transactions->isEmpty())
                                                <p class="text-sm text-gray-500 py-4">No Data Found</p>
                                            @else
                                                <table class="w-full text-left text-sm">
                                                    <thead class="text-gray-700 uppercase bg-gray-50 dark:bg-gray-800 dark:text-gray-400">
                                                        <tr>
                                                            <th class="px-4 py-3">Order #</th>
                                                            <th class="px-4 py-3">Amount</th>
                                                            <th class="px-4 py-3">Status</th>
                                                            <th class="px-4 py-3">Date</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($transactions as $trx)
                                                        <tr class="border-b dark:border-gray-700">
                                                            <td class="px-4 py-3">{{ $trx->order_number }}</td>
                                                            <td class="px-4 py-3">${{ $trx->total_amount }}</td>
                                                            <td class="px-4 py-3">{{ $trx->payment_status }}</td>
                                                            <td class="px-4 py-3">{{ $trx->created_at }}</td>
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            @endif
                                        </div>
                                    </div>
                                 </div>

                                 
                              </div>
                           </div>
                        </div>
                     <!-- </div> -->

    

    <!-- OFFCANVAS PAYMENT SIDEBAR -->
    <div x-show="paymentOpen" class="fixed inset-0 z-99999 overflow-hidden" style="display: none;">
        <div x-show="paymentOpen" x-transition:enter="transition-opacity duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" class="fixed inset-0 bg-black/50" @click="paymentOpen = false"></div>
        
        <div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
            <div x-show="paymentOpen" x-transition:enter="transform transition duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="w-screen max-w-2xl bg-white shadow-xl dark:bg-gray-900 border-l dark:border-gray-800">
                <div class="flex h-full flex-col p-6 overflow-y-auto">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-xl font-bold text-gray-800 dark:text-white">Upgrade Plan</h3>
                        <button @click="paymentOpen = false" class="text-gray-400 hover:text-gray-600"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
                    </div>

                    <!-- Stripe Payment Form -->
                    <form action="{{route('payment_process')}}" method="POST" id="paymentForm" class="space-y-6">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Customer Details -->
                            <div class="space-y-4">
                                <h4 class="font-bold text-gray-700 dark:text-gray-300 border-b pb-2">Customer Details</h4>
                                <div>
                                    <label class="block text-sm font-medium mb-1">Card Holder Name <span class="text-red-500">*</span></label>
                                    <input type="text" name="customerName" id="customerName" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2 dark:border-gray-700 dark:text-white focus:border-blue-500 outline-none">
                                    <span id="errorCustomerName" class="text-xs text-red-500"></span>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium mb-1">Email Address <span class="text-red-500">*</span></label>
                                    <input type="email" name="emailAddress" id="emailAddress" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2 dark:border-gray-700 dark:text-white focus:border-blue-500 outline-none">
                                    <span id="errorEmailAddress" class="text-xs text-red-500"></span>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium mb-1">Address <span class="text-red-500">*</span></label>
                                    <textarea name="customerAddress" id="customerAddress" rows="2" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2 dark:border-gray-700 dark:text-white focus:border-blue-500 outline-none"></textarea>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <input type="text" placeholder="City" name="customerCity" class="rounded-lg border border-gray-300 bg-transparent px-4 py-2 dark:border-gray-700 dark:text-white">
                                    <input type="text" placeholder="Zip" name="customerZipcode" class="rounded-lg border border-gray-300 bg-transparent px-4 py-2 dark:border-gray-700 dark:text-white">
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <input type="text" placeholder="State" name="customerState" class="rounded-lg border border-gray-300 bg-transparent px-4 py-2 dark:border-gray-700 dark:text-white">
                                    <input type="text" placeholder="Country" name="customerCountry" class="rounded-lg border border-gray-300 bg-transparent px-4 py-2 dark:border-gray-700 dark:text-white">
                                </div>
                            </div>

                            <!-- Payment Details -->
                            <div class="space-y-4">
                                <h4 class="font-bold text-gray-700 dark:text-gray-300 border-b pb-2">Payment Details</h4>
                                <div>
                                    <label class="block text-sm font-medium mb-1">Card Number <span class="text-red-500">*</span></label>
                                    <input type="text" name="cardNumber" id="cardNumber" placeholder="xxxx xxxx xxxx xxxx" class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2 dark:border-gray-700 dark:text-white focus:border-blue-500 outline-none">
                                    <span id="errorCardNumber" class="text-xs text-red-500"></span>
                                </div>
                                <div class="grid grid-cols-3 gap-2">
                                    <div>
                                        <label class="text-[10px] uppercase font-bold">Month</label>
                                        <input type="text" name="cardExpMonth" placeholder="MM" class="w-full rounded-lg border border-gray-300 bg-transparent px-2 py-2 dark:border-gray-700 dark:text-white">
                                    </div>
                                    <div>
                                        <label class="text-[10px] uppercase font-bold">Year</label>
                                        <input type="text" name="cardExpYear" placeholder="YYYY" class="w-full rounded-lg border border-gray-300 bg-transparent px-2 py-2 dark:border-gray-700 dark:text-white">
                                    </div>
                                    <div>
                                        <label class="text-[10px] uppercase font-bold">CVC</label>
                                        <input type="text" name="cardCVC" placeholder="123" class="w-full rounded-lg border border-gray-300 bg-transparent px-2 py-2 dark:border-gray-700 dark:text-white">
                                    </div>
                                </div>

                                <div class="bg-gray-50 dark:bg-white/5 p-4 rounded-xl mt-4">
                                    <div class="flex justify-between font-bold">
                                        <span>Total to Pay:</span>
                                        <span class="text-blue-600">$500.00</span>
                                    </div>
                                </div>

                                <input type="hidden" name="price" value="500">
                                <input type="hidden" name="total_amount" value="500">
                                <input type="hidden" name="currency_code" value="USD">
                                
                                <button type="button" onclick="stripePay(event)" class="w-full bg-blue-600 text-white font-bold py-3 rounded-lg hover:bg-blue-700 transition shadow-lg">
                                    Process Secure Payment
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scripts keep their original flow -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-creditcardvalidator/1.0.0/jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="payment.js"></script>

@endsection