@extends('layouts.app')
@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
  <div>
    <h4 class="mb-0">New Holiday</h4>
    <div class="text-secondary small mt-1">Create a holiday entry for your selected calendar.</div>
  </div>
  <div class="mt-2 mt-md-0">
    <a href="{{ route('applications.holidays.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <form method="POST" action="{{ route('applications.holidays.store') }}">
      @csrf

      <div class="row g-3">
        <div class="col-12 col-md-6">
          <label class="form-label">Calendar</label>
          <input name="calendar" value="{{ old('calendar', 'ZA') }}" class="form-control">
          @error('calendar')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Date</label>
          <input type="date" name="date" value="{{ old('date') }}" class="form-control" required>
          @error('date')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Name</label>
          <input name="name" value="{{ old('name') }}" class="form-control" required>
          @error('name')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-md-6">
          <label class="form-label">Active</label>
          <select name="active" class="form-select">
            <option value="1" {{ old('active', '1') === '1' ? 'selected' : '' }}>Yes</option>
            <option value="0" {{ old('active') === '0' ? 'selected' : '' }}>No</option>
          </select>
        </div>
      </div>

      <div class="d-flex gap-2 mt-3">
        <button type="submit" class="btn btn-primary">Save</button>
        <a href="{{ route('applications.holidays.index') }}" class="btn btn-outline-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>
@endsection