@extends('layouts.app')

@section('title', 'Add Shift')
@section('subtitle', 'Create a new work shift')

@section('content')
<div class="max-w-4xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="{{ route('hr.shifts') }}" class="inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Shifts
        </a>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border-l-4 border-green-500">
        <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200 bg-green-50">
            <h3 class="text-base sm:text-lg font-medium text-gray-900">
                <i class="fas fa-plus text-green-600 mr-2"></i>
                Shift Information
            </h3>
        </div>
        
        <form method="POST" action="{{ route('hr.shifts.store') }}" class="p-4 sm:p-6">
            @csrf
            
            <!-- Basic Information -->
            <div class="mb-8">
                <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-clock text-green-500 mr-2"></i>
                    Basic Information
                </h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Shift Name *</label>
                        <input type="text" id="name" name="name" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-green-500 focus:border-green-500 transition-colors @error('name') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., Day Shift" value="{{ old('name') }}">
                        @error('name')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="break_duration_minutes" class="block text-sm font-medium text-gray-700 mb-2">Break Duration (minutes)</label>
                        <input type="number" id="break_duration_minutes" name="break_duration_minutes" min="0" max="480"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-green-500 focus:border-green-500 transition-colors @error('break_duration_minutes') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., 60" value="{{ old('break_duration_minutes') }}">
                        @error('break_duration_minutes')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Time Schedule -->
            <div class="mb-8">
                <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-calendar-alt text-blue-500 mr-2"></i>
                    Time Schedule
                </h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                    <div>
                        <label for="start_time" class="block text-sm font-medium text-gray-700 mb-2">Start Time *</label>
                        <input type="time" id="start_time" name="start_time" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-green-500 focus:border-green-500 transition-colors @error('start_time') border-red-500 ring-red-500 @enderror"
                               value="{{ old('start_time') }}">
                        @error('start_time')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="end_time" class="block text-sm font-medium text-gray-700 mb-2">End Time *</label>
                        <input type="time" id="end_time" name="end_time" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-green-500 focus:border-green-500 transition-colors @error('end_time') border-red-500 ring-red-500 @enderror"
                               value="{{ old('end_time') }}">
                        @error('end_time')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Description -->
            <div class="mb-8">
                <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-align-left text-purple-500 mr-2"></i>
                    Description
                </h4>
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Shift Description</label>
                    <textarea id="description" name="description" rows="4"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-green-500 focus:border-green-500 transition-colors @error('description') border-red-500 ring-red-500 @enderror"
                              placeholder="Describe the shift details and requirements...">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-4 pt-6 border-t border-gray-200">
                <a href="{{ route('hr.shifts') }}" 
                   class="w-full sm:w-auto px-6 py-3 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-center">
                    Cancel
                </a>
                <button type="submit" 
                        class="w-full sm:w-auto px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-all duration-200 transform hover:scale-105 shadow-md">
                    <i class="fas fa-save mr-2"></i>
                    Create Shift
                </button>
            </div>
        </form>
    </div>
</div>
@endsection