@extends('admin.layouts.app')
@section('title', __('Admins'))

@section('content')



    <form action="{{ route('admin.services.update', $service->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="grid grid-cols-12 gap-6 mt-5">
            <div class="intro-y col-span-8 box p-5 ">

                <div class="mb-3">
                    <label> Title </label>
                    <input type="text" name="title" value="{{ $service->title }}" required
                        class="input w-full border mt-2">
                </div>


                <div class="mb-6 ">
                    <label> {{ __('Body') }} </label>
                    <textarea name="body" class="input textarea w-full border mt-2" rows="5" id="mytextarea">{{ $service->body }}</textarea>

                </div>


                <div class="mb-4">
                    <label> Sélectionner des images pour la galerie ( JPG / PNG ) </label>
                    <div class="">
                        <div class="my-2 p-3 ">
                            <input type="file" accept="image/*" multiple id="drag-area"
                                class=" border border-4 rounded-3 @error('images') border-danger @enderror "
                                placeholder="Drag & Drop des images pour la galerie" onchange="loadingImages(this)" />
                            <div id="drag-area-loading"></div>
                            <div id="drag-area-preview" class="grid grid-cols-12 gap-6 my-2">
                                @if (old('gallery') ?? count($service->gallery))
                                    @php
                                        $ids = json_decode(old('gallery'), true);
                                        $gallery = old('gallery') ? \App\Models\Image::whereIn('id', $ids)->get() : $service->gallery;
                                    @endphp
                                    @if (count($gallery))
                                        @foreach ($gallery as $image)
                                            <div class="col-span-3" id="image-preview-{{ $image->id }}">
                                                <div
                                                    class="box w-full h-32 shadow-md flex-none image-fit relative overflow-hidden">
                                                    <div
                                                        class="loading invisible w-full h-full absolute z-10 bg-gray-800 text-white opacity-50 p-12">
                                                        loading
                                                    </div>
                                                    <img alt="Logo" id="src-logo" src={{ $image->pathImage }}>
                                                    <button type="button" onclick="removeImage({{ $image->id }})"
                                                        class="absolute mb-1 mr-1 flex items-center justify-center bottom-0 right-0 bg-red-200 text-red-800 rounded-full w-10 h-10">
                                                        <i class="fa fa-trash"></i> </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                @endif
                            </div>
                            <div id="drag-area-error" class="">
                                @error('image_default')
                                    <div class="alert alert-danger text-light"> {{ $message }} </div>
                                @enderror
                                @error('images')
                                    <div class="alert alert-danger text-light"> {{ $message }} </div>
                                @enderror
                            </div>
                        </div>
                        @php
                            
                            if ($service->gallery) {
                                foreach ($service->gallery as $image) {
                                    $listIds[] = $image->id;
                                }
                            }
                            $gallery = @json_encode($listIds ?? []);
                        @endphp
                        <input type="hidden" name="gallery" id="event_gallery" value="{{ old('gallery') ?? $gallery }}" />

                    </div>
                </div>

            </div>
            <div class="intro-y col-span-4 box p-5 ">

                <div class="mt-6 mb-3">
                    <h4 class="font-bold">SEO META</h4>
                </div>
                <div class="mb-3">
                    <label>Meta Title </label>
                    <input type="text" name="meta_title" value="{{ $service->meta_title }}"
                        class="input w-full border mt-2">
                </div>
                <div class="mb-3">
                    <label>Meta Keywords </label>
                    <input type="text" name="meta_keywords" value="{{ $service->meta_keywords }}"
                        class="input w-full border mt-2">
                </div>
                <div class="mb-3">
                    <label>Meta Description </label>
                    <input type="text" name="meta_description" value="{{ $service->meta_description }}"
                        class="input w-full border mt-2">
                </div>

                <br />
                <div class="mb-4">
                    <label> GARD IMAGE ( JPG / PNG ) </label>
                    {{-- <input type="file" name="image" class="input w-full border mt-2" accept="image/*"> --}}
                    <input type="file" name="image" id="profile-image-input" class="input w-full border mt-2"
                        accept="image/*">

                    <img src="{{ asset('/storage/app/public/services/' . $service->image) }}" id="profile-imgsrc"
                        class="img-responsive" style="height:200px;">
                </div>


                <div class="mb-4">
                    <label> Status </label>
                    <input type="checkbox" id="status" name="status" {{ $service->status = true ? 'checked' : '' }}>
                </div>

                <button type="submit" class="button bg-theme-1 mt-10 text-white w-full	"> {{ __('Save') }} </button>
            </div>
        </div>

    </form>


