@extends('adminlte::page')

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

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

@section('content')
    <div class="card">
        <div class="card-body">
            <!-- Form to upload image(s) -->
            <form action="{{ route('properties.upload_image_post', $property_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-property-id="{{ $property_id }}">Delete</button>
                                        @if(!$image->thumbnail)
                                            <button type="button" class="btn btn-primary btn-sm set-thumbnail" data-id="{{ $image->id }}" data-property-id="{{ $property_id }}">Set as Thumbnail</button>
                                        @else
                                            <span class="badge bg-success">Thumbnail</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('properties.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 propertyId = this.getAttribute('data-property-id');
            const deleteUrl = `${apiPrefix}/properties/${propertyId}/delete-image/${imageId}`;  // Using apiPrefix here

            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.');
                    }
                });
            }
        });
    });

    // Handle setting the thumbnail
    document.querySelectorAll('.set-thumbnail').forEach(button => {
        button.addEventListener('click', function () {
            const imageId = this.getAttribute('data-id');
            const propertyId = this.getAttribute('data-property-id');
            const setThumbnailUrl = `${apiPrefix}/properties/${propertyId}/set-thumbnail/${imageId}`;  // Using apiPrefix here

            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.');
                }
            });
        });
    });
    </script>
@endsection