@extends('layouts.'.$namespaceName.'.master')
@section('title')
    {{$title}}
@endsection
@section('content')
<div class="page-wrapper">
    <div class="page-content m-2">
        @include('message')
        @include('breadcrumb')

        <!-- Single Image Upload Form -->
        <form action="{{route($modelName.'.update','test')}}" method="post" autocomplete="off" enctype="multipart/form-data">
            @method('PUT')
            @csrf
            <input type="hidden" name="id" value="{{$data->id}}">

            <div class="mb-3">
                <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'photo')}}</label>
                <div>
                    <label for="image" class="btn btn-dark upload_image w-100">
                        <div class="w-100">
                            <img src="{{ asset('admin/assets/images/main_img/upload_image.svg') }}">
                            <h5 class="mt-2">{{ __('labels.Select Image') }}</h5>
                        </div>
                    </label>
                    <input id="image" name="image" style="visibility:hidden;" type="file" accept="image/*">
                </div>

                <div class="upload_image_content">
                    <div class="form-group">
                        <img src="{{ asset($data->image_relative_path) }}" width="auto" height="60px" id="image-view">
                        <div class="mx-2">
                            <h3>{{ trans('labels.image_name')}}</h3>
                            <p>{{ trans('labels.file_type')}}</p>
                        </div>
                    </div>

                    <div class="form-group">
                        <a class="bg-transparent border-0" style="padding: 0;" id="remove-image" onclick="changeImage()">
                            <img src="{{ asset('admin/assets/images/main_img/delete.svg') }}" width="30px" height="30px" alt="Delete Image">
                        </a>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <button class="btn primary">{{trans($namespaceName.'/app.update')}}</button>
                </div>
            </div>
        </form>
    </div>

    <hr>

    <!-- Multiple Images Upload Form -->
    <div class="page-content m-2">
        <form action="{{route('updateEventGallery',$data->id)}}" method="post" autocomplete="off" enctype="multipart/form-data">
            {{-- @method('PUT') --}}
            @csrf
            <input type="hidden" name="id" value="{{$data->id}}">

            <div class="mb-3">
                <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'event_gallery')}}</label>
                <div>
                    <label for="gallery" class="btn btn-dark upload_image w-100">
                        <div class="w-100">
                            <img src="{{ asset('admin/assets/images/main_img/upload_image.svg') }}">
                            <h5 class="mt-2">{{ __('labels.Select Images') }}</h5>
                        </div>
                    </label>
                    <input id="gallery" name="gallery[]" style="visibility:hidden;" type="file" accept="image/*" multiple>
                </div>
                <div class="row" id="previews">

                    @if($gallery && $gallery->count() > 0)
                        @foreach ($gallery as $image)
                        <div class="form-group image-preview upload_image_content col-6 my-3 " data-path="{{ $image->image }}">
                            <img src="{{ $image->image_relative_path }}" width="auto" height="60px" class="gallery-view">
                            <input type="hidden" name="existing_images[]" value="{{ $image->image }}">
                            <div class="mx-2">
                                <p>{{ basename($image->image)}}</p>

                            </div>
                            <div class="form-group">
                                <a class="bg-transparent border-0" style="padding: 0;" onclick="removeImage(this)">
                                    <img src="{{ asset('admin/assets/images/main_img/delete.svg') }}" width="30px" height="30px" alt="Delete Image">
                                </a>
                            </div>
                        </div>
                        @endforeach
                    @endif
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <button class="btn primary">{{trans($namespaceName.'/app.update')}}</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
function changeImage() {
    let defaultPhoto = window.location.origin + '/default/no-icon.png';
    let image = document.getElementById("image-view");
    image.src = defaultPhoto;
}

let imageInput = document.getElementById("image");
let removeImageBtn = document.getElementById('remove-image');

imageInput.addEventListener("change", () => {
    let inputImage = imageInput.files[0];
    removeImageBtn.disabled = false;
    let fileReader = new FileReader();

    fileReader.onload = function(e) {
        document.getElementById('image-view').src = e.target.result;
    }
    fileReader.readAsDataURL(inputImage);
});

function removeImage(element) {
    // element.closest('.image-preview').remove();

        const container = element.closest('.image-preview');
        const hiddenInput = container.querySelector('input[type="hidden"]');

        // Remove the container and disable the hidden input
        container.style.display = 'none';
        hiddenInput.disabled = true;
}

let galleryInput = document.getElementById("gallery");
let galleryPreviews = document.getElementById("previews");

galleryInput.addEventListener("change", () => {
    let files = galleryInput.files;
    for (let i = 0; i < files.length; i++) {
        let file = files[i];
        let reader = new FileReader();

        reader.onload = function(e) {
            let imagePreview = document.createElement('div');
            imagePreview.classList.add('form-group', 'image-preview' , 'upload_image_content', 'my-3', 'col-6');
            imagePreview.innerHTML = `
                <img src="${e.target.result}" width="auto" height="60px" class="gallery-view">
                <div class="mx-2">
                    <p>${file.name}</p>
                    <p>${file.type}</p>
                </div>
                <div class="form-group">
                    <a class="bg-transparent border-0" style="padding: 0;" onclick="removeImage(this)">
                        <img src="{{ asset('admin/assets/images/main_img/delete.svg') }}" width="30px" height="30px" alt="Delete Image">
                    </a>
                </div>
            `;
            galleryPreviews.appendChild(imagePreview);
        }
        reader.readAsDataURL(file);
    }
});
</script>
@endsection