@include('layouts.header', ['title' => isset($amenity) ? 'Edit Amenity' : 'Add Amenity'])

<div class="wrapper">
    @include('layouts.navbar')
    @include('layouts.sidebar')

    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right"></div>
                        </div>
                    </div>
                </div>
                <form id="amenityForm"
                    action="{{ isset($amenity) ? route('admin.amenity.update', $amenity->id) : route('admin.amenity.store') }}"
                    method="POST" enctype="multipart/form-data">
                    @csrf
                    @if (isset($amenity))
                        @method('PUT')
                    @endif


                    <div class="row">
                        <div class="col-lg-9">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="page-title">{{ isset($amenity) ? 'Edit' : 'Add' }} Amenity</h4>

                                </div>
                                <div class="card-body form-horizontal-style-2">
                                    {{-- Name --}}
                                    {{-- Society --}}
                                    <div class="mb-3">
                                        <label class="form-label">Select Society <span
                                                class="text-danger">*</span></label>
                                        <select name="society_id" id="society_id" class="form-select select2" required>
                                            <option value="">Select Society</option>
                                            @foreach ($societyList as $society)
                                                <option value="{{ $society->id }}"
                                                    {{ old('society_id', $amenity->society_id ?? '') == $society->id ? 'selected' : '' }}>
                                                    {{ $society->society_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Location --}}
                                    <div class="mb-3">
                                        <label class="form-label">Select Location <span
                                                class="text-danger">*</span></label>
                                        <select name="location_id" id="location_id" class="form-select select2"
                                            required>
                                            <option value="">Select Location</option>
                                            @foreach ($locations as $location)
                                                <option value="{{ $location->id }}"
                                                    {{ old('location_id', $amenity->location_id ?? '') == $location->id ? 'selected' : '' }}>
                                                    {{ $location->location }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <hr>

                                    <div id="amenity-blocks-wrapper">
                                        @include('admin.amenities._amenity_block', ['index' => 0])
                                    </div>

                                    <div class="my-3 text-end">
                                        <button type="button" id="addBlockBtn" class="btn btn-outline-primary">+ Add
                                            More</button>
                                    </div>

                                     <div class="row">
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="file" class="form-label">Amenity File <span
                                                            class="text-danger">*</span></label>
                                                    <input type="file" id="file" name="file"
                                                        class="form-control @error('file') is-invalid @enderror">
                                                    @error('file')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror


                                                </div>
                                            </div>
                                        </div>


                                    <div class="card-footer border-top border-light">
                                        <button type="submit" id="submitBtn" class="btn btn-success me-2">
                                            {{ isset($amenity) ? 'Update' : 'Submit' }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        @include('layouts.footer')
    </div>
</div>

<template id="amenity-block-template">
    @include('admin.amenities._amenity_block', ['index' => '__INDEX__'])
</template>

<script src="{{ asset('assets/js/vendor.min.js') }}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="{{ asset('assets/js/app.min.js') }}"></script>
<script src="{{ asset('assets/vendor/select2/js/select2.min.js') }}"></script>


<script>
    $(document).ready(function() {
        @if ($errors->any())
            @foreach ($errors->all() as $error)
                toastr.error("{{ $error }}");
            @endforeach
        @endif

        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        @if (session('error'))
            toastr.error("{{ session('error') }}");
        @endif
    });
</script>

<script>
    let amenityIndex = 1;
    let buildingData = [];

    $(document).ready(function() {
        $('.select2').select2();

        const fetchBuildings = (locationId) => {
            return $.get('{{ route('admin.gets.buildings') }}', {
                location_id: locationId
            });
        };

        const populateBuildings = (block) => {
            let buildingSelect = block.find('.building-select');
            buildingSelect.html('<option value="">Select Building</option>');
            buildingData.forEach(function(building) {
                buildingSelect.append(
                    `<option value="${building.id}">${building.building_name}</option>`);
            });
        };


        $('#addBlockBtn').on('click', function() {
            if ($('#amenity-blocks-wrapper .amenity-block').length >= 3) {
                alert("You can only add 3 records: Balwadi, Welfare Centre, Society Office.");
                return;
            }

            let template = $('#amenity-block-template').html().replace(/__INDEX__/g, amenityIndex);
            $('#amenity-blocks-wrapper').append(template);
            $('.select2').select2();
            amenityIndex++;

            let newBlock = $('#amenity-blocks-wrapper .amenity-block').last();
            populateBuildings(newBlock);
        });

        $('#location_id').on('change', function() {
            const locationId = $(this).val();
            if (locationId) {
                fetchBuildings(locationId).then(function(data) {
                    buildingData = data;
                    $('#amenity-blocks-wrapper .amenity-block').each(function() {
                        populateBuildings($(this));
                    });
                });
            }
        });

        $(document).on('change', '.building-select', function() {
            const block = $(this).closest('.amenity-block');
            const buildingId = $(this).val();

            $.get('{{ route('admin.gets.wings') }}', {
                building_id: buildingId
            }, function(data) {
                const wingSelect = block.find('.wing-select');
                wingSelect.html('<option value="">Select Wing</option>');
                data.forEach(w => wingSelect.append(`<option value="${w}">${w}</option>`));
            });
        });

        $(document).on('change', '.building-select, .wing-select', function() {
            const block = $(this).closest('.amenity-block');
            const buildingId = block.find('.building-select').val();
            const wing = block.find('.wing-select').val();

            if (buildingId && wing) {
                $.get('{{ route('admin.gets.floors') }}', {
                    building_id: buildingId,
                    wing_name: wing
                }, function(data) {
                    const floorSelect = block.find('.floor-select');
                    floorSelect.html('<option value="">Select Floor</option>');
                    data.forEach(f => floorSelect.append(`<option value="${f}">${f}</option>`));
                });
            }
        });

        $(document).on('change', '.building-select, .wing-select, .floor-select', function() {
            const block = $(this).closest('.amenity-block');
            const buildingId = block.find('.building-select').val();
            const wing = block.find('.wing-select').val();
            const floor = block.find('.floor-select').val();

            if (buildingId && wing && floor) {
                $.get('{{ route('admin.gets.roomtypes') }}', {
                    building_id: buildingId,
                    wing_name: wing,
                    floor_no: floor
                }, function(data) {
                    const typeSelect = block.find('.room-type-select');
                    typeSelect.html('<option value="">Select Room Type</option>');

                    data.room_types.forEach(t => {
                        const roomTypeText = `${t.room_type_name} (${t.room_no})`;
                        typeSelect.append(
                            `<option value="${t.room_type_id}" data-room-id="${t.id}" data-room-no="${t.room_no}">${roomTypeText}</option>`
                        );
                    });

                    // Reset hidden fields
                    block.find('.room-id-hidden').val('');
                    block.find('.room-no-hidden').val('');
                });
            }
        });


        // Check for duplicate combinations in the same block when fields change
        $(document).on('change', '.building-select, .wing-select, .floor-select, .room-type-select',
            function() {
                const block = $(this).closest('.amenity-block');
                const buildingId = block.find('.building-select').val();
                const wing = block.find('.wing-select').val();
                const floor = block.find('.floor-select').val();
                const roomType = block.find('.room-type-select').val();

                // If all fields are selected, check for duplicates
                if (buildingId && wing && floor && roomType) {
                    const currentCombo = `${buildingId}-${wing}-${floor}-${roomType}`;
                    let duplicateFound = false;

                    // Check all blocks for duplicate combination
                    $('#amenity-blocks-wrapper .amenity-block').each(function() {
                        if ($(this).is(block)) return; // Skip the current block

                        const b = $(this).find('.building-select').val();
                        const w = $(this).find('.wing-select').val();
                        const f = $(this).find('.floor-select').val();
                        const r = $(this).find('.room-type-select').val();
                        const combo = `${b}-${w}-${f}-${r}`;

                        if (combo === currentCombo) {
                            duplicateFound = true;
                            return false; // Stop checking once we find a duplicate
                        }
                    });

                    if (duplicateFound) {
                        alert(
                            "This combination of building, wing, floor, and room type has already been selected in another block."
                        );
                        // Reset current selection in the block to force the user to choose a different combination
                        block.find('.building-select').val('');
                        block.find('.wing-select').val('');
                        block.find('.floor-select').val('');
                        block.find('.room-type-select').val('');
                    }
                }
            });
        // When user selects a room type, update hidden inputs with room_id and room_no
        // When a room type is selected, set the hidden fields
        $(document).on('change', '.room-type-select', function() {
            const selectedOption = $(this).find('option:selected');
            const block = $(this).closest('.amenity-block');

            const roomId = selectedOption.data('room-id');
            const roomNo = selectedOption.data('room-no');

            block.find('.room-id-hidden').val(roomId || '');
            block.find('.room-no-hidden').val(roomNo || '');
        });

        $(document).on('click', '.remove-block', function () {
    $(this).closest('.amenity-block').remove();
});


    });
</script>