@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="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'">
                                    <h3
                                       class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90"
                                    >
                                       Overview
                                    </h3>
                                    <p
                                       class="text-sm text-gray-500 dark:text-gray-400"
                                    >
                                       This section shows the plan details
                                    </p>

                                    <div class="space-y-4">
                                        <div class="flex items-center gap-4 mt-5">
                                            <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">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>
                                 </div>

                                 <div x-show="activeTab === 'usage'">
                                    <h3
                                       class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90"
                                    >
                                       Usage & Limits
                                    </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