@extends('layouts.app')

@section('content')
<div class="container mx-auto px-2 py-6">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">Service Orders</h1>
    <a href="{{ route('service-orders.create') }}" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 mb-4 inline-block">Create New Service Order</a>

    <!-- Filter Section -->
    <div class="bg-gray-50 p-3 rounded-lg shadow-sm mb-6">
        <div class="flex items-center space-x-2 justify-between flex-wrap gap-2">
            <div class="w-40">
                <label for="branch_id" class="block text-sm font-bold text-gray-600">Branch</label>
                <select name="branch_id" id="branch_id" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
                    <option value="">All Branches</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ request('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="w-28">
                <label for="from_date" class="block text-sm font-bold text-gray-600">From Date</label>
                <input type="date" name="from_date" id="from_date" value="{{ request('from_date') }}" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
            </div>
            <div class="w-28">
                <label for="to_date" class="block text-sm font-bold text-gray-600">To Date</label>
                <input type="date" name="to_date" id="to_date" value="{{ request('to_date') }}" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
            </div>
            @if (auth()->user()->role === 'super_admin' || auth()->user()->role === 'co_admin')
            <div class="w-32">
                <label for="date_type" class="block text-sm font-bold text-gray-600">Date Type</label>
                <select name="date_type" id="date_type" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
                    <option value="" {{ request('date_type', '') == '' ? 'selected' : '' }}>All Date</option>
                    @foreach($dateTypes as $value => $label)
                        @if($value !== '')
                            <option value="{{ $value }}" {{ request('date_type') == $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endif
                    @endforeach
                </select>
            </div>
            <div class="w-40">
                <label for="service_id" class="block text-sm font-bold text-gray-600">Service</label>
                <select name="service_id" id="service_id" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
                    <option value="">All Services</option>
                    @foreach($services as $service)
                        <option value="{{ $service->id }}" {{ request('service_id') == $service->id ? 'selected' : '' }}>{{ $service->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="w-28">
                <label for="status" class="block text-sm font-bold text-gray-600">Status</label>
                <select name="status" id="status" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
                    <option value="">All Statuses</option>
                    @foreach($statuses as $status)
                        <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>{{ str_replace('_', ' ', ucfirst($status)) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="w-40">
                <label for="agent_id" class="block text-sm font-bold text-gray-600">Agent</label>
                <select name="agent_id" id="agent_id" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
                    <option value="">All Agents</option>
                    @foreach($agents as $agent)
                        <option value="{{ $agent->id }}" {{ request('agent_id') == $agent->id ? 'selected' : '' }}>{{ $agent->name }}</option>
                    @endforeach
                </select>
            </div>
            @endif
            <div class="ml-auto">
                <button onclick="resetFilters()" class="bg-red-500 text-white px-2 py-1 rounded-lg hover:bg-red-600 text-sm">Reset</button>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow max-w-full relative">
        <table class="min-w-full table-auto overflow-visible" id="service-orders-table">
            <thead>
                <tr class="bg-gray-200">
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[60px]">ID</th>
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[70px]">Invoice ID</th>
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Service Name</th>
                    @if (auth()->user()->role === 'super_admin' || auth()->user()->role === 'co_admin')
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Customer Name</th>
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Customer Mobile</th>
                    @endif
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Branch</th>
                    @if (auth()->user()->role === 'super_admin' || auth()->user()->role === 'co_admin')
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[140px]">Agent</th>
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[120px]">Status</th>
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Total Cost</th>
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Agent Commission</th>
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Status Change Date</th>
                    @endif
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Deadline</th>
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[60px]">Actions</th>
                </tr>
            </thead>
            <tbody id="service-orders-tbody">
                @include('service-orders.partials.table-rows', ['serviceOrders' => $serviceOrders, 'agents' => $agents, 'statuses' => $statuses])
            </tbody>
        </table>
    </div>
    <div class="mt-4" id="pagination">
        {{ $serviceOrders->links('pagination::tailwind') }}
    </div>
</div>

@push('styles')
<style>
    .action-menu:not(.hidden) {
        display: flex !important;
        visibility: visible !important;
    }
    #commission-modal:not(.hidden) {
        display: flex !important;
    }
</style>
@endpush

@push('scripts')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
document.addEventListener('DOMContentLoaded', function () {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    const tableBody = document.getElementById('service-orders-tbody');
    const tableContainer = document.getElementById('service-orders-table').parentElement;
    const pagination = document.getElementById('pagination');
    let debounceTimeout;

    // Loading spinner
    const loadingSpinner = document.createElement('div');
    loadingSpinner.className = 'absolute inset-0 flex items-center justify-center bg-gray-100 bg-opacity-50 hidden';
    loadingSpinner.innerHTML = '<div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-indigo-500"></div>';
    tableContainer.appendChild(loadingSpinner);

    // Commission modal elements
    const commissionModal = document.getElementById('commission-modal');
    const commissionForm = document.getElementById('commission-form');
    const commissionInput = document.getElementById('agent_commission');
    const modalOrderId = document.getElementById('modal-order-id');
    const cancelCommissionButton = document.getElementById('cancel-commission');

    function getFilterParams() {
        return {
            branch_id: document.getElementById('branch_id').value || '',
            from_date: document.getElementById('from_date').value || '',
            to_date: document.getElementById('to_date').value || '',
            date_type: document.getElementById('date_type').value || '',
            service_id: document.getElementById('service_id').value || '',
            status: document.getElementById('status').value || '',
            agent_id: document.getElementById('agent_id').value || ''
        };
    }

    function fetchTable(url, params = {}) {
        loadingSpinner.classList.remove('hidden');
        let query = new URLSearchParams(params).toString();
        let fetchUrl = url + (query ? '?' + query : '');

        return fetch(fetchUrl, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            }
        })
        .then(response => {
            if(!response.ok) return response.json().then(err => { throw new Error(err.error || 'Failed'); });
            return response.json();
        })
        .then(data => {
            tableBody.innerHTML = data.table;
            pagination.innerHTML = data.pagination;
            attachPaginationListeners();
            attachDropdownListeners();
            attachActionMenuListeners();
            attachDeleteListeners();
            attachCommissionModalListeners();
        })
        .catch(error => { console.error(error.message); alert(error.message); })
        .finally(() => loadingSpinner.classList.add('hidden'));
    }

    // Filter
    window.applyFilter = function(key, value) {
        clearTimeout(debounceTimeout);
        debounceTimeout = setTimeout(() => {
            const params = getFilterParams();
            if(key) params[key] = value;

            const url = new URL(window.location);
            Object.keys(params).forEach(k => {
                if(params[k]) url.searchParams.set(k, params[k]);
                else url.searchParams.delete(k);
            });
            history.pushState({}, '', url);

            fetchTable('{{ route("service-orders.filter") }}', params);
        }, 300);
    };

    // Reset filters
    window.resetFilters = function() {
        ['branch_id','from_date','to_date','date_type','service_id','status','agent_id'].forEach(id => {
            const el = document.getElementById(id);
            if(el) el.value = '';
        });
        history.pushState({}, '', window.location.pathname);
        fetchTable('{{ route("service-orders.filter") }}');
    };

    // Pagination
    function attachPaginationListeners() {
        document.querySelectorAll('#pagination a').forEach(link => {
            link.removeEventListener('click', handlePaginationClick);
            link.addEventListener('click', handlePaginationClick);
        });
    }

    function handlePaginationClick(e) {
        e.preventDefault();
        const url = this.getAttribute('href');
        fetchTable(url);
        history.pushState({}, '', url);
    }

    // Dropdowns
    function attachDropdownListeners() {
        document.querySelectorAll('.agent-select').forEach(select => {
            select.removeEventListener('change', handleAgentChange);
            select.addEventListener('change', handleAgentChange);
        });
        document.querySelectorAll('.status-select').forEach(select => {
            select.removeEventListener('change', handleStatusChange);
            select.addEventListener('change', handleStatusChange);
        });
    }

    function handleAgentChange() {
        const orderId = this.dataset.orderId;
        const agentId = this.value;
        const originalValue = this.dataset.originalValue;
        this.disabled = true; this.classList.add('opacity-50');

        fetch(`/service-orders/${orderId}/assign-agent`, {
            method: 'POST',
            headers: {'Content-Type':'application/json','X-CSRF-TOKEN':csrfToken,'Accept':'application/json'},
            body: JSON.stringify({agent_id: agentId || null})
        })
        .then(r => r.json())
        .then(data => { alert(data.message || 'Agent updated'); this.dataset.originalValue = agentId; })
        .catch(err => { alert('Failed: ' + err.message); this.value = originalValue; })
        .finally(() => { this.disabled = false; this.classList.remove('opacity-50'); });
    }

    function handleStatusChange() {
        const orderId = this.dataset.orderId;
        const status = this.value;
        const originalValue = this.dataset.originalValue;

        if(status === 'cancelled' && !confirm('Cancel this order?')) { this.value = originalValue; return; }
        this.disabled = true; this.classList.add('opacity-50');

        fetch(`/service-orders/${orderId}/update-status`, {
            method: 'POST',
            headers: {'Content-Type':'application/json','X-CSRF-TOKEN':csrfToken,'Accept':'application/json'},
            body: JSON.stringify({status})
        })
        .then(r => r.json())
        .then(data => {
            if(data.redirect) window.location.href = data.redirect;
            else {
                alert(data.message || 'Status updated');
                this.dataset.originalValue = status;
                const td = this.closest('td');
                td.className = 'border px-2 py-2 text-center w-[120px] ' + 
                    (status==='cancelled'?'text-red-500':status==='completed'?'text-green-500':status==='hold'?'text-yellow-500':status==='moktob_amal'?'text-blue-500':'');
            }
        })
        .catch(err => { alert('Failed: ' + err.message); this.value = originalValue; })
        .finally(()=>{ this.disabled=false; this.classList.remove('opacity-50'); });
    }

    // Commission Modal
    function attachCommissionModalListeners() {
        document.querySelectorAll('.open-commission-modal').forEach(button => {
            button.removeEventListener('click', handleOpenCommissionModal);
            button.addEventListener('click', handleOpenCommissionModal);
        });
    }

    function handleOpenCommissionModal(e) {
        e.preventDefault();
        const orderId = this.dataset.orderId;
        const commission = this.dataset.commission;
        modalOrderId.value = orderId;
        commissionInput.value = commission;
        commissionForm.action = `/service-orders/${orderId}/update-commission`;
        commissionModal.classList.remove('hidden');
    }

    cancelCommissionButton.addEventListener('click', () => {
        commissionModal.classList.add('hidden');
        commissionForm.reset();
    });

    commissionForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const orderId = modalOrderId.value;
        const commission = commissionInput.value;

        fetch(commissionForm.action, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({ agent_commission: commission })
        })
        .then(response => response.json())
        .then(data => {
            alert(data.message || 'Commission updated');
            commissionModal.classList.add('hidden');
            commissionForm.reset();
            applyFilter();
        })
        .catch(error => {
            alert('Failed: ' + error.message);
        });
    });

    // Action Menu (View/Edit/Delete)
    function attachActionMenuListeners() {
        const table = document.getElementById('service-orders-table');
        table.removeEventListener('click', handleActionToggle);
        table.addEventListener('click', handleActionToggle);

        // Stop propagation for links/buttons inside menu
        document.querySelectorAll('.action-menu a, .action-menu form.delete-action button').forEach(el => {
            el.removeEventListener('click', stopPropagation);
            el.addEventListener('click', stopPropagation);
        });
    }

    // Prevent action menu links from being blocked
    document.querySelectorAll('.action-menu a').forEach(link => {
        link.addEventListener('click', function(e) {
            e.stopPropagation(); // Let the browser follow the link
        });
    });

    function stopPropagation(e){ e.stopPropagation(); }

    function handleActionToggle(e) {
        const button = e.target.closest('.action-toggle');
        if(!button) return;
        e.preventDefault(); e.stopPropagation();

        const menu = button.nextElementSibling;
        if(!menu || !menu.classList.contains('action-menu')) return;

        const isOpen = !menu.classList.contains('hidden');
        document.querySelectorAll('.action-menu').forEach(m => { m.classList.add('hidden'); m.style.display='none'; });

        if(!isOpen){ menu.classList.remove('hidden'); menu.style.display='flex'; }
    }

    // Delete
    function attachDeleteListeners() {
        document.querySelectorAll('form.delete-action').forEach(form => {
            form.removeEventListener('submit', handleDelete);
            form.addEventListener('submit', handleDelete);
        });
    }

    function handleDelete(e) {
        e.preventDefault();
        const form = e.target.closest('form.delete-action');
        if(!form) return;
        if(!confirm('Are you sure you want to delete this service order?')) return;

        fetch(form.action, {method:'POST', headers:{'X-CSRF-TOKEN':csrfToken,'Accept':'application/json'}, body:new FormData(form)})
        .then(r=>r.json())
        .then(data => { alert(data.message || 'Deleted'); applyFilter(); })
        .catch(err => { alert('Failed: '+err.message); });
    }

    // Close menu and modal on outside click
    document.addEventListener('click', function(e){
        if(!e.target.closest('.action-toggle') && !e.target.closest('.action-menu')){
            document.querySelectorAll('.action-menu').forEach(menu => {
                if(!menu.classList.contains('hidden')) { menu.classList.add('hidden'); menu.style.display='none'; }
            });
        }
        if(!e.target.closest('#commission-modal') && !e.target.closest('.open-commission-modal')){
            commissionModal.classList.add('hidden');
            commissionForm.reset();
        }
    });

    // Filters change
    ['branch_id','from_date','to_date','date_type','service_id','status','agent_id'].forEach(id => {
        const el = document.getElementById(id);
        if(el) el.addEventListener('change',()=>applyFilter(id, el.value));
    });

    // Initial attachment
    attachPaginationListeners();
    attachDropdownListeners();
    attachActionMenuListeners();
    attachDeleteListeners();
    attachCommissionModalListeners();

    // Session alerts
    @if(session('success')) alert('{{ session("success") }}'); applyFilter(); @endif
    @if(session('error')) alert('{{ session("error") }}'); @endif
});
</script>
@endpush
@endsection