@extends('adminlte::page')

@section('title', 'Add Facility')

@section('content_header')
    <h1>Add Facility</h1>
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('benefits.store') }}" method="POST">
                @csrf

                <div class="form-group">
                    <label for="facility_name">Facility Name</label>
                    <input type="text" name="facility_name" id="facility_name" class="form-control @error('facility_name') is-invalid @enderror" value="{{ old('facility_icon') }}" required>
                    @error('facility_name')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="description">Facility Description</label>
                    <input type="text" name="description" id="description" class="form-control @error('description') is-invalid @enderror" value="{{ old('facility_icon') }}" required>
                    @error('description')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="facility_icon">Facility Icon</label>
                    <a href="https://fontawesome.com/icons" target="_blank" class="ms-2" data-bs-toggle="tooltip" title="Enter a FontAwesome icon class (e.g., 'fas fa-home'). Click here to search for icons.">
                        <i class="fas fa-question-circle" style="cursor: pointer;"></i>
                    </a>
                    <div class="d-flex align-items-center">
                        <input type="text" name="facility_icon" id="facility_icon" 
                            class="form-control @error('facility_icon') is-invalid @enderror" 
                            value="{{ old('facility_icon') }}" required>
                    </div>
                    @error('facility_icon')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                </div>


                <div class="form-group">
                    <button type="submit" class="btn btn-primary"> <i class="fas fa-save"></i> Save Facility</button>
                    <a href="{{ route('mas_facility.index') }}" class="btn btn-secondary"><i class="fas fa-undo"></i> Cancel</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('adminlte_js')
    <!-- Ensure jQuery is included -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // Listen for changes in the Property dropdown
            $('#property_id').change(function() {
                var propertyId = $(this).val();

                // If a property is selected
                if(propertyId) {
                    // AJAX request to get rooms for the selected property
                    $.ajax({
                        url: '/get-rooms/' + propertyId,  // Route to fetch rooms
                        type: 'GET',
                        success: function(data) {
                            // Clear previous room options
                            $('#room_id').empty();

                            // Add default option
                            $('#room_id').append('<option value="" disabled selected>Select a Room</option>');

                            // Add new room options from the response
                            $.each(data, function(key, room) {
                                $('#room_id').append('<option value="' + room.id + '">' + room.room_name + '</option>');
                            });
                        },
                        error: function() {
                            alert("Error loading rooms.");
                        }
                    });
                }
                else {
                    // If no property is selected, clear the room dropdown
                    $('#room_id').empty();
                    $('#room_id').append('<option value="" disabled selected>Select a Room</option>');
                }
            });
        });
    </script>
@endsection