@endsection


@section('javascript')

    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
    <script>
        var _token = "{{ csrf_token() }}";
        // upload file
        let sendFile = async function(file) {
            return await new Promise(async (resolve, reject) => {

                let formData = new FormData();
                formData.append('file', file);
                formData.append("_token", _token);

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    type: "POST",
                    url: '/api/upload/image',
                    enctype: 'multipart/form-data',
                    data: formData,
                    dataType: "JSON",
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        return resolve(response);
                    },
                    error: function(jqXHR, exception) {
                        return reject(jqXHR.responseJSON);
                    }
                });

            });
        }
        async function loadingImages(event) {
            let dragAreaLoading = document.getElementById('drag-area-loading');
            let dragAreaPreview = document.getElementById('drag-area-preview');
            let dragAreaError = document.getElementById('drag-area-error');

            (async function() {
                for await (let file of event.files) {
                    dragAreaLoading.innerHTML = `
            <div class="text-center my-3">
                <h2> loading .... </h2>
            </div>
            `;
                    sendFile(file)
                        .then(res => {
                            let htmlImage = `
                    <div class="box w-full h-32 shadow-md flex-none image-fit relative overflow-hidden">
                        <div class="loading invisible w-full h-full absolute z-10 bg-gray-800 text-white opacity-50 p-12"  >
                            loading
                        </div>
                        <img alt="Logo"  id="src-logo" src=${res.pathImage}>
                        <button type="button" onclick="removeImage(${res.id})" class="absolute mb-1 mr-1 flex items-center justify-center bottom-0 right-0 bg-red-200 text-red-800 rounded-full w-10 h-10" > <i class="fa fa-trash"></i> </button>
                    </div>
                    `;
                            //htmlImage+=`<input type="hidden" name="${preview_config.name}[]" value="${res.id}" />`;
                            let divPreview = document.createElement('div');

                            divPreview.className = 'col-span-3 md:col-span-6';
                            divPreview.setAttribute("id", `image-preview-${res.id}`);
                            divPreview.innerHTML = htmlImage;
                            dragAreaPreview.appendChild(divPreview);

                            pushToGallery(res.id);
                        })
                        /*
                        .catch( (err) => {

                            let elError = document.createElement('div');
                                elError.className = 'bg-red-100 text-red-700 text-base font-semibold px-6 py-2 rounded-lg m-2';
                                elError.innerHTML = file.name;
                                dragAreaError.appendChild(elError);

                        })
                        */
                        .then(() => {

                            // clear loading
                            dragAreaLoading.innerHTML = '';

                        });
                }
            })();
        }

        function removeImage(id) {
            let imageElement = document.getElementById(`image-preview-${id}`);
            let conferm = confirm("Êtes-vous sûr de supprimer cet élément");
            if (conferm) {
                let loading = imageElement.querySelector(".loading");
                // set image loading action
                loading.classList.remove('invisible');
                fetch(`/api/upload/image/${id}/delete`, {
                        method: 'get'
                    })
                    .then(response => {
                        if (response.ok) {
                            // remov it in html and remove it in json input
                            imageElement.remove();
                            detachFromGallery(id)
                        } else {
                            loading.classList.add('invisible');
                        }
                    });
            }
        }

        function pushToGallery(id) {
            let event_gallery = document.getElementById('event_gallery');
            let gallery_json = JSON.parse(event_gallery.value);
            gallery_json.push(id);
            event_gallery.value = JSON.stringify(gallery_json);
        }

        function detachFromGallery(id) {
            let event_gallery = document.getElementById('event_gallery');
            let gallery_json = JSON.parse(event_gallery.value);
            event_gallery.value = JSON.stringify(gallery_json.filter((img_id) => img_id != id));
        }
    </script>

    <script>
        $(function() {
            function showImage(fileInput, imgID) {
                if (fileInput.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $(imgID).attr('src', e.target.result);
                        $(imgID).attr('alt', fileInput.files[0].name);
                    }
                    reader.readAsDataURL(fileInput.files[0]);
                }
            }
            $('#profile-image-btn').on('click', function() {
                $('#profile-image-input').click();
            });
            $('#profile-image-input').on('change', function() {
                showImage(this, '#profile-imgsrc');

                var img = document.getElementById('profile-imgsrc');
                img.style.display = 'block';

            });
        })
    </script>

@endsection