<style>
    .add_btn {
        height: 30px; width: 30px; border-radius: 100%; padding: 0
    }
</style>
<form class="row g-3 auto-width" action="{{ route('bed-group.store') }}" method="post" enctype='multipart/form-data'
    id="source_form">
    @csrf
    {{-- Name --}}
    <div class="col-md-12">
        <label for="name" class="form-label">Name <span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control" id="name" name="name" aria-describedby="inputGroupPrepend"
            required>
        <span class="text-danger error_name" style="display:none;">This field is required.</span>
    </div>
    {{-- Color --}}
    <div class="col-md-6">
        <label for="color" class="form-label">Color </label>
        <input type="color" class="form-control" id="color" name="color" aria-describedby="inputGroupPrepend"
            required>
        <span class="text-danger error_color" style="display:none;">This field is required.</span>
    </div>
    {{-- <div class="col-md-5">
        <div>
            <label for="building_id" class="form-label">Building <span class="text-danger"><b>*</b></span></label>
        </div>
        <div class="input-group">
            <select id="building_id" class="single-select form-control" name="building_id">
                <option value="">Select Building</option>
                @foreach ($building as $building)
                    <option value="{{ $building->id }}">{{ $building->name }}</option>
                @endforeach
            </select>
            @if(in_array('building-create', $authRolePermissions))
            <div class="input-group-append" style="margin: auto 10px;">
                <button class="btn btn-success add_btn" id="create_building" type="button"> + </button>
            </div>
            @endif
        </div>
        <span class="text-danger error_building_id" style="display: none;">This field is required.</span>
    </div>
    <div class="col-md-5">
        <div>
            <label for="floor_id" class="form-label">Floor <span class="text-danger"><b>*</b></span></label>
        </div>
        <div class="input-group">
            <select id="floor_id" class="single-select form-control" name="floor_id">
                <option value="">Select Building First</option>
            </select>
        </div>
        <span class="text-danger error_floor_id" style="display: none;">This field is required.</span>
    </div> --}}
    {{-- Priority --}}
    <div class="col-md-6">
        <label for="priority" class="form-label">Priority </label>
        <input type="number" class="form-control" name="priority" aria-describedby="inputGroupPrepend" required value="{!! $priority + 1 !!}">
        <span class="text-danger error_priority" style="display:none;">This field is required.</span>
    </div>
    {{-- Description --}}
    <div class="col-md-12">
        <label for="description" class="form-label">Description</label>
        <textarea class="form-control" max=100 id="description" name="description"></textarea>
        <span class="text-danger description" style="display:none;">This field is required.</span>
    </div>
</form>
<script>
    // $(document).ready(function() {
    //     $('#building_id').change(function() {
    //         getFloors(); // Call the function when the "building" dropdown changes
    //     });

    //     function getFloors() {
    //         let building_id = $('#building_id').val();

    //         $.ajax({
    //             type: "POST",
    //             url: "{{ route('getFloor') }}", // Use the route function
    //             data: {
    //                 building_id: building_id
    //             },
    //             success: function(data) {
    //                 $('#floor_id').html(data);
    //             },
    //             error: function(data) {
    //                 console.log(data);
    //             }
    //         });
    //     }
    // });
</script>
