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

@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 & Billing</h2>
        </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 & Billing</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="p-5 sm:p-6">
            <!-- Tabs Navigation -->
            <div class="border-b border-gray-200 dark:border-gray-800 mb-6">
                <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
                    <li class="mr-2">
                        <button @click="activeTab = 'overview'" :class="activeTab === 'overview' ? 'text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300'" class="inline-block p-4 border-b-2 rounded-t-lg transition-colors">Overview</button>
                    </li>
                    <li class="mr-2">
                        <button @click="activeTab = 'usage'" :class="activeTab === 'usage' ? 'text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300'" class="inline-block p-4 border-b-2 rounded-t-lg transition-colors">Usage & Limits</button>
                    </li>
                    <li class="mr-2">
                        <button @click="activeTab = 'transactions'" :class="activeTab === 'transactions' ? 'text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300'" class="inline-block p-4 border-b-2 rounded-t-lg transition-colors">Transactions</button>
                    </li>
                </ul>
            </div>

            <!-- Tab Content -->
            <div>
                <!-- Overview Tab -->
                <div x-show="activeTab === 'overview'" class="space-y-4">
                    <div class="flex items-center gap-4">
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-400 w-32">Current Plan :</label>
                        <span class="text-sm text-gray-800 dark:text-white/90 font-bold">
                            {{ $plan_details->plan_name }}
                        </span>
                    </div>
                    <!-- <div class="flex items-center gap-4">
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-400 w-32">Usage Limits :</label>
                        <span class="text-gray-800 dark:text-white font-bold">
                            {{ $plan_details->plan_name }}
                        </span>
                    </div> -->
                    <div class="flex items-center gap-4">
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-400 w-32">Max Users :</label>
                        <!-- <span class="text-gray-800 dark:text-white font-bold"> -->
                        <span class="text-sm text-gray-800 dark:text-white/90 font-bold">
                            
                            {{ $plan_details->plan_users == 10000 ? 'Unlimited' : $plan_details->plan_users }}
                        </span>
                    </div>
                    <div class="flex items-center gap-4">
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-400 w-32">Templates :</label>
                        <span class="text-sm text-gray-800 dark:text-white/90 font-bold">
                            {{ $plan_details->plan_templates == 10000 ? 'Unlimited' : $plan_details->plan_templates }}
                        </span>
                    </div>
                    <div class="flex items-center gap-4">
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-400 w-32">Signature Requests :</label>
                        <span class="text-sm text-gray-800 dark:text-white/90 font-bold">
                            {{ $plan_details->plan_signature_requests == 10000 ? 'Unlimited' : $plan_details->plan_signature_requests }}
                        </span>
                    </div>
                    <div class="flex items-center gap-4">
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-400 w-32">Monthly API Request Quota :</label>
                        <span class="text-sm text-gray-800 dark:text-white/90 font-bold">
                            {{ $plan_details->plan_api_credits == 10000 ? 'Unlimited' : $plan_details->plan_api_credits }}
                        </span>
                    </div>
                    @if(Session::get('company_payment_status') == "Free")
                        <div class="pt-2">
                            <button @click="paymentOpen = true" class="inline-flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 transition-colors">
                                <i class="bi bi-arrow-up-circle"></i> Upgrade Plan
                            </button>
                        </div>
                    @endif
                </div>

                <!-- Usage & Limits Tab -->
                <div x-show="activeTab === 'usage'" class="space-y-6">
                    <div class="mb-4">
                        <span class="text-sm text-gray-500 dark:text-gray-400">This section shows the resources included in your current plan and your ongoing usage.</span>
                        <a href="#" class="text-blue-600 ml-1">Learn More</a>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 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 Created</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>

                <!-- Transactions Tab -->
                <div x-show="activeTab === 'transactions'">
                    <div class="overflow-x-auto">
                        @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>

    <!-- 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