@extends('layouts.app')
@section('title', 'Login Admin')

@push('styles')
<style>
.login-wrap {
  min-height: 100vh;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* ── KIRI: Slider ── */
.login-slider {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: none;
}
@media(min-width:960px){ .login-slider{ display:block; } }

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.slide.active { opacity: 1; }

.slide-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay gelap + gradien dari bawah */
.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.3) 100%);
}

/* Teks di atas foto */
.slide-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 48px;
  z-index: 2;
}
.slide-caption h2 {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  font-family: 'Instrument Serif', serif;
}
.slide-caption p {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  line-height: 1.6;
}

/* Dots navigasi */
.slide-dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.slide-dot {
  height: 8px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.4);
  width: 8px;
  transition: all .3s;
  padding: 0;
}
.slide-dot.active {
  background: #fff;
  width: 28px;
}

/* Kurva pemisah kanan */
.slide-divider {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 72px;
  background: var(--white);
  clip-path: ellipse(100% 50% at 100% 50%);
  z-index: 20;
}

/* ── KANAN: Form ── */
.login-form-side {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  background: var(--white);
  position: relative;
  z-index: 30;
}
@media(min-width:960px){
  .login-form-side { width: 440px; flex-shrink: 0; }
}

.login-box {
  width: 100%;
  max-width: 380px;
}

/* Logo area */
.login-logo-wrap {
  text-align: center;
  margin-bottom: 32px;
}
.login-logo {
  height: 52px;
  width: auto;
  object-fit: contain;
  margin: 0 auto 14px;
  display: block;
}
.login-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--green-800);
  margin-bottom: 5px;
}
.login-sub {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Input group */
.input-group {
  position: relative;
  margin-bottom: 16px;
}
.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}
.input-group .field-input {
  padding-left: 38px;
}
.input-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  padding: 4px;
  transition: color .15s;
}
.input-eye:hover { color: var(--green-700); }

.remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.remember-row input[type=checkbox] {
  accent-color: var(--green-600);
  width: 15px; height: 15px;
  cursor: pointer;
}
.remember-row label {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.btn-login {
  width: 100%;
  padding: 13px 24px;
  background: linear-gradient(135deg, var(--green-600), var(--green-700));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 4px 16px rgba(30,107,48,0.3);
  transition: all .18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-login:hover {
  background: linear-gradient(135deg, var(--green-700), var(--green-800));
  box-shadow: 0 6px 20px rgba(30,107,48,0.4);
  transform: translateY(-1px);
}
.btn-login:active { transform: translateY(0); }

.login-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 11px;
  color: var(--text-light);
}

/* Field label dengan ikon */
.field-label-icon {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green-700);
  margin-bottom: 6px;
  letter-spacing: .02em;
}
</style>
@endpush

