@extends('layouts.admin')
@section('title', 'Jadwal Hari Ini')
@section('admin-content')

@push('styles')
<style>
@media(max-width:768px){
  .sched-header { flex-direction:column !important; align-items:flex-start !important; }
  .sched-table th:nth-child(3),
  .sched-table td:nth-child(3) { display:none; }
}
</style>
@endpush

@php
  $nowTime  = \Carbon\Carbon::now()->format('H:i');
  $active   = $schedules->filter(fn($s) => substr($s->end_time,0,5) > $nowTime)->sortBy('start_time');
  $history  = $schedules->filter(fn($s) => substr($s->end_time,0,5) <= $nowTime)->sortByDesc('start_time');
@endphp

<div class="sched-header" style="display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px;">
  <div>
    <h1 style="font-size:18px;font-weight:800;margin-bottom:4px;">Jadwal Hari Ini</h1>
    <div style="font-size:13px;color:var(--text-muted);">{{ \Carbon\Carbon::today()->translatedFormat('l, d F Y') }}</div>
  </div>
  <div style="display:flex;gap:4px;background:var(--surface2);border-radius:var(--r-md);padding:4px;">
    <button onclick="switchTab('active')" id="tab-active"
      style="padding:7px 16px;border-radius:6px;border:none;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;background:var(--white);color:var(--green-700);box-shadow:0 1px 4px rgba(0,0,0,0.1);">
      Aktif &amp; Mendatang
      @if($active->count() > 0)
        <span style="margin-left:5px;background:var(--green-600);color:#fff;border-radius:999px;padding:1px 7px;font-size:10px;">{{ $active->count() }}</span>
      @endif
    </button>
    <button onclick="switchTab('history')" id="tab-history"
      style="padding:7px 16px;border-radius:6px;border:none;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;background:transparent;color:var(--text-muted);">
      Riwayat
      @if($history->count() > 0)
        <span style="margin-left:5px;background:var(--text-light);color:#fff;border-radius:999px;padding:1px 7px;font-size:10px;">{{ $history->count() }}</span>
      @endif
    </button>
  </div>
</div>

<div id="panel-active">
  @if($active->isEmpty())
    <div style="text-align:center;padding:60px 20px;color:var(--text-muted);">
      <div style="font-size:40px;margin-bottom:12px;">✅</div>
      <div style="font-size:15px;font-weight:700;color:var(--text-secondary);">Tidak ada jadwal aktif</div>
      <div style="font-size:13px;margin-top:5px;">Semua sesi hari ini sudah selesai.</div>
    </div>
  @else
    <div class="table-wrap"><div style="overflow-x:auto;">
      <table class="sched-table">
        <thead><tr><th>Pukul</th><th>Nama Pemakai</th><th>Divisi</th><th>Ruangan</th><th>Keperluan</th><th>Status</th></tr></thead>
        <tbody>
          @foreach($active as $s)
          @php $isNow = substr($s->start_time,0,5) <= $nowTime && $nowTime < substr($s->end_time,0,5); @endphp
          <tr>
            <td style="font-weight:700;color:{{ $isNow?'var(--green-700)':'var(--text-primary)' }};">
              {{ substr($s->start_time,0,5) }}–{{ substr($s->end_time,0,5) }}
              @if($isNow)
                <span class="badge badge-approved" style="margin-left:6px;font-size:10px;">BERLANGSUNG</span>
              @else
                <span class="badge" style="margin-left:6px;font-size:10px;background:#FFF8E7;color:#B45309;border:1px solid #FDE68A;">MENDATANG</span>
              @endif
            </td>
            <td><strong>{{ $s->requester_name }}</strong></td>
            <td style="color:var(--text-muted);">{{ $s->department ?: '—' }}</td>
            <td>{{ $s->room->name ?? '—' }}</td>
            <td style="color:var(--text-muted);">{{ $s->purpose }}</td>
            <td><span class="badge badge-approved"><span class="badge-dot"></span>Confirmed</span></td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div></div>
  @endif
</div>

<div id="panel-history" style="display:none;">
  @if($history->isEmpty())
    <div style="text-align:center;padding:60px 20px;color:var(--text-muted);">
      <div style="font-size:40px;margin-bottom:12px;">📋</div>
      <div style="font-size:15px;font-weight:700;color:var(--text-secondary);">Belum ada riwayat hari ini</div>
      <div style="font-size:13px;margin-top:5px;">Sesi yang sudah selesai akan muncul di sini.</div>
    </div>
  @else
    <div class="table-wrap"><div style="overflow-x:auto;">
      <table class="sched-table">
        <thead><tr><th>Pukul</th><th>Nama Pemakai</th><th>Divisi</th><th>Ruangan</th><th>Keperluan</th><th>Status</th></tr></thead>
        <tbody>
          @foreach($history as $s)
          <tr style="opacity:.55;">
            <td style="font-weight:700;color:var(--text-muted);">
              {{ substr($s->start_time,0,5) }}–{{ substr($s->end_time,0,5) }}
              <span class="badge" style="margin-left:6px;font-size:10px;background:var(--surface2);color:var(--text-muted);border:1px solid var(--border);">SELESAI</span>
            </td>
            <td><strong>{{ $s->requester_name }}</strong></td>
            <td style="color:var(--text-muted);">{{ $s->department ?: '—' }}</td>
            <td>{{ $s->room->name ?? '—' }}</td>
            <td style="color:var(--text-muted);">{{ $s->purpose }}</td>
            <td><span class="badge badge-approved"><span class="badge-dot"></span>Confirmed</span></td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div></div>
  @endif
</div>

@push('scripts')
<script>
function switchTab(tab) {
  const isActive = tab === 'active';
  document.getElementById('panel-active').style.display  = isActive ? '' : 'none';
  document.getElementById('panel-history').style.display = isActive ? 'none' : '';
  const btnA = document.getElementById('tab-active');
  const btnH = document.getElementById('tab-history');
  btnA.style.background = isActive ? 'var(--white)' : 'transparent';
  btnA.style.color      = isActive ? 'var(--green-700)' : 'var(--text-muted)';
  btnA.style.boxShadow  = isActive ? '0 1px 4px rgba(0,0,0,0.1)' : 'none';
  btnH.style.background = isActive ? 'transparent' : 'var(--white)';
  btnH.style.color      = isActive ? 'var(--text-muted)' : 'var(--green-700)';
  btnH.style.boxShadow  = isActive ? 'none' : '0 1px 4px rgba(0,0,0,0.1)';
}
</script>
@endpush
@endsection