@extends('backend.layouts.app')

@section('title')
    Edit Room - Hotel Management System
@endsection

@section('content')
    <!-- Breadcrumb -->
    <div class="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center text-sm text-gray-600">
                <i class="fas fa-home mr-2"></i>
                <span>/ <a href="{{ route('rooms.index') }}" class="text-blue-600 hover:text-blue-800">Manage Rooms</a> / Edit Room</span>
            </div>
            <a href="{{ route('rooms.index') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Back to List
            </a>
        </div>
    </div>

    <!-- Content -->
    <div class="p-6">
        <div class="mx-auto">
            <div class="bg-white rounded-lg shadow-md">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-xl font-semibold text-gray-800">Edit Room - {{ $room->room_no }}</h2>
                </div>

                <form action="{{ route('rooms.update', $room) }}" method="POST" class="p-6">
                    @csrf
                    @method('PUT')

                    @if($errors->any())
                        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                            <ul class="list-disc list-inside">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Room Type -->
                        <div class="">
                            <label for="room_type_id" class="block text-sm font-medium text-gray-700 mb-2">
                                Room Type <span class="text-red-500">*</span>
                            </label>
                            <select id="room_type_id"
                                    name="room_type_id"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('room_type_id') border-red-500 @enderror"
                                    required>
                                <option value="">Select Room Type</option>
                                @foreach($roomTypes as $roomType)
                                    <option value="{{ $roomType->room_type_id }}" {{ old('room_type_id', $room->room_type_id) == $roomType->room_type_id ? 'selected' : '' }}>
                                        {{ $roomType->room_type }} - KES {{ number_format($roomType->price, 2) }}/night
                                    </option>
                                @endforeach
                            </select>
                            @error('room_type_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Bathroom Type -->
                        <div>
                            <label for="bathroom_type" class="block text-sm font-medium text-gray-700 mb-2">
                                Bathroom Type <span class="text-red-500">*</span>
                            </label>
                            <select id="bathroom_type"
                                    name="bathroom_type"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('bathroom_type') border-red-500 @enderror"
                                    required>
                                <option value="">Select Bathroom Type</option>
                                <option value="Private Bathroom" {{ old('bathroom_type', $room->bathroom_type) == 'Private Bathroom' ? 'selected' : '' }}>Private Bathroom</option>
                                <option value="Shared Bathroom" {{ old('bathroom_type', $room->bathroom_type) == 'Shared Bathroom' ? 'selected' : '' }}>Shared Bathroom</option>
                            </select>
                            @error('bathroom_type')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Room Number -->
                        <div>
                            <label for="room_no" class="block text-sm font-medium text-gray-700 mb-2">
                                Room No <span class="text-red-500">*</span>
                            </label>
                            <input type="text"
                                   id="room_no"
                                   name="room_no"
                                   value="{{ old('room_no', $room->room_no) }}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('room_no') border-red-500 @enderror"
                                   placeholder="e.g., A-101, B-205"
                                   required>
                            @error('room_no')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Floor -->
                        <div>
                            <label for="floor" class="block text-sm font-medium text-gray-700 mb-2">
                                Floor
                            </label>
                            <input type="text"
                                   id="floor"
                                   name="floor"
                                   value="{{ old('floor', $room->floor) }}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('floor') border-red-500 @enderror"
                                   placeholder="e.g., 1st Floor, Ground">
                            @error('floor')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Capacity -->
                        <div>
                            <label for="capacity" class="block text-sm font-medium text-gray-700 mb-2">
                                Capacity
                            </label>
                            <select id="capacity"
                                    name="capacity"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('capacity') border-red-500 @enderror">
                                <option value="1" {{ old('capacity', $room->capacity) == '1' ? 'selected' : '' }}>1 Person</option>
                                <option value="2" {{ old('capacity', $room->capacity) == '2' ? 'selected' : '' }}>2 Persons</option>
                                <option value="3" {{ old('capacity', $room->capacity) == '3' ? 'selected' : '' }}>3 Persons</option>
                                <option value="4" {{ old('capacity', $room->capacity) == '4' ? 'selected' : '' }}>4 Persons</option>
                                <option value="5" {{ old('capacity', $room->capacity) == '5' ? 'selected' : '' }}>5 Persons</option>
                                <option value="6+" {{ old('capacity', $room->capacity) == '5+' ? 'selected' : '' }}>5+ Persons</option>
                            </select>
                            @error('capacity')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Room Status -->
                        <div>
                            <label for="room_status" class="block text-sm font-medium text-gray-700 mb-2">
                                Room Status <span class="text-red-500">*</span>
                            </label>
                            <select id="room_status"
                                    name="room_status"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('room_status') border-red-500 @enderror"
                                    required>
                                <option value="Available" {{ old('room_status', $room->room_status) == 'Available' ? 'selected' : '' }}>Available</option>
                                <option value="Maintenance" {{ old('room_status', $room->room_status) == 'Maintenance' ? 'selected' : '' }}>Maintenance</option>
                                <option value="Booked" {{ old('room_status', $room->room_status) == 'Booked' ? 'selected' : '' }}>Booked</option>
                                <option value="Occupied" {{ old('room_status', $room->room_status) == 'Occupied' ? 'selected' : '' }}>Occupied</option>
                            </select>
                            @error('room_status')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Price per Night -->
                        <div>
                            <label for="price_per_night" class="block text-sm font-medium text-gray-700 mb-2">
                                Price per Night (KES)
                            </label>
                            <input type="number"
                                   id="price_per_night"
                                   name="price_per_night"
                                   value="{{ old('price_per_night', $room->price_per_night) }}"
                                   step="0.01"
                                   min="0"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('price_per_night') border-red-500 @enderror"
                                   placeholder="e.g., 150.00">
                            @error('price_per_night')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                            <p class="mt-1 text-sm text-gray-500">Leave empty to use room type default price</p>
                        </div>

                        <!-- Amenities -->
                        <div class="">
                            <label for="amenities" class="block text-sm font-medium text-gray-700 mb-2">
                                Amenities
                            </label>
                            <textarea id="amenities"
                                      name="amenities"
                                      rows="3"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('amenities') border-red-500 @enderror"
                                      placeholder="e.g., AC, TV, WiFi, Mini Bar, Balcony">{{ old('amenities', $room->amenities) }}</textarea>
                            @error('amenities')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div class="">
                            <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                                Description
                            </label>
                            <textarea id="description"
                                      name="description"
                                      rows="3"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('description') border-red-500 @enderror"
                                      placeholder="Room description, special features, etc.">{{ old('description', $room->description) }}</textarea>
                            @error('description')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="flex items-center justify-end space-x-3 mt-8 pt-6 border-t border-gray-200">
                        <a href="{{ route('rooms.index') }}"
                           class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg transition-colors">
                            Cancel
                        </a>
                        <button type="submit"
                                class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors">
                            <i class="fas fa-save mr-2"></i>Update Room
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
