@extends('layouts.authUser')

@section('content')
<h2>Tempahan / Senarai pesanan peralatan makmal</h2>

@auth
@if (auth()->user()->role == 'Guru') 
<div class="alert alert-warning alert-dismissible fade show" role="alert" id="bookingNotice">
    <strong>Makluman:</strong> Tiada perubahan pesanan yang boleh dibuat selepas 'Status pesanan' adalah Terima. Sekiranya terdapat sebarang perubahan, sila hubungi Pembantu Makmal yang bertugas.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@endauth 

<div class="table-responsive mt-3">
    <a href="{{ route('ManageBookingItem.BookingItemList.ExportBookingItems') }}" class="btn btn-exportExcel">
        <span class="icon-exportExcel">
            <i class="bx bx-export"></i>
        </span>
        <span class="btn-exportExcelText">Eksport ke Excel</span>
    </a>

    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
        <input type="radio" class="btn-check" name="btnradio" id="btnradioAllStatus" autocomplete="off" checked>
        <label class="btn btn-outline-custom" for="btnradioAllStatus">Semua status</label>

        <input type="radio" class="btn-check" name="btnradio" id="btnradioPendingStatus" autocomplete="off">
        <label class="btn btn-outline-custom" for="btnradioPendingStatus">Dalam proses</label>

        <input type="radio" class="btn-check" name="btnradio" id="btnradioAcceptStatus" autocomplete="off">
        <label class="btn btn-outline-custom" for="btnradioAcceptStatus">Terima</label>

        <input type="radio" class="btn-check" name="btnradio" id="btnradioRejectStatus" autocomplete="off">
        <label class="btn btn-outline-custom" for="btnradioRejectStatus">Tolak</label>
    </div>

    <div class="search">
        <input type="search" name="search" class="form-control" id="Search" placeholder="Carian...">
        <span class="icon-search">
            <i class="bx bx-search"></i>
        </span>
    </div>

    <table class="table table-striped table-bordered table-sm mt-3">
        <thead>
            <tr>
                <th style="width: 1%; text-align:center;">No.</th> 
                <th style="width: 12%">Tarikh & masa pesanan</th>
                <th style="width: 3%">Kelas</th>
                <th style="width: 8%">Bilik makmal</th>
                <th style="width: 15%">Tajuk eksperimen</th> 
                @auth
                @if (auth()->user()->role == 'Guru') 
                    <th style="width: 6%; text-align:center;">Status pesanan</th>     
                    <th style="width: 5%; text-align:center;">Status pemulangan</th>  
                @elseif (auth()->user()->role == 'Pembantu makmal')  
                    <th style="width: 5%; text-align:center;">Status pesanan</th>
                    <th style="width: 5%; text-align:center;">Semak pesanan</th>
                    <th style="width: 1%; text-align:center;">Tindakan</th>
                @endif
                @endauth  
                    
            </tr>   
        </thead>

        <tbody class="alldata">
            @if($bookingItems->isEmpty())
                <tr>
                    <td colspan="8" class="text-center">Tiada data dalam rekod</td>
                </tr>
            @else
            @foreach($bookingItems as $index => $bookingItem)
            <tr data-status="{{ $bookingItem->booking_status }}"> 
                <td style="text-align:center;">{{ ($bookingItems->currentPage() - 1) * $bookingItems->perPage() + $index + 1 }}</td>
                <td class="search1">
                    <a href="#" data-bs-toggle="modal" data-bs-target="#bookingItemModal-{{ $bookingItem->id }}">
                        {{ \Carbon\Carbon::parse($bookingItem->booking_date)->format('d-m-Y') }} <br>
                        [ {{ \Carbon\Carbon::parse($bookingItem->booking_startTime)->format('g:i A') }}  -  {{ \Carbon\Carbon::parse($bookingItem->booking_endTime)->format('g:i A') }} ]
                    </a>         
                </td>
                <td class="search2">{{$bookingItem->classroom}}</td>
                <td class="search3">{{$bookingItem->location}}</td>
                <td class="search4">{{$bookingItem->experimentTitle}}</td>
                <td class="search5" style="text-align:center;">
                    @auth
                        @if (auth()->user()->role == 'Guru') 
                            @if ($bookingItem->booking_status == 'Terima')
                                <span class="text-success"><b>{{ $bookingItem->booking_status }}</b></span>
                            @elseif ($bookingItem->booking_status == 'Dalam proses')
                                <span class="text-yellow"><b>{{ $bookingItem->booking_status }}</b></span>
                            @elseif ($bookingItem->booking_status == 'Tolak')
                                <span class="text-danger"><b>{{ $bookingItem->booking_status }}</b></span>
                            @endif
                            
                            @if($bookingItem->booking_status === 'Dalam proses')
                                <a href="{{ route('ManageBookingItem.EditBookingItem', $bookingItem->id) }}" class="btn btn-link text-primary">
                                    <i class='icon-edit bx bx-edit'></i>
                                </a>
                                <button type="button" class="btn btn-link text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal-{{ $bookingItem->id }}">
                                    <i class='icon-trash bx bxs-trash'></i>
                                </button>
                            @endif
                        @elseif (auth()->user()->role == 'Pembantu makmal')
                            {{$bookingItem->booking_status}} 
                        @endif
                    @endauth
                </td>              
                <td class="centered">     
                @auth
                @if (auth()->user()->role == 'Guru') 

                    <!-- Button trigger modal -->
                    <div class="col-Tindakan" data-booking-id="{{ $bookingItem->id }}">
                    <div class="btn-group" data-booking-id="{{ $bookingItem->id }}">
                    @if ($bookingItem->bookingAction_status == "Kerosakan")
                        <span class="text-danger"><b>Kerosakan</b></span>
                    @elseif ($bookingItem->bookingAction_status == "Telah dipulang")
                        <span>Telah dipulang</span>
                    @else
                        @if($bookingItem->booking_status === 'Terima')
                            
                                <button type="button" class="btn btn-dark btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                    - Sila pilih
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="#" id="selesai-pulang" data-booking-id="{{ $bookingItem->id }}">Telah dipulang</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{{ route('ManageItemDamaged.AddItemDamaged', $bookingItem->id) }}">Kerosakan</a>
                                    </li>                      
                                </ul>
                            
                        @else
                            <button type="button" class="btn btn-secondary btn-sm" disabled>
                                - Sila pilih
                            </button>
                        @endif
                    @endif
                    </div>
                        <!-- Success message -->
                        <span class="success-message text-success" data-booking-id="{{ $bookingItem->id }}" style="display: none;"><b>Telah dipulang</b></span>
                        </div>
                        

                    @elseif (auth()->user()->role == 'Pembantu makmal')
                    <!-- Button trigger modal -->
                    <div class="col-Tindakan">
                        @if ($bookingItem->booking_status === 'Dalam proses')
                            <button type="button" class="btn btn-link text-danger" data-bs-toggle="modal" data-bs-target="#declineModal-{{ $bookingItem->id }}">
                                <i class='icon-decline bx bx-x'></i> <br>  
                                <label>Tolak</label>                      
                            </button>
                            <button type="button" class="btn btn-link text-success" data-bs-toggle="modal" data-bs-target="#acceptModal-{{ $bookingItem->id }}">
                                <i class='icon-accept bx bx-check'></i> <br>
                                <label>Terima</label>                          
                            </button>
                        @elseif ($bookingItem->booking_status === 'Terima')  
                            <span class="text-success"><b>Status: Terima</b></span>
                        @elseif ($bookingItem->booking_status === 'Tolak')
                            <span class="text-danger"><b>Status: Tolak</b></span>
                        @endif
                    </div>
                </td> 
                <td>
                    <!-- Button trigger modal -->
                    <div class="col-Tindakan">
                        @if($bookingItem->booking_status === 'Terima' && $bookingItem->bookingAction_status === null)
                            <!-- Show edit and delete buttons if booking_status is 'Terima' and bookingAction_status is null -->
                            <a href="{{ route('ManageBookingItem.EditBookingItem', $bookingItem->id) }}" class="btn btn-link text-primary">
                                <i class='icon-edit bx bx-edit'></i>
                            </a>
                            <button type="button" class="btn btn-link text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal-{{ $bookingItem->id }}">
                                <i class='icon-trash bx bxs-trash'></i>
                            </button>
                        @else
                            <!-- Disable buttons if booking_status is not 'Terima' or bookingAction_status is not null -->
                            <a href="#" class="btn btn-link text-secondary disabled" tabindex="-1" aria-disabled="true">
                                <i class='icon-edit bx bx-edit'></i>
                            </a>
                            <button type="button" class="btn btn-link text-secondary disabled" tabindex="-1" aria-disabled="true">
                                <i class='icon-trash bx bxs-trash'></i>
                            </button>
                        @endif
                    </div>
                </td>
                @endif
                @endauth 
            </tr>

            <!-- Item Order Modal -->
            <div class="modal fade" id="bookingItemModal-{{ $bookingItem->id }}" tabindex="-1" aria-labelledby="bookingItemModalLabel-{{ $bookingItem->id }}" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="bookingItemModalLabel-{{ $bookingItem->id }}"><b>Butiran pesanan peralatan makmal</b></h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row mb-2">
                                <div class="col">
                                    <b>Nama pemohon:</b> {{ $bookingItem->user->name }}
                                </div>
                                <div class="col">
                                    <b>Masa mula:</b> {{ \Carbon\Carbon::parse($bookingItem->booking_startTime)->format('g:i A') }} 
                                </div>
                            </div> 
                            <div class="row mb-2">
                                <div class="col">
                                    <b>Tarikh meminjam:</b> {{ \Carbon\Carbon::parse($bookingItem->booking_date)->format('d-m-Y') }} 
                                </div>
                                <div class="col">
                                    <b>Masa tamat:</b> {{ \Carbon\Carbon::parse($bookingItem->booking_endTime)->format('g:i A') }}
                                </div>
                            </div> 
                            <div class="row mb-2">
                                <div class="col">
                                    <div class="mb-2"><b>Kelas:</b> {{ $bookingItem->classroom }} </div>
                                    <div class="mb-2"><b>Tajuk eksperimen:</b> {{ $bookingItem->experimentTitle }} </div>
                                    <div class="mb-2"><b>Bilik makmal:</b> {{ $bookingItem->location }} </div>
                                    <div class="mb-2"><b>Status pinjaman:</b> {{ $bookingItem->booking_status }} </div>
                                    <div class="mb-2"><b>Catatan:</b> {{ $bookingItem->booking_desc ?: 'Tiada' }} </div>   
                                </div>
                            </div>
                            <hr>
                            <h5><b>Peralatan makmal yang diminta:</b></h5>
                                <div class="row">
                                @foreach ($bookingItem->bookingItem as $item) 
                                <div class="col-md-4 mb-3"> 
                                    @if ($item->item) 
                                    <div class="card">
                                        @if($item->item->item_image)
                                            <img src="{{ asset($item->item->item_image) }}" alt="{{ $item->item->item_name }}" class="card-img-top" style="height:90px; object-fit: contain; width: 100%;">
                                        @else
                                        <div class="card-img-top" style="height:90px; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0;">
                                            <span>Tiada Gambar Alat Radas</span>
                                        </div>
                                        @endif
                                        <div class="card-body">
                                            <h5 class="card-title text-center">
                                                @if($item->item_measurement === null)
                                                    {{$item->item_name}}
                                                @else
                                                    {{$item->item_name}} <br> [{{$item->item_measurement}}]
                                                @endif                                 
                                            </h5>
                                            <p class="card-text text-center"><b>Kuantiti Pinjam:</b> {{ $item->bookingItem_quantity }}</p>
                                        </div>
                                    </div>
                                    @else
                                    <div class="alert alert-warning" role="alert">
                                        <b>Nama Alat Radas:</b> Alat radas tiada
                                    </div>
                                    @endif
                                </div>
                                @endforeach
                                </div>    
                        </div>
                    </div>
                </div>
            </div>

            <!-- Decline Booking Confirmation Modal -->
            <div class="modal fade" id="declineModal-{{ $bookingItem->id }}" tabindex="-1" aria-labelledby="declineModalLabel-{{ $bookingItem->id }}" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="declineModalLabel-{{ $bookingItem->id }}">Tolak pesanan peralatan makmal</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row mb-2">
                                <div class="col">
                                    <b>Nama pemohon:</b> {{ $bookingItem->user->name }}
                                </div>
                                <div class="col">
                                    <b>Masa mula:</b> {{ \Carbon\Carbon::parse($bookingItem->booking_startTime)->format('g:i A') }} 
                                </div>
                            </div> 
                            <div class="row mb-2">
                                <div class="col">
                                    <b>Tarikh meminjam:</b> {{ \Carbon\Carbon::parse($bookingItem->booking_date)->format('d-m-Y') }}  
                                </div>
                                <div class="col">
                                    <b>Masa tamat:</b> {{ \Carbon\Carbon::parse($bookingItem->booking_endTime)->format('g:i A') }}
                                </div>
                            </div> 
                            <div class="row mb-2">
                                <div class="col">
                                    <div class="mb-2"><b>Kelas:</b> {{ $bookingItem->classroom }} </div>
                                    <div class="mb-2"><b>Tajuk eksperimen:</b> {{ $bookingItem->experimentTitle }} </div>
                                    <div class="mb-2"><b>Bilik makmal:</b> {{ $bookingItem->location }} </div>
                                    <div class="mb-2"><b>Status pinjaman:</b> {{ $bookingItem->booking_status }} </div>
                                </div>
                            </div>
                            <hr>
                            <h5><b>Peralatan makmal yang diminta:</b></h5>
                            <div class="row">
                                @foreach ($bookingItem->bookingItem as $item) 
                                <div class="col-md-4 mb-3"> 
                                    @if ($item->item) 
                                    <div class="card">
                                        @if($item->item->item_image)
                                            <img src="{{ asset($item->item->item_image) }}" alt="{{ $item->item->item_name }}" class="card-img-top" style="height:90px; object-fit: contain; width: 100%;">
                                        @else
                                        <div class="card-img-top" style="height:90px; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0;">
                                            <span>Tiada Gambar Alat Radas</span>
                                        </div>
                                        @endif
                                        <div class="card-body">
                                            <h5 class="card-title text-center">
                                                @if($item->item_measurement === null)
                                                    {{$item->item_name}}
                                                @else
                                                    {{$item->item_name}} <br> [{{$item->item_measurement}}]
                                                @endif
                                            </h5>
                                            <p class="card-text text-center"><b>Kuantiti Pinjam:</b> {{ $item->bookingItem_quantity }}</p>
                                        </div>
                                    </div>
                                    @else
                                    <div class="alert alert-warning" role="alert">
                                        <b>Nama Alat Radas:</b> Alat radas tiada
                                    </div>
                                    @endif
                                </div>
                                @endforeach
                            </div>

                            <form id="decline-form-{{ $bookingItem->id }}" action="{{ route('ManageBookingItem.DeclineBookingItem') }}" method="POST">
                                @csrf
                                <input type="hidden" name="bookingItem" value="{{ $bookingItem->id }}">
                                <div class="form-group">
                                    <label for="booking_desc"><b>Catatan:</b></label>
                                    <textarea id="booking_desc" name="booking_desc" class="form-control" rows="3" placeholder="Masukkan catatan di sini..." style="border: 1px solid #616569; border-radius: 5px;"></textarea>
                                </div> 
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                    <button type="submit" class="btn btn-danger">Tolak</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Accept Booking Confirmation Modal -->
            <div class="modal fade" id="acceptModal-{{ $bookingItem->id }}" tabindex="-1" aria-labelledby="acceptModalLabel-{{ $bookingItem->id }}" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="acceptModalLabel-{{ $bookingItem->id }}">Terima pesanan peralatan makmal</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row mb-2">
                                <div class="col">
                                    <b>Nama pemohon:</b> {{ $bookingItem->user->name }}
                                </div>
                                <div class="col">
                                    <b>Masa mula:</b> {{ \Carbon\Carbon::parse($bookingItem->booking_startTime)->format('g:i A') }} 
                                </div>
                            </div> 
                            <div class="row mb-2">
                                <div class="col">
                                    <b>Tarikh meminjam:</b> {{ \Carbon\Carbon::parse($bookingItem->booking_date)->format('d-m-Y') }} 
                                </div>
                                <div class="col">
                                    <b>Masa tamat:</b> {{ \Carbon\Carbon::parse($bookingItem->booking_endTime)->format('g:i A') }}
                                </div>
                            </div> 
                            <div class="row mb-2">
                                <div class="col">
                                    <div class="mb-2"><b>Kelas:</b> {{ $bookingItem->classroom }} </div>
                                    <div class="mb-2"><b>Tajuk eksperimen:</b> {{ $bookingItem->experimentTitle }} </div>
                                    <div class="mb-2"><b>Bilik makmal:</b> {{ $bookingItem->location }} </div>
                                    <div class="mb-2"><b>Status Pinjaman:</b> {{ $bookingItem->booking_status }} </div>
                                </div>
                            </div>
                            <hr>
                            <h5><b>Peralatan makmal yang diminta:</b></h5>
                            <div class="row">
                                @foreach ($bookingItem->bookingItem as $item) 
                                <div class="col-md-4 mb-3"> 
                                    @if ($item->item) 
                                    <div class="card">
                                        @if($item->item->item_image)
                                            <img src="{{ asset($item->item->item_image) }}" alt="{{ $item->item->item_name }}" class="card-img-top" style="height:90px; object-fit: contain; width: 100%;">
                                        @else
                                        <div class="card-img-top" style="height:90px; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0;">
                                            <span>Tiada Gambar Alat Radas</span>
                                        </div>
                                        @endif
                                        <div class="card-body">
                                            <h5 class="card-title text-center">
                                                @if($item->item_measurement === null)
                                                    {{$item->item_name}}
                                                @else
                                                    {{$item->item_name}} <br> [{{$item->item_measurement}}]
                                                @endif
                                            </h5>
                                            <p class="card-text text-center"><b>Kuantiti Pinjam:</b> {{ $item->bookingItem_quantity }}</p>
                                        </div>
                                    </div>
                                    @else
                                    <div class="alert alert-warning" role="alert">
                                        <b>Nama Alat Radas:</b> Alat radas tiada
                                    </div>
                                    @endif
                                </div>
                                @endforeach
                            </div>

                            <form id="accept-form-{{ $bookingItem->id }}" action="{{ route('ManageBookingItem.AcceptBookingItem') }}" method="POST">
                                @csrf
                                <input type="hidden" name="bookingItem" value="{{ $bookingItem->id }}">
                                <div class="form-group">
                                    <label for="booking_desc"><b>Catatan:</b></label>
                                    <textarea id="booking_desc" name="booking_desc" class="form-control" rows="3" placeholder="Masukkan catatan di sini..." style="border: 1px solid #616569; border-radius: 5px;"></textarea>
                                </div> 
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                    <button type="submit" class="btn btn-success">Terima</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Delete confirmation Modal -->
            <div class="modal fade" id="deleteModal-{{ $bookingItem->id }}" tabindex="-1" aria-labelledby="deleteModalLabel-{{ $bookingItem->id }}" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h1 class="modal-title fs-5" id="deleteModalLabel-{{ $bookingItem->id }}">Kepastian Pemadaman</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    Anda pasti untuk memadam data pesanan peralatan makmal?
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <form id="delete-form-{{ $bookingItem->id }}"
                        action="{{ route('ManageBookingItem.DeleteBookingItem') }}"
                        method="POST">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" name="bookingItem" value="{{ $bookingItem->id }}">
                        <button type="submit" class="btn btn-danger">Padam</button>
                    </form>
                  </div>
                </div>
              </div>
            </div>

            @endforeach
            @endif
        </tbody> 
    
        <!-- No Records Row -->
        <tr id="no-records-row" style="display: none;">
            <td colspan="8" class="text-center py-2">Tiada data dalam rekod</td>
         </tr>
    </table>
    <div id="custom-pagination" class="pagination d-flex flex-row-reverse"> 
        {{ $bookingItems->links() }}
    </div> 
