@extends('layouts.app')

@section('title', 'Create Locker')

@section('no-page-header')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <!-- <h1 class="text-2xl font-bold text-gray-900">Create Locker</h1> -->
            <p class="mt-1 text-sm text-gray-600">Add a new locker to the system</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('lockers.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-arrow-left mr-2"></i>
                Back to Lockers
            </a>
        </div>
    </div>

    <!-- Form -->
    <div class="bg-white rounded-lg shadow">
        <form method="POST" action="{{ route('lockers.store') }}" class="space-y-6 p-6">
            @csrf

            <!-- Basic Information -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="locker_number" class="block text-sm font-medium text-gray-700">
                        Locker Number <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           id="locker_number" 
                           name="locker_number" 
                           value="{{ old('locker_number') }}"
                           required
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
                           placeholder="e.g., L001, A-101">
                    @error('locker_number')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="locker_type" class="block text-sm font-medium text-gray-700">
                        Locker Type <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           id="locker_type" 
                           name="locker_type" 
                           value="{{ old('locker_type') }}"
                           required
                           class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"
                           placeholder="e.g., Safety Deposit, Storage">
                    @error('locker_type')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Size and Status -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="locker_size" class="block text-sm font-medium text-gray-700">
                        Locker Size <span class="text-red-500">*</span>
                    </label>
                    <select id="locker_size" 
                            name="locker_size" 
                            required
                            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500">
                        <option value="">Select Size</option>
                        <option value="small" {{ old('locker_size') == 'small' ? 'selected' : '' }}>Small</option>
                        <option value="medium" {{ old('locker_size') == 'medium' ? 'selected' : '' }}>Medium</option>
                        <option value="large" {{ old('locker_size') == 'large' ? 'selected' : '' }}>Large</option>
                        <option value="Extra_large" {{ old('locker_size') == 'Extra_large' ? 'selected' : '' }}>Extra Large</option>
                    </select>
                    @error('locker_size')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="status" class="block text-sm font-medium text-gray-700">
                        Status <span class="text-red-500">*</span>
                    </label>
                    <select id="status" 
                            name="status" 
                            required
                            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500">
                        <option value="">Select Status</option>
                        <option value="available" {{ old('status') == 'available' ? 'selected' : '' }}>Available</option>
                        <option value="occupied" {{ old('status') == 'occupied' ? 'selected' : '' }}>Occupied</option>
                        <option value="maintenance" {{ old('status') == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                    </select>
                    @error('status')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Customer -->
            <!--<div class="grid grid-cols-1 md:grid-cols-2 gap-6">-->
            <!--    <div>-->
            <!--        <label for="customer_id" class="block text-sm font-medium text-gray-700">-->
            <!--            Customer-->
            <!--        </label>-->
            <!--        <select id="customer_id" -->
            <!--                name="customer_id" -->
            <!--                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500">-->
            <!--            <option value="">Select Customer</option>-->
            <!--            @foreach($customers as $customer)-->
            <!--                <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>-->
            <!--                    {{ $customer->name }}-->
            <!--                </option>-->
            <!--            @endforeach-->
            <!--        </select>-->
            <!--        @error('customer_id')-->
            <!--            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>-->
            <!--        @enderror-->
            <!--        <p class="mt-1 text-xs text-gray-500">Required only if status is "Occupied"</p>-->
            <!--    </div>-->
            <!--</div>-->

            <!-- Form Actions -->
            <div class="flex items-center justify-end space-x-3 pt-4 border-t border-gray-200">
                <a href="{{ route('lockers.index') }}" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                    Cancel
                </a>
                <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-plus mr-2"></i>
                    Create Locker
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Auto-select customer when status is occupied
document.getElementById('status').addEventListener('change', function() {
    const customerField = document.getElementById('customer_id');
    if (this.value === 'occupied') {
        customerField.setAttribute('required', 'required');
        customerField.classList.add('border-red-300');
    } else {
        customerField.removeAttribute('required');
        customerField.classList.remove('border-red-300');
        customerField.value = '';
    }
});
</script>
@endpush