<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vendor Management</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
</head>
<body class="bg-gray-50">
    <x-app-layout>
        <div class="container mx-auto px-4 py-6">
            <!-- Header -->
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center space-x-4">
                    <button onclick="history.back()" class="text-gray-600 hover:text-gray-900 transition-colors duration-200 p-2 rounded-full hover:bg-gray-100">
                        <i class="fas fa-arrow-left text-lg"></i>
                    </button>
                    <h1 class="text-2xl font-bold text-gray-800">
                        <i class="fas fa-store-alt mr-2 text-blue-600"></i> Vendor Management
                    </h1>
                </div>
            </div>

            <!-- Vendor Selector -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-6 border border-gray-200">
                <div class="max-w-md">
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fas fa-user-tie mr-2 text-blue-600"></i> Select Vendor
                    </label>
                    <select id="vendorDropdown" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="" disabled selected>Choose a vendor...</option>
                        @foreach($approvedVendors as $vendor)
                        <option value="{{ route('vendor_preview', ['user_id' => $vendor->user_id]) }}" 
                            {{ isset($singleVendorDetails) && $singleVendorDetails->vendor_id == $vendor->vendor_id ? 'selected' : '' }}>
                            {{ $vendor->name }} - {{ $vendor->store_name }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Vendor Profile Card -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6 border border-gray-200">
                <div class="p-5">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-semibold text-gray-800 flex items-center">
                            <i class="fas fa-id-card mr-2 text-blue-600"></i> Vendor Details
                        </h2>
                        <a href="{{ route('vendor_add', ['id' => $singleVendorDetails->user_id]) }}" 
                           class="inline-flex items-center px-3 py-2 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 transition-colors duration-200 text-sm">
                            <i class="fas fa-edit mr-2"></i> Edit
                        </a>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <!-- Profile Section -->
                        <div class="flex flex-col items-center">
                            @php
                                $profileImages = json_decode($singleVendorDetails->profile_image, true);
                                $profileImageUrl = !empty($profileImages) ? url('storage/app/public/' . $profileImages[0]) : asset('images/default-profile.png');
                            @endphp
                            <img src="{{ $profileImageUrl }}" alt="Profile" class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-blue-100">
                            
                            <h3 class="text-lg font-semibold text-gray-800">{{ $singleVendorDetails->name }}</h3>
                            <p class="text-gray-600 text-sm">{{ $singleVendorDetails->store_name }}</p>
                            
                            <div class="mt-3 space-y-1 text-sm">
                                <p class="text-gray-500 flex items-center">
                                    <i class="fas fa-envelope mr-2 text-blue-600"></i> {{ $singleVendorDetails->email }}
                                </p>
                                <p class="text-gray-500 flex items-center">
                                    <i class="fas fa-phone mr-2 text-blue-600"></i> {{ $singleVendorDetails->phone_number }}
                                </p>
                            </div>
                        </div>
                        
                        <!-- Store Details -->
                        <div class="border-l border-gray-200 pl-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-store mr-2 text-blue-600"></i> Store Information
                            </h3>
                            <div class="space-y-3">
                                <div>
                                    <p class="text-xs text-gray-500">Store Name</p>
                                    <p class="font-medium">{{ $singleVendorDetails->store_name }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500">Address</p>
                                    <p class="font-medium">{{ $singleVendorDetails->complete_address }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500">GSTIN</p>
                                    <p class="font-medium">{{ $singleVendorDetails->gstin ?: 'N/A' }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500">Wallet Balance</p>
                                    <p class="font-medium flex items-center">
                                        <i class="fas fa-wallet mr-2 text-green-600"></i> ₹{{ number_format($singleVendorDetails->wallet, 2) }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Location Map -->
                        <div class="border-l border-gray-200 pl-6">
                            <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
                                <i class="fas fa-map-marker-alt mr-2 text-blue-600"></i> Location
                            </h3>
                            <div class="h-48 rounded-lg overflow-hidden border border-gray-200">
                                <iframe class="w-full h-full" frameborder="0" 
                                    src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyAlcZM-RHySJIQmUwOaJmJCVPZcuMKS70Y&origin={{ $singleVendorDetails->latitude}},{{ $singleVendorDetails->longitude }}&destination={{ $singleVendorDetails->latitude}},{{ $singleVendorDetails->longitude }}&zoom=12">
                                </iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Documents Section -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6 border border-gray-200">
                <div class="p-5">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                        <i class="fas fa-file-alt mr-2 text-blue-600"></i> Vendor Documents
                    </h2>
                    
                    @php
                        $documents = [
                            'Aadhar' => json_decode(stripslashes(trim($singleVendorDetails->store_adhar, '"')), true) ?: [],
                            'Documents' => json_decode(stripslashes(trim($singleVendorDetails->store_documents, '"')), true) ?: [],
                            'Pancard' => json_decode(stripslashes(trim($singleVendorDetails->store_pancard, '"')), true) ?: [],
                            'Store Pictures' => json_decode(stripslashes(trim($singleVendorDetails->store_pictures, '"')), true) ?: [],
                            'Selfies' => json_decode(stripslashes(trim($singleVendorDetails->store_selfies, '"')), true) ?: []
                        ];
                    @endphp
                    
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Document Type</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">File</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($documents as $type => $files)
                                    @foreach($files as $index => $file)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            {{ $type }} @if(count($files) > 1) #{{ $index + 1 }} @endif
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            {{ basename($file) }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-center">
                                            <button onclick="showImageModal('{{ asset('storage/app/public/' . $file) }}', '{{ $type }}')" 
                                                    class="inline-flex items-center px-3 py-1 bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 text-xs">
                                                <i class="fas fa-eye mr-1"></i> View
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Tabs Section -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6 border border-gray-200">
                <div class="border-b border-gray-200">
                    <nav class="flex -mb-px">
                        <button id="orders-tab" class="tab-button active py-3 px-4 border-b-2 font-medium text-sm border-blue-500 text-blue-600 flex items-center">
                            <i class="fas fa-shopping-cart mr-2"></i> Orders
                        </button>
                        <button id="services-tab" class="tab-button py-3 px-4 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 flex items-center">
                            <i class="fas fa-concierge-bell mr-2"></i> Services
                        </button>
                        <button id="reviews-tab" class="tab-button py-3 px-4 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 flex items-center">
                            <i class="fas fa-star mr-2"></i> Reviews
                        </button>
                        <button id="payments-tab" class="tab-button py-3 px-4 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 flex items-center">
                            <i class="fas fa-money-bill-wave mr-2"></i> Payments
                        </button>
                    </nav>
                </div>
                
                <div class="p-5">
                    <!-- Orders Tab Content -->
                    <div id="orders-content" class="tab-content active">
                        <div class="overflow-x-auto">
                            <table id="ordersTable" class="min-w-full divide-y divide-gray-200 stripe hover">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer Address</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vendor Cost</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User Cost</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Commission</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profit</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach ($vendorOrders as $order)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                                            #{{ $order->order_id }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            {{ $order->customer_address }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            ₹{{ number_format($order->vendor_total_cost, 2) }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            ₹{{ number_format($order->user_total_cost, 2) }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            ₹{{ number_format($order->cleaneo_commission, 2) }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            @php
                                                $statusClasses = [
                                                    'completed' => 'bg-green-100 text-green-800',
                                                    'cancelled' => 'bg-red-100 text-red-800',
                                                    'pending' => 'bg-yellow-100 text-yellow-800'
                                                ];
                                            @endphp
                                            <span class="px-2 py-1 text-xs rounded-full {{ $statusClasses[strtolower($order->status)] ?? 'bg-gray-100 text-gray-800' }}">
                                                {{ ucfirst($order->status) }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            ₹{{ number_format($order->cleaneo_profit, 2) }}
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- Services Tab Content -->
                    <div id="services-content" class="tab-content hidden">
                        @php
                            $serviceImageMap = [
                                'Wash' => 'fas fa-jug-detergent',
                                'Wash & Iron' => 'fas fa-tshirt',
                                'Dry Clean' => 'fas fa-wind',
                                'Wash & Steam' => 'fas fa-water',
                                'Steam Iron' => 'fas fa-iron',
                                'Shoe & Bag Care' => 'fas fa-shoe-prints',
                                'Premium Wash' => 'fas fa-crown',
                                'Laundry on kg' => 'fas fa-weight-hanging'
                            ];
                            $services = json_decode($singleVendorDetails->services, true) ?? [];
                        @endphp
                        
                        @if (!empty($services))
                            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                                @foreach ($services as $service)
                                    <div class="bg-white p-4 rounded-lg border border-gray-200 hover:shadow-md transition-shadow duration-200">
                                        <div class="flex justify-center mb-3">
                                            <div class="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center text-blue-600 text-2xl">
                                                <i class="{{ $serviceImageMap[$service] ?? 'fas fa-question' }}"></i>
                                            </div>
                                        </div>
                                        <h3 class="text-center font-medium text-gray-800">{{ $service }}</h3>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-8 text-gray-500">
                                <i class="fas fa-box-open text-3xl mb-2"></i>
                                <p>No services available for this vendor</p>
                            </div>
                        @endif
                    </div>
                    
                    <!-- Reviews Tab Content -->
                    <div id="reviews-content" class="tab-content hidden">
                        <div id="reviews-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <!-- Reviews will be loaded here via AJAX -->
                        </div>
                    </div>
                    
                    <!-- Payments Tab Content -->
                    <div id="payments-content" class="tab-content hidden">
                        <div class="overflow-x-auto">
                            <table id="paymentsTable" class="min-w-full divide-y divide-gray-200 stripe hover">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payment ID</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount Paid</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Method</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Remarks</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach ($paymentHistories as $payment)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                                            #{{ $payment->id }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            ₹{{ number_format($payment->amount_paid, 2) }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            ₹{{ number_format($payment->balance, 2) }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            {{ date('d M Y', strtotime($payment->payment_date)) }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            {{ ucfirst($payment->payment_method) }}
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            {{ $payment->remarks ?: 'N/A' }}
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Vendor Controls -->
            <!--<div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6 border border-gray-200">-->
            <!--    <div class="p-5">-->
            <!--        <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">-->
            <!--            <i class="fas fa-cog mr-2 text-blue-600"></i> Vendor Controls-->
            <!--        </h2>-->
                    
            <!--        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">-->
                        <!-- Status Card -->
            <!--            <div class="bg-white p-4 rounded-lg border border-gray-200">-->
            <!--                <h3 class="text-lg font-medium text-gray-800 mb-3 flex items-center">-->
            <!--                    <i class="fas fa-power-off mr-2 text-blue-600"></i> Vendor Status-->
            <!--                </h3>-->
            <!--                <div id="status" class="mb-4">-->
            <!--                    <p id="pause-status" class="text-sm text-gray-600">Loading status...</p>-->
            <!--                    <p id="pause-time" class="text-xs text-gray-500 hidden"></p>-->
            <!--                    <p id="resume-time" class="text-xs text-gray-500 hidden"></p>-->
            <!--                    <p id="countdown-timer" class="text-sm font-medium text-blue-600"></p>-->
            <!--                </div>-->
                            
            <!--                <div class="flex space-x-2">-->
            <!--                    <button id="pauseButton" class="flex-1 inline-flex justify-center items-center px-3 py-2 bg-yellow-50 text-yellow-700 rounded-md hover:bg-yellow-100 text-sm">-->
            <!--                        <i class="fas fa-pause mr-2"></i> Pause-->
            <!--                    </button>-->
            <!--                    <button id="resumeButton" class="flex-1 inline-flex justify-center items-center px-3 py-2 bg-green-50 text-green-700 rounded-md hover:bg-green-100 text-sm">-->
            <!--                        <i class="fas fa-play mr-2"></i> Resume-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
                        
                        <!-- Pause Settings -->
            <!--            <div class="bg-white p-4 rounded-lg border border-gray-200">-->
            <!--                <h3 class="text-lg font-medium text-gray-800 mb-3 flex items-center">-->
            <!--                    <i class="fas fa-clock mr-2 text-blue-600"></i> Pause Settings-->
            <!--                </h3>-->
            <!--                <div class="space-y-3">-->
            <!--                    <div>-->
            <!--                        <label for="pause_time" class="block text-xs font-medium text-gray-700 mb-1">Pause Time</label>-->
            <!--                        <input type="datetime-local" id="pause_time" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" onchange="calculateDays()">-->
            <!--                    </div>-->
            <!--                    <div>-->
            <!--                        <label for="resume_time" class="block text-xs font-medium text-gray-700 mb-1">Resume Time</label>-->
            <!--                        <input type="datetime-local" id="resume_time" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" onchange="calculateDays()">-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
                        
                        <!-- Duration Card -->
            <!--            <div class="bg-white p-4 rounded-lg border border-gray-200">-->
            <!--                <h3 class="text-lg font-medium text-gray-800 mb-3 flex items-center">-->
            <!--                    <i class="fas fa-calendar-alt mr-2 text-blue-600"></i> Pause Duration-->
            <!--                </h3>-->
            <!--                <div class="space-y-3">-->
            <!--                    <div>-->
            <!--                        <label for="days" class="block text-xs font-medium text-gray-700 mb-1">Days</label>-->
            <!--                        <input type="text" id="days" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm bg-gray-50 focus:outline-none" readonly>-->
            <!--                    </div>-->
            <!--                    <button onclick="sendRequest()" class="w-full inline-flex justify-center items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm">-->
            <!--                        <i class="fas fa-pause-circle mr-2"></i> Pause Vendor-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--</div>-->
        </div>

        <!-- Image Modal -->
        <div id="imageModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                </div>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
                <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start">
                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                                <h3 id="modalTitle" class="text-lg leading-6 font-medium text-gray-900 mb-4"></h3>
                                <div class="mt-2">
                                    <img id="modalImage" src="" alt="Document" class="w-full h-auto max-h-[70vh] object-contain mx-auto">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                        <button type="button" onclick="hideImageModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- JavaScript -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            // Vendor dropdown functionality
            document.getElementById('vendorDropdown').addEventListener('change', function() {
                if (this.value) window.location.href = this.value;
            });

            // Tab functionality
            function setupTabs() {
                const tabs = document.querySelectorAll('.tab-button');
                
                tabs.forEach(tab => {
                    tab.addEventListener('click', () => {
                        // Remove active class from all tabs
                        tabs.forEach(t => {
                            t.classList.remove('active', 'text-blue-600', 'border-blue-500');
                            t.classList.add('text-gray-500', 'border-transparent');
                        });
                        
                        // Add active class to clicked tab
                        tab.classList.add('active', 'text-blue-600', 'border-blue-500');
                        tab.classList.remove('text-gray-500', 'border-transparent');
                        
                        // Hide all content
                        document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
                        
                        // Show corresponding content
                        const contentId = tab.id.replace('-tab', '-content');
                        document.getElementById(contentId).classList.remove('hidden');
                        
                        // Load reviews if needed
                        if (contentId === 'reviews-content' && document.getElementById('reviews-container').innerHTML === '') {
                            loadReviews();
                        }
                    });
                });
            }

            // Image modal functions
            function showImageModal(imageUrl, title) {
                document.getElementById('modalImage').src = imageUrl;
                document.getElementById('modalTitle').textContent = title;
                document.getElementById('imageModal').classList.remove('hidden');
            }

            function hideImageModal() {
                document.getElementById('imageModal').classList.add('hidden');
            }

            // Vendor status functions
            async function fetchVendorStatus() {
                try {
                    const vendorId = '{{$singleVendorDetails->user_id}}';
                    const response = await fetch(`https://drycleaneo.com/update/vendor_pause.php?vendor_id=${vendorId}`);
                    const data = await response.json();

                    if (data.error) {
                        document.getElementById('pause-status').textContent = data.error;
                        return;
                    }

                    const { isPaused, pause_time, resume_time, remaining_time } = data;

                    if (isPaused) {
                        document.getElementById('pause-status').textContent = 'Vendor is currently paused.';
                        document.getElementById('pause-time').textContent = `Pause Time: ${pause_time}`;
                        document.getElementById('resume-time').textContent = `Resume Time: ${resume_time}`;
                        document.getElementById('pause-time').classList.remove('hidden');
                        document.getElementById('resume-time').classList.remove('hidden');

                        if (remaining_time > 0) {
                            updateCountdown(remaining_time);
                        } else {
                            document.getElementById('countdown-timer').textContent = 'Resume time has passed.';
                        }
                    } else {
                        document.getElementById('pause-status').textContent = 'Vendor is active.';
                    }
                } catch (error) {
                    document.getElementById('pause-status').textContent = 'Error fetching status.';
                    console.error('Error:', error);
                }
            }

            function updateCountdown(seconds) {
                const countdownElement = document.getElementById('countdown-timer');
                const interval = setInterval(() => {
                    if (seconds <= 0) {
                        clearInterval(interval);
                        countdownElement.textContent = 'Resume time has passed.';
                        return;
                    }
                    const hours = Math.floor(seconds / 3600);
                    const minutes = Math.floor((seconds % 3600) / 60);
                    const secs = seconds % 60;
                    countdownElement.textContent = `${hours}h ${minutes}m ${secs}s remaining`;
                    seconds--;
                }, 1000);
            }

            function calculateDays() {
                const pauseTime = new Date(document.getElementById('pause_time').value);
                const resumeTime = new Date(document.getElementById('resume_time').value);
                const timeDiff = resumeTime - pauseTime;
                const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
                document.getElementById('days').value = days;
            }

            async function sendRequest() {
                const action = 'pause';
                const vendor_id = '{{$singleVendorDetails->user_id}}';
                const days = document.getElementById('days').value;

                if (!days) {
                    Swal.fire('Error', 'Please set pause and resume times first.', 'error');
                    return;
                }

                try {
                    const response = await fetch('https://drycleaneo.com/update/vendor_pause.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: new URLSearchParams({
                            action: action,
                            vendor_id: vendor_id,
                            days: days
                        })
                    });
                    
                    const data = await response.json();
                    
                    if (data.message) {
                        Swal.fire('Success', data.message, 'success').then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire('Error', data.error, 'error');
                    }
                } catch (error) {
                    console.error('Error:', error);
                    Swal.fire('Error', 'An error occurred while sending the request.', 'error');
                }
            }

            async function resumeVendor() {
                try {
                    const response = await fetch('https://drycleaneo.com/update/vendor_pause.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: new URLSearchParams({
                            action: 'resume',
                            vendor_id: '{{$singleVendorDetails->user_id}}'
                        })
                    });
                    
                    const data = await response.json();
                    
                    if (data.message) {
                        Swal.fire('Success', data.message, 'success').then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire('Error', data.error, 'error');
                    }
                } catch (error) {
                    console.error('Error:', error);
                    Swal.fire('Error', 'An error occurred while resuming the vendor.', 'error');
                }
            }

            // Load reviews via AJAX
            function loadReviews() {
                $.ajax({
                    url: 'http://localhost:8000/api/reviews/user/{{$singleVendorDetails->user_id}}',
                    method: 'GET',
                    success: function(response) {
                        const container = document.getElementById('reviews-container');
                        
                        if (response.length === 0) {
                            container.innerHTML = `
                                <div class="col-span-3 text-center py-8 text-gray-500">
                                    <i class="fas fa-comment-alt text-3xl mb-2"></i>
                                    <p>No reviews available for this vendor</p>
                                </div>
                            `;
                            return;
                        }
                        
                        response.forEach(review => {
                            const { Id, star, customerName, feedback } = review;
            
                            // Generate star rating
                            let stars = '';
                            for (let i = 0; i < Math.floor(star); i++) {
                                stars += '<i class="fas fa-star checked text-yellow-400"></i>';
                            }
                            if (star - Math.floor(star) >= 0.5) {
                                stars += '<i class="fas fa-star-half-alt checked text-yellow-400"></i>';
                            }
                            for (let i = Math.ceil(star); i < 5; i++) {
                                stars += '<i class="far fa-star text-gray-300"></i>';
                            }
            
                            // Create a card for each review
                            container.innerHTML += `
                                <div class="bg-white p-4 rounded-lg border border-gray-200 hover:shadow-sm transition-shadow">
                                    <div class="flex items-center mb-2">
                                        <div class="w-10 h-10 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center mr-3">
                                            <i class="fas fa-user"></i>
                                        </div>
                                        <h5 class="font-medium text-gray-800">${customerName}</h5>
                                    </div>
                                    <div class="mb-2 text-yellow-400">
                                        ${stars}
                                    </div>
                                    <p class="text-gray-600 text-sm">${feedback ? feedback : 'No feedback provided'}</p>
                                </div>
                            `;
                        });
                    },
                    error: function(err) {
                        console.error('Error fetching reviews:', err);
                        $('#reviews-container').html(`
                            <div class="col-span-3 text-center py-8 text-gray-500">
                                <i class="fas fa-exclamation-circle text-3xl mb-2"></i>
                                <p>Error loading reviews. Please try again later.</p>
                            </div>
                        `);
                    }
                });
            }

            // Initialize DataTables
            function initDataTables() {
                $('#ordersTable').DataTable({
                    dom: '<"flex justify-between items-center mb-4"<"flex"lBf>><"overflow-x-auto"t><"flex justify-between items-center mt-4"ip>',
                    buttons: [
                        {
                            extend: 'copy',
                            className: 'bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm',
                            text: '<i class="fas fa-copy mr-1"></i> Copy'
                        },
                        {
                            extend: 'csv',
                            className: 'bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm',
                            text: '<i class="fas fa-file-csv mr-1"></i> CSV'
                        },
                        {
                            extend: 'excel',
                            className: 'bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm',
                            text: '<i class="fas fa-file-excel mr-1"></i> Excel'
                        },
                        {
                            extend: 'pdf',
                            className: 'bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm',
                            text: '<i class="fas fa-file-pdf mr-1"></i> PDF'
                        },
                        {
                            extend: 'print',
                            className: 'bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm',
                            text: '<i class="fas fa-print mr-1"></i> Print'
                        }
                    ],
                    order: [[0, 'desc']],
                    responsive: true,
                    language: {
                        search: "_INPUT_",
                        searchPlaceholder: "Search...",
                        lengthMenu: "Show _MENU_ entries",
                        paginate: {
                            previous: '<i class="fas fa-chevron-left"></i>',
                            next: '<i class="fas fa-chevron-right"></i>'
                        }
                    },
                    pageLength: 10,
                    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
                });

                $('#paymentsTable').DataTable({
                    dom: '<"flex justify-between items-center mb-4"<"flex"lBf>><"overflow-x-auto"t><"flex justify-between items-center mt-4"ip>',
                    buttons: [
                        {
                            extend: 'copy',
                            className: 'bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm',
                            text: '<i class="fas fa-copy mr-1"></i> Copy'
                        },
                        {
                            extend: 'csv',
                            className: 'bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm',
                            text: '<i class="fas fa-file-csv mr-1"></i> CSV'
                        },
                        {
                            extend: 'excel',
                            className: 'bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm',
                            text: '<i class="fas fa-file-excel mr-1"></i> Excel'
                        },
                        {
                            extend: 'pdf',
                            className: 'bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm',
                            text: '<i class="fas fa-file-pdf mr-1"></i> PDF'
                        },
                        {
                            extend: 'print',
                            className: 'bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm',
                            text: '<i class="fas fa-print mr-1"></i> Print'
                        }
                    ],
                    order: [[0, 'desc']],
                    responsive: true,
                    language: {
                        search: "_INPUT_",
                        searchPlaceholder: "Search...",
                        lengthMenu: "Show _MENU_ entries",
                        paginate: {
                            previous: '<i class="fas fa-chevron-left"></i>',
                            next: '<i class="fas fa-chevron-right"></i>'
                        }
                    },
                    pageLength: 10,
                    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
                });
            }

            // Check if vendor needs approval
            function checkApprovalStatus() {
                const approvalStatus = "{{ $singleVendorDetails->approval_status }}";
                const userId = "{{ $singleVendorDetails->user_id }}";

                if (approvalStatus === 'pending') {
                    Swal.fire({
                        title: 'Vendor Not Approved',
                        text: 'This vendor needs to be approved first.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Go to Approval',
                        cancelButtonText: 'Cancel',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = 'https://drycleaneo.com/admin/vendor_approve_button/' + userId;
                        }
                    });
                }
            }

            // Initialize everything when DOM is loaded
            document.addEventListener('DOMContentLoaded', function() {
                checkApprovalStatus();
                setupTabs();
                initDataTables();
                fetchVendorStatus();
                
                // Setup button event listeners
                document.getElementById('resumeButton').addEventListener('click', resumeVendor);
                
                // Close modal when clicking outside
                document.getElementById('imageModal').addEventListener('click', function(e) {
                    if (e.target === this) hideImageModal();
                });
            });
        </script>
    </x-app-layout>
</body>
</html>