@extends('layouts.app')

@section('title', 'جدول المواعيد')
@section('page_title', 'جدول المواعيد')

@php
  $days = ['السبت','الأحد','الإثنين','الثلاثاء','الأربعاء','الخميس','الجمعة']; // Week starts Saturday, ends Friday
  $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 once for the whole page
  $timeOptions = [];
  for ($h = 0; $h < 24; $h++) {
    for ($m = 0; $m < 60; $m += 15) {
      $timeOptions[] = sprintf('%02d:%02d', $h, $m);
    }
  }
@endphp

@section('content')
@if($errors->any())
  <div class="alert alert-danger">
    <div class="fw-bold mb-1">حدثت أخطاء:</div>
    <ul class="mb-0">
      @foreach($errors->all() as $e)
        <li>{{ $e }}</li>
      @endforeach
    </ul>
  </div>
@endif
@if(session('status'))
  <div class="alert alert-success py-2">{{ session('status') }}</div>
@endif
<div class="card mb-3">
  <div class="card-body">
    <h5 class="mb-3">ساعات العمل الأسبوعية</h5>
    @php
      $byDay = $schedules->keyBy('weekday');
      $slotDefault = config('appointments.slot_minutes', 15);
      // Get last schedule for auto-fill
      $lastSchedule = $schedules->sortBy('created_at')->last();
    @endphp
    <div class="alert alert-info py-2 mb-3">
      <small><i class="fas fa-info-circle"></i> الأسبوع يبدأ بالسبت وينتهي بالجمعة. سيتم ملء الحقول تلقائياً بناءً على آخر جدول.</small>
    </div>
    <form method="post" action="{{ route('doctor.schedule.bulk') }}" id="weekly-form">
      @csrf
      <div class="row g-2 align-items-end mb-2">
        <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>

      <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>
            @for($i=6;$i>=0;$i--) {{-- Start with Saturday (6) to Friday (5) --}}
              @php $dayIndex = ($i + 1) % 7; @endphp
              @php
                $row = $byDay->get($dayIndex);
                $enabled = (bool) $row;
                $startSel = $row->start_time ?? ($lastSchedule ? $lastSchedule->start_time : null);
                $endSel = $row->end_time ?? ($lastSchedule ? $lastSchedule->end_time : null);
              @endphp
              <tr data-day="{{ $dayIndex }}">
                <td class="fw-semibold">{{ $days[$dayIndex] }}</td>
                <td>
                  <select name="days[{{ $dayIndex }}][start_time]" class="form-select weekly-start" {{ $enabled ? '' : 'disabled' }}>
                    @foreach($timeOptions as $t)
                      <option value="{{ $t }}" {{ $startSel===$t ? 'selected' : '' }}>{{ $fmt12($t) }}</option>
                    @endforeach
                  </select>
                </td>
                <td class="text-center">↔</td>
                <td>
                  <select name="days[{{ $dayIndex }}][end_time]" class="form-select weekly-end" {{ $enabled ? '' : 'disabled' }}>
                    @foreach($timeOptions as $t)
                      <option value="{{ $t }}" {{ $endSel===$t ? 'selected' : '' }}>{{ $fmt12($t) }}</option>
                    @endforeach
                  </select>
                </td>
                <td>
                  <div class="form-check form-switch">
                    <input class="form-check-input weekly-enable" type="checkbox" role="switch" {{ $enabled ? 'checked' : '' }}>
                    <input type="hidden" name="days[{{ $dayIndex }}][enabled]" value="{{ $enabled ? 1 : 0 }}">
                  </div>
                </td>
              </tr>
            @endfor
          </tbody>
        </table>
      </div>

      <button class="btn btn-primary">تحديث ساعات العمل</button>
    </form>
  </div>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  // Toggle enable/disable per day row
  document.querySelectorAll('.weekly-enable').forEach(function (toggle) {
    toggle.addEventListener('change', function () {
      const tr = this.closest('tr');
      const start = tr.querySelector('.weekly-start');
      const end = tr.querySelector('.weekly-end');
      const hidden = tr.querySelector('input[type="hidden"][name$="[enabled]"]');
      const enabled = this.checked;
      start.disabled = !enabled;
      end.disabled = !enabled;
      if (hidden) hidden.value = enabled ? 1 : 0;
    });
  });

  // Auto-advance end time if not after start
  document.querySelectorAll('.weekly-start').forEach(function (startSel) {
    startSel.addEventListener('change', function () {
      const tr = this.closest('tr');
      const endSel = tr.querySelector('.weekly-end');
      if (!endSel) return;
      const startIdx = this.selectedIndex;
      const endIdx = endSel.selectedIndex;
      if (endIdx <= startIdx) {
        // try 4 increments = 60 minutes ahead (4 x 15min)
        const target = Math.min(startIdx + 4, endSel.options.length - 1);
        endSel.selectedIndex = target;
      }
    });
  });
  
  // Auto-copy times when changing a day (for easy modification)
  document.querySelectorAll('.weekly-start, .weekly-end').forEach(function(sel) {
    sel.addEventListener('change', function() {
      const changedRow = this.closest('tr');
      const startSel = changedRow.querySelector('.weekly-start');
      const endSel = changedRow.querySelector('.weekly-end');
      const newStart = startSel.value;
      const newEnd = endSel.value;
      
      // If both times are set, offer to copy to other enabled days
      if (newStart && newEnd && newStart < newEnd) {
        const otherEnabledRows = Array.from(document.querySelectorAll('.weekly-enable:checked'))
          .map(cb => cb.closest('tr'))
          .filter(row => row !== changedRow);
        
        if (otherEnabledRows.length > 0) {
          const 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;
          };
          
          if (confirm(`هل تريد نسخ هذه الأوقات (${fmt12(newStart)} - ${fmt12(newEnd)}) إلى باقي الأيام المفعلة؟`)) {
            otherEnabledRows.forEach(row => {
              row.querySelector('.weekly-start').value = newStart;
              row.querySelector('.weekly-end').value = newEnd;
            });
          }
        }
      }
    });
  });
});
</script>
@endpush
<div class="card mb-3">
  <div class="card-body">
    <h5 class="mb-3">إضافة فترة عمل أسبوعية</h5>
    <form method="post" action="{{ route('doctor.schedule.store') }}" class="row g-2 align-items-end">
      @csrf
      <div class="col-12 col-md-2">
        <label class="form-label">اليوم</label>
        <select name="weekday" class="form-select" required>
          @foreach($days as $i => $name)
            <option value="{{ $i }}">{{ $name }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label">بداية</label>
        <select name="start_time" class="form-select" required>
          @foreach($timeOptions as $t)
            <option value="{{ $t }}">{{ $fmt12($t) }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label">نهاية</label>
        <select name="end_time" class="form-select" required>
          @foreach($timeOptions as $t)
            <option value="{{ $t }}">{{ $fmt12($t) }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label">مدة الحجز (د)</label>
        <input type="number" name="slot_minutes" class="form-control" value="{{ config('appointments.slot_minutes', 15) }}" min="5" max="180">
      </div>
      <div class="col-6 col-md-2 form-check mt-4">
        <input class="form-check-input" type="checkbox" name="is_active" id="is_active" checked>
        <label class="form-check-label" for="is_active">مفعل</label>
      </div>
      <div class="col-12 col-md-2">
        <button class="btn btn-primary w-100">حفظ</button>
      </div>
    </form>
  </div>
</div>

<div class="card mb-3">
  <div class="card-body">
    <h5 class="mb-3">الجدول الأسبوعي الحالي</h5>
    <div class="table-responsive">
      <table class="table table-sm align-middle">
        <thead>
          <tr>
            <th>اليوم</th>
            <th>الوقت</th>
            <th>مدة الحجز</th>
            <th>الحالة</th>
            <th>فترات الراحة</th>
            <th style="width:120px"></th>
          </tr>
        </thead>
        <tbody>
          @forelse($schedules as $sch)
          <tr>
            <td>{{ $days[$sch->weekday] ?? $sch->weekday }}</td>
            <td>{{ $fmt12($sch->start_time) }} - {{ $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>
              @if($sch->breaks->count())
                @foreach($sch->breaks as $br)
                  <span class="badge bg-light text-dark me-1">{{ $fmt12($br->start_time) }} - {{ $fmt12($br->end_time) }}</span>
                  <form method="post" action="{{ route('doctor.schedule.break.delete', $br) }}" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button class="btn btn-link p-0 text-danger" title="حذف" onclick="return confirm('حذف فترة الراحة؟')"><i class="fas fa-times"></i></button>
                  </form>
                @endforeach
              @else
                <span class="text-muted">-</span>
              @endif
              <div class="mt-2">
                <form method="post" action="{{ route('doctor.schedule.break.store') }}" class="row g-2">
                  @csrf
                  <input type="hidden" name="schedule_id" value="{{ $sch->id }}">
                  <div class="col-5 col-md-3">
                    <select name="start_time" class="form-select form-select-sm" required>
                      @foreach($timeOptions as $t)
                        <option value="{{ $t }}">{{ $fmt12($t) }}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-5 col-md-3">
                    <select name="end_time" class="form-select form-select-sm" required>
                      @foreach($timeOptions as $t)
                        <option value="{{ $t }}">{{ $fmt12($t) }}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-2 col-md-2">
                    <button class="btn btn-sm btn-outline-secondary">إضافة راحة</button>
                  </div>
                </form>
              </div>
            </td>
            <td>
              <form method="post" action="{{ route('doctor.schedule.delete', $sch) }}" onsubmit="return confirm('حذف هذا الصف من الجدول؟')">
                @csrf
                @method('DELETE')
                <button class="btn btn-sm btn-danger">حذف</button>
              </form>
            </td>
          </tr>
          @empty
          <tr>
            <td colspan="6" class="text-center text-muted">لا توجد جداول بعد</td>
          </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="mb-3">استثناءات الأيام</h5>
    <form method="post" action="{{ route('doctor.schedule.exception.store') }}" class="row g-2 align-items-end mb-3">
      @csrf
      <div class="col-6 col-md-2">
        <label class="form-label">التاريخ</label>
        <input type="date" name="date" class="form-control" required>
      </div>
      <div class="col-6 col-md-2 form-check mt-4">
        <input class="form-check-input" type="checkbox" name="is_working" id="is_working" value="1">
        <label class="form-check-label" for="is_working">يوم عمل؟</label>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label">بداية (اختياري)</label>
        <select name="start_time" class="form-select">
          <option value="">—</option>
          @foreach($timeOptions as $t)
            <option value="{{ $t }}">{{ $fmt12($t) }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label">نهاية (اختياري)</label>
        <select name="end_time" class="form-select">
          <option value="">—</option>
          @foreach($timeOptions as $t)
            <option value="{{ $t }}">{{ $fmt12($t) }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-12 col-md-3">
        <label class="form-label">ملاحظة</label>
        <input type="text" name="note" class="form-control" maxlength="255">
      </div>
      <div class="col-12 col-md-1">
        <button class="btn btn-primary w-100">حفظ</button>
      </div>
    </form>

    <div class="table-responsive">
      <table class="table table-sm align-middle">
        <thead>
          <tr>
            <th>التاريخ</th>
            <th>الحالة</th>
            <th>الوقت</th>
            <th>ملاحظة</th>
            <th style="width:100px"></th>
          </tr>
        </thead>
        <tbody>
          @forelse($exceptions as $ex)
          <tr>
            <td>{{ $ex->date->format('Y-m-d') }}</td>
            <td><span class="badge bg-{{ $ex->is_working ? 'success':'secondary' }}">{{ $ex->is_working ? 'يوم عمل':'إجازة' }}</span></td>
            <td>
              @if($ex->start_time && $ex->end_time)
                {{ $fmt12($ex->start_time) }} - {{ $fmt12($ex->end_time) }}
              @else
                <span class="text-muted">-</span>
              @endif
            </td>
            <td class="text-truncate" style="max-width:200px;">{{ $ex->note }}</td>
            <td>
              <form method="post" action="{{ route('doctor.schedule.exception.delete', $ex) }}" onsubmit="return confirm('حذف الاستثناء؟')">
                @csrf
                @method('DELETE')
                <button class="btn btn-sm btn-danger">حذف</button>
              </form>
            </td>
          </tr>
          @empty
          <tr>
            <td colspan="5" class="text-center text-muted">لا توجد استثناءات</td>
          </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>
@endsection