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

@section('content')

 

    <form action="{{ route('admin.formations.update', $formation->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="{{ $formation->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">{{ $formation->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($formation->gallery) )
                                    @php
                                        $ids    = json_decode( old('gallery') , true );
                                        $gallery = old('gallery') ? \App\Models\Image::whereIn('id',$ids)->get() : $formation->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( $formation->gallery ){
                                foreach( $formation->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="{{ $formation->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="{{ $formation->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="{{ $formation->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/formations/' . $formation->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"  {{ $formation->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>
    $(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