@extends('layout.base')

@section('action')
    <button type="button" data-id="{{ $hotel->id }}" class="btn btn-light-primary btn-sm rounded" data-bs-toggle="modal"
        data-bs-target="#modalAddRoom">
        <i class="fas fa-plus"></i> Add Room
    </button>
@endsection
@section('content')
    {{-- <meta name="csrf-token" content="{{ csrf_token() }}"> --}}

    <div class="row">
        <div class="col-8">
            <div class="card card-flush mb-4">
                <div class="card-body">
                    <div id="kt_carousel_1_carousel" class="carousel carousel-custom slide" data-bs-ride="carousel"
                        data-bs-interval="8000">
                        <!--begin::Heading-->
                        <div class="d-flex align-items-center justify-content-between flex-wrap">
                            <!--begin::Label-->
                            <span class="fs-4 fw-bold pe-2">{{ $hotel->hotel_name }}</span>
                            <!--end::Label-->
                        </div>
                        <!--end::Heading-->

                        <!--begin::Carousel-->
                        <div class="row mt-5">
                            <!-- Gambar Besar dengan Carousel -->
                            <div class="col-md-9">
                                <div id="hotelCarousel" class="carousel slide" data-bs-ride="carousel"
                                    data-bs-interval="3000">
                                    <div class="carousel-inner">
                                        @if (isset($hotel) && $hotel->photos->count() > 0)
                                            @foreach ($hotel->photos as $index => $photo)
                                                <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                                    <img id="big-image" src="{{ asset($photo->photo_path) }}"
                                                        class="img-fluid rounded shadow hotel-image"
                                                        style="width: 100%; height: 350px; object-fit: cover;">
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <!-- Kontrol Carousel (Opsional) -->
                                    <button class="carousel-control-prev" type="button" data-bs-target="#hotelCarousel"
                                        data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Previous</span>
                                    </button>
                                    <button class="carousel-control-next" type="button" data-bs-target="#hotelCarousel"
                                        data-bs-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Next</span>
                                    </button>
                                </div>
                            </div>

                            <!-- Gambar Kecil Vertikal di Kanan -->
                            <div class="col-md-3">
                                <div class="d-flex flex-column">
                                    @if (isset($hotel) && $hotel->photos->count() > 0)
                                        @foreach ($hotel->photos as $index => $photo)
                                            <img src="{{ asset($photo->photo_path) }}" class="img-fluid mb-2 thumbnail"
                                                alt="Gambar Kecil {{ $index + 1 }}" style="cursor: pointer;"
                                                onclick="changeImage('{{ asset($photo->photo_path) }}')">
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        <!--end::Carousel-->
                    </div>
                </div>
            </div>

            <!-- Hotel Information Card -->
            <div class="card card-flush mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="fw-bold mb-1">Hotel Information</h3>
                            <p class="">{{ $hotel->description }}</p>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Room Type</th>
                                        <th>Available Quantity</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($room_type as $type_room)
                                        <tr>
                                            <td>{{ $type_room->name }}</td>
                                            <td>{{ $type_room->quantity }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-4">
            <div class="card card-flush mb-4">
                <div class="card-body">
                    <iframe
                        src="https://maps.google.com/maps?q={{$hotel->latitude}},{{$hotel->longitude}}&hl=en;z=14&output=embed"
                        style="border:0;" allowfullscreen="" loading="lazy"></iframe>

                    <p class="mt-3">
                        <i class="fas fa-map-marked-alt me-2"></i>
                        {{ $hotel->distance_to_vanue ?? '-' }} kilometers from vanue
                    </p>
                    <p>
                        <i class="fas fa-plane me-2"></i>
                        {{ $hotel->distance_to_airport ?? '-' }} kolimeters from airport
                    </p>
                    @if (!empty($hotel->website))
                        <a href="{{ $hotel->website }}" class="btn btn-primary btn-sm w-100" target="blank">View on
                            Website</a>
                    @else
                        <div class="text-muted text-center w-100">Website not Available</div>
                    @endif
                </div>
            </div>

            <!-- Hotel Facilities Card -->
            <div class="card card-flush mb-4">
                <div class="card-body">
                    <h3 class="fw-bold mb-3">Facilities</h3>
                    <div class="row">
                        @if (isset($hotel) && is_array($hotel->facilities) && count($hotel->facilities) > 0)
                            @foreach ($hotel->facilities as $facility)
                                <div class="col-md-3 text-center">
                                    <div class="border py-4 rounded">
                                        @if ($facility == 'Parkir Gratis')
                                            <i class="fas fa-car fa-2x text-primary"></i>
                                        @elseif($facility == 'WiFi Gratis')
                                            <i class="fas fa-wifi fa-2x text-primary"></i>
                                        @elseif($facility == 'Kolam Renang')
                                            <i class="fas fa-swimming-pool fa-2x text-primary"></i>
                                        @elseif($facility == 'Restoran')
                                            <i class="fas fa-utensils fa-2x text-primary"></i>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="col-12 text-center">
                                <p class="text-muted">Tidak ada fasilitas yang tersedia.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        @foreach ($rooms as $room)
            <div class="col-md-4">
                <div class="card room-card shadow-sm mb-4">
                    <div id="carouselRoom{{ $room->id }}" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            @if ($room->photos->count() > 0)
                                @foreach ($room->photos as $index => $photo)
                                    <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                        <img src="{{ asset($photo->photo_path) }}" class="d-block w-100 room-img"
                                            alt="Room Image" style="object-fit: cover; height: 250px;">
                                    </div>
                                @endforeach
                            @else
                                <div class="carousel-item active">
                                    <img src="https://via.placeholder.com/400x250?text=No+Image"
                                        class="d-block w-100 room-img" alt="No Image Available"
                                        style="object-fit: cover; height: 250px;">
                                </div>
                            @endif
                        </div>
                        @if ($room->photos->count() > 1)
                            <button class="carousel-control-prev" type="button"
                                data-bs-target="#carouselRoom{{ $room->id }}" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            </button>
                            <button class="carousel-control-next" type="button"
                                data-bs-target="#carouselRoom{{ $room->id }}" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            </button>
                        @endif
                    </div>

                    <div class="card-body">
                        <h5 class="fw-bold">{{ $room->room_name }}</h5>
                        <p class="text-muted">{{ $room->room_type }}</p>
                        <p class="text-danger fw-bold mt-2">$ {{ number_format($room->room_price, 0, ',', '.') }}</p>
                        <p class="text-muted">Excluding taxes</p>
                        <button class="btn btn-primary w-100 edit-room-btn" data-room='@json($room)'>
                            Update Room
                        </button>

                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Tambahkan Pagination -->
    {{-- <div class="d-flex justify-content-center mt-4">
        <nav>
            <ul class="pagination">
                @if ($rooms->onFirstPage())
                    <li class="page-item disabled"><span class="page-link">Previous</span></li>
                @else
                    <li class="page-item"><a class="page-link" href="{{ $rooms->previousPageUrl() }}">Previous</a></li>
                @endif

                @foreach ($rooms->links()->elements[0] as $page => $url)
                    <li class="page-item {{ $rooms->currentPage() == $page ? 'active' : '' }}">
                        <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                    </li>
                @endforeach

                @if ($rooms->hasMorePages())
                    <li class="page-item"><a class="page-link" href="{{ $rooms->nextPageUrl() }}">Next</a></li>
                @else
                    <li class="page-item disabled"><span class="page-link">Next</span></li>
                @endif
            </ul>
        </nav>
    </div>
 --}}





    @include('hotel.elements.modal_add_room')
    @include('hotel.elements.modal_edit_room')
@endsection

@section('styles')
    <style>
        .hotel-image {
            transition: transform 0.3s ease-in-out;
        }

        .hotel-image:hover {
            transform: scale(1.05);
        }

        .room-card {
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.2s ease-in-out;
        }

        .room-card:hover {
            transform: scale(1.05);
        }

        .room-img {
            height: 200px;
            object-fit: cover;
            border-radius: 10px 10px 0 0;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
        }
    </style>
@endsection

@section('scripts')
    <script>
        let myDropzoneEdit;
        let uploadedPathsEdit = [];

        $(document).on('click', '.edit-room-btn', function() {
            const room = $(this).data('room');
            const updateUrl = @json(route('hotels-room.update', ['id' => ':id'])).replace(':id', room.id);

            $('#formEditRoom').attr('action', updateUrl);
            $('#formEditRoom').find('[name="room_type"]').val(room.room_type);
            $('#formEditRoom').find('[name="room_name"]').val(room.room_name);
            $('#formEditRoom').find('[name="room_price"]').val(room.room_price);
            $('#formEditRoom').find('[name="status"]').val(room.status);
            $('#formEditRoom').find('[name="hotel_id"]').val(room.hotel_id);

            if (myDropzoneEdit) {
                myDropzoneEdit.removeAllFiles(true);
            }

            uploadedPathsEdit = [];

            if (!myDropzoneEdit) {
                myDropzoneEdit = new Dropzone("#dropzoneEdit", {
                    url: "{{ route('hotels-room.upload') }}",
                    paramName: "file",
                    maxFiles: 4,
                    acceptedFiles: "image/png,image/jpg,image/jpeg",
                    addRemoveLinks: true,
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content')
                    },
                    success: function(file, response) {
                        file.uploadedPath = response.filepath;
                        uploadedPathsEdit.push(response.filepath);
                        $('#photo_paths_edit').val(uploadedPathsEdit.join(','));
                    },
                    removedfile: function(file) {
                        const path = file.uploadedPath;
                        uploadedPathsEdit = uploadedPathsEdit.filter(p => p !== path);
                        file.previewElement.remove();
                        $('#photo_paths_edit').val(uploadedPathsEdit.join(','));
                    }
                });
            }

            const photoFetchUrl = @json(route('hotels-room.photos', ['id' => ':id'])).replace(':id', room.id);
            fetch(photoFetchUrl)
                .then(res => res.json())
                .then(data => {
                    data.photos.forEach(path => {
                        const mockFile = {
                            name: path.split('/').pop(),
                            size: 12345,
                            uploadedPath: path
                        };
                        myDropzoneEdit.emit("addedfile", mockFile);
                        myDropzoneEdit.emit("thumbnail", mockFile, path);
                        myDropzoneEdit.emit("complete", mockFile);
                        uploadedPathsEdit.push(path);
                    });
                    $('#photo_paths_edit').val(uploadedPathsEdit.join(','));
                });

            $('#modalEditRoom').modal('show');
        });

        document.getElementById('formEditRoom').addEventListener('submit', function(e) {
            e.preventDefault();

            const url = this.getAttribute('action');
            const formData = new FormData(this);
            formData.append('photo_paths', uploadedPathsEdit.join(','));

            fetch(url, {
                    method: 'POST', // tetap POST karena ada @method('PUT') di form
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content')
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        $('#modalEditRoom').modal('hide'); // tutup modal dulu
                        Swal.fire({
                            icon: 'success',
                            title: 'Room updated successfully!',
                            showConfirmButton: false,
                            timer: 1500
                        }).then(() => {
                            location.reload(); // reload halaman setelah swal selesai
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Failed',
                            text: data.message || 'Failed to update room.'
                        });
                    }
                })
                .catch(err => {
                    console.error(err);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Unexpected error occurred during update.'
                    });
                });
        });

        $('#modalEditRoom').on('hidden.bs.modal', function() {
            $('#formEditRoom')[0].reset();
            $('#photo_paths_edit').val('');
            if (myDropzoneEdit) {
                myDropzoneEdit.removeAllFiles(true);
            }
            uploadedPathsEdit = [];
        });


        document.addEventListener("DOMContentLoaded", function() {
            $('#modalAddRoom').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var hotelId = button.data('id'); // Ambil hotel_id dari tombol
                $('#hotel_id').val(hotelId); // Set hotel_id ke input hidden
            });
        });

        function changeImage(imageSrc) {
            // Mengubah gambar besar sesuai dengan gambar kecil yang dipilih
            const bigImage = document.getElementById('big-image');
            bigImage.src = imageSrc;

            // Menyinkronkan dengan carousel (jika diperlukan)
            const carousel = new bootstrap.Carousel(document.getElementById('hotelCarousel'));
            carousel.to(0); // Untuk kembali ke slide pertama setelah perubahan gambar besar
        }
    </script>
@endsection