@extends('layouts.guest')

@section('title', 'Login - Hotel Management System')

@section('content')
  <div class="px-8 py-8">
    <h2 class="text-2xl font-bold text-slate-900 mb-2">Welcome Back</h2>
    <p class="text-slate-600 mb-8">Sign in to your hotel management account</p>

    @if ($errors->any())
      <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
        <div class="flex items-start">
          <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <div class="ml-3">
            <p class="text-sm font-medium text-red-800">
              @if ($errors->has('email') || $errors->has('password'))
                Invalid email or password
              @else
                {{ $errors->first() }}
              @endif
            </p>
          </div>
        </div>
      </div>
    @endif

    <form action="{{ route('login') }}" method="POST" class="space-y-6">
      @csrf

      <!-- Email Field -->
      <div>
        <label for="email" class="block text-sm font-medium text-slate-700 mb-2">Email Address</label>
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
            </svg>
          </div>
          <input
            id="email"
            name="email"
            type="email"
            required
            value="{{ old('email') }}"
            class="form-input pl-12 w-full {{ $errors->has('email') ? 'border-red-500 focus:ring-red-500' : '' }}"
            placeholder="admin@example.com"
          >
        </div>
        @error('email')
          <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
        @enderror
      </div>

      <!-- Password Field -->
      <div>
        <label for="password" class="block text-sm font-medium text-slate-700 mb-2">Password</label>
        <div class="relative" x-data="{ show: false }">
          <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
            </svg>
          </div>
          <input
            id="password"
            name="password"
            :type="show ? 'text' : 'password'"
            required
            class="form-input pl-12 pr-12 w-full {{ $errors->has('password') ? 'border-red-500 focus:ring-red-500' : '' }}"
            placeholder="••••••••"
          >
          <button
            @click="show = !show"
            type="button"
            class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-slate-600 transition-colors duration-200"
          >
            <svg x-show="!show" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
            </svg>
            <svg x-show="show" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-4.803m5.596-3.856a3.375 3.375 0 11-4.753 4.753M9.172 16.172a4 4 0 015.656 0M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </button>
        </div>
        @error('password')
          <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
        @enderror
      </div>

      <!-- Remember Me & Forgot Password -->
      <div class="flex items-center justify-between">
        <label class="flex items-center">
          <input name="remember" type="checkbox" class="w-4 h-4 text-primary-600 border-slate-300 rounded focus:ring-2 focus:ring-primary-500" value="on">
          <span class="ml-2 text-sm text-slate-600">Remember me</span>
        </label>
        <a href="{{ route('password.request') }}" class="text-sm text-primary-600 hover:text-primary-700 font-medium">
          Forgot password?
        </a>
      </div>

      <!-- Login Button -->
      <button
        type="submit"
        class="w-full bg-gradient-to-r from-primary-600 to-primary-700 text-white py-3 px-4 rounded-lg font-medium hover:from-primary-700 hover:to-primary-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200 shadow-lg"
      >
        Sign In
      </button>
    </form>

    <!-- Divider -->
    <div class="mt-8 mb-8 relative">
      <div class="absolute inset-0 flex items-center">
        <div class="w-full border-t border-slate-300"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="px-2 bg-white text-slate-600">Demo Credentials</span>
      </div>
    </div>

    <!-- Demo Info -->
    <div class="bg-slate-50 rounded-lg p-4 text-sm text-slate-600 space-y-2">
      <div class="flex items-start">
        <svg class="h-5 w-5 text-primary-600 mr-3 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <div>
          <strong class="block text-slate-900">Email:</strong>
          <span class="font-mono">admin@mandala.local</span>
        </div>
      </div>
      <div class="flex items-start">
        <svg class="h-5 w-5 text-primary-600 mr-3 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <div>
          <strong class="block text-slate-900">Password:</strong>
          <span class="font-mono">password</span>
        </div>
      </div>
    </div>

    <!-- Register Link -->
    <p class="mt-6 text-center text-sm text-slate-600">
      Don't have an account?
      <a href="{{ route('register') }}" class="text-primary-600 hover:text-primary-700 font-medium">
        Register here
      </a>
    </p>
  </div>
@endsection