@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;
  }
  
  /* Template Selection Modal Styles - Matching Payout Modal Design */
  :root {
    --secondary-color: #7F1C1C;
    --secondary-dark: #5c1414;
  }

  .modal-header {
    border-bottom: 1px solid #dee2e6;
    padding: 1.25rem 1.5rem 1.5rem 1.5rem;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
    color: white;
    border-radius: 0.375rem 0.375rem 0 0;
    position: relative;
    overflow: hidden;
  }

  .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
    pointer-events: none;
  }

  .modal-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
  }

  .modal-header .btn-close {
    padding: 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    opacity: 1;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-header .btn-close::before {
    content: '×';
    font-size: 1.5rem;
    line-height: 1;
    color: white;
  }

  .modal-header .btn-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    color: white;
  }

  .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    color: white !important;
  }

  /* Template Item Styles */
  .template-item {
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  .template-item:hover {
    background-color: #f8f9fa !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    border-color: var(--secondary-color) !important;
  }
  
  .template-item:last-child {
    margin-bottom: 0;
  }
  
  .template-icon {
    opacity: 0.8;
    color: var(--secondary-color);
  }
  
  .template-item:hover .template-icon {
    opacity: 1;
  }
  
  #templateSelectionModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
  }

  .template-item h6 {
    color: #333;
    font-weight: 600;
  }

  .template-item small {
    color: #6c757d;
  }

  .template-item .fa-chevron-right {
    color: var(--secondary-color);
    transition: transform 0.2s ease;
  }

  .template-item:hover .fa-chevron-right {
    transform: translateX(3px);
  }
</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">
        <form method="GET" class="d-flex align-items-center gap-2" id="schedule-filter-form" action="{{ route('admin.schedule.list') }}">
          <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="1" {{ request('status')==='1' ? 'selected' : '' }}>Booking In Progress (Upto Step 1)</option>
            <option value="2" {{ request('status')==='2' ? 'selected' : '' }}>Booking In Progress (Upto Step 2)</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>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);
            @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>{{ $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($row->status == 3 && isset($row->templates_count) && $row->templates_count > 0)
                    <button type="button" class="me-2 btn-view-report" title="View Report" 
                            style="border: none; background: none; padding: 0;" 
                            onclick="handleViewReport({{ $row->id }}, {{ $row->templates_count }})"
                            data-schedule-id="{{ $row->id }}"
                            data-templates-count="{{ $row->templates_count }}">
                        <i class="fas fa-file-alt" style="font-size: 16px; color: #6c757d;"></i>
                    </button>
                  @endif
                  
                  @if($canModify)
                    @if(!$row->is_cancelled && !$row->is_report_submitted)
                      <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
                  @else
                    <!-- View-only: no modify actions for schedules not created by customer/agent -->
                  @endif
                </div>
              </td>
            </tr>
          @endforeach
        @else
          <tr>
            <td colspan="8" 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')

<!-- Template Selection Modal -->
<div class="modal fade" id="templateSelectionModal" tabindex="-1" role="dialog" aria-labelledby="templateSelectionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header template-modal-header">
                <div class="d-flex align-items-center mb-2">
                    <div class="modal-icon me-3">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <div>
                        <h5 class="modal-title text-white" id="templateSelectionModalLabel">
                            Select Report Template
                        </h5>
                    </div>
                </div>
                <button type="button" class="btn-close mb-2" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="templates-loading" class="text-center py-4" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading templates...</span>
                    </div>
                    <p class="mt-2 text-muted">Loading available templates...</p>
                </div>
                
                <div id="templates-container">
                    <!-- Templates will be loaded here -->
                </div>
                
                <div id="templates-error" class="text-center py-4 text-danger" style="display: none;">
                    <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                    <p>Error loading templates. Please try again.</p>
                </div>
                
                <div id="no-templates" class="text-center py-4 text-muted" style="display: none;">
                    <i class="fas fa-file-alt fa-2x mb-2"></i>
                    <p>No report templates found for this schedule.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Restore Modal -->
<div class="modal fade" id="restoreScheduleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <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" />
          <div class="mb-3">
            <label class="form-label">Scheduled Date</label>
            <input type="date" name="scheduled_date" id="restore-scheduled-date" class="form-control" required />
          </div>
          <div class="mb-3">
            <label class="form-label">Scheduled Time</label>
            <select name="start_time" id="restore-start-time" class="form-select js-select2" required>
                <option value="09:00">09:00</option>
                <option value="14:00">14:00</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" 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-secondary" 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>
// 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>';
    }
  }
}

