@extends('layouts.app')

@section('title', 'جداول الأطباء')
@section('page_title', 'جداول الأطباء')

@section('content')
@php
  $fmt12 = function($t) {
    if (!$t) return '';
    [$hh,$mm] = explode(':', $t);
    $ampm = ((int)$hh) < 12 ? 'صباحًا' : 'مساءً';
    $h12 = ((int)$hh) % 12; if ($h12 === 0) { $h12 = 12; }
    return sprintf('%02d:%s %s', $h12, $mm, $ampm);
  };
  // Build 15-min time options
  $timeOptions = [];
  for ($h = 0; $h < 24; $h++) {
    for ($m = 0; $m < 60; $m += 15) {
      $timeOptions[] = sprintf('%02d:%02d', $h, $m);
    }
  }
  // Database uses: 0=Sunday, 1=Monday, 2=Tuesday, 3=Wednesday, 4=Thursday, 5=Friday, 6=Saturday
  // Display order: Saturday(6), Sunday(0), Monday(1), Tuesday(2), Wednesday(3), Thursday(4), Friday(5)
  $days = ['الأحد','الإثنين','الثلاثاء','الأربعاء','الخميس','الجمعة','السبت']; // 0=Sun, 1=Mon, ..., 6=Sat
  $slotDefault = config('appointments.slot_minutes', 15);
  // Build role-aware bulk update URL template (replace __ID__ in JS). Use url() to avoid encoding the placeholder.
  $bulkUrlTemplate = (auth()->user()->role === 'receptionist')
    ? url('/receptionist/doctor-schedules/__ID__/bulk')
    : url('/admin/doctor-schedules/__ID__/bulk');
@endphp

