@extends('layouts.authUser')

@section('content')
@auth
@if (auth()->user()->role == 'Guru') 
    <h2>Pemulangan / Senarai pemulangan peralatan makmal</h2>
@else
    <h2>Tempahan / Senarai pemulangan peralatan makmal</h2>
@endif
@endauth

<div class="table-responsive mt-3">
<a href="{{ route('ManageBookingItem.BookingItemList.ExportBookingReturnItems') }}" 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="btnradioAllReturnStatus" autocomplete="off" checked>
    <label class="btn btn-outline-custom" for="btnradioAllReturnStatus">Semua status</label>

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

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

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

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

    <div class="search mt-2">
        <input type="search" name="search" id="Search" placeholder="Carian..." class="form-control">
        <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: 10%">Tarikh & masa pemulangan</th>
                <th style="width: 3%">Kelas</th>
                <th style="width: 7%">Bilik makmal</th>
                <th style="width: 15%">Tajuk eksperimen</th> 
                @auth
                @if (auth()->user()->role == 'Guru')    
                    <th style="width: 5%; text-align:center;">Status pemulangan yang telah disemak</th>  
                @elseif (auth()->user()->role == 'Pembantu makmal')  
                    <th style="width: 6%; text-align:center;">Status pemulangan</th>
                    <th style="width: 6%; text-align:center;">Semak pemulangan</th>
                @endif
                @endauth  
                    
            </tr>   
        </thead>

        <tbody class="alldata">
            @if($bookingItems->isEmpty())
                <tr>
                    <td colspan="7" class="text-center">Tiada data dalam rekod</td>
                </tr>
            @else
            @foreach($bookingItems as $index => $bookingItem)
            <tr data-bookingactionstatus="{{ $bookingItem->bookingAction_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 }}">
    @if($bookingItem->bookingAction_status === 'Kerosakan')
        @if($bookingItem->itemDamaged && $bookingItem->itemDamaged->count() > 0)
            @php
                // Extract unique timestamps
                $uniqueTimestamps = $bookingItem->itemDamaged->pluck('created_at')->unique();
            @endphp
            @foreach($uniqueTimestamps as $timestamp)
                <div>
                    {{ \Carbon\Carbon::parse($timestamp)->format('d-m-Y [h:i a]') }}
                </div>
            @endforeach
        @else
            Tiada tarikh kerosakan
        @endif
    @else
        {{ \Carbon\Carbon::parse($bookingItem->returned_at)->format('d-m-Y [h:i a]') }}
    @endif
</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->bookingAction_status === null)
                            <span>TIADA</span>
                        @elseif ($bookingItem->bookingAction_status === 'Telah dipulang')
                            <span class="text-yellow"><b>Status: Telah dipulang</b></span>
                        @elseif ($bookingItem->bookingAction_status === 'Diterima')  
                            <span class="text-success"><b>Status: Diterima</b></span>
                        @elseif ($bookingItem->bookingAction_status === 'Masalah')
                            <span class="text-danger"><b>Status: Masalah</b></span>
                        @elseif ($bookingItem->bookingAction_status === 'Kerosakan')
                            <span class="text-danger"><b>Status: Kerosakan</b></span>
                        @endif
                  
                    @elseif (auth()->user()->role == 'Pembantu makmal')
                        <span>Telah dipulang</span>
                    @endif
                @endauth 
                </td>
                @auth
                @if (auth()->user()->role == 'Pembantu makmal')
                <td>
                    <div class="col-Tindakan">
                        @if ($bookingItem->bookingAction_status === null)
                            <span>TIADA</span>
                        @elseif ($bookingItem->bookingAction_status === 'Telah dipulang')
                            <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>Masalah</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>Selesai</label>                          
                            </button>
                        @elseif ($bookingItem->bookingAction_status === 'Diterima')  
                            <span class="text-success"><b>Status: Diterima</b></span>
                        @elseif ($bookingItem->bookingAction_status === 'Masalah')
                            <span class="text-danger"><b>Status: Masalah</b></span>
                        @elseif ($bookingItem->bookingAction_status === 'Kerosakan')
                            <span class="text-danger"><b>Status: Kerosakan</b></span>
                        @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 pemulangan peralatan makmal</b></h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Existing sections -->
                <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 akhir:</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 pemulangan:</b> {{ $bookingItem->bookingAction_status ?: 'TIADA' }}</div>
                        @if($bookingItem->bookingAction_status === 'Diterima' || $bookingItem->bookingAction_status === 'Masalah')
                            <div class="mb-2"><b>Catatan:</b> {{ $bookingItem->booking_desc ?: 'Tiada' }}</div>
                        @endif
                    </div>
                </div>
                <hr>
                @if ($bookingItem->bookingAction_status === 'Kerosakan')
                    <h5><b>Laporan kerosakan peralatan makmal:</b></h5>
                    <div class="row">
                    @foreach ($bookingItem->itemDamaged as $itemDamaged)
                    <div class="col-md-4 mb-3">
                        <div class="card">
                            @if($itemDamaged->itemDamaged_image)
                                <img src="{{ asset($itemDamaged->itemDamaged_image) }}" alt="{{ $itemDamaged->itemDamaged_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 style="text-align:center;">Tiada Gambar Alat Radas yang Rosak</span>
                                </div>
                            @endif
                            <div class="card-body">
                                <p class="card-title text-center">{{ $itemDamaged->itemDamaged_name }}</p>
                                <p class="card-text text-center"><b>Kuantiti Rosak:</b> {{ $itemDamaged->itemDamaged_quantity }}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    </div>
                @else
                @endif

                <!-- Existing sections for borrowed items -->
                @if ($bookingItem->bookingAction_status === 'Kerosakan')
                <h5><b>Peralatan makmal yang dipinjam:</b></h5>
                @elseif ($bookingItem->bookingAction_status === 'Diterima' || $bookingItem->bookingAction_status === 'Masalah' || $bookingItem->bookingAction_status === 'Telah dipulang')
                <h5><b>Peralatan makmal yang dipulang:</b></h5>
                @endif
       
                <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 pinjaman 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 akhir:</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 pemulangan:</b> {{ $bookingItem->bookingAction_status ?: 'TIADA' }} </div>
                                </div>
                            </div>
                            <hr>
                            <h5><b>Peralatan makmal yang telah dipulang:</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.DeclineBookingItemReturn') }}" 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">Masalah</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 pinjaman 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 akhir:</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 pemulangan:</b> {{ $bookingItem->bookingAction_status ?: 'TIADA' }} </div>
                                </div>
                            </div>
                            <hr>
                            <h5><b>Peralatan makmal yang telah dipulang:</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.AcceptBookingItemReturn') }}" 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">Selesai</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 pinjaman 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="7" 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>
    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-bookingactionstatus');

                    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

            // 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) {
                    // 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) {
                    // Handle error
                    alert('Error updating status: ' + xhr.responseText);
                }
            });
        } else {
            // If it's not 'Telah dipulang', it might be 'Kerosakan'
            // Do not prevent default action for Kerosakan link
            // You may want to add any additional logic here if needed
        }
    });

    // 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