<!-- resources/views/admin/payouts.blade.php -->


<?php $__env->startSection('content'); ?>
<div class="max-w-7xl mx-auto space-y-6">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-black text-gray-900">Wallet Settlements</h1>
            <p class="text-gray-500 font-bold mt-1">Clear technician payouts and collect company cash.</p>
        </div>
        <div class="flex bg-gray-200 p-1 rounded-xl">
            <button id="btn-topay" onclick="switchTab('topay')" class="px-6 py-2 rounded-lg font-black text-sm transition-colors bg-white shadow-sm text-gray-900">To Pay (Techs)</button>
            <button id="btn-tocollect" onclick="switchTab('tocollect')" class="px-6 py-2 rounded-lg font-black text-sm transition-colors text-gray-500 hover:text-gray-900">To Collect (Company)</button>
        </div>
    </div>

    <!-- TAB 1: TO PAY (Aapko Technicians ko dena hai) -->
    <div id="tab-topay" class="space-y-4">
        <!-- Tech Card -->
        <div id="pay-card-1" class="bg-white p-6 rounded-2xl border border-red-100 shadow-sm flex flex-col md:flex-row justify-between items-center gap-6">
            <div class="flex items-center gap-4 w-full md:w-auto">
                <div class="w-14 h-14 rounded-full bg-red-50 text-red-600 flex items-center justify-center font-black text-xl">R</div>
                <div>
                    <h3 class="text-lg font-black text-gray-900">Rahul Tech</h3>
                    <p class="text-sm font-bold text-gray-500 flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4"></i> +91 9876543210</p>
                </div>
            </div>
            
            <div class="text-center md:text-left w-full md:w-auto bg-gray-50 p-3 rounded-xl border border-gray-200">
                <p class="text-xs font-black text-gray-400 uppercase tracking-widest mb-1">UPI Details</p>
                <p class="text-sm font-bold text-gray-900">rahul@ybl</p>
                <button onclick="showQR('Rahul Tech', 'rahul@ybl')" class="text-xs font-black text-blue-600 mt-1 hover:underline flex items-center justify-center md:justify-start gap-1"><i data-lucide="qr-code" class="w-3 h-3"></i> View QR Code</button>
            </div>

            <div class="flex items-center gap-6 w-full md:w-auto justify-between md:justify-end">
                <div class="text-right">
                    <p class="text-xs font-black text-gray-400 uppercase tracking-widest">Amount to Pay</p>
                    <h3 class="text-2xl font-black text-red-600">₹4,500</h3>
                </div>
                <button onclick="settleAmount('pay-card-1', 'Rahul Tech', 4500)" class="bg-gray-900 hover:bg-black text-white px-6 py-3 rounded-xl font-black shadow-md transition-transform hover:scale-105">Mark as Paid</button>
            </div>
        </div>
    </div>

    <!-- TAB 2: TO COLLECT (Technicians ne Cash liya hai, unko company ko dena hai) -->
    <div id="tab-tocollect" class="space-y-4 hidden">
        <!-- Tech Card -->
        <div id="collect-card-1" class="bg-white p-6 rounded-2xl border border-green-100 shadow-sm flex flex-col md:flex-row justify-between items-center gap-6">
            <div class="flex items-center gap-4 w-full md:w-auto">
                <div class="w-14 h-14 rounded-full bg-green-50 text-green-600 flex items-center justify-center font-black text-xl">A</div>
                <div>
                    <h3 class="text-lg font-black text-gray-900">Amit Kumar</h3>
                    <p class="text-sm font-bold text-gray-500 flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4"></i> +91 9988776655</p>
                </div>
            </div>
            
            <div class="text-center md:text-left w-full md:w-auto">
                <p class="text-xs font-black text-gray-400 uppercase tracking-widest">Cash Collected by Tech</p>
                <p class="text-sm font-bold text-gray-600 mt-1">From 5 Cash Bookings</p>
            </div>

            <div class="flex items-center gap-6 w-full md:w-auto justify-between md:justify-end">
                <div class="text-right">
                    <p class="text-xs font-black text-gray-400 uppercase tracking-widest">Company to Collect</p>
                    <h3 class="text-2xl font-black text-green-600">₹2,100</h3>
                </div>
                <button onclick="settleAmount('collect-card-1', 'Amit Kumar', 2100, true)" class="bg-[#109E38] hover:bg-green-700 text-white px-6 py-3 rounded-xl font-black shadow-md transition-transform hover:scale-105">Cash Received</button>
            </div>
        </div>
    </div>
</div>

<!-- QR CODE MODAL -->
<div id="qr-modal" class="hidden fixed inset-0 z-[100] bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl p-6 w-full max-w-sm shadow-2xl text-center">
        <h3 class="text-xl font-black text-gray-900" id="qr-name">Name</h3>
        <p class="text-sm font-bold text-gray-500 mb-4" id="qr-upi">UPI ID</p>
        <div class="bg-gray-100 p-4 rounded-2xl mb-6 inline-block border-2 border-dashed border-gray-300">
            <!-- Dummy QR Image Placeholder -->
            <i data-lucide="qr-code" class="w-48 h-48 text-gray-400"></i>
        </div>
        <button onclick="document.getElementById('qr-modal').classList.add('hidden')" class="w-full h-12 bg-gray-900 text-white font-black rounded-xl">Close QR</button>
    </div>
</div>

<script>
    function switchTab(tab) {
        if(tab === 'topay') {
            document.getElementById('tab-topay').classList.remove('hidden');
            document.getElementById('tab-tocollect').classList.add('hidden');
            document.getElementById('btn-topay').className = "px-6 py-2 rounded-lg font-black text-sm transition-colors bg-white shadow-sm text-gray-900";
            document.getElementById('btn-tocollect').className = "px-6 py-2 rounded-lg font-black text-sm transition-colors text-gray-500 hover:text-gray-900";
        } else {
            document.getElementById('tab-topay').classList.add('hidden');
            document.getElementById('tab-tocollect').classList.remove('hidden');
            document.getElementById('btn-tocollect').className = "px-6 py-2 rounded-lg font-black text-sm transition-colors bg-white shadow-sm text-gray-900";
            document.getElementById('btn-topay').className = "px-6 py-2 rounded-lg font-black text-sm transition-colors text-gray-500 hover:text-gray-900";
        }
    }

    function showQR(name, upi) {
        document.getElementById('qr-name').innerText = name;
        document.getElementById('qr-upi').innerText = upi;
        document.getElementById('qr-modal').classList.remove('hidden');
    }

    function settleAmount(cardId, name, amount, isCollect = false) {
        let msg = isCollect ? `Confirm you have received ₹${amount} cash from ${name}? Their wallet will reset to 0.` : `Confirm you have paid ₹${amount} to ${name} via UPI? Their wallet will reset to 0.`;
        
        if(confirm(msg)) {
            let card = document.getElementById(cardId);
            card.innerHTML = `
                <div class="w-full text-center py-4">
                    <i data-lucide="check-circle-2" class="w-10 h-10 text-[#109E38] mx-auto mb-2"></i>
                    <h3 class="text-lg font-black text-[#109E38]">Settlement Successful</h3>
                    <p class="text-sm font-bold text-gray-500">${name}'s wallet is now ₹0.</p>
                </div>
            `;
            lucide.createIcons();
            setTimeout(() => card.remove(), 3000); // 3 second baad card gayab
        }
    }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.admin', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\Users\Asus\OneDrive\Documents\instafix24-app\resources\views/admin/payouts.blade.php ENDPATH**/ ?>