<?php include 'header.php'; ?>

<style>
.overflow-x-auto::-webkit-scrollbar {
    height: 10px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 999px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    background: #152245;
    border-radius: 999px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #152245;
}
</style>

<div class="px-0 py-3 md:p-2 lg:p-6">
    
<!-- Header -->
<div class="px-5 py-4 flex items-center justify-between">

    <h1 class="text-xl font-bold text-slate-900">
        View Dealer Details
    </h1>

</div>

    <!-- Back Button -->
    <div class="flex justify-end gap-2 mb-4">
        <a href="lockora_dealer.php"
            class="inline-flex items-center gap-2 bg-white px-4 py-2.5 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-300">
            <i class="ri-arrow-left-line"></i>
            Back
        </a>
            <button
        class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-xl shadow-sm transition">
        <i class="ri-check-line"></i>
        Approve
    </button>
    </div>
    
    <!-- Partner Stats -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">

    <!-- Total Sold Locks -->
   <div id="soldLocksCard" class="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition cursor-pointer">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs uppercase tracking-wide text-slate-500">
                    Total Sold Locks
                </p>
                <h3 class="text-2xl font-bold text-slate-900 mt-1">
                    5
                </h3>
            </div>
            <div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center">
                <i class="ri-lock-line text-xl text-blue-600"></i>
            </div>
        </div>
    </div>

    <!-- Total Replacements -->
    <div id="replacementLocksCard" class="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs uppercase tracking-wide text-slate-500">
                    Replacement Locks
                </p>
                <h3 class="text-2xl font-bold text-slate-900 mt-1">
                    2
                </h3>
            </div>
            <div class="w-12 h-12 rounded-xl bg-orange-100 flex items-center justify-center">
                <i class="ri-refresh-line text-xl text-orange-600"></i>
            </div>
        </div>
    </div>

    <!-- Today's Sales -->
    <div id="todaySoldCard" class="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs uppercase tracking-wide text-slate-500">
                    Today's Sold
                </p>
                <h3 class="text-2xl font-bold text-slate-900 mt-1">
                    2
                </h3>
            </div>
            <div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
                <i class="ri-shopping-bag-line text-xl text-green-600"></i>
            </div>
        </div>
    </div>

    <!-- Today's Revenue -->
    <div id="revenueCard" class="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs uppercase tracking-wide text-slate-500">
                    Total Revenue
                </p>
                <h3 class="text-2xl font-bold text-slate-900 mt-1">
                    ₹20,000
                </h3>
            </div>
            <div class="w-12 h-12 rounded-xl bg-emerald-100 flex items-center justify-center">
                <i class="ri-money-rupee-circle-line text-xl text-emerald-600"></i>
            </div>
        </div>
    </div>
    
    <!-- Payment Received -->
<div id="paymentReceivedCard" class="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
    <div class="flex items-center justify-between">
        <div>
            <p class="text-xs uppercase tracking-wide text-slate-500">
                Payment Received
            </p>
            <h3 class="text-2xl font-bold text-green-600 mt-1">
                ₹15,000
            </h3>
        </div>
        <div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
            <i class="ri-check-double-line text-xl text-green-600"></i>
        </div>
    </div>
</div>

<!-- Payment Pending -->
<div id="paymentPendingCard" class="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
    <div class="flex items-center justify-between">
        <div>
            <p class="text-xs uppercase tracking-wide text-slate-500">
                Payment Pending
            </p>
            <h3 class="text-2xl font-bold text-red-600 mt-1">
                ₹5,000
            </h3>
        </div>
        <div class="w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center">
            <i class="ri-time-line text-xl text-red-600"></i>
        </div>
    </div>
</div>

</div>

