@extends('layouts.app')

@section('title', 'Apply for Leave')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1">
      <li>
        <a href="{{ route('dashboard') }}" class="text-slate-700 hover:text-primary-600">Dashboard</a>
      </li>
      <li>
        <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
      </li>
      <li>
        <a href="{{ route('leave.index') }}" class="text-slate-700 hover:text-primary-600">Leave</a>
      </li>
      <li>
        <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
      </li>
      <li>
        <span class="text-slate-700 font-medium">Apply for Leave</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="space-y-6">
  <!-- Header -->
  <div>
    <h1 class="text-3xl font-bold text-slate-900">Apply for Leave</h1>
    <p class="text-slate-600 mt-1">Submit a new leave request</p>
  </div>

  <!-- Form Card -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
    <form>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Employee -->
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Employee *</label>
          <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
            <option value="">Select Employee</option>
            <option value="1">John Doe</option>
            <option value="2">Jane Smith</option>
            <option value="3">Robert Johnson</option>
            <option value="4">Mary Williams</option>
          </select>
        </div>

        <!-- Leave Type -->
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Leave Type *</label>
          <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
            <option value="">Select Leave Type</option>
            <option value="annual">Annual Leave</option>
            <option value="sick">Sick Leave</option>
            <option value="personal">Personal Leave</option>
            <option value="maternity">Maternity Leave</option>
            <option value="paternity">Paternity Leave</option>
            <option value="unpaid">Unpaid Leave</option>
          </select>
        </div>

        <!-- From Date -->
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">From Date *</label>
          <input type="date" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
        </div>

        <!-- To Date -->
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">To Date *</label>
          <input type="date" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
        </div>

        <!-- Number of Days -->
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Number of Days *</label>
          <input type="number" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" value="1" min="1" required>
        </div>

        <!-- Leave Balance -->
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Remaining Balance</label>
          <input type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg bg-slate-50" value="15 days" disabled>
        </div>
      </div>

      <!-- Reason -->
      <div class="mt-6">
        <label class="block text-sm font-medium text-slate-700 mb-2">Reason for Leave *</label>
        <textarea class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" rows="4" placeholder="Please provide a reason for your leave..." required></textarea>
      </div>

      <!-- Attachments -->
      <div class="mt-6">
        <label class="block text-sm font-medium text-slate-700 mb-2">Attachments (optional)</label>
        <div class="flex items-center justify-center w-full">
          <label class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-slate-300 rounded-lg cursor-pointer hover:bg-slate-50 transition-colors duration-200">
            <div class="flex flex-col items-center justify-center pt-5 pb-6">
              <svg class="w-8 h-8 text-slate-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
              </svg>
              <p class="text-sm text-slate-600">Click to upload or drag and drop</p>
              <p class="text-xs text-slate-500">PNG, JPG, PDF up to 5MB</p>
            </div>
            <input type="file" class="hidden">
          </label>
        </div>
      </div>

      <!-- Form Actions -->
      <div class="flex space-x-4 mt-8 pt-6 border-t border-slate-200">
        <button type="submit" class="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium">
          Submit Leave Application
        </button>
        <a href="{{ route('leave.index') }}" class="px-6 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors duration-200 font-medium">
          Cancel
        </a>
      </div>
    </form>
  </div>

  <!-- Information Box -->
  <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
    <h3 class="font-semibold text-blue-900 mb-3">Leave Policy Guidelines</h3>
    <ul class="space-y-2 text-sm text-blue-800">
      <li>• Annual Leave: 20 days per year</li>
      <li>• Sick Leave: 10 days per year (with medical certificate)</li>
      <li>• Personal Leave: 5 days per year</li>
      <li>• Leave requests must be submitted at least 5 working days in advance</li>
      <li>• Emergency leave can be approved on short notice</li>
    </ul>
  </div>
</div>
@endsection