@extends('layouts.app')

@section('title', 'New Leave')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-calendar-plus"></i> New Leave</h2>
    <a href="{{ route('leaves.index') }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back</a>
</div>

@if($errors->any())
<div class="alert alert-danger alert-dismissible fade show">
    <ul class="mb-0">
        @foreach($errors->all() as $err)
        <li>{{ $err }}</li>
        @endforeach
    </ul>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<form method="POST" action="{{ route('leaves.store') }}">
    @csrf
    <div class="card">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Personnel</label>
                    <select name="security_personnel_id" class="form-select @error('security_personnel_id') is-invalid @enderror" required>
                        <option value="">Select personnel...</option>
                        @foreach($personnel as $p)
                        <option value="{{ $p->id }}" {{ old('security_personnel_id') == $p->id ? 'selected' : '' }}>{{ $p->full_name }}</option>
                        @endforeach
                    </select>
                    @error('security_personnel_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Leave Type</label>
                    <select name="leave_type" class="form-select @error('leave_type') is-invalid @enderror" required>
                        <option value="">Select type...</option>
                        @foreach($leaveTypes as $type)
                        <option value="{{ $type }}" {{ old('leave_type') === $type ? 'selected' : '' }}>{{ ucwords(str_replace('_', ' ', $type)) }}</option>
                        @endforeach
                    </select>
                    @error('leave_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Start Date</label>
                    <input type="date" name="start_date" id="start_date" value="{{ old('start_date') }}" class="form-control @error('start_date') is-invalid @enderror" required>
                    @error('start_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">End Date</label>
                    <input type="date" name="end_date" id="end_date" value="{{ old('end_date') }}" class="form-control @error('end_date') is-invalid @enderror" required>
                    @error('end_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">Days</label>
                    <input type="text" id="days" class="form-control" readonly placeholder="Auto">
                </div>
                <div class="col-12">
                    <label class="form-label">Reason</label>
                    <textarea name="reason" rows="3" class="form-control @error('reason') is-invalid @enderror" placeholder="Optional reason for the leave">{{ old('reason') }}</textarea>
                    @error('reason')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>
        <div class="card-footer text-end">
            <button type="submit" class="btn btn-yellow"><i class="bi bi-check-lg"></i> Create Leave</button>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
(function () {
    var start = document.getElementById('start_date');
    var end = document.getElementById('end_date');
    var days = document.getElementById('days');
    function calc() {
        if (!start.value || !end.value) { days.value = ''; return; }
        var s = new Date(start.value);
        var e = new Date(end.value);
        if (e < s) { days.value = ''; return; }
        days.value = Math.round((e - s) / 86400000) + 1;
    }
    start.addEventListener('change', calc);
    end.addEventListener('change', calc);
})();
</script>
@endpush