// Global functions for template modal (defined outside DOMContentLoaded for immediate availability)
// Handle view report - show modal if multiple templates, direct open if single template
window.handleViewReport = function(scheduleId, templatesCount) {
  console.log('handleViewReport called with scheduleId:', scheduleId, 'templatesCount:', templatesCount);
  
  if (templatesCount === 1) {
    // Only one template - fetch it and encrypt parameters before opening
    const fetchUrl = `/schedule/${scheduleId}/templates`;
    
    fetch(fetchUrl, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      }
    })
      .then(response => {
        if (!response.ok) {
          throw new Error('Failed to fetch template');
        }
        return response.json();
      })
      .then(data => {
        if (data.status === 200 && data.data && data.data.length > 0) {
          const template = data.data[0];
          
          // Encrypt parameters before opening report
          fetch('/schedule/encrypt-report-params', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
              schedule_id: scheduleId,
              template_id: template.id
            })
          })
          .then(response => response.json())
          .then(encryptData => {
            console.log('Encryption response:', encryptData);
            
            if (encryptData && encryptData.data && encryptData.data.encrypted) {
              const reportUrl = `/schedule/view-report/${encryptData.data.encrypted}`;
              console.log('Opening encrypted report URL:', reportUrl);
              window.open(reportUrl, '_blank');
            } else {
              console.error('Failed to encrypt parameters:', encryptData);
              Swal.fire('Error', 'Failed to generate secure report link', 'error');
            }
          })
          .catch(error => {
            console.error('Error encrypting parameters:', error);
            Swal.fire('Error', 'Failed to generate secure report link', 'error');
          });
        } else {
          Swal.fire('Error', 'No template found for this schedule', 'error');
        }
      })
      .catch(error => {
        console.error('Error fetching template:', error);
        Swal.fire('Error', 'Failed to load report template', 'error');
      });
  } else {
    // Multiple templates - show modal for selection
    showTemplateModal(scheduleId);
  }
};

window.showTemplateModal = function(scheduleId) {
  const modalElement = document.getElementById('templateSelectionModal');
  
  if (!modalElement) {
    console.error('Template selection modal not found in DOM');
    return;
  }
  
  // Get existing modal instance or create new one
  let modal = bootstrap.Modal.getInstance(modalElement);
  if (!modal) {
    modal = new bootstrap.Modal(modalElement, {
      backdrop: 'static',
      keyboard: true
    });
  }
  
  // Reset modal state before showing
  document.getElementById('templates-loading').style.display = 'block';
  document.getElementById('templates-container').innerHTML = '';
  document.getElementById('templates-error').style.display = 'none';
  document.getElementById('no-templates').style.display = 'none';
  
  // Show modal
  modal.show();
  
  // Fetch templates for the schedule
  const fetchUrl = `/schedule/${scheduleId}/templates`;
  
  fetch(fetchUrl, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest',
      'X-CSRF-TOKEN': '{{ csrf_token() }}'
    }
  })
    .then(response => {
      if (!response.ok) {
        throw new Error('Failed to fetch templates');
      }
      return response.json();
    })
    .then(data => {
      document.getElementById('templates-loading').style.display = 'none';
      
      if (data.status === 200 && data.data && data.data.length > 0) {
        displayTemplates(data.data, scheduleId);
      } else {
        document.getElementById('no-templates').style.display = 'block';
      }
    })
    .catch(error => {
      console.error('Error fetching templates:', error);
      document.getElementById('templates-loading').style.display = 'none';
      document.getElementById('templates-error').style.display = 'block';
    });
};

window.displayTemplates = function(templates, scheduleId) {
  const container = document.getElementById('templates-container');
  
  let html = '<div class="template-list">';
  
  templates.forEach(template => {
    html += `
      <div class="template-item d-flex justify-content-between align-items-center p-3" 
           style="cursor: pointer;" 
           onclick="openReportWithTemplate(${scheduleId}, ${template.id})">
        <div class="d-flex align-items-center">
          <div class="template-icon me-3">
            <i class="fas fa-file-alt fa-2x"></i>
          </div>
          <div>
            <h6 class="mb-0">${template.name || 'Untitled Template'}</h6>
          </div>
        </div>
        <div class="text-end">
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
    `;
  });
  
  html += '</div>';
  
  container.innerHTML = html;
};

