@extends('admin.layouts.layout')

@push('page_style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
  .sortable-header {
    user-select: none;
    transition: background-color 0.2s ease;
  }
  .sortable-header:hover {
    background-color: rgba(0,123,255,0.1) !important;
  }
  .sort-icon {
    display: inline-block;
    width: 12px;
    text-align: center;
  }
  
  /* Filter section styling */
  .filter-section {
    animation: slideDown 0.3s ease-out;
    border-left: 4px solid #007bff;
    position: relative;
  }
  
  .filter-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
    z-index: 1;
    pointer-events: none;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .filter-section .card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
  }
  
  .filter-section .card-header {
    background: linear-gradient(45deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
  }
  
  .filter-section .form-label {
    font-weight: 500;
    color: #495057;
    margin-bottom: 5px;
  }
  
  .filter-section .form-control,
  .filter-section .form-select {
    border-radius: 6px;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  .filter-section .form-control:focus,
  .filter-section .form-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
  
  /* Live search styling */
  #live-search-input:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }
  
  /* Fade effect for filtered rows */
  #schedule-table tbody tr {
    transition: opacity 0.2s ease;
  }
  
  #schedule-table tbody tr[style*="display: none"] {
    opacity: 0;
  }
</style>
@endpush

@section('content')
<div class="mb-4">  
    <div class="title_area">
      <div class="d-flex align-items-center gap-2">
        <h3>All Schedules</h3>
      </div>
      <div class="d-flex align-items-center gap-2 ms-auto">
        @if(isset($isSuperOrSubAdmin) && $isSuperOrSubAdmin && isset($tenants) && count($tenants) > 0)
        <div class="d-flex align-items-center me-2">
          <label class="form-label mb-0 me-2 text-nowrap" style="font-size: 13px;">Tenant:</label>
          <select id="tenant-filter" class="form-select form-select-sm" style="min-width: 180px; height: 47px;">
            <option value="">All Tenants</option>
            @foreach($tenants as $tenant)
              <option value="{{ $tenant->id }}" {{ (isset($selectedTenantId) && $selectedTenantId == $tenant->id) ? 'selected' : '' }}>
                {{ $tenant->name }}
              </option>
            @endforeach
          </select>
        </div>
        @endif
        <form method="GET" class="d-flex align-items-center gap-2" id="schedule-filter-form" action="{{ route('admin.schedule.list') }}">
          @if(isset($selectedTenantId) && $selectedTenantId)
            <input type="hidden" name="tenant_id" id="form-tenant-id" value="{{ $selectedTenantId }}">
          @endif
          <div class="d-flex align-items-center">
            <div class="search_box">
              <input type="text" name="q" id="live-search-input" class="form-control" placeholder="Search by Appointment ID, Created By, or Location..." value="{{ request('q') }}" />
              <button class="btn btn_search" type="submit">
                <img src="{{ asset('images/search.svg') }}" alt="Search" />
              </button>
            </div>
            <button type="button" class="btn btn-sm ms-2 reset-btn" id="schedule-clear-search" title="Reset Search" @if(!request('q')) style="display:none;" @endif>
              <img src="{{ asset('images/delete.svg') }}" alt="Clear" width="14" height="14" style="transform: rotate(45deg);" /> Clear
            </button>
          </div>
          <select name="status" class="form-select form-select-sm" onchange="document.getElementById('schedule-filter-form').submit()" style="height: 47px;">
            <option value="">All Status</option>
            <option value="3" {{ request('status')==='3' ? 'selected' : '' }}>Booked</option>
            <option value="completed" {{ request('status')==='completed' ? 'selected' : '' }}>Completed</option>
            <option value="cancelled" {{ request('status')==='cancelled' ? 'selected' : '' }}>Cancelled</option>
          </select>
        </form>
        <div class="contact_btns">
          <a href="{{ route('admin.schedule.step1') }}" class="add_btn btn"><img src="{{ asset('images/add.svg') }}" /> Add</a>
          <a href="javascript:void(0);" class="filter_btn btn w-auto show-panel" data-id="filter-panel">
            <img src="{{ asset('images/filter.svg') }}">
          </a>
        </div>
      </div>
    </div>

    <!-- Filters Section -->
    <div class="filter-section mb-4" id="filter-panel" style="display: {{ request()->get('filter') ? 'block' : 'none' }};">
        <div class="card shadow-sm">
            <!-- <div class="card-header bg-light">
                <h6 class="mb-0 text-muted"><i class="fas fa-filter me-2"></i>Filter Options</h6>
            </div> -->
            <div class="card-body">
                <form id="filter-form" method="GET" action="{{ route('admin.schedule.list') }}">
                <input type="hidden" name="filter" value="true">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label for="filter_date_from" class="form-label"><i class="fas fa-calendar-alt me-1"></i>Date From</label>
                            <input type="text" name="date_from" id="filter_date_from" class="form-control datepicker" value="{{ request('date_from') }}" placeholder="MM-DD-YYYY">
                        </div>
                        <div class="col-md-3">
                            <label for="filter_date_to" class="form-label"><i class="fas fa-calendar-alt me-1"></i>Date To</label>
                            <input type="text" name="date_to" id="filter_date_to" class="form-control datepicker" value="{{ request('date_to') }}" placeholder="MM-DD-YYYY">
                        </div>
                        <div class="col-md-3">
                            <label for="filter_time_slot" class="form-label"><i class="fas fa-clock me-1"></i>Time Slot</label>
                            <select name="time_slot" id="filter_time_slot" class="form-select">
                                <option value="">All Time Slots</option>
                                <option value="morning" {{ request('time_slot') == 'morning' ? 'selected' : '' }}>9:00 AM</option>
                                <option value="afternoon" {{ request('time_slot') == 'afternoon' ? 'selected' : '' }}>2:00 PM</option>
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <div class="btn-group w-100">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search me-1"></i>Apply Filters
                                </button>
                                <a href="{{ route('admin.schedule.list') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-times me-1"></i>Clear
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @if(session('success'))
      <div class="alert alert-success py-2">{{ session('success') }}</div>
    @endif

    <div class="table-responsive mt-4">
      <table class="table table-hover" id="schedule-table">
        <thead>
          <tr>
            <th>Appointment ID</th>
            <th>Tenant</th>
            <th>Created By</th>
            <!-- <th>Created Date</th> -->
            <th class="sortable-header" style="cursor: pointer;" onclick="sortTable('datetime')">
              Date & Time 
              <span id="datetime-sort-icon" class="sort-icon ms-1">
                <i class="fas fa-sort text-muted"></i>
              </span>
            </th>
            <th>Location</th>
            <th>Status</th>
            <th>Is Payment Done?</th>
                <th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
    @if($schedules->count())
      @php
      $authUser = Auth::user();
      $roleSlugs = $authUser ? $authUser->roles->pluck('slug')->toArray() : [];
      $isCustomerOrAgent = in_array('customer',$roleSlugs) || in_array('agent',$roleSlugs);
      @endphp
          @foreach($schedules as $row)
            @php
              $statusLabel = $row->is_cancelled ? 'Cancelled' : (($row->is_report_submitted == 1) ? 'Complete' : (in_array($row->status,[1,2]) ? 'In Progress' : (($row->status==3)?'Booked':'N/A')));
              $statusClass = $row->is_cancelled ? 'bg-danger' : (($row->is_report_submitted == 1) ? 'bg-success' :  ($row->status==3 ? 'bg-success' : 'bg-warning text-dark'));
              $datetime = '';
              if($row->scheduled_date && $row->start_time){
                $dt = is_string($row->start_time) ? $row->start_time : ($row->start_time?->format('H:i:s'));
                $d = $row->scheduled_date instanceof \Illuminate\Support\Carbon ? $row->scheduled_date->format('Y-m-d') : $row->scheduled_date;
                $datetime = $d.' '.$dt;
              }
              $locParts = [];
              if($row->property){ foreach(['address_line1','city','state','postal_code'] as $f){ if(!empty($row->property->{$f})) $locParts[] = $row->property->{$f}; } }
              $location = implode(', ', $locParts);
              // Determine if this user (when customer/agent) is the creator of the schedule
              $createdById = $row->created_by ?? null;
              $canModify = !$isCustomerOrAgent || ($isCustomerOrAgent && $createdById && $authUser && (int)$createdById === (int)$authUser->id);
              // Check if inspection has been started (record exists in inspection_schedule table)
              $inspectionStarted = $row->inspectionSchedule ? true : false;
              $inspectionCompleted = $row->inspectionSchedule && $row->inspectionSchedule->is_inspection_completed;
            @endphp
            <tr data-id="{{ $row->id }}" data-scheduled-date="{{ $row->scheduled_date }}" data-start-time="{{ is_string($row->start_time) ? $row->start_time : ($row->start_time?->format('H:i:s')) }}">
              <td><a href="{{ route('admin.schedule.show',['id'=>$row->id]) }}">{{ $row->appointment_id }}</a></td>
              <td><span class="badge bg-primary">{{ $row->tenant->name ?? 'N/A' }}</span></td>
              <td>{{ $row->created_by_full_name }}</td>
              <!-- <td>{{ \App\Helpers\Helper::showDate($row->created_at) }}</td> -->
              <td>{{ \App\Helpers\Helper::showdate($datetime, true) }}</td>
              <td>{{ $location }}</td>
              <td>
                <span class="badge {{ $statusClass }}">{{ $statusLabel }}</span>
              </td>
              <td>
                <span class="badge {{ $row->is_payment_done==1 ? 'bg-success' : 'bg-warning text-dark' }}">{{ $row->is_payment_done == 1 ? 'Done' : 'Not Done'}}</span>
              </td>
              <td class="text-end">
                <div class="d-flex gap-2 justify-content-end">
                  @if($canModify && !$inspectionStarted)
                    @if(!$row->is_cancelled)
                      <a href="{{ route('admin.schedule.step1',['id'=>$row->id]) }}" class="me-2" title="Edit">
                          <img src="{{ asset('images/edit.svg') }}" />
                      </a>
                      <button type="button" class="me-2 btn-cancel-schedule" title="Cancel" style="border: none; background: none; padding: 0;">
                        <img src="{{ asset('images/cancel.svg') }}" alt="Cancel" />
                      </button>
                    @else
                      <button type="button" class="me-2 btn-restore-schedule" title="Restore" style="border: none; background: none; padding: 0;">
                        <img src="{{ asset('images/restore.svg') }}" alt="Restore" />
                      </button>
                    @endif
                    @if(!$isCustomerOrAgent)
                      <button type="button" class="btn-delete" title="Delete" style="border: none; background: none; padding: 0;">
                        <img src="{{ asset('images/delete_black.svg') }}" />
                      </button>
                    @elseif($isCustomerOrAgent && $createdById && (int)$createdById === (int)$authUser->id)
                      <!-- Allow customer/agent to delete only their own schedule -->
                      <button type="button" class="btn-delete" title="Delete" style="border: none; background: none; padding: 0;">
                        <img src="{{ asset('images/delete_black.svg') }}" />
                      </button>
                    @endif
                  @elseif($inspectionStarted)
                    <!-- Inspection started - show view only -->
                    <a href="{{ route('admin.schedule.show',['id'=>$row->id]) }}" class="me-2" title="View">
                      <i class="fas fa-eye text-primary" style="font-size: 18px;"></i>
                    </a>
                    @if($inspectionCompleted)
                      <a href="{{ route('admin.schedule.report',['id'=>$row->id]) }}" class="me-2" title="View Report">
                        <img src="{{ asset('images/report.svg') }}" alt="Report" style="width:18px;height:18px;" />
                      </a>
                    @endif
                    <!-- Inspection started - actions disabled -->
                    <span class="text-muted" title="Inspection started - actions disabled">
                      <i class="fas fa-lock text-secondary"></i>
                    </span>
                  @else
                    <!-- View-only: no modify actions for schedules not created by customer/agent -->
                  @endif
                </div>
              </td>
            </tr>
          @endforeach
        @else
          <tr>
            <td colspan="9" class="text-center py-4">
              <div class="text-muted">No schedules found.</div>
            </td>
          </tr>
        @endif
        </tbody>
      </table>
    </div>    