<div id="soldLocksSection" class="hidden p-5">

    <!-- Section Title -->
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-slate-900">
            Sold Locks Details
        </h2>
    </div>

    <div class="flex gap-5 overflow-x-auto hide-scrollbar pb-3">

        <!-- Sold Lock Card -->
        <div
            class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 min-w-[400px] w-[400px] flex-shrink-0">

            <!-- Header -->
            <div
                class="bg-gradient-to-r from-blue-600 to-indigo-600 px-5 py-4 text-white">

                <div class="flex justify-between items-center">
                    <div>
                        <h3 class="font-bold text-lg">
                            Lockora Lite (L1-Core)
                        </h3>
                        <p class="text-blue-100 text-sm mt-1">
                            Premium Smart Lock
                        </p>
                    </div>

                    <span
                        class="bg-green-500 text-white text-xs px-3 py-1 rounded-full font-medium">
                        Paid
                    </span>
                </div>
            </div>

            <!-- Body -->
            <div class="p-5">

                <div class="space-y-4">

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Serial Number
                        </span>
                        <span class="font-semibold text-slate-900">
                            LKR240001
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Customer Name
                        </span>
                        <span class="font-semibold text-slate-900">
                            Rajesh Patel
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Mobile Number
                        </span>
                        <span class="font-semibold text-slate-900">
                            9876543210
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Sold Date
                        </span>
                        <span class="font-medium text-slate-800">
                            20-06-2026
                        </span>
                    </div>

                    <div class="h-px bg-slate-200"></div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Selling Price
                        </span>
                        <span class="font-semibold text-slate-900">
                            ₹13,999
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            GST (18%)
                        </span>
                        <span class="font-semibold text-orange-600">
                            ₹2,520
                        </span>
                    </div>

                </div>

                <!-- Total Box -->
                <div
                    class="mt-5 bg-blue-50 border border-blue-100 rounded-xl p-4">

                    <div class="flex justify-between items-center">
                        <span class="font-semibold text-slate-700">
                            Total Amount
                        </span>

                        <span
                            class="text-2xl font-bold text-blue-600">
                            ₹16,519
                        </span>
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<div id="replacementLocksSection" class="hidden p-5">

    <!-- Section Title -->
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-slate-900">
            Replacement Locks Details
        </h2>
    </div>

    <div class="flex gap-5 overflow-x-auto hide-scrollbar pb-3">

        <!-- Replacement Card -->
        <div
            class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 min-w-[400px] w-[400px] flex-shrink-0">

            <!-- Header -->
            <div
                class="bg-gradient-to-r from-orange-500 to-red-500 px-5 py-4 text-white">

                <div class="flex justify-between items-center">
                    <div>
                        <h3 class="font-bold text-lg">
                            Lockora Lite (L1-Core)
                        </h3>
                        <p class="text-orange-100 text-sm mt-1">
                            Replacement Lock Record
                        </p>
                    </div>

                    <span
                        class="bg-white/20 backdrop-blur text-white text-xs px-3 py-1 rounded-full font-medium">
                        Replaced
                    </span>
                </div>
            </div>

            <!-- Body -->
            <div class="p-5">

                <div class="space-y-4">

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Serial Number
                        </span>
                        <span class="font-semibold text-slate-900">
                            RL001
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Customer Name
                        </span>
                        <span class="font-semibold text-slate-900">
                            Rajesh Patel
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Mobile Number
                        </span>
                        <span class="font-semibold text-slate-900">
                            9876543210
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Old Lock Number
                        </span>
                        <span
                            class="font-semibold text-red-600">
                            LK001
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Replacement Date
                        </span>
                        <span class="font-medium text-slate-800">
                            20-06-2026
                        </span>
                    </div>

                </div>

                <!-- Amount Box -->
                <div
                    class="mt-5 bg-orange-50 border border-orange-100 rounded-xl p-4">

                    <div class="flex justify-between items-center">
                        <span class="font-semibold text-slate-700">
                            Total Price
                        </span>

                        <span
                            class="text-2xl font-bold text-orange-600">
                            ₹16,519
                        </span>
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<div id="todaySoldSection" class="hidden p-5">

    <!-- Section Title -->
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-slate-900">
            Today's Sold Locks Details
        </h2>
    </div>

    <div class="flex gap-5 overflow-x-auto hide-scrollbar pb-3">

        <!-- Today's Sale Card -->
        <div
            class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 min-w-[400px] w-[400px] flex-shrink-0">

            <!-- Header -->
            <div
                class="bg-gradient-to-r from-emerald-500 to-green-600 px-5 py-4 text-white">

                <div class="flex justify-between items-center">
                    <div>
                        <h3 class="font-bold text-lg">
                            Lockora Elite (L2 +)
                        </h3>
                        <p class="text-green-100 text-sm mt-1">
                            Sold Today
                        </p>
                    </div>

                    <span
                        class="bg-white/20 backdrop-blur text-white text-xs px-3 py-1 rounded-full font-medium">
                        Today
                    </span>
                </div>
            </div>

            <!-- Body -->
            <div class="p-5">

                <div class="space-y-4">

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Serial Number
                        </span>
                        <span class="font-semibold text-slate-900">
                            LK006
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Customer Name
                        </span>
                        <span class="font-semibold text-slate-900">
                            Rajesh Patel
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Mobile Number
                        </span>
                        <span class="font-semibold text-slate-900">
                            9876543210
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Sold Date
                        </span>
                        <span class="font-medium text-slate-800">
                            22-06-2026
                        </span>
                    </div>

                    <div class="h-px bg-slate-200"></div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Selling Price
                        </span>
                        <span class="font-semibold text-slate-900">
                            ₹13,999
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            GST (18%)
                        </span>
                        <span class="font-semibold text-orange-600">
                            ₹2,520
                        </span>
                    </div>

                </div>

                <!-- Total Amount Box -->
                <div
                    class="mt-5 bg-emerald-50 border border-emerald-100 rounded-xl p-4">

                    <div class="flex justify-between items-center">
                        <span class="font-semibold text-slate-700">
                            Total Amount
                        </span>

                        <span
                            class="text-2xl font-bold text-emerald-600">
                            ₹16,519
                        </span>
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<div id="revenueSection" class="hidden p-5">

    <!-- Section Header -->
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-slate-900">
            Revenue Details
        </h2>
    </div>

    <div class="flex gap-5 overflow-x-auto hide-scrollbar pb-3">

        <!-- Revenue Card -->
        <div
            class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 min-w-[400px] w-[400px] flex-shrink-0">

            <!-- Header -->
            <div
                class="bg-gradient-to-r from-emerald-600 to-green-500 px-5 py-4 text-white">

                <div class="flex justify-between items-center">

                    <div>
                        <h3 class="font-bold text-lg">
                            Lockora Lite (L1-Core)
                        </h3>
                        <p class="text-green-100 text-sm mt-1">
                            Revenue Transaction
                        </p>
                    </div>

                    <span
                        class="bg-white/20 backdrop-blur text-white text-xs px-3 py-1 rounded-full font-medium">
                        Paid
                    </span>

                </div>
            </div>

            <!-- Body -->
            <div class="p-5">

                <div class="space-y-4">

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Invoice Number
                        </span>
                        <span class="font-semibold text-slate-900">
                            INV-001
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Serial Number
                        </span>
                        <span class="font-semibold text-slate-900">
                            LKR240001
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Customer Name
                        </span>
                        <span class="font-semibold text-slate-900">
                            Rajesh Patel
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Payment Mode
                        </span>
                        <span
                            class="px-2 py-1 bg-blue-50 text-blue-600 rounded-lg text-sm font-medium">
                            UPI
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Date
                        </span>
                        <span class="font-medium text-slate-800">
                            20-06-2026
                        </span>
                    </div>

                </div>

                <!-- Revenue Box -->
                <div
                    class="mt-5 bg-emerald-50 border border-emerald-100 rounded-xl p-4">

                    <div class="flex justify-between items-center">

                        <div>
                            <p class="text-sm text-slate-500">
                                Revenue Amount
                            </p>
                            <h3 class="text-2xl font-bold text-emerald-600 mt-1">
                                ₹5,000
                            </h3>
                        </div>

                        <div
                            class="w-12 h-12 rounded-xl bg-emerald-100 flex items-center justify-center">
                            <i class="ri-money-rupee-circle-line text-2xl text-emerald-600"></i>
                        </div>

                    </div>
                </div>

            </div>

        </div>

    </div>

