@extends('admin.layouts.master')

@section('title', 'Hotel Management')
@section('parent_title', 'Dashboard')

@section('content')
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <div class="d-flex align-items-center position-relative my-1">
                    <span class="svg-icon svg-icon-1 position-absolute ms-6">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                            <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="black" />
                        </svg>
                    </span>
                    <input type="text" id="clientTableSearch" name="search" value="{{ request('search') }}" class="form-control form-control-solid w-250px ps-14" placeholder="Search Hotel, City or Vendor..." autocomplete="off" />
                </div>
                </div>
            <div class="card-toolbar">
                <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                    <button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                        <span class="svg-icon svg-icon-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z" fill="black" />
                            </svg>
                        </span>Filter
                    </button>
                    
                    <a href="{{ route('admin.hotels.export') }}" class="btn btn-light-primary me-3">
                        <span class="svg-icon svg-icon-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1" transform="rotate(90 12.75 4.25)" fill="black" />
                                <path d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z" fill="black" />
                                <path d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z" fill="#C4C4C4" />
                            </svg>
                        </span>Export
                    </a>

                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_hotel">
                        <span class="svg-icon svg-icon-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect opacity="0.5" x="11.364" y="20.364" width="16" height="2" rx="1" transform="rotate(-90 11.364 20.364)" fill="black" />
                                <rect x="4.36396" y="11.364" width="16" height="2" rx="1" fill="black" />
                            </svg>
                        </span>Add Hotel
                    </button>
                </div>
            </div>
        </div>
        
        <div class="card-body pt-0">
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
                <thead>
                    <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
                        <th class="w-10px pe-2">
                            <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                <input class="form-check-input" type="checkbox" />
                            </div>
                        </th>
                        <th>S.No</th>
                        <th>Hotel Details</th>
                        <th>Vendor (Owner) Name</th>
                        <th>City Name</th>
                        <th>State Name</th>
                        <th>Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody id="hotelTableBody" class="text-gray-600 fw-bold">
                    @foreach($hotels as $hotel)
                    <tr class="hotel-data-row">
                        <td>
                            <div class="form-check form-check-sm form-check-custom form-check-solid">
                                <input class="form-check-input" type="checkbox" />
                            </div>
                        </td>
                        <td>{{ $hotels->firstItem() + $loop->index }}</td>
                        <td class="d-flex align-items-center">
                            <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                                <a href="{{ route('admin.hotels.show', $hotel->id) }}">
                                    @if(!empty($hotel->cover_image) && file_exists(public_path($hotel->cover_image)))
                                        <img src="{{ asset($hotel->cover_image) }}" alt="Cover" style="object-fit: cover; height: 50px;" />
                                    @else
                                        <div class="symbol-label fs-3 bg-light-primary text-primary">
                                            {{ substr($hotel->hotel_name, 0, 1) }}
                                        </div>
                                    @endif
                                </a>
                            </div>
                            <div class="d-flex flex-column">
                                <a href="{{ route('admin.hotels.show', $hotel->id) }}" class="text-gray-800 text-hover-primary mb-1">{{ $hotel->hotel_name }}</a>
                                <span class="text-muted fs-7">#HTL-{{ str_pad($hotel->id, 4, '0', STR_PAD_LEFT) }}</span>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex flex-column">
                                <span class="text-gray-800">{{ $hotel->vendor->full_name ?? 'N/A' }}</span>
                                <span class="text-muted fs-7">#UID-{{ str_pad($hotel->user_id, 5, '0', STR_PAD_LEFT) }}</span>
                            </div>
                        </td>
                        <td>{{ $hotel->city }}</td>
                        <td>{{ $hotel->state }}</td>
                        <td>
                            <div class="badge badge-light-{{ $hotel->status == 1 ? 'success' : 'danger' }}">
                                {{ $hotel->status == 1 ? 'Active' : 'Pending' }}
                            </div>
                        </td>
                        <td class="text-end">
                            <a href="#" class="btn btn-light btn-active-light-primary btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions</a>
                            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
                                <div class="menu-item px-3"><a href="{{ route('admin.hotels.show', $hotel->id) }}" class="menu-link px-3">View</a></div>
                                <div class="menu-item px-3"><a href="{{ route('admin.hotels.edit', $hotel->id) }}" class="menu-link px-3">Edit</a></div>
                                <div class="menu-item px-3">
                                    <form id="delete-hotel-{{ $hotel->id }}" action="{{ route('admin.hotels.destroy', $hotel->id) }}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="menu-link px-3 btn btn-link text-danger w-100 text-start" onclick="deleteHotel({{ $hotel->id }})">Delete</button>
                                    </form>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            
            <div id="noHotelMatchesAlert" class="d-none flex-column flex-center w-100 py-15 px-5 card-rounded bg-light-warning border border-dashed border-warning mt-5 mb-5 transition-all">
                <div class="mb-4">
                    <span class="svg-icon svg-icon-3x svg-icon-warning">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path opacity="0.3" d="M21.25 18.525L13.05 4.175C12.55 3.3 11.45 3.3 10.95 4.175L2.75 18.525C2.25 19.4 2.875 20.5 3.875 20.5H20.125C21.125 20.5 21.75 19.4 21.25 18.525Z" fill="black" />
                            <rect x="11" y="11" width="2" height="5" rx="1" fill="black" />
                            <rect x="11" y="7" width="2" height="2" rx="1" fill="black" />
                        </svg>
                    </span>
                </div>
                <div class="text-center">
                    <h4 class="text-gray-800 fw-bolder mb-1 fs-5">No Matching Hotels Found</h4>
                    <span class="text-muted fw-bold fs-7">We couldn't find any properties matching your typed filters. Try modifying your search keyword.</span>
                </div>
            </div>

            <div id="paginationWrapper" class="d-flex flex-stack flex-wrap pt-10">
                <div class="fs-6 fw-bold text-gray-700">Showing {{ $hotels->firstItem() }} to {{ $hotels->lastItem() }} of {{ $hotels->total() }} entries</div>
                {{ $hotels->links() }}
            </div>
            </div>
    </div>

    <div class="modal fade" id="kt_modal_add_hotel" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mw-750px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="fw-bolder">Add Hotel Property</h2>
                    <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal" style="cursor: pointer; font-weight: bold;">X</div>
                </div>
                <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                    <form id="kt_modal_add_hotel_form" action="{{ route('admin.hotels.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6 fv-row mb-7">
                                <label class="required fw-bold fs-6 mb-2">Assign Vendor (Owner)</label>
                                <select name="user_id" class="form-select form-select-solid" required>
                                    <option value="" disabled selected>Select Vendor Account</option>
                                    @foreach($vendors as $vendor)
                                        <option value="{{ $vendor->id }}">#UID-{{ $vendor->id }} - {{ $vendor->full_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 fv-row mb-7">
                                <label class="required fw-bold fs-6 mb-2">Hotel Name</label>
                                <input type="text" name="hotel_name" class="form-control form-control-solid" placeholder="Enter Hotel Property Name" required />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 fv-row mb-7">
                                <label class="required fw-bold fs-6 mb-2">State</label>
                                <select name="state" id="modalStateSelect" class="form-select form-select-solid" required>
                                    <option value="" disabled selected>Select State</option>
                                    @foreach($states as $state)
                                        <option value="{{ $state->state_name }}" data-id="{{ $state->id }}">{{ $state->state_name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 fv-row mb-7">
                                <label class="required fw-bold fs-6 mb-2">City</label>
                                <select name="city" id="modalCitySelect" class="form-select form-select-solid" required disabled>
                                    <option value="" disabled selected>Choose State First</option>
                                </select>
                            </div>
                        </div>

                        <div class="fv-row mb-7">
                            <label class="required fw-bold fs-6 mb-2">Full Block Address</label>
                            <textarea name="address" class="form-control form-control-solid" rows="2" placeholder="Enter Complete Physical Location Address" required></textarea>
                        </div>

                        <div class="fv-row mb-7">
                            <label class="fw-bold fs-6 mb-2">Description</label>
                            <textarea name="description" class="form-control form-control-solid" rows="3" placeholder="Property Marketing Summary Context..."></textarea>
                        </div>

                        <div class="row">
                            <div class="col-md-6 fv-row mb-7">
                                <label class="required fw-bold fs-6 mb-2">Cover Thumbnail Image</label>
                                <input type="file" name="cover_image" class="form-control form-control-solid" accept="image/*" required />
                            </div>
                            <div class="col-md-6 fv-row mb-7">
                                <label class="fw-bold fs-6 mb-2">Gallery Asset Photos (Multiple)</label>
                                <input type="file" name="gallery_images[]" multiple class="form-control form-control-solid" accept="image/*" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 fv-row mb-7">
                                <label class="required fw-bold fs-6 mb-2">Activation Status</label>
                                <select name="status" class="form-select form-select-solid" required>
                                    <option value="1">Active</option>
                                    <option value="0" selected>Pending</option>
                                </select>
                            </div>
                            <div class="col-md-6 fv-row mb-7">
                                <label class="fw-bold fs-6 mb-2">Amenities Packages Included</label>
                                <div class="d-flex flex-wrap gap-5 pt-3">
                                    <div class="form-check form-check-solid"><input class="form-check-input" type="checkbox" name="amenities[]" value="Free Wi-Fi" id="am_wifi"><label class="form-check-label" for="am_wifi">Wi-Fi</label></div>
                                    <div class="form-check form-check-solid"><input class="form-check-input" type="checkbox" name="amenities[]" value="Swimming Pool" id="am_pool"><label class="form-check-label" for="am_pool">Pool</label></div>
                                    <div class="form-check form-check-solid"><input class="form-check-input" type="checkbox" name="amenities[]" value="Free Parking" id="am_park"><label class="form-check-label" for="am_park">Parking</label></div>
                                    <div class="form-check form-check-solid"><input class="form-check-input" type="checkbox" name="amenities[]" value="Restaurant" id="am_rest"><label class="form-check-label" for="am_rest">Food</label></div>
                                </div>
                            </div>
                        </div>

                        <div class="text-center pt-15">
                            <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Discard</button>
                            <button type="button" class="btn btn-primary" onclick="confirmAddHotel()">Submit Profile</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function deleteHotel(id){
            Swal.fire({
                text: "Are you sure you want to delete this hotel?",
                icon: "warning",
                showCancelButton: true,
                buttonsStyling: false,
                confirmButtonText: "Yes, delete!",
                cancelButtonText: "No, cancel",
                customClass: { confirmButton: "btn fw-bold btn-danger", cancelButton: "btn fw-bold btn-active-light-primary" }
            }).then((result)=>{
                if(result.isConfirmed){ document.getElementById('delete-hotel-' + id).submit(); }
            });
        }
        
        function confirmAddHotel(){
            let formNode = document.getElementById('kt_modal_add_hotel_form');
            if(!formNode.checkValidity()) {
                formNode.reportValidity();
                return;
            }

            Swal.fire({
                text: "Are you sure you want to register this hotel profile details?",
                icon: "question",
                showCancelButton: true,
                buttonsStyling: false,
                confirmButtonText: "Yes, add it!",
                cancelButtonText: "No, cancel",
                customClass: { confirmButton: "btn fw-bold btn-primary", cancelButton: "btn fw-bold btn-active-light-primary" }
            }).then((result)=>{
                if(result.isConfirmed){ formNode.submit(); }
            });
        }

        $(document).ready(function() {
            
            // CLIENT-SIDE SUPER-FAST INSTANT LIVE SEARCH TRIGGER
            $('#clientTableSearch').on('input', function() {
                let searchVal = $(this).val().toLowerCase().trim();
                let matchRowsCount = 0;

                $('.hotel-data-row').each(function() {
                    let currentRowContent = $(this).text().toLowerCase();

                    if (currentRowContent.indexOf(searchVal) > -1) {
                        $(this).removeClass('d-none');
                        matchRowsCount++;
                    } else {
                        $(this).addClass('d-none');
                    }
                });

                if(matchRowsCount === 0) {
                    $('#noHotelMatchesAlert').removeClass('d-none').addClass('d-flex');
                    $('#paginationWrapper').addClass('d-none');
                } else {
                    $('#noHotelMatchesAlert').addClass('d-none').removeClass('d-flex');
                    $('#paginationWrapper').removeClass('d-none');
                }
            });

            // REAL-TIME DYNAMIC DEPENDENT DROPDOWNS LOGIC (AJAX)
            $('#modalStateSelect').on('change', function() {
                let selectedOption = $(this).find('option:selected');
                let stateId = selectedOption.data('id'); 
                let cityDropdown = $('#modalCitySelect');

                cityDropdown.html('<option value="" disabled selected>Loading Cities...</option>').prop('disabled', true);

                if(stateId) {
                    $.ajax({
                        url: "{{ url('admin/get-cities-by-id') }}/" + stateId,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            cityDropdown.html('<option value="" disabled selected>Select City</option>');
                            
                            if(data && data.length > 0) {
                                $.each(data, function(key, value) {
                                    cityDropdown.append('<option value="'+ value.city_name +'">'+ value.city_name +'</option>');
                                });
                                cityDropdown.prop('disabled', false);
                            } else {
                                cityDropdown.html('<option value="" disabled selected>No cities available</option>');
                            }
                        },
                        error: function() {
                            cityDropdown.html('<option value="" disabled selected>Error loading cities</option>');
                        }
                    });
                }
            });
        });
    </script>
@endsection