@extends('Dashboard/app')

@section('main-content')
    <div class="bg-light " >        
        <div class="p-3 col-lg-10 col-12 mt-2 m-auto create-project shadow">        
            <div class="my-5"><a href="" class="mb-5 back-btn rounded"><span class="fa fa-arrow-left"></span> Back</a> </div> 
                
                @php
                    $images = [1,2,3,4,5,6]
                @endphp
                <div class="field-title">ADD NEW IMAGE(S)</div>
                <form class="mb-5"  id="multiple_imgs" action="{{route('save_gallery')}}" method="POST"  enctype="multipart/form-data">
                    @csrf
                    <div class="project-media my-3 p-4 bg-white d-flex shadow-sm" >
                        <span><input type="file" name="imgs[]" multiple></span>
                    </div>
                    {{-- <div class="mt-5">
                        <input type="submit" value="SAVE" class="btn btn-success px-5">
                    </div> --}}
                </form> 
                <div class="field-title">GALLERY ITEMS</div>
                <hr>

                <div class="row">
                    @if ($gallery)                        
                        @foreach ($gallery as $item)
                            <div class="col-lg-3 col-md-4 col-6 mb-4">
                                <div class=""><span class="btn btn-dark ms-auto fa fa-close" onclick="deleteImg({{$item->id}})"></span></div>
                                <img src="{{asset('storage/gallery/'.$item->img)}}" alt="" class="shadow-sm col-12">
                                <p class="text-muted">{{$item->img}}</p>
                            </div>
                        @endforeach
                    @endif
                </div>  
                
            </div>

            
        </div>
    </div>

    <form action="{{route('delete_gallery_img')}}" method="post" id="deleteform" class="d-none">
        @csrf
        <input type="number" name="img_id" id="img_id_delete">
    </form>
@endsection

@section('footer-scripts')

<script>
    $('#multiple_imgs input').change(() => {
        $('#multiple_imgs').submit();
    })
</script>

<script>
    const deleteImg = (img_id) => {

        var proceed = confirm('Are you sure you wish to delet the image');

        if(proceed){
            $('#img_id_delete').val(img_id);
            $('#deleteform').submit();
        }
        
    }
</script>

@endsection