</div>

<div id="paymentReceivedSection" class="hidden p-5">

    <!-- Section Header -->
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-slate-900">
            Payment Received Details
        </h2>
    </div>

    <div class="flex gap-5 overflow-x-auto hide-scrollbar pb-3">

        <!-- Payment Card -->
        <div
            class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 min-w-[400px] w-[400px] flex-shrink-0">

            <!-- Header -->
            <div
                class="bg-gradient-to-r from-green-600 to-emerald-500 px-5 py-4 text-white">

                <div class="flex justify-between items-center">

                    <div>
                        <h3 class="font-bold text-lg">
                            PAY-001
                        </h3>

                        <p class="text-green-100 text-sm mt-1">
                            Invoice #INV-001
                        </p>
                    </div>

                    <span
                        class="bg-white/20 backdrop-blur text-white text-xs px-3 py-1 rounded-full font-medium">
                        Received
                    </span>

                </div>
            </div>

            <!-- Body -->
            <div class="p-5">

                <div class="space-y-4">

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Customer
                        </span>

                        <span class="font-semibold text-slate-900">
                            Rajesh Patel
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Payment Mode
                        </span>

                        <span
                            class="px-2 py-1 bg-blue-50 text-blue-600 rounded-lg text-sm font-medium">
                            UPI
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Date
                        </span>

                        <span class="font-medium text-slate-800">
                            20-06-2026
                        </span>
                    </div>

                </div>

                <!-- Amount Box -->
                <div
                    class="mt-5 bg-green-50 border border-green-100 rounded-xl p-4">

                    <div class="flex justify-between items-center">

                        <div>
                            <p class="text-sm text-slate-500">
                                Amount Received
                            </p>

                            <h3 class="text-2xl font-bold text-green-600 mt-1">
                                ₹5,000
                            </h3>
                        </div>

                        <div
                            class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">

                            <i class="ri-wallet-3-line text-2xl text-green-600"></i>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<div id="paymentPendingSection" class="hidden p-5">

    <!-- Section Header -->
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-slate-900">
            Payment Pending Details
        </h2>
    </div>

    <div class="flex gap-5 overflow-x-auto hide-scrollbar pb-3">

        <!-- Pending Payment Card -->
        <div
            class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 min-w-[400px] w-[400px] flex-shrink-0">

            <!-- Header -->
            <div
                class="bg-gradient-to-r from-red-600 to-rose-500 px-5 py-4 text-white">

                <div class="flex justify-between items-center">

                    <div>
                        <h3 class="font-bold text-lg">
                            PEND-001
                        </h3>

                        <p class="text-red-100 text-sm mt-1">
                            Invoice #INV-005
                        </p>
                    </div>

                    <span
                        class="bg-white/20 backdrop-blur text-white text-xs px-3 py-1 rounded-full font-medium">
                        Pending
                    </span>

                </div>
            </div>

            <!-- Body -->
            <div class="p-5">

                <div class="space-y-4">

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Customer
                        </span>

                        <span class="font-semibold text-slate-900">
                            Jay Patel
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Mobile Number
                        </span>

                        <span class="font-semibold text-slate-900">
                            9876543214
                        </span>
                    </div>

                    <div class="flex justify-between items-center">
                        <span class="text-slate-500">
                            Due Date
                        </span>

                        <span class="font-medium text-red-600">
                            25-06-2026
                        </span>
                    </div>

                </div>

                <!-- Pending Amount Box -->
                <div
                    class="mt-5 bg-red-50 border border-red-100 rounded-xl p-4">

                    <div class="flex justify-between items-center">

                        <div>
                            <p class="text-sm text-slate-500">
                                Pending Amount
                            </p>

                            <h3 class="text-2xl font-bold text-red-600 mt-1">
                                ₹3,000
                            </h3>
                        </div>

                        <div
                            class="w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center">

                            <i class="ri-error-warning-line text-2xl text-red-600"></i>

                        </div>

                    </div>

                </div>

                <!-- Action Button -->
                <button
                    class="w-full mt-4 bg-red-600 hover:bg-red-700 text-white font-medium py-3 rounded-xl transition">
                    Send Reminder
                </button>

            </div>

        </div>

    </div>

