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

@section('content')



    <form action="{{ route('admin.services.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <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="{{ old('title') }}" required class="input w-full border mt-2">
                </div>
                {{-- <div class="mb-3 ">
                    <input type="checkbox" id="published" name="status" class="filled-in" value="1" />
                    <label for="published">Published</label>
                </div> --}}

                

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


                <div class="mb-4">
                    <label> Sélectionner des images pour la galerie ( JPG / PNG ) </label>
                    <div class="my-2  ">
                        <input type="file" accept="image/jpeg, image/png" multiple id="drag-area"
                            class="input w-full border mt-2 @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'))
                                @php
                                    $ids = json_decode(old('gallery'), true);
                                    $images = \App\Models\Image::whereIn('id', $ids)->get();
                                @endphp
                                @if (count($images))
                                    @foreach ($images as $image)
                                        <div class="col-span-3 md:col-span-6" 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">
                                                    <span class="flex items-center justify-center w-full">
                                                        <img src="{{ asset('loader1.gif') }}" alt="loading...">
                                                    </span>
                                                </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>
                    <input type="hidden" name="gallery" id="event_gallery" value="{{ old('gallery') ?? '[]' }}" />
                </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="{{ old('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="{{ old('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="{{ old('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/offers/'.$offer->image)}}" id="profile-imgsrc" class="img-responsive  mt-2" style="height:200px;"> --}}
                    <img src="" id="profile-imgsrc" class="img-responsive  mt-2" style="height:200px;">


                </div>

                <div class="mb-3">
                    <label> Status </label>
                    <input type="checkbox" id="status" name="status" 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