<div class="card mb-3">
  <div class="card-body">
    <h5 class="mb-3">اختيار الطبيب</h5>
    <div class="row g-2 align-items-end">
      <div class="col-12 col-md-4">
        <label class="form-label">البحث عن طبيب</label>
        <input type="text" id="doctorSearch" class="form-control" placeholder="ابحث بالاسم...">
      </div>
      <div class="col-12 col-md-6">
        <label class="form-label">اختر الطبيب</label>
        <select id="doctorSelect" class="form-select">
          <option value="">-- اختر طبيب --</option>
          @foreach($doctors as $doc)
            <option value="{{ $doc->id }}" data-name="{{ $doc->name }}">د. {{ $doc->name }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-12 col-md-2">
        <button id="loadDoctor" class="btn btn-primary w-100" disabled>عرض الجدول</button>
      </div>
    </div>
  </div>
</div>

<div id="doctorScheduleContainer" style="display: none;">
  <div class="card">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">جدول د. <span id="selectedDoctorName"></span></h5>
        <button class="btn btn-outline-secondary btn-sm" onclick="$('#doctorScheduleContainer').hide(); $('#doctorSelect').val(''); $('#loadDoctor').prop('disabled', true);">إخفاء</button>
      </div>
      <div class="border rounded p-2 mb-3">
        <h6 class="mb-2">تحديث ساعات العمل الأسبوعية</h6>
        <form method="post" id="bulkScheduleForm" class="admin-weekly-form">
          @csrf
          <div class="row g-2 align-items-end mb-3">
            <div class="col-12 col-md-2">
              <label class="form-label">مدة الحجز (دقيقة)</label>
              <input type="number" name="slot_minutes" class="form-control" value="{{ $slotDefault }}" min="5" max="180">
            </div>
            <div class="col-12 col-md-8">
              <div class="alert alert-info py-2 mb-0">
                <small><i class="fas fa-info-circle"></i> الأسبوع يبدأ بالسبت وينتهي بالجمعة. أرقام قاعدة البيانات: 0=الأحد، 6=السبت</small>
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-borderless align-middle">
              <thead>
                <tr>
                  <th style="width:140px">اليوم</th>
                  <th style="width:180px">من</th>
                  <th style="width:60px"></th>
                  <th style="width:180px">إلى</th>
                  <th style="width:140px">يوم إجازة</th>
                </tr>
              </thead>
              <tbody>
                @php $displayOrder = [6, 0, 1, 2, 3, 4, 5]; @endphp {{-- Sat, Sun, Mon, Tue, Wed, Thu, Fri --}}
                @foreach($displayOrder as $dayIndex)
                  <tr data-day="{{ $dayIndex }}">
                    <td class="fw-semibold">{{ $days[$dayIndex] }}</td>
                    <td>
                      <select name="days[{{ $dayIndex }}][start_time]" class="form-select admin-weekly-start" disabled>
                        @foreach($timeOptions as $t)
                          <option value="{{ $t }}">{{ $fmt12($t) }}</option>
                        @endforeach
                      </select>
                    </td>
                    <td class="text-center">↔</td>
                    <td>
                      <select name="days[{{ $dayIndex }}][end_time]" class="form-select admin-weekly-end" disabled>
                        @foreach($timeOptions as $t)
                          <option value="{{ $t }}">{{ $fmt12($t) }}</option>
                        @endforeach
                      </select>
                    </td>
                    <td>
                      <div class="form-check form-switch">
                        <input class="form-check-input admin-weekly-enable" type="checkbox" role="switch">
                        <input type="hidden" name="days[{{ $dayIndex }}][enabled]" value="0">
                      </div>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
          <button class="btn btn-primary">تحديث ساعات العمل</button>
        </form>
      </div>
      
      <div class="row g-3">
        <div class="col-md-7">
          <div class="border rounded p-2">
            <h6 class="mb-2">الجدول الأسبوعي الحالي</h6>
            <div id="currentSchedules" class="table-responsive">
              <p class="text-muted text-center mb-0">اختر طبيب لعرض جدوله</p>
            </div>
          </div>
        </div>
        <div class="col-md-5">
          <div class="border rounded p-2 h-100">
            <h6 class="mb-2">الاستثناءات (آخر 30 يوم)</h6>
            <div id="currentExceptions" class="table-responsive">
              <p class="text-muted text-center mb-0">اختر طبيب لعرض استثناءاته</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
const doctors = {!! json_encode($doctors->map(function($d) {
  return [
    'id' => $d->id,
    'name' => $d->name,
    'schedules' => $d->doctorSchedules->map(function($s) {
      return [
        'weekday' => $s->weekday,
        'start_time' => $s->start_time,
        'end_time' => $s->end_time,
        'slot_minutes' => $s->slot_minutes,
        'is_active' => $s->is_active,
        'breaks' => $s->breaks->map(function($b) {
          return [
            'start_time' => $b->start_time,
            'end_time' => $b->end_time
          ];
        })
      ];
    }),
    'exceptions' => $d->doctorScheduleExceptions->sortByDesc('date')->take(30)->map(function($e) {
      return [
        'date' => $e->date->format('Y-m-d'),
        'is_working' => $e->is_working,
        'start_time' => $e->start_time,
        'end_time' => $e->end_time,
        'note' => $e->note
      ];
    })
  ];
})) !!};

function fmt12(t) {
  if (!t) return '';
  const [hh, mm] = t.split(':');
  const ampm = parseInt(hh) < 12 ? 'صباحًا' : 'مساءً';
  let h12 = parseInt(hh) % 12;
  if (h12 === 0) h12 = 12;
  return (h12 < 10 ? '0' + h12 : h12) + ':' + mm + ' ' + ampm;
}

function loadDoctorData(doctorId) {
  const doctor = doctors.find(d => d.id == doctorId);
  if (!doctor) return;
  
  $('#selectedDoctorName').text(doctor.name);
  const bulkTpl = @json($bulkUrlTemplate);
  const actionUrl = bulkTpl.replace('__ID__', doctorId);
  $('#bulkScheduleForm').attr('action', actionUrl);
  
  // Load current schedules
  const schedulesByDay = {};
  doctor.schedules.forEach(s => {
    schedulesByDay[s.weekday] = s;
  });
  
  const days = ['الأحد','الإثنين','الثلاثاء','الأربعاء','الخميس','الجمعة','السبت']; // 0=Sun, 1=Mon, ..., 6=Sat
  
  // Get last schedule for auto-fill
  let lastSchedule = null;
  if (doctor.schedules.length > 0) {
    lastSchedule = doctor.schedules[doctor.schedules.length - 1];
  }
  
  // Update bulk form with Saturday-Friday display order
  const displayOrder = [6, 0, 1, 2, 3, 4, 5]; // Sat, Sun, Mon, Tue, Wed, Thu, Fri
  displayOrder.forEach((dayNum, index) => {
    const row = schedulesByDay[dayNum];
    const enabled = !!row;
    const $tr = $(`tr[data-day="${dayNum}"]`);
    const $toggle = $tr.find('.admin-weekly-enable');
    const $start = $tr.find('.admin-weekly-start');
    const $end = $tr.find('.admin-weekly-end');
    const $hidden = $tr.find('input[type="hidden"]');
    
    $toggle.prop('checked', enabled);
    $start.prop('disabled', !enabled);
    $end.prop('disabled', !enabled);
    $hidden.val(enabled ? 1 : 0);
    
    if (row) {
      $start.val(row.start_time);
      $end.val(row.end_time);
    } else if (lastSchedule) {
      // Auto-fill with last schedule times
      $start.val(lastSchedule.start_time);
      $end.val(lastSchedule.end_time);
    } else {
      $start.val('');
      $end.val('');
    }
  });
  
  // Load current schedules table
  let schedulesHtml = '<table class="table table-sm mb-0"><thead><tr><th>اليوم</th><th>بداية</th><th>نهاية</th><th>مدة الحجز</th><th>الحالة</th><th>فترات راحة</th></tr></thead><tbody>';
  
  if (doctor.schedules.length === 0) {
    schedulesHtml += '<tr><td colspan="6" class="text-muted text-center">لا توجد جداول</td></tr>';
  } else {
    // Sort schedules by display order (Saturday first)
    const sortedSchedules = doctor.schedules.sort((a, b) => {
      const orderA = displayOrder.indexOf(a.weekday);
      const orderB = displayOrder.indexOf(b.weekday);
      return orderA - orderB;
    });
    sortedSchedules.forEach(sch => {
      const breaksHtml = sch.breaks.length > 0 
        ? sch.breaks.map(br => `<span class="badge bg-light text-dark">${fmt12(br.start_time)} - ${fmt12(br.end_time)}</span>`).join(' ')
        : '<span class="text-muted">-</span>';
      
      schedulesHtml += `<tr>
        <td>${days[sch.weekday] || sch.weekday}</td>
        <td>${fmt12(sch.start_time)}</td>
        <td>${fmt12(sch.end_time)}</td>
        <td>${sch.slot_minutes} دقيقة</td>
        <td><span class="badge bg-${sch.is_active ? 'success' : 'secondary'}">${sch.is_active ? 'مفعل' : 'متوقف'}</span></td>
        <td>${breaksHtml}</td>
      </tr>`;
    });
  }
  schedulesHtml += '</tbody></table>';
  $('#currentSchedules').html(schedulesHtml);
  
  // Load exceptions table
  let exceptionsHtml = '<table class="table table-sm mb-0"><thead><tr><th>التاريخ</th><th>الحالة</th><th>الوقت</th><th>ملاحظة</th></tr></thead><tbody>';
  
  if (doctor.exceptions.length === 0) {
    exceptionsHtml += '<tr><td colspan="4" class="text-muted text-center">لا توجد استثناءات</td></tr>';
  } else {
    doctor.exceptions.slice().reverse().forEach(ex => { // Most recent first
      const timeText = ex.start_time && ex.end_time 
        ? `${fmt12(ex.start_time)} - ${fmt12(ex.end_time)}`
        : '<span class="text-muted">-</span>';
      
      exceptionsHtml += `<tr>
        <td>${ex.date}</td>
        <td><span class="badge bg-${ex.is_working ? 'success' : 'secondary'}">${ex.is_working ? 'يوم عمل' : 'إجازة'}</span></td>
        <td>${timeText}</td>
        <td class="text-truncate" style="max-width:200px;">${ex.note || ''}</td>
      </tr>`;
    });
  }
  exceptionsHtml += '</tbody></table>';
  $('#currentExceptions').html(exceptionsHtml);
}

$(document).ready(function() {
  // Doctor search functionality
  $('#doctorSearch').on('input', function() {
    const search = $(this).val().toLowerCase();
    $('#doctorSelect option').each(function() {
      const name = $(this).data('name') || '';
      const visible = !search || name.toLowerCase().includes(search);
      $(this).toggle(visible);
    });
  });
  
  // Doctor selection
  $('#doctorSelect').on('change', function() {
    const selected = $(this).val();
    $('#loadDoctor').prop('disabled', !selected);
  });
  
  // Load doctor button
  $('#loadDoctor').on('click', function() {
    const doctorId = $('#doctorSelect').val();
    if (!doctorId) return;
    
    loadDoctorData(doctorId);
    $('#doctorScheduleContainer').show();
  });
  
  // Bulk form submission
  $('#bulkScheduleForm').on('submit', function(e) {
    e.preventDefault();
    const doctorId = $('#doctorSelect').val();
    if (!doctorId) {
      alert('يرجى اختيار طبيب أولاً');
      return;
    }
    
    const formData = $(this).serialize();
    $.post($(this).attr('action'), formData)
      .done(function() {
        alert('تم تحديث ساعات العمل بنجاح');
        loadDoctorData(doctorId); // Refresh the display
      })
      .fail(function() {
        alert('حدث خطأ أثناء التحديث');
      });
  });
  
  // Enable/disable per day in admin forms
  $(document).on('change', '.admin-weekly-enable', function() {
    const tr = $(this).closest('tr');
    const start = tr.find('.admin-weekly-start');
    const end = tr.find('.admin-weekly-end');
    const hidden = tr.find('input[type="hidden"][name$="[enabled]"]');
    const enabled = this.checked;
    start.prop('disabled', !enabled);
    end.prop('disabled', !enabled);
    hidden.val(enabled ? 1 : 0);
  });
  
  // Auto-advance end time when start changes
  $(document).on('change', '.admin-weekly-start', function() {
    const tr = $(this).closest('tr');
    const endSel = tr.find('.admin-weekly-end')[0];
    if (!endSel) return;
    const startIdx = this.selectedIndex;
    const endIdx = endSel.selectedIndex;
    if (endIdx <= startIdx) {
      const target = Math.min(startIdx + 4, endSel.options.length - 1);
      endSel.selectedIndex = target;
    }
  });
  
  // Auto-copy times when changing a day (for easy modification)
  $(document).on('change', '.admin-weekly-start, .admin-weekly-end', function() {
    const $changedRow = $(this).closest('tr');
    const newStart = $changedRow.find('.admin-weekly-start').val();
    const newEnd = $changedRow.find('.admin-weekly-end').val();
    
    // If both times are set, offer to copy to other enabled days
    if (newStart && newEnd && newStart < newEnd) {
      const $otherRows = $('.admin-weekly-enable:checked').not($changedRow.find('.admin-weekly-enable'));
      if ($otherRows.length > 0) {
        if (confirm(`هل تريد نسخ هذه الأوقات (${fmt12(newStart)} - ${fmt12(newEnd)}) إلى باقي الأيام المفعلة؟`)) {
          $otherRows.each(function() {
            const $row = $(this).closest('tr');
            $row.find('.admin-weekly-start').val(newStart);
            $row.find('.admin-weekly-end').val(newEnd);
          });
        }
      }
    }
  });
});
</script>
@endpush