@extends('layouts.app')

@section('title', 'Add Department')
@section('subtitle', 'Create a new department')

@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.departments') }}" 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 Departments
        </a>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border-l-4 border-blue-500">
        <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200 bg-blue-50">
            <h3 class="text-base sm:text-lg font-medium text-gray-900">
                <i class="fas fa-plus text-blue-600 mr-2"></i>
                Department Information
            </h3>
        </div>
        
        <form method="POST" action="{{ route('hr.departments.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-building text-blue-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">Department 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-blue-500 focus:border-blue-500 transition-colors @error('name') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., Mining Operations" value="{{ old('name') }}">
                        @error('name')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="department_head" class="block text-sm font-medium text-gray-700 mb-2">Department Head</label>
                        <input type="text" id="department_head" name="department_head"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('department_head') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., John Smith" value="{{ old('department_head') }}">
                        @error('department_head')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="cost_center" class="block text-sm font-medium text-gray-700 mb-2">Cost Center</label>
                        <input type="text" id="cost_center" name="cost_center"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition-colors @error('cost_center') border-red-500 ring-red-500 @enderror"
                               placeholder="e.g., CC001" value="{{ old('cost_center') }}">
                        @error('cost_center')
                            <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-green-500 mr-2"></i>
                    Description
                </h4>
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Department 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-blue-500 focus:border-blue-500 transition-colors @error('description') border-red-500 ring-red-500 @enderror"
                              placeholder="Describe the department's role and responsibilities...">{{ 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.departments') }}" 
                   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-blue-500 text-white rounded-lg hover:bg-blue-600 transition-all duration-200 transform hover:scale-105 shadow-md">
                    <i class="fas fa-save mr-2"></i>
                    Create Department
                </button>
            </div>
        </form>
    </div>
</div>
@endsection