</div>

@php($data = $schedules)
@include('admin.components.pagination')


<!-- Restore Modal -->
<div class="modal fade" id="restoreScheduleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Restore Schedule</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="restore-schedule-form">
          <input type="hidden" name="schedule_id" id="restore-schedule-id" />
          <input type="hidden" name="start_time" id="restore-start-time" />
          <input type="hidden" name="primary_inspector_id" id="restore-inspector-id" />
          <input type="hidden" name="is_reschedule" id="restore-is-reschedule" value="0" />
          <input type="hidden" id="restore-tenant-id" />
          
          <div class="mb-3">
            <label class="form-label">Scheduled Date <span class="text-danger">*</span></label>
            <input type="date" name="scheduled_date" id="restore-scheduled-date" class="form-control" required min="" />
          </div>
          
          <div class="mb-3">
            <label class="form-label">Inspector & Time Slot <span class="text-danger">*</span></label>
            
            <!-- Timezone and Duration Info -->
            <div id="restore-info-box" class="mb-2 p-2 border rounded bg-info bg-opacity-10 d-none" style="font-size:12px;">
              <div class="row">
                <div class="col-6">
                  <i class="fas fa-globe me-1 text-primary"></i>
                  <strong>Timezone:</strong> <span id="restore-timezone-text">-</span>
                </div>
                <div class="col-6">
                  <i class="fas fa-clock me-1 text-primary"></i>
                  <strong>Duration:</strong> <span id="restore-duration-text">-</span>
                </div>
              </div>
              <div class="row mt-1">
                <div class="col-12">
                  <i class="fas fa-info-circle me-1 text-success"></i>
                  <small class="text-muted">Current Time: <span id="restore-current-time">-</span></small>
                </div>
              </div>
            </div>
            
            <div id="restore-availability-box" class="border rounded p-3" style="min-height:150px;max-height:400px;overflow-y:auto;font-size:12px;background:#fafafa;">
              <div class="text-muted text-center py-3">
                <i class="fas fa-calendar-alt me-2"></i>Select date to load availability...
              </div>
            </div>
            <div id="restore-selected-summary" class="mt-2 p-2 border rounded bg-light d-none" style="font-size:12px;">
              <span class="text-muted">No slot selected.</span>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-dark" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="restore-submit-btn">Restore</button>
      </div>
    </div>
  </div>