@section('content')
<div class="login-wrap">

  {{-- ── KIRI: Foto Slider ── --}}
  <div class="login-slider">

    @php
    $slides = [
      [
        'img'   => asset('images/rooms/meeting-taro-1.png'),
        'title' => 'Meeting Taro 1',
        'desc'  => 'Ruang rapat utama dengan kapasitas besar, dilengkapi layar presentasi.',
      ],
      [
        'img'   => asset('images/rooms/meeting-taro-2.png'),
        'title' => 'Meeting Taro 2',
        'desc'  => 'Ruang diskusi intim untuk tim kecil, suasana nyaman dan kondusif.',
      ],
      [
        'img'   => asset('images/rooms/ruang-tamu.png'),
        'title' => 'Ruang Tamu',
        'desc'  => 'Ruang penerimaan tamu dengan nuansa profesional dan elegan.',
      ],
      [
        'img'   => asset('images/rooms/ruang-training.png'),
        'title' => 'Ruang Training',
        'desc'  => 'Ruang pelatihan yang nyaman dan kondusif untuk kegiatan pengembangan SDM.',
      ],
    ];
    @endphp

    @foreach($slides as $i => $s)
    <div class="slide {{ $i===0?'active':'' }}" data-slide="{{ $i }}">
      <img src="{{ $s['img'] }}" alt="{{ $s['title'] }}" class="slide-img">
      <div class="slide-overlay"></div>

      {{-- Branding pojok kiri atas --}}
      <div style="position:absolute;top:32px;left:40px;z-index:5;display:flex;align-items:center;gap:12px;">
        <img src="{{ asset('images/logo.png') }}" alt="FKS Food"
             style="height:36px;width:auto;filter:brightness(0) invert(1);opacity:.9;">
      </div>

      <div class="slide-caption">
        <div style="display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);border-radius:999px;padding:5px 14px;margin-bottom:14px;">
          <span style="width:7px;height:7px;border-radius:50%;background:var(--green-400);display:inline-block;"></span>
          <span style="font-size:12px;font-weight:600;color:#fff;">Sistem Ruangan PTP</span>
        </div>
        <h2>{{ $s['title'] }}</h2>
        <p>{{ $s['desc'] }}</p>
      </div>
    </div>
    @endforeach

    {{-- Dots --}}
    <div class="slide-dots">
      @foreach($slides as $i => $s)
        <button class="slide-dot {{ $i===0?'active':'' }}" data-dot="{{ $i }}" onclick="goSlide({{ $i }})"></button>
      @endforeach
    </div>

    {{-- Kurva pemisah --}}
    <div class="slide-divider"></div>
  </div>

  {{-- ── KANAN: Form Login ── --}}
  <div class="login-form-side">
    <div class="login-box">

      {{-- Logo --}}
      <div class="login-logo-wrap">
        <img src="{{ asset('images/logo.png') }}" alt="FKS Food" class="login-logo">
        <div class="login-title">Panel Admin</div>
        <div class="login-sub">PT Putra Taro Paloma — Sistem Ruangan</div>
      </div>

      {{-- Error --}}
      @if($errors->any())
        <div class="alert alert-error" style="margin-bottom:20px;">
          ⚠️ {{ $errors->first() }}
        </div>
      @endif

      {{-- Form --}}
      <form method="POST" action="{{ route('admin.login.post') }}">
        @csrf

        <div>
          <div class="field-label-icon">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            Email
          </div>
          <div class="input-group">
            <svg class="input-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,12 2,6"/></svg>
            <input type="email" name="email" class="field-input" value="{{ old('email') }}"
                   required autofocus>
          </div>
        </div>

        <div>
          <div class="field-label-icon">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
            Password
          </div>
          <div class="input-group">
            <svg class="input-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
            <input type="password" name="password" id="pwdInput" class="field-input"
                   required>
            <button type="button" class="input-eye" onclick="togglePwd()" id="eyeBtn">
              <svg id="eyeIcon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
            </button>
          </div>
        </div>

        <div class="remember-row">
          <input type="checkbox" name="remember" id="remember">
          <label for="remember">Ingat saya di perangkat ini</label>
        </div>

        <button type="submit" class="btn-login">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
          Masuk ke Panel Admin
        </button>
      </form>

      <div class="login-footer">
        <a href="{{ route('dashboard') }}" style="color:var(--text-muted);text-decoration:none;font-weight:600;font-size:12px;">
          ← Kembali ke Dashboard Publik
        </a>
        <div style="margin-top:12px;">© {{ date('Y') }} Muhammad Munawar</div>
      </div>

    </div>
  </div>

</div>
@endsection

@push('scripts')
<script>
// Slider
let current = 0;
const slides = document.querySelectorAll('[data-slide]');
const dots   = document.querySelectorAll('[data-dot]');

function goSlide(n) {
  slides[current].classList.remove('active');
  dots[current].classList.remove('active');
  current = (n + slides.length) % slides.length;
  slides[current].classList.add('active');
  dots[current].classList.add('active');
}

if (slides.length > 1) {
  setInterval(() => goSlide(current + 1), 5000);
}

// Toggle password
function togglePwd() {
  const inp = document.getElementById('pwdInput');
  const ico = document.getElementById('eyeIcon');
  if (inp.type === 'password') {
    inp.type = 'text';
    ico.innerHTML = '<path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>';
  } else {
    inp.type = 'password';
    ico.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>';
  }
}
</script>
@endpush