@extends('layouts.app')

@section('content')
<div class="w-full py-2">
    <!-- Main Row -->
    <div class="flex justify-between items-start gap-4 mb-3 flex-wrap">
        <!-- LEFT: Filter section -->
        <div class="flex-1 min-w-[300px]">
            <!-- Filter Section -->
            <div class="bg-gray-50 p-3 rounded-lg shadow-sm mb-3">
                <div class="flex items-center space-x-2 justify-between flex-wrap gap-2">
                    <!-- Branch Filter (Always Visible, Customized per Role) -->
                    @if(auth()->user()->isAdmin())
                    <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="" {{ request('branch_id') == '' ? 'selected' : '' }}>All Branches</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" {{ request('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                            @endforeach
                        </select>               
                    </div>
                    @endif

                    <!-- Date Filters (Always Visible for All Roles) -->
                    <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')
                    <!-- Admin-Only Filters -->
                    <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-36">
                        <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="w-72">
                        <label for="search" class="block text-sm font-bold text-gray-600">Search</label>
                        <input type="text" name="search" id="search" placeholder="Invoice ID/Customer ID/Customer Mobile"
                               value="{{ request('search') }}"
                               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="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>
        </div>

        <!-- RIGHT: Total count + Create button stacked -->
        <div class="flex flex-col items-end gap-2 min-w-[150px]">
            <span id="serviceOrderCount" class="w-auto px-3 py-2 bg-gray-500 text-white rounded-md text-md">
                Total Orders: {{ $serviceOrderCount }}
            </span>
            <a href="{{ route('service-orders.create') }}" class="bg-orange-500 text-gray-900 px-4 py-2 rounded-md hover:bg-blue-600 inline-block">Create Order</a>
        </div>   
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow w-full relative overflow-auto max-h-[650px]">
        <table class="w-full table-auto" id="service-orders-table">
            <thead class="sticky top-0 bg-gray-200 z-10">
                <tr class="bg-gray-200">
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[60px]">Order Create</th>
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[70px]">Invoice ID</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]">Branch</th>
                    @endif
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Customer ID</th>
                    <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>                    
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Service Name</th>
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Service Rate(SR)</th>
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Due(SR)</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>
                    @endif
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[120px]">Status</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]">Agent Commission</th>
                    @endif
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[100px]">Status Change Date</th>
                    <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-[100px]">Remarks</th>
                    <th class="px-2 py-2 text-center text-sm font-medium text-gray-700 w-[50px]">Actions</th>
                </tr>
            </thead>
            <tbody id="service-orders-tbody">
                @include('service-orders.partials.table-rows', ['serviceOrders' => $serviceOrders, 'agents' => $agents, 'statuses' => $statuses])
            </tbody>
        </table>
    </div>

    {{-- PAGINATION – Bottom Right Corner --}}
    <div class="mt-2">
        <div id="pagination-container" class="text-sm">
            {{-- Initial load (non-AJAX) – show Laravel pagination if data exists --}}
            @if(isset($serviceOrders) && method_exists($serviceOrders, 'links'))
                {!! $serviceOrders->appends(request()->query())->links('pagination::tailwind') !!}
            @endif
        </div>
    </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);

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

    const searchEl = document.getElementById('search');
    if (searchEl) {
        searchEl.addEventListener('input', () => {
            clearTimeout(debounceTimeout);
            debounceTimeout = setTimeout(() => {
                applyFilter('search', searchEl.value.trim());
            }, 500); // Slightly longer debounce for typing
        });
    }

    // getFilterParams function
    function getFilterParams() {
        let branchId = document.getElementById('branch_id') ? document.getElementById('branch_id').value : '';
        @if (in_array(auth()->user()->role, ['branch_admin', 'branch_staff']))
            branchId = '{{ auth()->user()->branch_id }}';
        @endif
        return {
            branch_id: branchId,
            from_date: document.getElementById('from_date') ? document.getElementById('from_date').value : '',
            to_date: document.getElementById('to_date') ? document.getElementById('to_date').value : '',
            date_type: document.getElementById('date_type') ? document.getElementById('date_type').value : '',
            service_id: document.getElementById('service_id') ? document.getElementById('service_id').value : '',
            status: document.getElementById('status') ? document.getElementById('status').value : '',
            agent_id: document.getElementById('agent_id') ? document.getElementById('agent_id').value : '',
            search: document.getElementById('search') ? document.getElementById('search').value.trim() : ''
        };
    }

    // applyFilter function
    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);
            console.log('Applying filter params:', params);
            fetchTable('{{ route("service-orders.index") }}', params);
        }, 300);
    };

    // resetFilters
    window.resetFilters = function() {
        filterIds.forEach(id => {
            const el = document.getElementById(id);
            if (el) el.value = '';
        });
        // Also clear search specifically
        const searchEl = document.getElementById('search');
        if (searchEl) searchEl.value = '';

        history.pushState({}, '', window.location.pathname);
        fetchTable('{{ route("service-orders.index") }}');
    };

    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;

            // 🔥 Update the Total Count
            const countElement = document.getElementById('serviceOrderCount');
            if (countElement && data.serviceOrderCount !== undefined) {
                countElement.textContent = 'Total: ' + data.serviceOrderCount;
            }

            // Inject pagination
            const paginationContainer = document.getElementById('pagination-container');
            if (paginationContainer) {
                paginationContainer.innerHTML = data.pagination || '';
            }
            
            attachDropdownListeners();
            attachCommissionListeners();
            attachActionMenuListeners();
            attachDeleteListeners();
            attachPaginationListeners();
        })
        .catch(error => {
            console.error(error.message);
            alert(error.message);
        })
        .finally(() => loadingSpinner.classList.add('hidden'));
    }

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

    // 1. Fix selector and re-attach properly
    function attachPaginationListeners() {
        document.querySelectorAll('#pagination-container a').forEach(link => {
            link.removeEventListener('click', handlePaginationClick);
            link.addEventListener('click', handlePaginationClick);
        });
    }

    function handlePaginationClick(e) {
        e.preventDefault(); // Prevent full page reload
        const url = this.getAttribute('href');
        if (url && url !== '#') {
            // Keep all current filters + new page number
            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);
        });
    }

    // Commission listeners
    function attachCommissionListeners() {
        document.querySelectorAll('.commission-input').forEach(input => {
            input.removeEventListener('blur', handleCommissionUpdate);
            input.addEventListener('blur', handleCommissionUpdate);
        });
    }

    function handleCommissionUpdate(event) {
    const input = event.target;
    const orderId = input.dataset.orderId;
    const commissionValue = parseFloat(input.value) || 0;
    const originalValue = input.dataset.originalValue || '';
    const statusSpan = input.parentElement.querySelector('.commission-status');

    // Client-side validation
    if (commissionValue < 0 || commissionValue > 99999999.99) {
        input.classList.add('border-red-500');
        statusSpan.classList.remove('hidden', 'loading', 'success');
        statusSpan.classList.add('error');
        input.value = originalValue;
        alert('Commission must be between 0 and 99999999.99');
        return;
    }

    // Show loading state
    input.disabled = true;
    input.classList.remove('border-red-500');
    statusSpan.classList.remove('hidden', 'success', 'error');
    statusSpan.classList.add('loading');

    const formData = new FormData();
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
    formData.append('agent_commission', commissionValue);

    fetch(`/service-orders/${orderId}/commission`, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.message) {
            // Success: Display without trailing .00 if integer
            const displayValue = commissionValue % 1 === 0 ? commissionValue.toString() : commissionValue.toFixed(2);
            input.dataset.originalValue = displayValue;
            input.value = displayValue;
            statusSpan.classList.remove('loading', 'error');
            statusSpan.classList.add('success');
            setTimeout(() => {
                statusSpan.classList.add('hidden');
                statusSpan.classList.remove('success');
            }, 2000);
        } else {
            throw new Error(data.error || 'An error occurred');
        }
    })
    .catch(error => {
        console.error('Commission update error:', error);
        statusSpan.classList.remove('loading', 'success');
        statusSpan.classList.add('error');
        input.classList.add('border-red-500');
        input.value = originalValue;
        alert('Failed to update commission: ' + error.message);
    })
    .finally(() => {
        input.disabled = false;
        statusSpan.classList.remove('loading');
    });
    }

    function handleAgentChange(event) {
        const select = event.target;
        console.log('Agent change fired for order:', select.dataset.orderId, 'with value:', select.value);
        const orderId = select.dataset.orderId;
        const agentId = select.value ? parseInt(select.value) : null;
        const originalValue = select.dataset.originalValue;
        select.disabled = true;
        select.classList.add('opacity-50');

        const payload = { agent_id: agentId };
        console.log('Sending payload:', payload);

        fetch(`/service-orders/${orderId}/assign-agent`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify(payload)
        })
        .then(response => {
            console.log('Response status:', response.status);
            if (!response.ok) {
                return response.json().then(errData => {
                    console.error('Error response:', errData);
                    throw new Error(errData.error || 'Failed to assign agent');
                });
            }
            return response.json();
        })
        .then(data => {
            console.log('Success response:', data);
            alert(data.message || 'Agent updated successfully');
            select.dataset.originalValue = agentId || '';
        })
        .catch(err => {
            console.error('Assign agent error for order ' + orderId + ':', err.message);
            alert('Failed to assign agent: ' + err.message);
            select.value = originalValue;
        })
        .finally(() => {
            select.disabled = false;
            select.classList.remove('opacity-50');
        });
    }

    const statusColors = {
        'cancelled': 'text-red-500',
        'completed': 'text-green-500',
        'hold': 'text-yellow-500',
        'moktob_amal': 'text-blue-500',
        'pending': 'text-gray-500'
    };

    function handleStatusChange() {
        const select = this;
        const orderId = select.dataset.orderId;
        const status = select.value;
        const originalValue = select.dataset.originalValue;
        if (['cancelled', 'completed'].includes(status) &&
            !confirm(`Are you sure you want to mark this order as ${status}?`)) {
            select.value = originalValue;
            return;
        }
        select.disabled = true;
        const td = select.closest('td');
        const originalInnerHTML = td.innerHTML;
        td.innerHTML = `
            <div class="flex justify-center items-center">
                <svg class="animate-spin h-5 w-5 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
            </div>
        `;
        fetch(`/service-orders/${orderId}/update-status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            },
            body: JSON.stringify({ status })
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(err => {
                    throw new Error(err.error || `HTTP error! Status: ${response.status}`);
                });
            }
            return response.json();
        })
        .then(data => {
            if (data.message) {
                select.dataset.originalValue = status === 'cancelled' ? originalValue : status;
                if (status === 'cancelled') {
                    td.innerHTML = `<span class="text-orange-500">Cancellation Processing</span>`;
                    td.className = `border px-2 py-2 text-center w-[120px] text-orange-500`;
                } else {
                    td.className = `border px-2 py-2 text-center w-[120px] ${statusColors[status] || ''}`;
                    td.innerHTML = originalInnerHTML;
                    select.value = status;
                }
                const row = select.closest('tr');
                if (row) {
                    const statusChangeDateCell = row.querySelector('.status-change-date');
                    if (statusChangeDateCell) {
                        statusChangeDateCell.textContent = new Date().toLocaleDateString();
                    }
                }
                alert(data.message);
                if (data.redirect) {
                    window.location.href = data.redirect;
                }
            } else {
                throw new Error(data.error || 'No message received from server');
            }
        })
        .catch(error => {
            console.error('Error updating status for order ' + orderId + ':', error.message);
            td.innerHTML = originalInnerHTML;
            select.value = originalValue;
            alert(`Error: ${error.message}`);
        })
        .finally(() => {
            select.disabled = false;
        });
    }

    // Action Menu (View/Delete)
    function attachActionMenuListeners() {
        const table = document.getElementById('service-orders-table');
        if (!table) return;

        // Remove old listener
        table.removeEventListener('click', handleActionToggle);
        // Add new one
        table.addEventListener('click', handleActionToggle);

        // Prevent menu from closing when clicking inside it
        document.querySelectorAll('.action-menu a, .action-menu form button').forEach(el => {
            el.removeEventListener('click', stopLinkPropagation);
            el.addEventListener('click', stopLinkPropagation);
        });
    }

    function stopLinkPropagation(e) {
        e.stopPropagation(); // Prevent table click handler
        // Do NOT preventDefault() — we want navigation!
    }

    function handleActionToggle(e) {
        // Only trigger on .action-toggle button
        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');

        // Close all
        document.querySelectorAll('.action-menu').forEach(m => {
            m.classList.add('hidden');
            m.style.display = 'none';
        });

        // Open this one
        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 action menu 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';
                }
            });
        }
    });

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

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