@extends('layouts.app')

@section('title', 'Edit 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">Edit Locker</h1> -->
            <p class="mt-1 text-sm text-gray-600">Update locker information</p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('lockers.show', $locker) }}" 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 Details
            </a>
        </div>
    </div>

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

            <!-- 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', $locker->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', $locker->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', $locker->locker_size) == 'small' ? 'selected' : '' }}>Small</option>
                        <option value="medium" {{ old('locker_size', $locker->locker_size) == 'medium' ? 'selected' : '' }}>Medium</option>
                        <option value="large" {{ old('locker_size', $locker->locker_size) == 'large' ? 'selected' : '' }}>Large</option>
                        <option value="Extra_large" {{ old('locker_size', $locker->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', $locker->status) == 'available' ? 'selected' : '' }}>Available</option>
                        <option value="occupied" {{ old('status', $locker->status) == 'occupied' ? 'selected' : '' }}>Occupied</option>
                        <option value="maintenance" {{ old('status', $locker->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', $locker->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>

            <!-- Status Change Warning -->
            @if($locker->status === 'occupied' && old('status', $locker->status) !== 'occupied')
                <div class="bg-yellow-50 border border-yellow-200 rounded-md p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-yellow-800">Status Change Warning</h3>
                            <div class="mt-2 text-sm text-yellow-700">
                                <p>Changing this locker's status from "Occupied" will:</p>
                                <ul class="list-disc list-inside mt-1">
                                    <li>Clear the current customer assignment</li>
                                    <li>End any active registrations</li>
                                    <li>Make the locker available for new assignments</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Form Actions -->
            <div class="flex items-center justify-end space-x-3 pt-4 border-t border-gray-200">
                <a href="{{ route('lockers.show', $locker) }}" 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-save mr-2"></i>
                    Update Locker
                </button>
            </div>
        </form>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Quick Actions</h3>
        <div class="flex flex-wrap gap-3">
            @if($locker->status === 'available')
                <button onclick="showAssignModal()" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700">
                    <i class="fas fa-key mr-2"></i>
                    Assign to Customer
                </button>
            @endif

            @if($locker->status === 'occupied')
                <form method="POST" action="{{ route('lockers.release', $locker) }}" class="inline">
                    @csrf
                    @method('POST')
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-yellow-600 hover:bg-yellow-700">
                        <i class="fas fa-unlock mr-2"></i>
                        Release Locker
                    </button>
                </form>
            @endif

            @if($locker->status !== 'occupied')
                <form method="POST" action="{{ route('lockers.destroy', $locker) }}" class="inline" onsubmit="return confirm('Are you sure you want to delete this locker? This action cannot be undone.')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-red-300 rounded-md shadow-sm text-sm font-medium text-red-700 bg-white hover:bg-red-50">
                        <i class="fas fa-trash mr-2"></i>
                        Delete Locker
                    </button>
                </form>
            @endif
        </div>
    </div>
</div>

<!-- Assign Modal -->
@if($locker->status === 'available')
<div id="assignModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Assign Locker to Customer</h3>
            <form method="POST" action="{{ route('lockers.assign', $locker) }}">
                @csrf
                <div class="mb-4">
                    <label for="assign_customer_id" class="block text-sm font-medium text-gray-700 mb-2">
                        Select Customer
                    </label>
                    <select id="assign_customer_id" name="customer_id" required class="w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500">
                        <option value="">Choose a customer...</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-4">
                    <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">
                        Notes (Optional)
                    </label>
                    <textarea id="notes" name="notes" rows="3" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500"></textarea>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" onclick="hideAssignModal()" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        Cancel
                    </button>
                    <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">
                        Assign Locker
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@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');
        if (this.value === 'available') {
            customerField.value = '';
        }
    }
});

// Set initial state
document.addEventListener('DOMContentLoaded', function() {
    const statusField = document.getElementById('status');
    const customerField = document.getElementById('customer_id');
    
    if (statusField.value === 'occupied') {
        customerField.setAttribute('required', 'required');
        customerField.classList.add('border-red-300');
    }
});

function showAssignModal() {
    document.getElementById('assignModal').classList.remove('hidden');
}

function hideAssignModal() {
    document.getElementById('assignModal').classList.add('hidden');
}
</script>
@endpush