@extends('layout.base')

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

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

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

        .select2-results__option {
            background-color: #fff !important;
            color: #000 !important;
        }

        .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.update', $hotel->id) }}">
            <div class="card-body">
                @csrf
                @method('PUT')

                <div class="row">
                    <div class="col-12 mb-3">
                        <label class="form-label d-block required">Hotel Name</label>
                        <input type="text" class="form-control" name="hotel_name"
                            value="{{ old('hotel_name', $hotel->hotel_name) }}" required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mb-3">
                        <label class="form-label d-block required">Address</label>
                        <textarea class="form-control" name="address" required>{{ old('address', $hotel->address) }}</textarea>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6 mb-3">
                        <label class="form-label d-block">Website</label>
                        <input type="url" class="form-control" name="website"
                            value="{{ old('website', $hotel->website) }}">
                    </div>

                    <div class="col-6 mb-3">
                        <label class="form-label d-block required">Category</label>
                        <select class="form-control select2" id="categories" name="category[]" multiple>
                            <option value="FIG" {{ in_array('FIG', old('category', $hotel->category ?? [])) ? 'selected' : '' }}>FIG</option>
                            <option value="FIG Family" {{ in_array('FIG Family', old('category', $hotel->category ?? [])) ? 'selected' : '' }}>FIG Family</option>
                            <option value="FIG Guest" {{ in_array('FIG Guest', old('category', $hotel->category ?? [])) ? 'selected' : '' }}>FIG Guest</option>
                            <option value="Delegation" {{ in_array('Delegation', old('category', $hotel->category ?? [])) ? 'selected' : '' }}>Delegation</option>
                            <option value="Judges" {{ in_array('Judges', old('category', $hotel->category ?? [])) ? 'selected' : '' }}>Judges</option>
                            <option value="Media" {{ in_array('Media', old('category', $hotel->category ?? [])) ? 'selected' : '' }}>Media</option>
                            <option value="LOC" {{ in_array('LOC', old('category', $hotel->category ?? [])) ? 'selected' : '' }}>LOC</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6 mb-3">
                        <label 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"
                                value="{{ old('distance_to_airport', $hotel->distance_to_airport) }}">
                            <span class="input-group-text">KM</span>
                        </div>
                    </div>

                    <div class="col-6 mb-3">
                        <label 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"
                                value="{{ old('distance_to_vanue', $hotel->distance_to_vanue) }}">
                            <span class="input-group-text">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"
                                value="{{ old('latitude', $hotel->latitude) }}"/>
                        </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"
                                value="{{ old('longitude', $hotel->longitude) }}"/>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Upload Hotel Photos</label>
                    <div class="dropzone" id="dropzone">
                        <div class="dz-message needsclick">
                            <i class="fas fa-upload fs-3x text-primary"></i>
                            <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>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mb-3">
                        <label class="form-label d-block required">Description</label>
                        <textarea class="form-control" name="description" required>{{ old('description', $hotel->description) }}</textarea>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 mb-3">
                        <label class="form-label d-block required">Facilities</label>
                        <select class="form-control select2" id="facilities" name="facilities[]" multiple>
                            @php
                                $allFacilities = ['Parkir Gratis', 'WiFi Gratis', 'Kolam Renang', 'Restoran'];
                                $selectedFacilities = is_array($hotel->facilities)
                                    ? $hotel->facilities
                                    : json_decode($hotel->facilities, true);
                            @endphp
                            @foreach ($allFacilities as $facility)
                                <option value="{{ $facility }}"
                                    {{ in_array($facility, $selectedFacilities ?? []) ? 'selected' : '' }}>
                                    {{ $facility }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

            <div class="row">
                <div class="col-12 mt-1">
                    <!--begin::Repeater-->
                    <div id="kt_docs_repeater_basic">
                        <!--begin::Form group-->
                        <div class="form-group">
                            <div data-repeater-list="room_type_list">
                                @foreach($room_type as $room)
                                <div data-repeater-item>
                                    <div class="form-group row mb-5">
                                        <input type="hidden" name="room_type_id" value="{{ $room->id }}"/>
                                        <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" value="{{ $room->name }}"/>
                                        </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" value="{{ $room->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" value="{{ $room->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>
                                @endforeach
                            </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 class="card-footer text-end">
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </form>
    </div>

    <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>
        $(document).ready(function() {
            $('#categories, #facilities').select2({
                placeholder: "Select options",
                allowClear: true,
                width: '100%' // fix styling di template tertentu
            });
        });

        $('#kt_docs_repeater_basic').repeater({
            initEmpty: false,

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

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

            hide: function (deleteElement) {
                const roomType = $(this).find('input[name*="[room_type_id]"]').val();

                $(this).slideUp(deleteElement);
            }
        });

        Dropzone.autoDiscover = false;
        let uploadedImages = @json($hotel->photos->pluck('photo_path')); // Ambil foto lama

        const dropzone = new Dropzone("#dropzone", {
            url: "{{ route('hotels.upload') }}",
            paramName: "file",
            maxFiles: 4,
            maxFilesize: 10,
            acceptedFiles: "image/png,image/jpg,image/jpeg",
            addRemoveLinks: true,
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            success: function(file, response) {
                uploadedImages.push(response.filepath);
                file.uploadedPath = response.filepath;
            },
            removedfile: function(file) {
                let path = file.uploadedPath;
                uploadedImages = uploadedImages.filter(f => f !== path);
                file.previewElement.remove();
            },
            init: function() {
                @foreach ($hotel->photos as $photo)
                    var mockFile = {
                        name: "{{ basename($photo->photo_path) }}",
                        size: 12345,
                        uploadedPath: "{{ $photo->photo_path }}"
                    };
                    this.emit("addedfile", mockFile);
                    this.emit("thumbnail", mockFile,
                        "{{ asset(ltrim($photo->photo_path, '/')) }}");
                    this.emit("complete", mockFile);
                    this.files.push(mockFile);
                    uploadedImages.push("{{ $photo->photo_path }}");
                @endforeach
            }

        });

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

            uploadedImages.forEach((img, i) => {
                formData.append(`photos[${i}]`, img);
            });

            fetch(this.action, {
                    method: "POST",
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    }
                })
                .then(res => res.json().catch(() => res.text()))
                .then(data => {
                    if (typeof data === "string") {
                        window.location.href = "{{ route('hotels.show', ['id' => 'HOTEL_ID']) }}".replace(
                            "HOTEL_ID", data);
                    } else if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated',
                            text: 'Hotel updated 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 || 'Failed to update hotel.'
                        });
                    }
                })
                .catch(err => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: err.message || 'Something went wrong.'
                    });
                });
        });
    </script>
@endsection