@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>
               <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>
               <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>
                       <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]">Branch</th>
                       <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>
                       <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;
       }
   </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;

           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);

           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 || ''
               };
           }

           window.applyFilter = function(key, value) {
               clearTimeout(debounceTimeout);
               debounceTimeout = setTimeout(() => {
                   const params = getFilterParams();
                   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);

                   loadingSpinner.classList.remove('hidden');

                   fetch('{{ route('service-orders.filter') }}?' + new URLSearchParams(params), {
                       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 to filter'); });
                       }
                       return response.json();
                   })
                   .then(data => {
                       tableBody.innerHTML = data.table;
                       pagination.innerHTML = data.pagination;
                       attachPaginationListeners();
                       attachDropdownListeners();
                       attachActionMenuListeners();
                   })
                   .catch(error => {
                       console.error('Error filtering:', error.message);
                       alert('Failed to apply filter: ' + error.message);
                   })
                   .finally(() => {
                       loadingSpinner.classList.add('hidden');
                   });
               }, 300);
           };

           window.resetFilters = function() {
               document.getElementById('branch_id').value = '';
               document.getElementById('from_date').value = '';
               document.getElementById('to_date').value = '';
               document.getElementById('date_type').value = '';
               document.getElementById('service_id').value = '';
               document.getElementById('status').value = '';
               document.getElementById('agent_id').value = '';

               const url = new URL(window.location);
               url.search = '';
               history.pushState({}, '', url);

               loadingSpinner.classList.remove('hidden');
               fetch('{{ route('service-orders.filter') }}', {
                   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 to reset filters'); });
                   }
                   return response.json();
               })
               .then(data => {
                   tableBody.innerHTML = data.table;
                   pagination.innerHTML = data.pagination;
                   attachPaginationListeners();
                   attachDropdownListeners();
                   attachActionMenuListeners();
               })
               .catch(error => {
                   console.error('Error resetting filters:', error.message);
                   alert('Failed to reset filters: ' + error.message);
               })
               .finally(() => {
                   loadingSpinner.classList.add('hidden');
               });
           };

           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');
               loadingSpinner.classList.remove('hidden');
               fetch(url, {
                   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 to load page'); });
                   }
                   return response.json();
               })
               .then(data => {
                   tableBody.innerHTML = data.table;
                   pagination.innerHTML = data.pagination;
                   history.pushState({}, '', url);
                   attachPaginationListeners();
                   attachDropdownListeners();
                   attachActionMenuListeners();
               })
               .catch(error => {
                   console.error('Error loading page:', error.message);
                   alert('Failed to load page: ' + error.message);
               })
               .finally(() => {
                   loadingSpinner.classList.add('hidden');
               });
           }

           function attachDropdownListeners() {
               try {
                   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);
                   });
               } catch (error) {
                   console.error('Error attaching dropdown listeners:', error.message);
               }
           }

           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(response => {
                   if (!response.ok) {
                       return response.json().then(err => { throw new Error(err.error || 'Failed to assign agent'); });
                   }
                   return response.json();
               })
               .then(data => {
                   alert(data.message || 'Agent assigned successfully.');
                   this.dataset.originalValue = agentId;
               })
               .catch(error => {
                   console.error('Error assigning agent:', error.message);
                   alert('Failed to assign agent: ' + error.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('Are you sure you want to cancel this service order? You will be redirected to specify a deduction amount.')) {
                   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: status })
               })
               .then(response => {
                   if (!response.ok) {
                       return response.json().then(err => { throw new Error(err.error || 'Failed to update status'); });
                   }
                   return response.json();
               })
               .then(data => {
                   if (data.redirect) {
                       window.location.href = data.redirect;
                   } else {
                       alert(data.message || 'Status updated successfully.');
                       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' : '');
                       applyFilter();
                   }
               })
               .catch(error => {
                   console.error('Error updating status:', error.message);
                   alert('Failed to update status: ' + error.message);
                   this.value = originalValue;
               })
               .finally(() => {
                   this.disabled = false;
                   this.classList.remove('opacity-50');
               });
           }

           function attachActionMenuListeners() {
               console.log('Attaching action menu listeners...');
               const table = document.getElementById('service-orders-table');
               if (!table) {
                   console.error('Table #service-orders-table not found');
                   return;
               }
               table.removeEventListener('click', handleActionToggle);
               table.addEventListener('click', handleActionToggle);
           }

           function handleActionToggle(e) {
               try {
                   const button = e.target.closest('.action-toggle');
                   if (!button) {
                       console.log('No .action-toggle found for click');
                       return;
                   }
                   e.preventDefault();
                   e.stopPropagation();
                   const menu = button.nextElementSibling;
                   if (!menu || !menu.classList.contains('action-menu')) {
                       console.error('Action menu not found for button in order:', button.closest('tr').querySelector('td').textContent);
                       return;
                   }

                   console.log('Action toggle clicked for order:', button.closest('tr').querySelector('td').textContent);
                   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';
                       console.log('Menu opened for order:', button.closest('tr').querySelector('td').textContent);
                       console.log('Menu styles:', window.getComputedStyle(menu).display, window.getComputedStyle(menu).visibility);
                       console.log('Menu position:', menu.getBoundingClientRect());
                   }
               } catch (error) {
                   console.error('Error in handleActionToggle:', error.message);
               }
           }

           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;
               }
               const orderId = form.dataset.orderId;
               fetch(form.action, {
                   method: 'POST',
                   headers: {
                       'X-CSRF-TOKEN': csrfToken,
                       'Accept': 'application/json'
                   },
                   body: new FormData(form)
               })
               .then(response => {
                   if (!response.ok) {
                       return response.json().then(err => { throw new Error(err.error || 'Failed to delete service order'); });
                   }
                   return response.json();
               })
               .then(data => {
                   alert(data.message || 'Service order deleted successfully.');
                   applyFilter();
               })
               .catch(error => {
                   console.error('Error deleting service order:', error.message);
                   alert('Failed to delete service order: ' + error.message);
               });
           }

           document.addEventListener('click', function(e) {
               setTimeout(() => {
                   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';
                               console.log('Menu closed due to outside click');
                           }
                       });
                   }
               }, 100);
           });

           document.getElementById('service-orders-table').addEventListener('submit', function(e) {
               if (e.target.classList.contains('delete-action')) {
                   handleDelete(e);
               }
           });

           ['branch_id', 'from_date', 'to_date', 'date_type', 'service_id', 'status', 'agent_id'].forEach(id => {
               const element = document.getElementById(id);
               if (element) {
                   element.addEventListener('change', () => applyFilter(id, element.value));
               } else {
                   console.error(`Filter element #${id} not found`);
               }
           });

           try {
               attachPaginationListeners();
               attachDropdownListeners();
               attachActionMenuListeners();
           } catch (error) {
               console.error('Error during initial setup:', error.message);
           }

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