@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">

    <link rel="stylesheet" type="text/css" href="/app-assets/css/meeting-room.css">

    <!-- END: Page CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0FDP35gMH+270XZnpFK7/NWlTzoCi/JLk+0iigEtAzPGHykL+17gC+60YFbJ1Q=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
@endpush

@push('content-header')
@endpush

@section('content')
    <section class="container">
        {{-- <div class="row">
            <div class="col-md-12"> --}}
                <div class="card">
                    <div class="card-body">
                        <form method="GET" action="/member/{!! $alias !!}/meeting-room-booking">
                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <h5 class="card-title mb-0"><b>Book Meeting Rooms</b></h5>
                                </div>
                                <div class="col-md-2">
                                    <div class="">
                                        <select class="form-control" id="office-location" name="floor_id">
                                            <option value="">Select Floor</option>
                                            @foreach ($floors as $floor)
                                                <option value="{{ $floor->id }}"
                                                    {{ request('floor_id') == $floor->id ? 'selected' : '' }}>
                                                    {{ $floor->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="">
                                        <input type="date" class="form-control" id="date" name="date"
                                            value="{{ request('date') }}" min="{{ date('Y-m-d') }}">
                                    </div>
                                </div>
                                <div class="col-md-1 pl-0">
                                    <div class="">
                                        <button class="btn btn-primary" type="submit">Search</button>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                <p class="mb-0">
                                    <span class="mr-1"> <span class="book-dotsnew red"></span> Booked Slots</span>
                                      <span class="mr-1"> <span class="book-dotsnew"></span>  Selected</span>
                                      <span> <span class="book-dotsnew gray"></span>  Not Available</span>    
                                </p>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            {{-- </div>
        </div> --}}
        <div class="row mt-8">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-12">
                        @foreach ($meetingRooms as $key => $val)
                            <div class="card mb-3">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="card">
                                                <img src="{{ asset($val->image) }}" class="card-img-top"
                                                    alt="Meeting Room Image" style="height:150px"
                                                    onerror="this.onerror=null; this.src='/assets/img/farm.jpg';">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <h2><b>{{ ucFirst(@$val->name) }}</b></h2>
                                            <h4><b>Floor</b> : {{ ucFirst(@$val->floor->name) }}</h4>
                                            <h6>{{ @$val->capacity }} Seater<h6>
                                                    <h6 class="card-text">
                                                        <b>Amenities : </b>
                                                        @foreach ($val->features as $key => $val1)
                                                            {{ @$val1->name }},
                                                        @endforeach
                                                    </h6>
                                        </div>
                                    </div>
                                    <div class="row align-items-start">
                                        <div class="col-md-11">

                                            <div class="table-responsive">
                                                <table class="table time-slottable">
                                                    <thead>
                                                        
                                                        <tr>
                                                          <th class="active"> <span class="middle"></span> </th>
                                                          <th class="inactive" >  <span class="line"></span> </th>
                                                          <th class="new-select" > <span class="middle"></span> </th>
                                                          <th> <span class="line"></span> </th>
                                                          <th> <span class="middle"></span></th>
                                                          <th> <span class="line"></span> </th>
                                                          <th> <span class="middle"></span></th>
                                                          <th> <span class="line"></span> </th>
                                                          <th> <span class="middle"></span> </th>
                                                          <th> <span class="line"></span> </th>
                                                          <th> <span class="middle"></span> </th>
                                                          <th> <span class="line"></span> </th>
                                                          <th> <span class="middle"></span> </th>
                                                          <th> <span class="line"></span> </th>
                                                          <th> <span class="middle"></span> </th>
                                                          <th> <span class="line"></span> </th>
                                                          <th> <span class="middle"></span> </th>
                                                          <th> <span class="line"></span> </th>
                                                          <th> <span class="middle"></span> </th>
                                                          <th> <span class="line"></span> </th>
                                                          <th> <span class="middle"></span> </th>
                                                          <th> <span class="line lastline" ></span>  </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                          <td colspan="2" >9:00 am</td>
                                                          <td colspan="2" >10:00 am</td>
                                                          <td colspan="2" >11:00 am</td>
                                                          <td colspan="2" >12:00 pm</td>
                                                          <td colspan="2" >1:00 pm</td>
                                                          <td colspan="2" >2:00 pm</td>
                                                          <td colspan="2" >3:00 pm</td>
                                                          <td colspan="2" >4:00 pm</td>
                                                          <td colspan="2" >5:00 pm</td>
                                                          <td colspan="2" >6:00 pm</td>
                                                          <td colspan="2" >7:00 pm</td>
                                                        </tr>
                                                        
                                                        
                                                    </tbody>
                                                </table>
                                            </div>
                                            <!-- Error Message -->
                                            <div class="error-message" id="errorMessage">
                                                Please select continuous time slots.
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="form-group">
                                                <button class="btn btn-danger">Book</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>


    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
    <script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
    <!-- END: Page JS-->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });

        /* let firstSlot = null;
        let lastSlot = null;
        let errorMessage = document.getElementById('errorMessage');

        document.querySelectorAll('.time-slot').forEach(slot => {
            slot.addEventListener('click', function() {
                if (!this.classList.contains('booked')) {
                    errorMessage.style.display = 'none';  // Hide error message
                    if (!firstSlot) {
                        // First slot selected
                        firstSlot = this;
                        this.classList.add('selected');
                    } else if (!lastSlot) {
                        // Second slot selected
                        if (isSlotContinuous(this)) {
                            lastSlot = this;
                            selectSlotsInRange();
                        } else {
                            // Show error if not continuous
                            showError();
                            resetSelection();
                        }
                    }else {
                        // Reset selection if already two slots selected
                        resetSelection();
                        firstSlot = this;
                        this.classList.add('selected');
                    }
                }
            });
        });

        function isSlotContinuous(slot) {
            let slots = Array.from(document.querySelectorAll('.time-slot:not(.booked)'));
            let firstIndex = slots.indexOf(firstSlot);
            let currentIndex = slots.indexOf(slot);
            return Math.abs(currentIndex - firstIndex) === 1; // Check if the selected slot is adjacent
        }

        function selectSlotsInRange() {
            let slots = Array.from(document.querySelectorAll('.time-slot'));
            let startIndex = slots.indexOf(firstSlot);
            let endIndex = slots.indexOf(lastSlot);

            for (let i = Math.min(startIndex, endIndex); i <= Math.max(startIndex, endIndex); i++) {
                if (!slots[i].classList.contains('booked')) {
                    slots[i].classList.add('selected');
                }
            }
        }

        function resetSelection() {
            document.querySelectorAll('.time-slot.selected').forEach(slot => slot.classList.remove('selected'));
            firstSlot = null;
            lastSlot = null;
        } */

        /* function showError() {
            errorMessage.style.display = 'block';
        } */

        let firstSlot = null;
        let lastSlot = null;
        let selectedSlots = [];
        let errorMessage = document.getElementById('errorMessage');

        document.querySelectorAll('.time-slot').forEach(slot => {
            slot.addEventListener('click', function() {
                if (!this.classList.contains('booked')) {
                    errorMessage.style.display = 'none';

                    if (!firstSlot) {
                        firstSlot = this;
                        this.classList.add('selected');
                        selectedSlots.push(this);
                    } else if (selectedSlots.length < 11 && isSlotContinuous(this)) {
                        lastSlot = this;
                        selectSlotsInRange();
                    } else if (selectedSlots.length >= 11 || !isSlotContinuous(this)) {
                        showError();
                        resetSelection();
                    }
                }
            });
        });

        function selectSlotsInRange() {
            const startIndex = Array.from(document.querySelectorAll('.time-slot')).indexOf(firstSlot);
            const endIndex = Array.from(document.querySelectorAll('.time-slot')).indexOf(lastSlot);

            for (let i = Math.min(startIndex, endIndex); i <= Math.max(startIndex, endIndex); i++) {
                let slot = document.querySelectorAll('.time-slot')[i];
                if (!slot.classList.contains('selected') && selectedSlots.length < 11) {
                    slot.classList.add('selected');
                    selectedSlots.push(slot);
                }
            }
        }

        function resetSelection() {
            selectedSlots.forEach(slot => {
                slot.classList.remove('selected');
            });
            selectedSlots = [];
            firstSlot = null;
            lastSlot = null;
        }

        function isSlotContinuous(slot) {
            if (!firstSlot) return true;

            const firstIndex = Array.from(document.querySelectorAll('.time-slot')).indexOf(firstSlot);
            const currentIndex = Array.from(document.querySelectorAll('.time-slot')).indexOf(slot);

            return Math.abs(currentIndex - firstIndex) <= 10;
        }

        function showError() {
            errorMessage.style.display = 'block';
        }
    </script>
@endpush