@extends('backend.layouts.master')

@section('content')

@push('styles')
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <!-- Buttons CSS for Bootstrap 5 -->
    <!-- <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css"> -->
@endpush
<div class="content-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow-sm border-0 rounded">

                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Room Vacancy Status</h5>

                    <div class="d-flex align-items-center gap-2">
                        @if(auth()->user()->hasRole('Admin'))
                        <button type="button" class="btn btn-secondary btn-sm mb-0" data-bs-toggle="modal" data-bs-target="#resetHostelModal">
                            Reset Hostel Bookings
                        </button>
                        @endif

                    </div>
                </div>
                
                <div class="card-body p-0">
                    <div class="p-3">
                        <!-- Hostel Tabs -->
                        <ul class="nav nav-tabs mb-3" id="hostelTabs" role="tablist">
                            @foreach($hostels as $index => $hostel)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link @if($index === 0) active @endif"
                                        id="tab-{{ $hostel->id }}"
                                        data-hostel-id="{{ $hostel->id }}"
                                        type="button"
                                        role="tab"
                                        aria-selected="{{ $index === 0 ? 'true' : 'false' }}">
                                        {{ $hostel->name }}
                                    </button>
                                </li>
                            @endforeach
                        </ul>

                        <!-- Tab Content -->
                        <div class="tab-content mt-3" id="hostelTabContent">
                            <div id="hostel-room-table-container">
                                <p>Select a hostel to view room data.</p>
                            </div>
                        </div>
                    </div>
                </div>

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


<!-- Button to trigger modal -->


<!-- Modal -->
<div class="modal fade" id="resetHostelModal" tabindex="-1" aria-labelledby="resetHostelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h5 class="modal-title" id="resetHostelModalLabel">Reset Hostel Bookings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- Modal Body -->
            <div class="modal-body">
                <form id="resetHostelForm" action="{{ route('hostelBookings.reset') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="hostelSelect" class="form-label">Select Hostel</label>
                        <select class="form-select" id="hostelSelect" name="hostel_id" required>
                            <option value="" selected disabled>-- Choose Hostel --</option>
                            <option value="all">All</option>
                            @foreach($hostels as $hostel)
                            <option value="{{ $hostel->id }}">{{ $hostel->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <!-- Modal Footer Buttons -->
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">Yes, Reset</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<!-- jQuery (required if not already included) -->
<script>
    $(document).ready(function () {

        function loadHostelRooms(hostelId) {
            // PHP sets the base URL based on role, and we pass it as a string into JS
            let baseUrl = @json(auth()->user()->hasRole('Hostel Warden') 
                                ? route('warden.hostel.rooms', ['id' => 'HOSTEL_ID_PLACEHOLDER']) 
                                : route('hostel.rooms', ['id' => 'HOSTEL_ID_PLACEHOLDER']));

            // Replace placeholder with actual hostel ID
            let url = baseUrl.replace('HOSTEL_ID_PLACEHOLDER', hostelId);

            $.ajax({
                url: url,
                type: 'GET',
                beforeSend: function () {
                    $('#hostel-room-table-container').html('<p>Loading...</p>');
                },
                success: function (response) {
                    console.log('Table response ..........................', response);
                    $('#hostel-room-table-container').html(response.html);
                },
                error: function () {
                    $('#hostel-room-table-container').html('<p class="text-danger">Failed to load data.</p>');
                }
            });
        }

        // --------------- Handle tab click ---------------
        $('#hostelTabs').on('click', 'button', function () {
            $('#hostelTabs .nav-link').removeClass('active');
            $(this).addClass('active');

            const hostelId = $(this).data('hostel-id');
            loadHostelRooms(hostelId);
        });

        // --------------  Auto-load first tab's data ---------------
        $('#hostelTabs button.active').trigger('click');
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('resetHostelForm');

        form.addEventListener('submit', function (e) {
            // Show confirmation dialog
            const confirmed = confirm("Are you sure you want to reset the hostel bookings? This action cannot be undone.");

            // If user cancels, prevent form submission
            if (!confirmed) {
                e.preventDefault();
            }
        });
    });
</script>

@endpush

@endsection