@extends('layouts.admin')

@section('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-2">
        <div>
            <h1 class="text-3xl font-black text-gray-900">All Bookings & Dispatch</h1>
            <p class="text-gray-500 font-bold mt-1">Monitor all jobs, view live amounts, and manually assign technicians.</p>
        </div>
        
        <div class="flex gap-2">
            <select id="status-filter" onchange="filterJobs()" class="bg-white border border-gray-200 text-sm font-black rounded-lg px-4 py-2 outline-none focus:border-[#109E38]">
                <option value="all">All Status</option>
                <option value="unassigned">Unassigned</option>
                <option value="ongoing">Ongoing</option>
                <option value="completed">Completed</option>
            </select>
            <input type="date" id="date-filter" onchange="filterJobs()" value="{{ date('Y-m-d') }}" class="bg-white border border-gray-200 text-sm font-black rounded-lg px-4 py-2 outline-none focus:border-[#109E38]" />
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm border-l-4 border-l-[#109E38]">
            <p class="text-gray-400 text-xs font-black uppercase tracking-widest mb-1">Completed Value (Today)</p>
            <h2 class="text-4xl font-black text-gray-900">₹12,450</h2>
            <p class="text-xs font-bold text-[#109E38] mt-1 flex items-center gap-1">
                <i data-lucide="trending-up" class="w-3 h-3"></i> +15% from yesterday
            </p>
        </div>
        
        <div class="bg-blue-50 p-6 rounded-3xl border border-blue-100 shadow-sm border-l-4 border-l-blue-500">
            <p class="text-blue-600 text-xs font-black uppercase tracking-widest mb-1">Ongoing Jobs Value</p>
            <h2 class="text-4xl font-black text-blue-700">₹8,350</h2>
            <p class="text-xs font-bold text-blue-600 mt-1">From 18 active jobs</p>
        </div>
        
        <div class="bg-yellow-50 p-6 rounded-3xl border border-yellow-100 shadow-sm border-l-4 border-l-yellow-500">
            <p class="text-yellow-600 text-xs font-black uppercase tracking-widest mb-1">Unassigned Potential</p>
            <h2 class="text-4xl font-black text-yellow-700">₹4,500</h2>
            <p class="text-xs font-bold text-yellow-600 mt-1">Needs to be dispatched instantly</p>
        </div>
    </div>

    <div class="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden">
        <table class="w-full text-left border-collapse">
            <thead class="bg-gray-50 border-b border-gray-100 text-xs font-black text-gray-400 uppercase tracking-wider">
                <tr>
                    <th class="px-6 py-4">Job ID & Details</th>
                    <th class="px-6 py-4">Customer Info</th>
                    <th class="px-6 py-4">Status & Tech</th>
                    <th class="px-6 py-4 text-right">Action</th>
                </tr>
            </thead>
            <tbody id="jobs-table-body" class="text-sm font-bold divide-y divide-gray-50">
                
                @forelse($jobs as $job)
                <tr class="job-row hover:bg-gray-50 transition-colors {{ $job->status == 'pending' ? 'bg-red-50/30' : '' }}" data-status="{{ $job->status == 'pending' ? 'unassigned' : $job->status }}" data-date="{{ $job->created_at->format('Y-m-d') }}">
                    <td class="px-6 py-4">
                        <p class="text-gray-900 text-base font-black">#IFX-{{ $job->id }}</p>
                        <p class="text-xs text-gray-500 font-bold mt-1">{{ $job->service_type }} • ₹{{ number_format($job->price) }}</p>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-gray-900">{{ $job->customer_name }}</p>
                        <p class="text-xs text-gray-500 flex items-center gap-1 mt-1"><i data-lucide="map-pin" class="w-3 h-3"></i> {{ $job->address }}</p>
                    </td>
                    <td class="px-6 py-4" id="status-{{ $job->id }}">
                        @if($job->status == 'pending')
                            <span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-xs font-black border border-yellow-200 inline-flex items-center gap-1 animate-pulse">
                                <i data-lucide="alert-circle" class="w-3 h-3"></i> Unassigned
                            </span>
                        @elseif($job->status == 'ongoing')
                            <span class="bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-xs font-black border border-blue-100">Ongoing</span>
                            <p class="text-xs text-gray-500 mt-2 flex items-center gap-1"><i data-lucide="user" class="w-3 h-3"></i> {{ $job->technician_id ? 'Assigned Tech' : 'Tech Assigned' }}</p>
                        @else
                            <span class="bg-green-50 text-green-700 px-3 py-1 rounded-full text-xs font-black border border-green-200">Completed</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-right" id="action-{{ $job->id }}">
                        @if($job->status == 'pending')
                            <button onclick="openAssignModal('IFX-{{ $job->id }}')" class="bg-gray-900 hover:bg-black text-white px-4 py-2 rounded-lg font-black text-xs shadow-md transition-transform hover:scale-105">
                                Assign Technician
                            </button>
                        @else
                            <button class="bg-gray-100 text-gray-600 px-4 py-2 rounded-lg font-black text-xs">View Details</button>
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="4" class="text-center py-10 text-gray-400 font-bold">No jobs available right now.</td></tr>
                @endforelse

            </tbody>
        </table>
        
        <div id="no-jobs-msg" class="hidden text-center py-10">
            <i data-lucide="search-x" class="w-12 h-12 text-gray-300 mx-auto mb-2"></i>
            <p class="text-gray-500 font-bold">No jobs found for this filter.</p>
        </div>
    </div>
</div>

<div id="assign-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-md shadow-2xl">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-black text-gray-900">Dispatch Job <span id="job-id-text" class="text-[#109E38]"></span></h3>
            <button onclick="closeAssignModal()"><i data-lucide="x" class="w-5 h-5 text-gray-400"></i></button>
        </div>
        <p class="text-sm font-bold text-gray-500 mb-4">Select an available technician nearby:</p>
        
        <div class="space-y-2 max-h-60 overflow-y-auto mb-6">
            @forelse($activeTechs as $tech)
            <label class="flex items-center justify-between p-3 border border-gray-200 rounded-xl cursor-pointer hover:border-[#109E38] hover:bg-green-50 transition-colors">
                <div class="flex items-center gap-3">
                    <input type="radio" name="tech_select" value="{{ $tech->id }}|{{ $tech->name }}" class="w-4 h-4 text-[#109E38]" />
                    <div>
                        <p class="font-black text-gray-900 text-sm">{{ $tech->name }}</p>
                        <p class="text-[10px] font-bold text-gray-400">ID: IFX-{{ $tech->id }} • Active</p>
                    </div>
                </div>
                <span class="text-[#109E38] font-black text-xs">⭐ 4.8</span>
            </label>
            @empty
            <p class="text-sm text-red-500 font-bold text-center">No active technicians available. Please approve IDs first.</p>
            @endforelse
        </div>

        <button onclick="confirmAssignment()" class="w-full h-12 bg-[#109E38] hover:bg-green-700 text-white font-black rounded-xl shadow-md transition-transform hover:scale-105">
            Dispatch Now
        </button>
    </div>
</div>

<script>
    // 🚀 FILTER LOGIC JS (Dropdown aur Date ke liye)
    function filterJobs() {
        const statusVal = document.getElementById('status-filter').value;
        const dateVal = document.getElementById('date-filter').value;
        const rows = document.querySelectorAll('.job-row');
        let visibleCount = 0;

        rows.forEach(row => {
            const rowStatus = row.getAttribute('data-status');
            const rowDate = row.getAttribute('data-date');

            // Check if status matches (or 'all' is selected) AND date matches (or date is empty)
            const statusMatch = (statusVal === 'all' || rowStatus === statusVal);
            const dateMatch = (!dateVal || rowDate === dateVal);

            if (statusMatch && dateMatch) {
                row.style.display = '';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });

        // Agar koi job nahi mili toh message dikhao
        const noJobsMsg = document.getElementById('no-jobs-msg');
        if(visibleCount === 0) {
            noJobsMsg.classList.remove('hidden');
        } else {
            noJobsMsg.classList.add('hidden');
        }
    }

    // Modal Logic
    let currentJobToAssign = '';

    function openAssignModal(jobId) {
        currentJobToAssign = jobId;
        document.getElementById('job-id-text').innerText = jobId;
        document.getElementById('assign-modal').classList.remove('hidden');
    }

    function closeAssignModal() {
        document.getElementById('assign-modal').classList.add('hidden');
    }

    function confirmAssignment() {
        const selected = document.querySelector('input[name="tech_select"]:checked');
        if(!selected) {
            alert("Please select a technician first!");
            return;
        }

        // selected value aisi hai: "1|Amit Kumar"
        let parts = selected.value.split('|');
        let techId = parts[0];
        let techName = parts[1];
        
        let jobIdNumber = currentJobToAssign.split('-')[1];

        // 🚀 API Call to assign job in database
        fetch(`/api/admin/assign-job/${jobIdNumber}/${techId}`)
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    // Update UI dynamically bina refresh kiye
                    document.getElementById('status-' + jobIdNumber).innerHTML = `
                        <span class="bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-xs font-black border border-blue-100">Ongoing</span>
                        <p class="text-xs text-gray-500 mt-2 flex items-center gap-1"><i data-lucide="user" class="w-3 h-3"></i> ${techName}</p>
                    `;
                    
                    document.getElementById('action-' + jobIdNumber).innerHTML = `
                        <button class="bg-white border border-gray-200 text-gray-600 px-4 py-2 rounded-lg font-black text-xs hover:bg-gray-50">View Details</button>
                    `;
                    
                    // Dropdown wale row ka data-status update kar do taaki filter sahi chale
                    document.getElementById('action-' + jobIdNumber).closest('tr').setAttribute('data-status', 'ongoing');
                    
                    // Agar red background tha (pending ka) toh hata do
                    document.getElementById('action-' + jobIdNumber).closest('tr').classList.remove('bg-red-50/30');

                    lucide.createIcons();
                    closeAssignModal();
                    alert(`Job ${currentJobToAssign} successfully dispatched to ${techName}!`);
                }
            })
            .catch(error => {
                console.error('Error assigning job:', error);
                alert("Something went wrong!");
            });
    }

    // Ek baar shuru mein filter chala do taaki default date ka data sahi set ho jaye
    document.addEventListener("DOMContentLoaded", function() {
        filterJobs();
    });
</script>
@endsection