window.openReportWithTemplate = function(scheduleId, templateId) {
  console.log('📄 Opening report with encryption - Schedule:', scheduleId, 'Template:', templateId);
  
  // Encrypt parameters before generating URL
  fetch('/schedule/encrypt-report-params', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': '{{ csrf_token() }}'
    },
    body: JSON.stringify({
      schedule_id: scheduleId,
      template_id: templateId
    })
  })
  .then(response => response.json())
  .then(data => {
    console.log('Encryption response:', data);
    
    // Get the modal instance and hide it properly
    const modalElement = document.getElementById('templateSelectionModal');
    const modal = bootstrap.Modal.getInstance(modalElement);
    
    if (modal) {
      modal.hide();
    }
    
    // Check if we have the encrypted data
    if (data && data.data && data.data.encrypted) {
      const reportUrl = `/schedule/view-report/${data.data.encrypted}`;
      console.log('Opening encrypted report URL:', reportUrl);
      window.open(reportUrl, '_blank');
    } else {
      console.error('Failed to encrypt report parameters:', data);
      Swal.fire('Error', 'Failed to generate secure report link. Please try again.', 'error');
    }
  })
  .catch(error => {
    console.error('Error encrypting report parameters:', error);
    Swal.fire('Error', 'Failed to generate secure report link. Please try again.', 'error');
  });
};

document.addEventListener('DOMContentLoaded',function(){
  console.log('🚀 DOM Content Loaded - JavaScript is working!');
  console.log('🔍 Bootstrap available:', typeof bootstrap !== 'undefined');
  
  // 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() }}' },
        body: fd
      }).then(r=>r.json()).then(json => {
        if(json.success){ location.reload(); }
        else { Swal.fire('Error', json.message || 'Failed to cancel', 'error'); }
      }).catch(()=>Swal.fire('Error','Request failed','error'));
    });
  }

  // Restore schedule button
  const restoreModalEl = document.getElementById('restoreScheduleModal');
  const restoreModal = restoreModalEl ? new bootstrap.Modal(restoreModalEl) : 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') || '';
      let time = (tr.getAttribute('data-start-time') || '').substring(0,5);
      const timeSelect = document.getElementById('restore-start-time');
      // ensure current time exists in options
      if(time && ![...timeSelect.options].some(o=>o.value===time)){
        const opt = document.createElement('option'); opt.value=time; opt.textContent=time; timeSelect.appendChild(opt);
      }
      document.getElementById('restore-schedule-id').value = id;
      document.getElementById('restore-scheduled-date').value = date;
      // timeSelect.value = time;
      if(restoreModal) restoreModal.show();
    });
  });

  // 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');
      if(!dateInput.value){ dateInput.focus(); showNotification('error','Please select scheduled date'); return; }
      if(!timeInput.value){ timeInput.focus(); showNotification('error','Please select scheduled time',); return; }
      const id = document.getElementById('restore-schedule-id').value;
      const form = document.getElementById('restore-schedule-form');
      const fd = new FormData(form);
      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){ 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'));
    });
  }
  
  // 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>

<style>
/* Template Selection Modal Styling - Match Payout Modal Design */
#templateSelectionModal .modal-header.template-modal-header {
    background: linear-gradient(135deg, #7F1C1C, #a62626) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 1.25rem !important;
    color: white !important;
}

#templateSelectionModal .template-modal-header .modal-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    padding: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
}

#templateSelectionModal .template-modal-header .modal-icon i {
    color: white !important;
    font-size: 1.25rem !important;
}

#templateSelectionModal .template-modal-header .modal-title {
    color: white !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

#templateSelectionModal .template-modal-header .btn-close {
    filter: invert(1) !important;
    opacity: 0.8 !important;
    background-color: transparent !important;
}

#templateSelectionModal .template-modal-header .btn-close:hover {
    opacity: 1 !important;
}

/* Template item styling */
#templateSelectionModal .template-item {
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
}

#templateSelectionModal .template-item:hover {
    background: #e9ecef;
    border-color: #7F1C1C;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(127, 28, 28, 0.15);
}

#templateSelectionModal .template-item h6 {
    color: #7F1C1C;
    margin-bottom: 5px;
    font-weight: 600;
}

#templateSelectionModal .template-item .text-muted {
    font-size: 0.9rem;
}
</style>
@endpush