@extends('admin.layouts.master')

@section('title', 'Edit Hotel Layout')
@section('parent_title', 'Management')

@section('content')
    <div class="d-flex justify-content-start mb-5">
        <a href="{{ route('admin.hotels.index') }}" class="btn btn-sm btn-light-primary">
            <i class="bi bi-arrow-left fs-4 me-1"></i> Exit / Cancel
        </a>
    </div>
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h2 class="fw-bolder">Edit Hotel Property</h2>
            </div>
        </div>
        <div class="card-body pt-0">
            <form id="edit-hotel-form" action="{{ route('admin.hotels.update', $hotel->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="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 @error('user_id') is-invalid @enderror" required>
                        <option value="" disabled>Select Vendor Account Identity</option>
                        @foreach($vendors as $vendor)
                            <option value="{{ $vendor->id }}" {{ old('user_id', $hotel->user_id) == $vendor->id ? 'selected' : '' }}>
                                #UID-{{ $vendor->id }} - {{ $vendor->full_name }}
                            </option>
                        @endforeach
                    </select>
                    @error('user_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="fv-row mb-7">
                    <label class="required fw-bold fs-6 mb-2">Hotel Official Name</label>
                    <input type="text" name="hotel_name" class="form-control form-control-solid mb-3 mb-lg-0 @error('hotel_name') is-invalid @enderror" placeholder="Hotel Property Brand Name" value="{{ old('hotel_name', $hotel->hotel_name) }}" required />
                    @error('hotel_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="fv-row mb-7">
                    <label class="fw-bold fs-6 mb-2">Property Description Context</label>
                    <textarea name="description" class="form-control form-control-solid mb-3 mb-lg-0 @error('description') is-invalid @enderror" rows="4" placeholder="Hotel Marketing/Location Description Summary">{{ old('description', $hotel->description) }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="fv-row mb-7">
                    <label class="required fw-bold fs-6 mb-2">State Managed</label>
                    <select name="state" id="modalStateSelect" class="form-select form-select-solid @error('state') is-invalid @enderror" required>
                        <option value="" disabled>Select State Location</option>
                        @foreach($states as $state)
                            <option value="{{ $state->state_name }}" data-id="{{ $state->id }}" {{ old('state', $hotel->state) == $state->state_name ? 'selected' : '' }}>
                                {{ $state->state_name }}
                            </option>
                        @endforeach
                    </select>
                    @error('state')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="fv-row mb-7">
                    <label class="required fw-bold fs-6 mb-2">City Location</label>
                    <select name="city" id="modalCitySelect" class="form-select form-select-solid @error('city') is-invalid @enderror" required>
                        <option value="{{ $hotel->city }}" selected>{{ $hotel->city }}</option>
                    </select>
                    @error('city')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="fv-row mb-7">
                    <label class="required fw-bold fs-6 mb-2">Full Complete Address Block</label>
                    <textarea name="address" class="form-control form-control-solid mb-3 mb-lg-0 @error('address') is-invalid @enderror" rows="3" placeholder="Complete structural physical street address detail logs..." required>{{ old('address', $hotel->address) }}</textarea>
                    @error('address')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="fv-row mb-7">
                    <label class="required fw-bold fs-6 mb-2">Administrative Status</label>
                    <select name="status" class="form-select form-select-solid @error('status') is-invalid @enderror" required>
                        <option value="1" {{ old('status', $hotel->status) == '1' ? 'selected' : '' }}>Active / Approved</option>
                        <option value="0" {{ old('status', $hotel->status) == '0' ? 'selected' : '' }}>Pending Verification</option>
                    </select>
                    @error('status')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="fv-row mb-7">
                    <label class="fw-bold fs-6 mb-2">Cover Thumbnail Image</label>
                    @if($hotel->cover_image && file_exists(public_path($hotel->cover_image)))
                        <div class="mb-3">
                            <img src="{{ asset($hotel->cover_image) }}" alt="Hotel Primary Image" width="150" class="rounded border shadow-sm" style="height:90px; object-fit:cover;">
                        </div>
                    @endif
                    <input type="file" name="cover_image" class="form-control form-control-solid mb-3 mb-lg-0 @error('cover_image') is-invalid @enderror" accept="image/*" />
                    <small class="text-muted">Leave completely blank if you don't intend to modify current display cover banner photo.</small>
                    @error('cover_image')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="fv-row mb-7">
                    <label class="fw-bold fs-6 mb-2">Gallery Asset Photos (Appends to existing records)</label>
                    @if(!empty($hotel->gallery_images))
                        @php $galleryArr = is_array($hotel->gallery_images) ? $hotel->gallery_images : json_decode($hotel->gallery_images, true); @endphp
                        @if(is_array($galleryArr) && count($galleryArr) > 0)
                            <div class="mb-4 d-flex gap-3 flex-wrap">
                                @foreach($galleryArr as $imagePath)
                                    @if(file_exists(public_path($imagePath)))
                                        <img src="{{ asset($imagePath) }}" alt="Gallery Image Item" width="100" class="rounded border shadow-sm" style="height:65px; object-fit:cover;">
                                    @endif
                                @endforeach
                            </div>
                        @endif
                    @endif
                    <input type="file" name="gallery_images[]" multiple class="form-control form-control-solid mb-3 mb-lg-0 @error('gallery_images.*') is-invalid @enderror" accept="image/*" />
                    <small class="text-muted">Uploading brand new assets stream files will safely append them into current database array matrix.</small>
                    @error('gallery_images.*')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="fv-row mb-7">
                    <label class="fw-bold fs-6 mb-2">Primary Amenities Included</label>
                    <div class="row pt-2">
                        @php 
                            $savedAmenities = !empty($hotel->amenities) 
                                ? (is_array($hotel->amenities) ? $hotel->amenities : json_decode($hotel->amenities, true)) 
                                : [];
                            if(!is_array($savedAmenities)) $savedAmenities = [];
                        @endphp
                        
                        <div class="col-md-3 mb-2">
                            <div class="form-check form-check-custom form-check-solid">
                                <input class="form-check-input" type="checkbox" name="amenities[]" value="Free Wi-Fi" id="am_wifi" {{ in_array('Free Wi-Fi', old('amenities', $savedAmenities)) ? 'checked' : '' }} />
                                <label class="form-check-label" for="am_wifi">Wi-Fi Internet</label>
                            </div>
                        </div>
                        <div class="col-md-3 mb-2">
                            <div class="form-check form-check-custom form-check-solid">
                                <input class="form-check-input" type="checkbox" name="amenities[]" value="Swimming Pool" id="am_pool" {{ in_array('Swimming Pool', old('amenities', $savedAmenities)) ? 'checked' : '' }} />
                                <label class="form-check-label" for="am_pool">Swimming Pool</label>
                            </div>
                        </div>
                        <div class="col-md-3 mb-2">
                            <div class="form-check form-check-custom form-check-solid">
                                <input class="form-check-input" type="checkbox" name="amenities[]" value="Free Parking" id="am_park" {{ in_array('Free Parking', old('amenities', $savedAmenities)) ? 'checked' : '' }} />
                                <label class="form-check-label" for="am_park">Free Parking space</label>
                            </div>
                        </div>
                        <div class="col-md-3 mb-2">
                            <div class="form-check form-check-custom form-check-solid">
                                <input class="form-check-input" type="checkbox" name="amenities[]" value="Restaurant" id="am_rest" {{ in_array('Restaurant', old('amenities', $savedAmenities)) ? 'checked' : '' }} />
                                <label class="form-check-label" for="am_rest">In-house Food/Restaurant</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-center pt-15">
                    <a href="{{ route('admin.hotels.index') }}" class="btn btn-light me-3">Discard / Revert</a>
                    <button type="button" class="btn btn-primary" onclick="confirmUpdateHotel()">
                        <span class="indicator-label">Update Hotel Profile</span>
                    </button>
                </div>
            </form>
        </div>
        </div>
    @endsection

@section('scripts')
<script>
    // SweetAlert Form Submission Confirmation Mechanism Hook
    function confirmUpdateHotel() {
        let formElement = document.getElementById('edit-hotel-form');
        if(!formElement.checkValidity()) {
            formElement.reportValidity();
            return;
        }

        Swal.fire({
            text: "Are you sure you want to save modifications onto this hotel property listing structure data profiles?",
            icon: "question",
            showCancelButton: true,
            buttonsStyling: false,
            confirmButtonText: "Yes, update it!",
            cancelButtonText: "Cancel",
            customClass: {
                confirmButton: "btn fw-bold btn-primary",
                cancelButton: "btn fw-bold btn-active-light-primary"
            }
        }).then(function (result) {
            if (result.value) {
                formElement.submit();
            }
        });
    }

    // Dynamic Dependent Cascading Cities Dropdowns Logic On Edit Page Lifecycle
    $(document).ready(function() {
        // Trigger data load automatically if state is already loaded on page creation lifecycle
        let initialStateId = $('#modalStateSelect').find('option:selected').data('id');
        let preSavedCity = "{{ $hotel->city }}";

        if(initialStateId) {
            loadCitiesForState(initialStateId, preSavedCity);
        }

        // On manual select change event trigger fresh options allocation loop strings
        $('#modalStateSelect').on('change', function() {
            let stateId = $(this).find('option:selected').data('id');
            loadCitiesForState(stateId, null);
        });

        function loadCitiesForState(stateId, activeSelection) {
            let cityDropdown = $('#modalCitySelect');
            if(!stateId) return;

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

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