</div>
<!-- Cancel Reason Modal -->
<div class="modal fade" id="cancelReasonModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Cancel Schedule</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="cancel-schedule-form">
          <input type="hidden" name="schedule_id" id="cancel-schedule-id" />
          <div class="mb-3">
            <label class="form-label">Reason for Cancellation<span class="text-danger">*</span></label>
            <textarea name="reason" id="cancel-reason" class="form-control" rows="4" required placeholder="Enter reason..."></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-dark" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-danger" id="cancel-submit-btn">Cancel Schedule</button>
      </div>
    </div>
  </div>
</div>
@endsection

@push('page_script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
// Tenant filter handler
document.addEventListener('DOMContentLoaded', function() {
  const tenantFilter = document.getElementById('tenant-filter');
  if (tenantFilter) {
    tenantFilter.addEventListener('change', function() {
      const tenantId = this.value;
      const currentUrl = new URL(window.location.href);
      if (tenantId) {
        currentUrl.searchParams.set('tenant_id', tenantId);
      } else {
        currentUrl.searchParams.delete('tenant_id');
      }
      // Remove page parameter to go back to first page
      currentUrl.searchParams.delete('page');
      window.location.href = currentUrl.toString();
    });
  }
});

// Global variables for sorting
let currentSort = null;
let currentDirection = 'asc';

// Sort table function
function sortTable(column) {
  const table = document.getElementById('schedule-table');
  const tbody = table.querySelector('tbody');
  const rows = Array.from(tbody.querySelectorAll('tr')).filter(row => !row.querySelector('td[colspan]')); // Exclude "no data" row
  
  // Debug: Check if we have rows to sort
  console.log('Rows to sort:', rows.length);
  
  if (currentSort === column) {
    currentDirection = currentDirection === 'asc' ? 'desc' : 'asc';
  } else {
    currentSort = column;
    currentDirection = 'asc';
  }
  
  console.log('Sorting direction:', currentDirection);
  
  // Sort rows based on column
  rows.sort((a, b) => {
    if (column === 'datetime') {
      const aDate = a.getAttribute('data-scheduled-date');
      const bDate = b.getAttribute('data-scheduled-date');
      
      console.log('Row A date:', aDate);
      console.log('Row B date:', bDate);
      
      // Handle null/empty values - put them at the end
      if (!aDate && !bDate) return 0;
      if (!aDate) return 1;
      if (!bDate) return -1;
      
      // Extract just the date part (YYYY-MM-DD) from the datetime string
      const dateA = aDate.split(' ')[0];
      const dateB = bDate.split(' ')[0];
      
      console.log('Processed A:', dateA);
      console.log('Processed B:', dateB);
      
      // Simple string comparison for dates in YYYY-MM-DD format
      const result = currentDirection === 'asc' 
        ? dateA.localeCompare(dateB) 
        : dateB.localeCompare(dateA);
      
      console.log('Comparison result:', result);
      return result;
    }
    
    return 0;
  });
  
  console.log('Sorting completed, updating table...');
  
  // Clear tbody and append sorted rows
  tbody.innerHTML = '';
  rows.forEach((row, index) => {
    tbody.appendChild(row);
    console.log('Added row', index + 1, 'with date:', row.getAttribute('data-scheduled-date'));
  });
  
  console.log('Table updated');
  
  // Add "no data" row back if no actual data rows
  if (rows.length === 0) {
    tbody.innerHTML = `
      <tr>
        <td colspan="7" class="text-center py-4">
          <div class="text-muted">No schedules found.</div>
        </td>
      </tr>
    `;
  }
  
  // Update sort icons
  updateSortIcons(column);
  
  // Re-apply live search filter after sorting
  const liveSearchInput = document.getElementById('live-search-input');
  if(liveSearchInput && liveSearchInput.value.trim() !== '') {
    liveSearchInput.dispatchEvent(new Event('input'));
  }
}

// Update sort icons
function updateSortIcons(activeColumn) {
  // Reset all sort icons
  document.querySelectorAll('[id$="-sort-icon"]').forEach(icon => {
    icon.innerHTML = '<i class="fas fa-sort text-muted"></i>';
  });
  
  // Update active column icon
  const activeIcon = document.getElementById(`${activeColumn}-sort-icon`);
  if (activeIcon) {
    if (currentDirection === 'asc') {
      activeIcon.innerHTML = '<i class="fas fa-sort-up text-primary"></i>';
    } else {
      activeIcon.innerHTML = '<i class="fas fa-sort-down text-primary"></i>';
    }
  }
}

document.addEventListener('DOMContentLoaded',function(){
  // Convert display dates from YYYY-MM-DD to MM-DD-YYYY on page load
  function convertDisplayDateFormat(dateStr) {
    if(!dateStr || dateStr.trim() === '') return '';
    
    // Convert from YYYY-MM-DD to MM-DD-YYYY for display
    if(/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
      const parts = dateStr.split('-');
      return parts[1] + '-' + parts[2] + '-' + parts[0]; // MM-DD-YYYY
    }
    
    return dateStr; // Return as is if format not recognized
  }
  
  // Convert date inputs to display format
  const dateFromInput = document.getElementById('filter_date_from');
  const dateToInput = document.getElementById('filter_date_to');
  
  if(dateFromInput && dateFromInput.value) {
    dateFromInput.value = convertDisplayDateFormat(dateFromInput.value);
  }
  
  if(dateToInput && dateToInput.value) {
    dateToInput.value = convertDisplayDateFormat(dateToInput.value);
  }
  
  const clearBtn = document.getElementById('schedule-clear-search');
  const searchInput = document.querySelector('input[name="q"]');
  const liveSearchInput = document.getElementById('live-search-input');
  const scheduleTable = document.getElementById('schedule-table');
  const tableRows = scheduleTable.querySelectorAll('tbody tr');
  
  // Live search functionality
  if(liveSearchInput){
    let searchTimeout;
    
    liveSearchInput.addEventListener('input', function(){
      clearTimeout(searchTimeout);
      
      // Debounce the search to avoid excessive filtering
      searchTimeout = setTimeout(() => {
        const searchTerm = this.value.toLowerCase().trim();
        console.log('Live search term:', searchTerm);
        
        let visibleCount = 0;
        
        tableRows.forEach(row => {
          // Skip the "no data" row
          if(row.querySelector('td[colspan]')) {
            return;
          }
          
          // Get text content from relevant columns
          const appointmentId = row.cells[0]?.textContent?.toLowerCase() || '';
          const createdBy = row.cells[1]?.textContent?.toLowerCase() || '';
          const location = row.cells[3]?.textContent?.toLowerCase() || '';
          
          // Check if search term matches any of the searchable fields
          const isVisible = searchTerm === '' || 
            appointmentId.includes(searchTerm) ||
            createdBy.includes(searchTerm) ||
            location.includes(searchTerm);
          
          if(isVisible) {
            row.style.display = '';
            visibleCount++;
          } else {
            row.style.display = 'none';
          }
        });
        
        // Show/hide "no data" message
        const noDataRow = scheduleTable.querySelector('td[colspan]')?.parentElement;
        if(noDataRow) {
          if(visibleCount === 0 && searchTerm !== '') {
            // Show "no results found" message
            noDataRow.style.display = '';
            noDataRow.querySelector('td').innerHTML = '<div class="text-muted">No schedules found matching your search.</div>';
          } else if(searchTerm === '') {
            // Hide no data row when not searching
            noDataRow.style.display = 'none';
          }
        }
        
        console.log('Visible rows:', visibleCount);
      }, 300); // 300ms debounce
    });
  }
  
  if(clearBtn){
    clearBtn.addEventListener('click',function(){
      searchInput.value='';
      liveSearchInput.value='';
      this.style.display='none';
      
      // Reset live filter
      tableRows.forEach(row => {
        row.style.display = '';
      });
      
      // Submit form to reset server-side filters
      document.getElementById('schedule-filter-form').submit();
    });
  }
  if(searchInput){
    searchInput.addEventListener('input',function(){
      if(this.value){ clearBtn.style.display='inline-block'; }
      else { clearBtn.style.display='none'; }
    });
  }

  // Delete handlers
  document.querySelectorAll('.btn-delete').forEach(btn=>{
    btn.addEventListener('click',function(){
      const tr = this.closest('tr');
      const id = tr.getAttribute('data-id');
      Swal.fire({
        title:'Delete this schedule?',
        text:'This will delete the schedule.',
        icon:'warning', showCancelButton:true, confirmButtonColor:'#d33', confirmButtonText:'Yes, delete'
      }).then(result=>{
        if(result.isConfirmed){
          fetch("{{ url('schedule') }}/"+id,{method:'DELETE',headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'}})
          .then(r=>r.json()).then(json=>{
            if(json.success){
              Swal.fire('Deleted!','Schedule deleted','success');
              tr.remove();
            } else { Swal.fire('Error', json.message||'Failed to delete','error'); }
          }).catch(()=>Swal.fire('Error','Request failed','error'));
        }
      });
    });
  });

  // Cancel schedule (reason modal)
  const cancelModalEl = document.getElementById('cancelReasonModal');
  const cancelModal = cancelModalEl ? new bootstrap.Modal(cancelModalEl) : null;
  document.querySelectorAll('.btn-cancel-schedule').forEach(btn => {
    btn.addEventListener('click', function(){
      const tr = this.closest('tr');
      const id = tr.getAttribute('data-id');
      document.getElementById('cancel-schedule-id').value = id;
      document.getElementById('cancel-reason').value = '';
      if(cancelModal) cancelModal.show();
    });
  });

  const cancelSubmitBtn = document.getElementById('cancel-submit-btn');
  if(cancelSubmitBtn){
    cancelSubmitBtn.addEventListener('click', function(){
      const reasonEl = document.getElementById('cancel-reason');
      if(!reasonEl.value.trim()){
        reasonEl.focus();
        Swal.fire('Validation','Please enter a cancellation reason','warning');
        return;
      }
      const id = document.getElementById('cancel-schedule-id').value;
      const fd = new FormData();
      fd.append('reason', reasonEl.value.trim());
      fetch("{{ url('schedule') }}/"+id+"/cancel", {
        method: 'POST',
        headers: { 
          'X-CSRF-TOKEN': '{{ csrf_token() }}',
          'Accept': 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        },
        body: fd
      }).then(r=>r.json()).then(json => {
        if(json.success){ 
          if(cancelModal) cancelModal.hide();
          Swal.fire('Success', 'Schedule cancelled successfully', 'success').then(()=>{
            location.reload();
          });
        } else { 
          Swal.fire('Error', json.message || 'Failed to cancel', 'error'); 
        }
      }).catch(err=>{
        console.error('Cancel error:', err);
        Swal.fire('Error','Request failed','error');
      });
    });
  }

  // Restore schedule button
  const restoreModalEl = document.getElementById('restoreScheduleModal');
  const restoreModal = restoreModalEl ? new bootstrap.Modal(restoreModalEl) : null;
  let currentRestoreScheduleData = null;
  
  document.querySelectorAll('.btn-restore-schedule').forEach(btn => {
    btn.addEventListener('click', function(){
      const tr = this.closest('tr');
      const id = tr.getAttribute('data-id');
      let date = tr.getAttribute('data-scheduled-date') || '';
      
      // Fetch schedule details to get tenant_id and service_ids
      fetch("{{ route('admin.schedule.details', ['id' => ':id']) }}".replace(':id', id), {
        headers: { 
          'Accept': 'application/json',
          'X-Requested-With': 'XMLHttpRequest',
          'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
      }).then(r=>r.json()).then(json=>{
        if(json.status === 200 && json.data){
          currentRestoreScheduleData = json.data;
          document.getElementById('restore-schedule-id').value = id;
          document.getElementById('restore-tenant-id').value = currentRestoreScheduleData.schedule.tenant_id;
          
          // Set minimum date to today
          const today = new Date().toISOString().split('T')[0];
          const dateInputEl = document.getElementById('restore-scheduled-date');
          dateInputEl.setAttribute('min', today);
          dateInputEl.value = date >= today ? date : today; // Use today if original date is in the past
          
          // Reset selections
          document.getElementById('restore-start-time').value = '';
          document.getElementById('restore-inspector-id').value = '';
          const summaryBox = document.getElementById('restore-selected-summary');
          if(summaryBox){ summaryBox.classList.add('d-none'); }
          
          if(restoreModal) restoreModal.show();
          
          // Load availability for the selected date
          loadRestoreAvailability();
        } else {
          Swal.fire('Error', json.message || 'Failed to load schedule details', 'error');
        }
      }).catch(()=>Swal.fire('Error','Failed to fetch schedule details','error'));
    });
  });

  // Date change handler for restore modal
  const restoreDateInput = document.getElementById('restore-scheduled-date');
  if(restoreDateInput){
    restoreDateInput.addEventListener('change', function(){
      loadRestoreAvailability();
    });
  }

  // Update timezone and duration info box
  function updateRestoreInfoBox(json){
    const infoBox = document.getElementById('restore-info-box');
    const timezoneText = document.getElementById('restore-timezone-text');
    const durationText = document.getElementById('restore-duration-text');
    const currentTimeText = document.getElementById('restore-current-time');
    
    if(infoBox && json){
      // Show the info box
      infoBox.classList.remove('d-none');
      
      // Update timezone
      if(timezoneText && json.timezone){
        timezoneText.textContent = json.timezone;
      }
      
      // Update duration
      if(durationText && json.duration){
        const hours = Math.floor(json.duration / 60);
        const minutes = json.duration % 60;
        let durationStr = '';
        if(hours > 0){
          durationStr += hours + ' hr' + (hours > 1 ? 's' : '');
        }
        if(minutes > 0){
          if(durationStr) durationStr += ' ';
          durationStr += minutes + ' min' + (minutes > 1 ? 's' : '');
        }
        durationText.textContent = durationStr || json.duration + ' mins';
      }
      
      // Update current time
      if(currentTimeText && json.current_time){
        currentTimeText.textContent = json.current_time;
      }
    }
  }

  // Load availability for restore modal
  function loadRestoreAvailability(){
    const dateInput = document.getElementById('restore-scheduled-date');
    const tenantInput = document.getElementById('restore-tenant-id');
    const availabilityBox = document.getElementById('restore-availability-box');
    const scheduleId = document.getElementById('restore-schedule-id').value;
    
    if(!dateInput.value || !currentRestoreScheduleData){
      availabilityBox.innerHTML = '<div class="text-muted text-center py-3"><i class="fas fa-info-circle me-2"></i>Please select a date</div>';
      return;
    }
    
    // Extract service IDs from schedule data
    const serviceIds = currentRestoreScheduleData.services || [];
    if(serviceIds.length === 0){
      availabilityBox.innerHTML = '<div class="text-danger text-center py-3"><i class="fas fa-exclamation-triangle me-2"></i>No services found for this schedule</div>';
      return;
    }
    
    availabilityBox.innerHTML = '<div class="text-center py-3"><i class="fas fa-spinner fa-spin me-2"></i>Loading availability...</div>';
    
    const params = new URLSearchParams({
      tenant_id: currentRestoreScheduleData.schedule.tenant_id,
      scheduled_date: dateInput.value,
      schedule_id: scheduleId
    });
    serviceIds.forEach(id => params.append('service_ids[]', id));
    
    fetch("{{ route('admin.schedule.inspector-availability-dynamic') }}?" + params.toString(), {
      headers: { 
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      }
    }).then(r=>r.json()).then(json=>{
      if(json.success){
        // Update timezone and duration info
        updateRestoreInfoBox(json);
        renderRestoreAvailability(json.data || []);
      } else {
        availabilityBox.innerHTML = '<div class="text-danger text-center py-3"><i class="fas fa-exclamation-triangle me-2"></i>' + (json.message || 'Failed to load availability') + '</div>';
      }
    }).catch(err=>{
      console.error('Availability fetch error:', err);
      availabilityBox.innerHTML = '<div class="text-danger text-center py-3"><i class="fas fa-times-circle me-2"></i>Error loading availability</div>';
    });
  }

  // Render availability for restore modal
  function renderRestoreAvailability(list){
    const availabilityBox = document.getElementById('restore-availability-box');
    
    if(!Array.isArray(list) || !list.length){
      availabilityBox.innerHTML = '<div class="text-danger text-center py-3"><i class="fas fa-calendar-times me-2"></i>No available slots for selected date</div>';
      return;
    }
    
    let html = `
    <style>
      .restore-inspector-card { 
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 10px;
        transition: box-shadow 0.2s;
      }
      .restore-inspector-card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
      .restore-inspector-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
      }
      .restore-inspector-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #384048;
        margin-right: 10px;
      }
      .restore-inspector-name {
        font-size: 13px;
        font-weight: 600;
        color: #384048;
      }
      .restore-inspector-hours {
        font-size: 10px;
        color: #6c757d;
      }
      .restore-slots-container {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .restore-availability-slot {
        font-size: 11px !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
        border: 1px solid #28a745 !important;
        background: #fff !important;
        color: #28a745 !important;
        transition: all 0.2s !important;
        white-space: nowrap;
        cursor: pointer;
      }
      .restore-availability-slot:hover {
        background: #28a745 !important;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(40,167,69,0.3);
      }
      .restore-availability-slot.active {
        background: #28a745 !important;
        color: #fff !important;
        border-color: #1e7e34 !important;
        box-shadow: 0 0 0 3px rgba(40,167,69,0.2);
      }
    </style>
    `;
    
    list.forEach(inspector => {
      const iid = inspector.inspector_id;
      const name = inspector.name || 'Inspector';
      const avatar = inspector.avatar || '{{ asset("images/no-profile.jpg") }}';
      const displaySlots = inspector.available_slots || [];
      const rawSlots = inspector.available_slots_raw || [];
      const workingHours = inspector.working_hours ? `${inspector.working_hours.start} - ${inspector.working_hours.end}` : '';
      const availableCount = displaySlots.length;
      
      html += '<div class="restore-inspector-card">';
      html += `<div class="restore-inspector-header">
        <img src="${avatar}" class="restore-inspector-avatar" alt="${name}" onerror="this.src='{{ asset('images/no-profile.jpg') }}'">
        <div>
          <div class="restore-inspector-name">${name}</div>
          ${workingHours ? `<div class="restore-inspector-hours"><i class="fas fa-clock me-1"></i>${workingHours}</div>` : ''}
          <div class="restore-inspector-hours"><i class="fas fa-check-circle me-1 text-success"></i>${availableCount} slots available</div>
        </div>
      </div>`;
      html += '<div class="restore-slots-container">';
      
      rawSlots.forEach((raw, idx) => {
        const label = displaySlots[idx] || raw;
        html += `<button type="button" class="btn restore-availability-slot" 
          data-slot="${raw}" 
          data-inspector="${iid}" 
          data-name="${name.replace(/"/g,'&quot;')}" 
          data-avatar="${avatar}" 
          title="Select ${label}">${label}</button>`;
      });
      
      html += '</div></div>';
    });
    
    html += '<div class="mt-2 text-center" style="font-size:11px; color:#6c757d;"><i class="fas fa-hand-pointer me-1"></i>Click a time slot to select</div>';
    availabilityBox.innerHTML = html;
    
    // Attach click handlers
    availabilityBox.querySelectorAll('.restore-availability-slot').forEach(btn => {
      btn.addEventListener('click', function(){
        const slot = this.getAttribute('data-slot');
        const inspectorId = this.getAttribute('data-inspector');
        const name = this.getAttribute('data-name');
        const avatar = this.getAttribute('data-avatar');
        
        // Update hidden fields
        document.getElementById('restore-start-time').value = slot;
        document.getElementById('restore-inspector-id').value = inspectorId;
        
        // Visual feedback
        availabilityBox.querySelectorAll('.restore-availability-slot').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // Update summary
        updateRestoreSummary(inspectorId, slot, name, avatar);
      });
    });
  }

  // Update restore summary box
  function updateRestoreSummary(inspectorId, slot, name, avatar){
    const summaryBox = document.getElementById('restore-selected-summary');
    if(!summaryBox) return;
    
    summaryBox.classList.remove('d-none');
    summaryBox.innerHTML = `
      <div class="d-flex align-items-center">
        <img src="${avatar}" style="width:30px;height:30px;border-radius:50%;border:2px solid #28a745;margin-right:8px;" 
          onerror="this.src='{{ asset('images/no-profile.jpg') }}'" alt="${name}">
        <div>
          <div style="font-size:12px;font-weight:600;color:#384048;">${name}</div>
          <div style="font-size:11px;color:#6c757d;">
            <i class="fas fa-clock me-1"></i>${slot}
          </div>
        </div>
        <div class="ms-auto">
          <i class="fas fa-check-circle text-success" style="font-size:18px;"></i>
        </div>
      </div>
    `;
  }

  // Submit restore
  const restoreSubmit = document.getElementById('restore-submit-btn');
  if(restoreSubmit){
    restoreSubmit.addEventListener('click', function(){
      const dateInput = document.getElementById('restore-scheduled-date');
      const timeInput = document.getElementById('restore-start-time');
      const inspectorInput = document.getElementById('restore-inspector-id');
      
      if(!dateInput.value){ 
        Swal.fire('Validation', 'Please select scheduled date', 'warning'); 
        return; 
      }
      if(!timeInput.value){ 
        Swal.fire('Validation', 'Please select a time slot', 'warning'); 
        return; 
      }
      if(!inspectorInput.value){ 
        Swal.fire('Validation', 'Please select an inspector', 'warning'); 
        return; 
      }
      
      const id = document.getElementById('restore-schedule-id').value;
      const form = document.getElementById('restore-schedule-form');
      const fd = new FormData(form);
      
      // Show loading
      restoreSubmit.disabled = true;
      restoreSubmit.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Restoring...';
      
      fetch("{{ url('schedule') }}/"+id+"/restore", {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: fd
      }).then(async r=>{
        let json; 
        try{ json = await r.json(); }
        catch(e){ json = { success:false, message:'Invalid response'} }
        
        if(json.success){ 
          Swal.fire('Success', 'Schedule restored successfully', 'success').then(()=>{
            location.reload(); 
          });
        } else {
          let msg = json.message || 'Failed to restore';
          if(json.errors){
            msg += '\n' + Object.values(json.errors).map(arr=>arr.join('\n')).join('\n');
          }
          Swal.fire('Error', msg, 'error');
        }
      }).catch(()=>{
        Swal.fire('Error','Request failed','error');
      }).finally(()=>{
        restoreSubmit.disabled = false;
        restoreSubmit.innerHTML = 'Restore';
      });
    });
  }
  
  // Filter form submission handler with date format conversion
  const filterForm = document.getElementById('filter-form');
  if(filterForm) {
    filterForm.addEventListener('submit', function(e) {
      // Convert date format from MM-DD-YYYY to YYYY-MM-DD before submission
      const dateFromInput = document.getElementById('filter_date_from');
      const dateToInput = document.getElementById('filter_date_to');
      
      // Function to convert MM-DD-YYYY to YYYY-MM-DD
      function convertDateFormat(dateStr) {
        if(!dateStr || dateStr.trim() === '') return '';
        
        // Check if already in YYYY-MM-DD format
        if(/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) return dateStr;
        
        // Convert from MM-DD-YYYY to YYYY-MM-DD
        if(/^\d{2}-\d{2}-\d{4}$/.test(dateStr)) {
          const parts = dateStr.split('-');
          return parts[2] + '-' + parts[0] + '-' + parts[1]; // YYYY-MM-DD
        }
        
        // Convert from MM/DD/YYYY to YYYY-MM-DD
        if(/^\d{2}\/\d{2}\/\d{4}$/.test(dateStr)) {
          const parts = dateStr.split('/');
          return parts[2] + '-' + parts[0] + '-' + parts[1]; // YYYY-MM-DD
        }
        
        return dateStr; // Return as is if format not recognized
      }
      
      if(dateFromInput && dateFromInput.value) {
        dateFromInput.value = convertDateFormat(dateFromInput.value);
        console.log('Converted date_from:', dateFromInput.value);
      }
      
      if(dateToInput && dateToInput.value) {
        dateToInput.value = convertDateFormat(dateToInput.value);
        console.log('Converted date_to:', dateToInput.value);
      }
    });
  }

  // Filter panel functionality
  document.querySelectorAll('.show-panel').forEach(btn => {
    btn.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      
      const panelId = this.getAttribute('data-id');
      const panel = document.getElementById(panelId);
      
      console.log('Filter button clicked, panel ID:', panelId);
      console.log('Panel element found:', panel);
      
      if (panel) {
        const isVisible = panel.style.display === 'block';
        console.log('Current panel visibility:', isVisible);
        
        if (isVisible) {
          panel.style.display = 'none';
          console.log('Panel hidden');
        } else {
          panel.style.display = 'block';
          console.log('Panel shown');
        }
      }
    });
  });
});
</script>
@endpush