@extends('layout.base')

@section('content')
    <style>
        .select2-container--default .select2-selection--multiple {
            background-color: #fff !important;
            /* Ubah warna background */
            border: 1px solid #ced4da !important;
            /* Sesuaikan border */
            min-height: 38px !important;
            /* Sesuaikan tinggi */
        }

        .select2-container--default .select2-selection--single {
            background-color: #fff !important;
            /* Ubah warna background */
            border: 1px solid #ced4da !important;
            /* Sesuaikan border */
        }

        .select2-dropdown {
            background-color: #fff !important;
            /* Background dropdown */
            border: 1px solid #ced4da !important;
        }

        .select2-results__option {
            background-color: #fff !important;
            /* Background opsi */
            color: #000 !important;
            /* Warna teks */
        }

        .select2-results__option--highlighted[aria-selected] {
            background-color: #007bff !important;
            color: #fff !important;
        }

        .input-number input[type=number] {
            -moz-appearance: textfield;
        }

        .input-number input[type=number]::-webkit-inner-spin-button,
        .input-number input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
    <div class="card">
        <form id="formHotel" method="POST" action="{{ route('hotels.store') }}" enctype="multipart/form-data">
            <div class="card-body">
                @csrf
                @method('POST') <!-- Change to PUT for edit -->

                <div class="row">
                    <div class="col-12 mb-3">
                        <label for="hotel_name" class="form-label d-block required">Hotel Name</label>
                        <input type="text" class="form-control" name="hotel_name" required>
                    </div>

                </div>

                <div class="row">

                    <div class="col-12 mb-3">
                        <label for="address" class="form-label d-block required">Address</label>
                        <textarea class="form-control" name="address" required></textarea>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6 mb-3">
                        <label for="website" class="form-label d-block required">Website</label>
                        <input type="url" class="form-control" name="website">
                    </div>

                    <div class="col-6 mb-3">
                        <label for="category" class="form-label d-block required">Category</label>
                        <select class="form-control select2" id="categories" name="category[]" multiple>
                            <option value="FIG">FIG</option>
                            <option value="FIG Family">FIG Family</option>
                            <option value="FIG Guest">FIG Guest</option>
                            <option value="Delegation">Delegation</option>
                            <option value="Judges">Judges</option>
                            <option value="Media">Media</option>
                            <option value="LOC">LOC</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6 mb-3">
                        <label for="distance_to_airport" class="form-label d-block required">Distance to Airport</label>
                        <div class="input-group input-number">
                            <input type="number" class="form-control" name="distance_to_airport"/>
                            <span class="input-group-text" id="basic-addon2">KM</span>
                        </div>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="distance_to_vanue" class="form-label d-block required">Distance to Venue</label>
                        <div class="input-group input-number">
                            <input type="number" class="form-control" name="distance_to_vanue"/>
                            <span class="input-group-text" id="basic-addon2">KM</span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6 mb-3">
                        <label for="latitude" class="form-label d-block required">Latitude</label>
                        <div class="input-group input-number">
                            <input type="number" class="form-control" name="latitude" step="0.000001"/>
                        </div>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="longitude" class="form-label d-block required">Longitude</label>
                        <div class="input-group input-number">
                            <input type="number" class="form-control" name="longitude" step="0.000001"/>
                        </div>
                    </div>
                </div>

                <!-- Dropzone for multiple file upload -->
                <div class="mb-3">
                    <label class="form-label">Upload Hotel Photos</label>
                    {{-- <div id="dropzone" class="dropzone"></div> --}}
                    <div class="dropzone" id="dropzone">
                        <!--begin::Message-->
                        <div class="dz-message needsclick">
                            <i class="fas fa-upload fs-3x text-primary"></i>

                            <!--begin::Info-->
                            <div class="ms-4">
                                <h3 class="fs-5 fw-bold text-gray-900 mb-1">Drop files here or click to upload.</h3>
                                <span class="fs-7 fw-semibold text-gray-500">Upload up to 4 files</span>
                            </div>
                            <!--end::Info-->
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mb-3">
                        <label for="description" class="form-label d-block required">Description</label>
                        <textarea class="form-control" name="description" required></textarea>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mb-3">
                        <label for="facilities" class="form-label d-block required">Facilities</label>
                        <select class="form-control select2" id="facilities" name="facilities[]" multiple>
                            <option value="Parkir Gratis">Free Parking</option>
                            <option value="WiFi Gratis">Free WiFi</option>
                            <option value="Kolam Renang">Swimming Pool</option>
                            <option value="Restoran">Restaurant</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <!--begin::Repeater-->
                        <div id="kt_docs_repeater_basic">
                            <!--begin::Form group-->
                            <div class="form-group">
                                <div data-repeater-list="room_type_list">
                                    <div data-repeater-item>
                                        <div class="form-group row mb-5">
                                            <div class="col-md-5">
                                                <label class="form-label">Room Type:</label>
                                                <input type="text" name="room_type"class="form-control mb-2 mb-md-0" placeholder="Enter room type" />
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label">Capacity:</label>
                                                <input type="number" name="capacity" class="form-control mb-2 mb-md-0" placeholder="Enter capacity" />
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label">Quantity:</label>
                                                <input type="number" name="quantity" class="form-control mb-2 mb-md-0" placeholder="Enter quantity" />
                                            </div>
                                            <div class="col-md-1">
                                                <a href="javascript:;" data-repeater-delete class="btn btn-icon btn-light-danger mt-3 mt-md-8">
                                                    <i class="fa fa-trash"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end::Form group-->

                            <!--begin::Form group-->
                            <div class="form-group mt-5">
                                <a href="javascript:;" data-repeater-create class="btn btn-light-primary">
                                    <i class="fa fa-plus"></i>
                                    Add
                                </a>
                            </div>
                            <!--end::Form group-->
                        </div>
                        <!--end::Repeater-->
                    </div>
                </div>
            </div>

            <div class="card-footer text-end">
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>

