@extends('layouts.admin')
@section('title', 'Permintaan Masuk')
@section('admin-content')

@push('styles')
<style>
@media(max-width:768px){
  .stats-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .stats-grid > div { padding:12px 14px !important; }
  .stats-grid .stat-val { font-size:22px !important; }

  /* Sembunyikan kolom: #, Tujuan, Status */
  .req-table th:nth-child(1),
  .req-table td:nth-child(1),
  .req-table th:nth-child(6),
  .req-table td:nth-child(6),
  .req-table th:nth-child(7),
  .req-table td:nth-child(7) { display:none !important; }

  /* Perkecil font tabel */
  .req-table td, .req-table th { font-size:11px !important; padding:7px 8px !important; }
  .req-table .td-actions { flex-direction:column !important; gap:4px !important; }
  .req-table .btn-sm { font-size:10px !important; padding:4px 8px !important; }
}
</style>
@endpush

<h1 style="font-size:18px;font-weight:800;margin-bottom:20px;">Permintaan Masuk</h1>

<div class="stats-grid" style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;">
  @foreach([
    ['val'=>$pending, 'label'=>'Menunggu',  'color'=>'var(--gold-500)'],
    ['val'=>$approved,'label'=>'Disetujui', 'color'=>'var(--green-600)'],
    ['val'=>$rejected,'label'=>'Ditolak',   'color'=>'var(--red)'],
    ['val'=>$total,   'label'=>'Total',     'color'=>'var(--green-800)'],
  ] as $s)
  <div style="background:var(--white);border:1px solid var(--border);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-sm);">
    <div class="stat-val" style="font-size:28px;font-weight:800;color:{{ $s['color'] }};line-height:1;margin-bottom:5px;">{{ $s['val'] }}</div>
    <div style="font-size:12px;font-weight:600;color:var(--text-muted);">{{ $s['label'] }}</div>
  </div>
  @endforeach
</div>

<div class="table-wrap">
  <div class="table-head">
    <div class="table-head-title">Semua Permintaan</div>
  </div>
  <div style="overflow-x:auto;">
    <table class="req-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Nama Pemakai</th>
          <th>Ruangan</th>
          <th>Tanggal</th>
          <th>Jam</th>
          <th>Tujuan</th>
          <th>Status</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        @forelse($requests as $req)
        <tr>
          <td style="color:var(--text-muted)">{{ $req->id }}</td>
          <td>
            <strong>{{ $req->requester_name }}</strong>
            @if($req->department)<br><span style="font-size:11px;color:var(--text-muted)">{{ $req->department }}</span>@endif
          </td>
          <td>{{ $req->room->name ?? '—' }}</td>
          <td style="color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;">{{ \Carbon\Carbon::parse($req->date)->format('d M Y') }}</td>
          <td style="font-weight:700;color:var(--green-700);white-space:nowrap;">{{ substr($req->start_time,0,5) }}–{{ substr($req->end_time,0,5) }}</td>
          <td style="max-width:160px;color:var(--text-muted);">{{ Str::limit($req->purpose, 40) }}</td>
          <td>
            <span class="badge badge-{{ $req->status === 'approved' ? 'approved' : ($req->status === 'rejected' ? 'rejected' : 'pending') }}">
              <span class="badge-dot"></span>{{ $req->status_label }}
            </span>
          </td>
          <td>
            <div class="td-actions">
              @if($req->status === 'pending')
                <form method="POST" action="{{ route('admin.requests.approve', $req) }}">
                  @csrf
                  <button type="submit" class="btn btn-sm" style="background:var(--green-50);color:var(--green-700);border:1px solid var(--green-100);">✓ Setuju</button>
                </form>
                <button class="btn btn-sm btn-danger" onclick="openReject({{ $req->id }})">✕ Tolak</button>
              @elseif($req->status === 'approved')
                <button class="btn btn-sm btn-danger" onclick="openReject({{ $req->id }})">↩ Batalkan</button>
              @else
                <form method="POST" action="{{ route('admin.requests.approve', $req) }}">
                  @csrf
                  <button type="submit" class="btn btn-sm" style="background:var(--green-50);color:var(--green-700);border:1px solid var(--green-100);">↺ Pulihkan</button>
                </form>
              @endif
            </div>
          </td>
        </tr>
        @empty
        <tr><td colspan="8" style="text-align:center;padding:48px;color:var(--text-muted);">📭 Belum ada permintaan masuk.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

<div class="overlay" id="modal-reject">
  <div class="modal" style="max-width:420px;">
    <div class="modal-title">Tolak Permintaan</div>
    <div style="font-size:13px;color:var(--text-muted);margin:8px 0 20px;line-height:1.6;">Anda dapat menyertakan alasan penolakan agar pemohon mengetahui penyebabnya.</div>
    <form id="reject-form" method="POST" action="">
      @csrf
      <div class="field">
        <label class="field-label">Alasan Penolakan <span style="color:var(--text-light)">(opsional)</span></label>
        <textarea name="reason" class="field-input" rows="3" placeholder="Contoh: Ruangan sudah dipakai untuk kegiatan lain..."></textarea>
      </div>
      <div class="modal-actions">
        <button type="button" class="btn btn-outline" onclick="closeOverlay('modal-reject')">Batal</button>
        <button type="submit" class="btn btn-danger">Ya, Tolak</button>
      </div>
    </form>
  </div>
</div>

@push('scripts')
<script>
function openReject(id){
  document.getElementById('reject-form').action = '/admin/requests/'+id+'/reject';
  openOverlay('modal-reject');
}
</script>
@endpush
@endsection