@extends('layouts.app')
@section('title', 'Request Ruangan')

@section('content')
<nav class="navbar">
  <a href="{{ route('dashboard') }}" class="navbar-brand">
    <img src="{{ asset('images/logo.png') }}" alt="FKS Food" class="brand-logo-img">
    <div class="brand-divider"></div>
    <div class="brand-info">
      <div class="brand-company">PT Putra Taro Paloma</div>
      <div class="brand-system">Sistem Ruangan</div>
    </div>
  </a>
  <div class="navbar-right">
    <div>
      <div class="clock-time js-clock">00:00:00</div>
      <div class="clock-date js-date" style="text-align:right">—</div>
    </div>
  </div>
</nav>

<div style="min-height:calc(100vh - 68px);display:flex;align-items:center;justify-content:center;padding:40px;">
  <div style="width:100%;max-width:580px;">

    <div style="margin-bottom:24px;">
      <a href="{{ route('dashboard') }}" style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);text-decoration:none;font-weight:600;">← Kembali ke Dashboard</a>
    </div>

    <div style="background:var(--white);border:1px solid var(--border);border-radius:20px;padding:36px;box-shadow:var(--shadow-lg);">
      <h1 style="font-size:22px;font-weight:800;margin-bottom:5px;">Form Permintaan Ruangan</h1>
      <p style="font-size:13px;color:var(--text-muted);margin-bottom:28px;">Isi seluruh data dengan benar. Permintaan akan diproses oleh admin.</p>

      @if(session('error'))
        <div class="alert alert-error">⚠️ {{ session('error') }}</div>
      @endif
      @if($errors->any())
        <div class="alert alert-error">⚠️ {{ $errors->first() }}</div>
      @endif

      <form method="POST" action="{{ route('request.store') }}">
        @csrf
        <div class="field-row">
          <div class="field">
            <label class="field-label">Nama Pemakai <span class="field-required">*</span></label>
            <input type="text" name="requester_name" class="field-input" value="{{ old('requester_name') }}" placeholder="Nama lengkap Anda" required>
            @error('requester_name')<div class="field-error">{{ $message }}</div>@enderror
          </div>
          <div class="field">
            <label class="field-label">Departemen / Divisi</label>
            <input type="text" name="department" class="field-input" value="{{ old('department') }}" placeholder="HRD, IT, Marketing...">
          </div>
        </div>

        <div class="field-row">
          <div class="field">
            <label class="field-label">Nama Ruangan <span class="field-required">*</span></label>
            <select name="room_id" class="field-input" required>
              <option value="">-- Pilih Ruangan --</option>
              @foreach($rooms as $room)
                <option value="{{ $room->id }}" {{ old('room_id')==$room->id?'selected':'' }}>{{ $room->name }}</option>
              @endforeach
            </select>
            @error('room_id')<div class="field-error">{{ $message }}</div>@enderror
          </div>
          <div class="field">
            <label class="field-label">Tanggal <span class="field-required">*</span></label>
            <select name="date" class="field-input" required>
              <option value="">-- Pilih Tanggal --</option>
              @php
                $today = \Carbon\Carbon::now('Asia/Jakarta');
                $labels = ['Hari ini', 'Besok', '2 Hari lagi', '3 Hari lagi'];
              @endphp
              @for($i = 0; $i <= 3; $i++)
                @php $d = $today->copy()->addDays($i); @endphp
                <option value="{{ $d->toDateString() }}" {{ old('date', $today->toDateString()) == $d->toDateString() ? 'selected' : '' }}>
                  {{ $labels[$i] }} — {{ $d->format('d M Y') }}
                </option>
              @endfor
            </select>
            @error('date')<div class="field-error">{{ $message }}</div>@enderror
          </div>
        </div>

        <div class="field-row">
          <div class="field">
            <label class="field-label">Jam Mulai <span class="field-required">*</span></label>
            <div style="display:flex;gap:6px;align-items:center;">
              <select name="start_hour" class="field-input" style="flex:1;" required>
                <option value="">Jam</option>
                @for($h = 6; $h <= 17; $h++)
                  @php $hVal = str_pad($h, 2, '0', STR_PAD_LEFT); @endphp
                  <option value="{{ $hVal }}" {{ old('start_hour') == $hVal ? 'selected' : '' }}>{{ $hVal }}.00</option>
                @endfor
              </select>
              <span style="font-weight:800;color:var(--text-muted);">:</span>
              <select name="start_minute" class="field-input" style="flex:1;" required>
                @foreach(['00','15','30','45'] as $m)
                  <option value="{{ $m }}" {{ old('start_minute','00') == $m ? 'selected' : '' }}>{{ $m }}</option>
                @endforeach
              </select>
            </div>
            <div style="font-size:10px;color:var(--text-muted);margin-top:4px;">Operasional: 06.00 – 18.00</div>
            @error('start_time')<div class="field-error">{{ $message }}</div>@enderror
          </div>
          <div class="field">
            <label class="field-label">Jam Selesai <span class="field-required">*</span></label>
            <div style="display:flex;gap:6px;align-items:center;">
              <select name="end_hour" class="field-input" style="flex:1;" required>
                <option value="">Jam</option>
                @for($h = 6; $h <= 18; $h++)
                  @php $hVal = str_pad($h, 2, '0', STR_PAD_LEFT); @endphp
                  <option value="{{ $hVal }}" {{ old('end_hour') == $hVal ? 'selected' : '' }}>{{ $hVal }}.00</option>
                @endfor
              </select>
              <span style="font-weight:800;color:var(--text-muted);">:</span>
              <select name="end_minute" class="field-input" style="flex:1;" required>
                @foreach(['00','15','30','45'] as $m)
                  <option value="{{ $m }}" {{ old('end_minute','00') == $m ? 'selected' : '' }}>{{ $m }}</option>
                @endforeach
              </select>
            </div>
            <div style="font-size:10px;color:var(--text-muted);margin-top:4px;">Maks selesai pukul 18.00</div>
            @error('end_time')<div class="field-error">{{ $message }}</div>@enderror
          </div>
        </div>

        <div class="field">
          <label class="field-label">Tujuan / Keperluan <span class="field-required">*</span></label>
          <textarea name="purpose" class="field-input" rows="3" placeholder="Jelaskan tujuan penggunaan ruangan..." style="resize:vertical" required>{{ old('purpose') }}</textarea>
          @error('purpose')<div class="field-error">{{ $message }}</div>@enderror
        </div>

        {{-- PERHATIAN - merah --}}
        <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:14px 16px;margin-bottom:18px;">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
            <span style="font-size:18px;">🚨</span>
            <span style="font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#991b1b;">Perhatian — Setelah Menggunakan Ruangan</span>
          </div>
          <ul style="margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;">
            <li style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#7f1d1d;">
              <span style="font-size:15px;flex-shrink:0;">🗑️</span>
              <span>Tolong <strong>sampah dibersihkan</strong> dan dibuang pada tempatnya sebelum meninggalkan ruangan.</span>
            </li>
            <li style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#7f1d1d;">
              <span style="font-size:15px;flex-shrink:0;">🪑</span>
              <span>Tolong <strong>kursi dikembalikan</strong> ke posisi semula dan ditata dengan rapi.</span>
            </li>
            <li style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#7f1d1d;">
              <span style="font-size:15px;flex-shrink:0;">🪟</span>
              <span>Tolong <strong>meja ditata kembali</strong> dengan rapi seperti kondisi semula.</span>
            </li>
            <li style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#7f1d1d;">
              <span style="font-size:15px;flex-shrink:0;">💡</span>
              <span>Pastikan <strong>lampu dan AC dimatikan</strong> setelah selesai menggunakan ruangan.</span>
            </li>
          </ul>
        </div>

        <div class="alert alert-warning">⏳ Permintaan akan menunggu persetujuan admin sebelum ruangan dapat digunakan.</div>

        <div style="display:flex;gap:10px;margin-top:4px;">
          <a href="{{ route('dashboard') }}" class="btn btn-outline" style="flex:1;text-align:center;">Batal</a>
          <button type="submit" class="btn btn-primary" style="flex:2;">Kirim Permintaan →</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection