@extends('layouts.app')

@section('title', 'Add User - Basic')

@section('content')
    <div class="space-y-6">
        <!-- Page Header -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">
                        {{ request('redirect_to_access') ? 'Create New User for Access' : 'Add User' }}
                    </h1>
                    <p class="mt-1 text-sm text-gray-500">
                        {{ request('redirect_to_access') ? 'Create a new user - access will be assigned on the next page' : 'Create a new user record with basic information' }}
                    </p>
                </div>
                <div class="flex space-x-3">
                    <a href="{{ request('redirect_to_access') ? route('hierarchical-access.select-role') : route('employees.index') }}"
                        class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200">
                        <i
                            class="fas fa-arrow-left mr-2"></i>{{ request('redirect_to_access') ? 'Back to Role Access' : 'Back to List' }}
                    </a>
                </div>
            </div>
        </div>

        <!-- Form -->
        <div class="bg-white rounded-lg shadow p-6">
            <form action="{{ route('employees.store.basic') }}" method="POST" class="space-y-6">
                @csrf
                @if(request('redirect_to_access'))
                    <input type="hidden" name="redirect_to_access" value="1">
                @endif

                <!-- Basic Information -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="first_name" class="block text-sm font-medium text-gray-700">First Name *</label>
                        <input type="text" id="first_name" name="first_name" value="{{ old('first_name') }}" required
                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('first_name') border-red-500 focus:ring-red-500 @enderror"
                            placeholder="Enter First Name">
                        @error('first_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="last_name" class="block text-sm font-medium text-gray-700">Last Name *</label>
                        <input type="text" id="last_name" name="last_name" value="{{ old('last_name') }}" required
                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('last_name') border-red-500 focus:ring-red-500 @enderror"
                            placeholder="Enter Last Name">
                        @error('last_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700">Email *</label>
                        <input type="email" id="email" name="email" value="{{ old('email') }}" required
                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('email') border-red-500 focus:ring-red-500 @enderror"
                            placeholder="john.doe@example.com">
                        @error('email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number *</label>
                        <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" required
                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('phone') border-red-500 focus:ring-red-500 @enderror"
                            placeholder="+60123456789">
                        @error('phone')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="alternate_phone" class="block text-sm font-medium text-gray-700">Alternate Phone
                            (Optional)</label>
                        <input type="tel" id="alternate_phone" name="alternate_phone" value="{{ old('alternate_phone') }}"
                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('alternate_phone') border-red-500 focus:ring-red-500 @enderror"
                            placeholder="+60123456789">
                        @error('alternate_phone')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700">Password *</label>
                        <input type="password" id="password" name="password" required
                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('password') border-red-500 focus:ring-red-500 @enderror"
                            placeholder="Min. 8 characters">
                        @error('password')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="password_confirmation" class="block text-sm font-medium text-gray-700">Confirm Password
                            *</label>
                        <input type="password" id="password_confirmation" name="password_confirmation" required
                            class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('password_confirmation') border-red-500 focus:ring-red-500 @enderror"
                            placeholder="Confirm password">
                        @error('password_confirmation')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex justify-between items-center pt-6 border-t border-gray-200">
                    <div class="text-sm text-gray-500">
                        <i class="fas fa-info-circle mr-1"></i>
                        Required fields are marked with *
                    </div>
                    <div class="flex space-x-3">
                        <a href="{{ request('redirect_to_access') ? route('hierarchical-access.select-role') : route('employees.index') }}"
                            class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors duration-200 font-medium">
                            <i class="fas fa-times mr-2"></i>Cancel
                        </a>
                        <button type="submit"
                            class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium shadow-sm hover:shadow-md">
                            <i
                                class="fas fa-save mr-2"></i>{{ request('redirect_to_access') ? 'Create & Assign Access' : 'Create User' }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection