<x-app-layout>
    <x-slot name="header">{{ __('Add Roster') }}</x-slot>

    <div class="card shadow-sm" style="max-width:700px;">
        <div class="card-body">
            <form action="{{ route('rosters.store') }}" method="POST">
                @csrf
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Employee') }}</label>
                        <select name="employee_id" class="form-select @error('employee_id') is-invalid @enderror" required>
                            <option value="">{{ __('-- Select Employee --') }}</option>
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}" {{ old('employee_id') == $employee->id ? 'selected' : '' }}>{{ $employee->name }}</option>
                            @endforeach
                        </select>
                        @error('employee_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Duty Start Date') }}</label>
                        <input type="date" name="duty_start_date" class="form-control" value="{{ old('duty_start_date') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Duty End Date') }}</label>
                        <input type="date" name="duty_end_date" class="form-control" value="{{ old('duty_end_date') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Shift') }}</label>
                        <select name="shift" class="form-select @error('shift') is-invalid @enderror" required>
                            <option value="morning" {{ old('shift') == 'morning' ? 'selected' : '' }}>{{ __('Morning') }}</option>
                            <option value="afternoon" {{ old('shift') == 'afternoon' ? 'selected' : '' }}>{{ __('Afternoon') }}</option>
                            <option value="night" {{ old('shift') == 'night' ? 'selected' : '' }}>{{ __('Night') }}</option>
                            <option value="custom" {{ old('shift') == 'custom' ? 'selected' : '' }}>{{ __('Custom') }}</option>
                        </select>
                        @error('shift')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ __('Starts At') }}</label>
                        <input type="time" name="starts_at" class="form-control" value="{{ old('starts_at') }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ __('Ends At') }}</label>
                        <input type="time" name="ends_at" class="form-control" value="{{ old('ends_at') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('Duty Title') }}</label>
                        <input type="text" name="duty_title" class="form-control" value="{{ old('duty_title') }}" placeholder="e.g. Head Chef, Waiter">
                    </div>
                    <div class="col-12">
                        <label class="form-label">{{ __('Notes') }}</label>
                        <textarea name="notes" class="form-control" rows="2">{{ old('notes') }}</textarea>
                    </div>
                </div>
                <div class="mt-3 d-flex gap-2">
                    <button type="submit" class="btn btn-primary">{{ __('Save Roster') }}</button>
                    <a href="{{ route('rosters.index') }}" class="btn btn-outline-secondary">{{ __('Cancel') }}</a>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>