</div>
<div id="alert-message">
    @if (session('failure'))
        <div class="alert alert-danger">
            {{ session('failure') }}
        </div>
    @endif <!--Red pop up message-->

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif <!--Green pop up message-->
</div>

<script>
    // Hide alert message after 5 seconds if it exists
setTimeout(function() {
    const alertMessage = document.getElementById("alert-message");
    if (alertMessage) {
        alertMessage.style.display = "none";
    }
}, 5000);
</script>

<script>
    function showNotice() {
        let notice = document.getElementById('bookingNotice');
        notice.classList.add('show');
    }

    function hideNotice() {
        let notice = document.getElementById('bookingNotice');
        notice.classList.remove('show');
    }

    // Example: show the notice on page load
    window.onload = function() {
        showNotice();
    };
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const radioButtons = document.querySelectorAll('input[name="btnradio"]');
        const rows = document.querySelectorAll('.alldata tr');
        const noRecordsRow = document.getElementById('no-records-row');

        radioButtons.forEach(radio => {
            radio.addEventListener('change', function() {
                const selectedStatus = this.nextElementSibling.textContent.trim(); // Get the label text
                let hasVisibleRows = false; // Flag to check if there are visible rows

                rows.forEach(row => {
                    // Skip the "No Records" row
                    if (row.id === 'no-records-row') return;

                    const rowStatus = row.getAttribute('data-status');

                    if (selectedStatus === 'Semua status') {
                        row.style.display = ''; // Show all rows
                        hasVisibleRows = true; // Set flag to true since we are showing all rows
                    } else if (rowStatus === selectedStatus) {
                        row.style.display = ''; // Show the row if it matches the selected status
                        hasVisibleRows = true; // Set flag to true if a row is visible
                    } else {
                        row.style.display = 'none'; // Hide the row if it doesn't match
                    }
                });

                // Show or hide the "No Records" row based on visible rows
                if (!hasVisibleRows) {
                    noRecordsRow.style.display = ''; // Show the "No Records" row
                } else {
                    noRecordsRow.style.display = 'none'; // Hide the "No Records" row
                }
            });
        });
    });