</div>
    
<!-- Main Card -->
<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">

    <!-- Header -->
    <div class="px-5 py-4 border-b border-slate-200">
        <h1 class="text-xl font-bold text-slate-900">
            Sales Partner Details
        </h1>
    </div>

    <!-- Details -->
    <div class="p-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-y-6 gap-x-6">

        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                Full Name
            </p>
            <p class="text-base font-medium text-slate-900">Rajesh Patel</p>
        </div>

        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                Mobile Number
            </p>
            <p class="text-base font-medium text-slate-900">9876543210</p>
        </div>
        
        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                WhatsApp Number
            </p>
            <p class="text-base font-medium text-slate-900">
                9876543210
            </p>
        </div>

        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                Email Address
            </p>
            <p class="text-base font-medium text-slate-900">rajeshpatel@gmail.com</p>
        </div>
        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                Business Name
            </p>
            <p class="text-base font-medium text-slate-900">
                Patel Hardware & Tools
            </p>
        </div>
        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                Business Type
            </p>
            <p class="text-base font-medium text-slate-900">Hardware Dealer</p>
        </div>

        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                Experience
            </p>
            <p class="text-base font-medium text-slate-900">5 Years</p>
        </div>

        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                GST Available
            </p>
            <p class="text-base font-medium text-green-600">Yes</p>
        </div>

        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                GST Number
            </p>
            <p class="text-base font-medium text-slate-900">24ABCDE1234F1Z5</p>
        </div>

        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                Shop / House No
            </p>
            <p class="text-base font-medium text-slate-900">101</p>
        </div>

        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                Society / Complex Name
            </p>
            <p class="text-base font-medium text-slate-900">Shyam Complex</p>
        </div>
        
                <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                Landmark
            </p>
            <p class="text-base font-medium text-slate-900">Near Railway Station</p>
        </div>

        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                City
            </p>
            <p class="text-base font-medium text-slate-900">Surat</p>
        </div>

        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                State
            </p>
            <p class="text-base font-medium text-slate-900">Gujarat</p>
        </div>
        
                <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                Country
            </p>
            <p class="text-base font-medium text-slate-900">India</p>
        </div>

        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1">
                Pincode
            </p>
            <p class="text-base font-medium text-slate-900">395006</p>
        </div>



    </div>
    


    <!-- Documents -->
    <div class="border-t border-slate-200 p-5">

        <h2 class="text-base font-semibold text-slate-900 mb-4">
            Uploaded Documents
        </h2>

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">

    <!-- Vistco Card Front -->
    <div class="border border-slate-200 rounded-xl p-2 bg-slate-50">
        <p class="text-sm font-medium text-slate-700 mb-2">
            Vistco Card Front
        </p>
        <img src="https://deq64r0ss2hgl.cloudfront.net/images/product/visiting-cards-(single-sided)-16357342606738.jpg"
            alt="Vistco Card Front"
            class="w-full h-52 object-cover rounded-lg bg-white">
    </div>

    <!-- Vistco Card Back -->
    <div class="border border-slate-200 rounded-xl p-2 bg-slate-50">
        <p class="text-sm font-medium text-slate-700 mb-2">
            Vistco Card Back
        </p>
        <img src="https://deq64r0ss2hgl.cloudfront.net/images/product/visiting-cards-(single-sided)-16357342606738.jpg"
            alt="Vistco Card Back"
            class="w-full h-52 object-cover rounded-lg bg-white">
    </div>

    <!-- GST Certificate -->
    <div class="border border-slate-200 rounded-xl p-2 bg-slate-50">
        <p class="text-sm font-medium text-slate-700 mb-2">
            GST Certificate
        </p>
        <img src="https://globalvsmart.com/wp-content/uploads/2024/08/5.5-1-1.png"
            alt="GST Certificate"
            class="w-full h-52 object-contain rounded-lg bg-white">
    </div>

</div>

    </div>

</div>

</div>

<script>
const cards = {
    soldLocksCard: 'soldLocksSection',
    replacementLocksCard: 'replacementLocksSection',
    todaySoldCard: 'todaySoldSection',
    revenueCard: 'revenueSection',
    paymentReceivedCard: 'paymentReceivedSection',
    paymentPendingCard: 'paymentPendingSection'
};

Object.keys(cards).forEach(cardId => {

    document.getElementById(cardId)?.addEventListener('click', function() {

        // Bija badha section hide karo
        Object.values(cards).forEach(sectionId => {
            document.getElementById(sectionId)?.classList.add('hidden');
        });

        // Current section show karo
        const section = document.getElementById(cards[cardId]);

        section.classList.remove('hidden');

        section.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });

    });

});
</script>


<?php include 'footer.php'; ?>