@endsection

@section('scripts')
    <!-- Include Dropzone.js -->
    <link href="{{ asset('/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('/plugins/global/plugins.bundle.js') }}"></script>
    <script src="{{ asset('/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>
    {{-- <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script> --}}
    <script>
        
        $('#kt_docs_repeater_basic').repeater({
            initEmpty: false,

            defaultValues: {
                'text-input': 'foo'
            },

            show: function () {
                $(this).slideDown();
            },

            hide: function (deleteElement) {
                $(this).slideUp(deleteElement);
            }
        });
        $(document).ready(function() {
            $('#facilities').select2({
                placeholder: "Select facilities",
                allowClear: true
            });
        });
        $(document).ready(function() {
            $('#categories').select2({
                placeholder: "Select categories",
                allowClear: true
            });
        });
        Dropzone.autoDiscover = false; // Pastikan auto discover dinonaktifkan
        let uploadedImages = []; // Deklarasikan variabel untuk menyimpan file yang diunggah

        var myDropzone = new Dropzone("#dropzone", {
            url: "{{ route('hotels.upload') }}", // Sesuaikan dengan endpoint upload
            paramName: "file",
            maxFiles: 4, // Maksimum 4 file
            maxFilesize: 10, // Maksimal ukuran 10MB per file
            acceptedFiles: "image/png, image/jpg, image/jpeg",
            addRemoveLinks: true,
            dictMaxFilesExceeded: "Maksimal 4 file saja!",
            dictInvalidFileType: "Hanya format PNG, JPG, dan JPEG yang diperbolehkan!",
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}" // Tambahkan CSRF Token
            },
            success: function(file, response) {
                uploadedImages.push(response.filepath); // Simpan path gambar dari response server
            },
            removedfile: function(file) {
                let filePath = file.uploadedPath;
                uploadedImages = uploadedImages.filter(img => img !== filePath);
                file.previewElement.remove();
            }
        });

        document.getElementById('formHotel').addEventListener('submit', function(e) {
            e.preventDefault();
            let formData = new FormData(this);

            // Tambahkan path foto ke FormData
            uploadedImages.forEach((img, index) => {
                formData.append(`photos[${index}]`, img);
            });

            fetch("{{ route('hotels.store') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}" // Tambahkan CSRF Token
                    }
                })
                .then(response => {
                    return response.json().catch(() => response.text()); // 🔥 Menangani JSON & HTML response
                })
                .then(data => {
                    if (typeof data === "string") {
                        // 🔥 Jika respons berupa HTML (redirect), langsung pindah halaman
                        window.location.href = "{{ route('hotels.show', ['id' => 'HOTEL_ID']) }}".replace(
                            "HOTEL_ID", data);
                    } else if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: 'Hotel saved successfully!',
                        }).then(() => {
                            window.location.href = "{{ route('hotels.show', ['id' => 'HOTEL_ID']) }}"
                                .replace("HOTEL_ID", data.hotel_id);
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: data.message || 'An error occurred while saving the hotel.',
                        });
                    }
                })
                .catch(error => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: error.message || 'An error occurred while saving the hotel.',
                    });
                });
        });
    </script>
@endsection