</script>

<script>
$(document).ready(function() {
    // Handle dropdown item clicks
    $('.btn-group').on('click', '.dropdown-item', function(e) {
        var bookingId = $(this).data('booking-id'); // Get the booking ID

        // Check if the clicked item is 'Telah dipulang'
        if ($(this).attr('id') === 'selesai-pulang') {
            e.preventDefault(); // Prevent the default anchor behavior
            console.log('Telah dipulang clicked for booking ID:', bookingId); // Debug log

            // Send an AJAX request to update the status
            $.ajax({
                url: '/update-bookingAction-status', // Update this to your route
                method: 'POST',
                data: {
                    id: bookingId,
                    bookingAction_status: 'Telah dipulang', // Ensure this matches the controller
                    _token: '{{ csrf_token() }}' // Include CSRF token for security
                },
                success: function(response) {
                    console.log('AJAX request successful:', response); // Log the response
                    // Hide the button group
                    $('.btn-group').filter(function() {
                        return $(this).find('.dropdown-item[data-booking-id="' + bookingId + '"]').length;
                    }).hide();
                    
                    // Show the success message
                    $('.success-message[data-booking-id="' + bookingId + '"]').show();
                    
                    // Store the booking ID in local storage
                    localStorage.setItem('booking_' + bookingId, 'Telah dipulang');
                },
                error: function(xhr) {
                    console.error('Error updating status:', xhr); // Log the error
                    alert('Error updating status: ' + xhr.responseText);
                }
            });
        }
    });

    // Check local storage for booking statuses
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key.startsWith('booking_')) {
            const bookingId = key.split('_')[1];
            const status = localStorage.getItem(key);
            if (status === 'Telah dipulang') {
                // Show the success message
                $('.success-message[data-booking-id="' + bookingId + '"]').show();
                // Hide the dropdown
                $('.btn-group[data-booking-id="' + bookingId + '"]').hide();
            }
        }
    }
});
</script>
@endsection