@extends('adminlte::page')

@section('title', 'Upload Image for Room')

@section('content_header')
    <h1>Upload Image for Room</h1>
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <!-- Form to upload image(s) -->
            <form action="{{ route('rooms.upload_image_post', $room_id) }}" method="POST" enctype="multipart/form-data">
                @csrf

                <!-- Show uploaded images (if any) -->
                <div id="imageInputContainer" class="row">
                    @foreach($uploadedImages as $image)
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Uploaded Image</label>
                                <div class="mb-2">
                                    <img src="{{ $image->image_link }}" alt="Uploaded Image" class="img-fluid rounded mb-2">
                                    <div>
                                        <button type="button" class="btn btn-danger btn-sm delete-image" data-id="{{ $image->id }}" data-room-id="{{ $room_id }}">Delete</button>
                                        @if(!$image->thumbnail)
                                            <button type="button" class="btn btn-primary btn-sm set-thumbnail" data-id="{{ $image->id }}" data-room-id="{{ $room_id }}">Set as Thumbnail</button>
                                        @else
                                            <span class="badge bg-success">Thumbnail</span>
                                        @endif

                                        <!-- Main Page Button -->
                                        @if(!$image->main_page)
                                            <button type="button" class="btn btn-info btn-sm set-main-page" data-id="{{ $image->id }}" data-room-id="{{ $room_id }}">Set as Main Page</button>
                                        @else
                                            <span class="badge bg-primary">Main Page</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <!-- New images preview -->
                    <div id="newImagesPreview" class="row"></div>

                    <!-- File input for new images -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="image">Choose Image(s)</label>
                            <input type="file" name="image[]" class="form-control image-input" multiple>
                        </div>
                    </div>
                </div>

                <!-- Button to add more images -->
                <div>
                    <a href="javascript:void(0)" class="btn btn-primary" id="addMoreImagesBtn">
                        <i class="fas fa-plus"></i> Add Images
                    </a>
                </div>
                <div class="mt-3">
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-upload"></i> Upload
                    </button>
                </div>

            </form>
            <div class="card-header">
                <a href="{{ route('rooms.index') }}" class="btn btn-secondary btn-sm float-right">
                    <i class="fas fa-arrow-left"></i> Back
                </a>
            </div>

        </div>
    </div>

    <script>
        const apiPrefix = "{{ env('API_PREFIX') }}";
        // Handle the "+ Add More Images" button click
        document.getElementById('addMoreImagesBtn').addEventListener('click', function () {
            const newInput = document.createElement('div');
            newInput.classList.add('form-group', 'col-md-6');
            newInput.innerHTML = `
                <label for="image">Choose Image(s)</label>
                <input type="file" name="image[]" class="form-control image-input" multiple>
            `;
            document.getElementById('imageInputContainer').appendChild(newInput);
        });


        // Preview newly uploaded images
        document.addEventListener('change', function (event) {
            if (event.target.classList.contains('image-input')) {
                const files = event.target.files;
                const previewContainer = document.getElementById('newImagesPreview');

                Array.from(files).forEach(file => {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        const preview = document.createElement('div');
                        preview.classList.add('col-md-6', 'mb-2');
                        preview.innerHTML = `
                            <div class="form-group">
                                <img src="${e.target.result}" alt="New Image" class="img-fluid rounded mb-2">
                                <p class="text-warning">Not saved yet</p>
                            </div>
                        `;
                        previewContainer.appendChild(preview); // Append to the container
                    };
                    reader.readAsDataURL(file);
                });
            }
        });

        // Handle image deletion
        document.querySelectorAll('.delete-image').forEach(button => {
            button.addEventListener('click', function () {
                const imageId = this.getAttribute('data-id');
                const roomId = this.getAttribute('data-room-id');
                const deleteUrl = `${apiPrefix}/rooms/${roomId}/delete-image/${imageId}`;

                if (confirm("Are you sure you want to delete this image?")) {
                    fetch(deleteUrl, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    }).then(response => {
                        if (response.ok) {
                            location.reload(); // Reload page to reflect changes
                        } else {
                            alert('Error deleting image.');
                        }
                    });
                }
            });
        });

        document.querySelectorAll('.set-thumbnail').forEach(button => {
            button.addEventListener('click', function () {
                const imageId = this.getAttribute('data-id');
                const roomId = this.getAttribute('data-room-id');
                const setThumbnailUrl = `${apiPrefix}/rooms/${roomId}/set-thumbnail/${imageId}`;

                fetch(setThumbnailUrl, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                }).then(response => {
                    if (response.ok) {
                        location.reload(); // Reload page to reflect changes
                    } else {
                        alert('Error setting thumbnail.');
                    }
                });
            });
        });

        document.querySelectorAll('.set-main-page').forEach(button => {
            button.addEventListener('click', function () {
                const imageId = this.getAttribute('data-id');
                const roomId = this.getAttribute('data-room-id');
                const setMainPageUrl = `${apiPrefix}/rooms/${roomId}/set-main-page/${imageId}`;

                fetch(setMainPageUrl, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                }).then(response => {
                    if (response.ok) {
                        location.reload(); // Reload page to reflect changes
                    } else {
                        alert('Error setting main page.');
                    }
                });
            });
        });
    </script>
@endsection