@extends('admin.layout')
@section('content')
 <div class="page-wrapper">
    <div class="container-fluid">



              <div class="row page-titles">
                    <div class="col-md-5 align-self-center">
                        <h4 class="text-themecolor upercase-text">Editer la galerie</h4>
                    </div>
                    <div class="col-md-7 align-self-center text-right">
                        <div class="d-flex justify-content-end align-items-center">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0)">Accueil</a></li>
                            </ol>
                            <button type="button" data-toggle="modal" data-toggle="modal" data-target="#photoModal" class="btn btn-info d-none d-lg-block m-l-15"><i class="fa fa-plus-circle"></i>Ajouter nouvelles photos</button>
                        </div>
                    </div>
                </div>





@if($galerie->photos->count())
<div class="col-12">
        <div class="card card-primary card-outline">
            <div class="card-body">
                <div class="row">
                @foreach($galerie->photos as $photo)
                        <div class="col-sm-4 col-md-2 mb-2">
                        <form method="POST"
                            action="{{route('photos.destroy', $photo['id'])}}"
                            style="display: inline;">
                            @method('DELETE') @csrf
                           
                                <button class="btn btn-sm btn-danger" style="position:absolute;">
                                    <i class="fa fa-times"></i>
                                </button>
                               <img class="img-fluid" src="{{asset('images/'.$photo->link)}}" style="max-height:100px">
                            </form>
                        </div>
                @endforeach
                </div>
            </div>
        </div>
</div>
@endif




    <div class="row">
        <div class="col-sm-4">
        <form  action="{{ route('image.store',$galerie) }}" method="post" enctype="multipart/form-data">
        @csrf
                <input type="hidden"  name="galerie_id" value="{{$galerie->id}}">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-text">
                                <div class="form-group">
                                    <label for="description">Description</label>
                                    <textarea
                                    name="description"
                                    id="description"
                                    class="form-control {{$errors->has('description') ? 'is-invalid' : ''}}"
                                    rows="4"
                                    placeholder="Décrire en quelques mots le but de la galerie photos"
                                    >
                                       {{ old('description', $galerie->description) }}
                                    </textarea>
                                    @if($errors->has('description'))
                                        <span class="invalid-feedback">{{ $errors->first('description') }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                     <button type="submit" style="" class="btn btn-primary">Envoyer</button>
                </form>
            </div> 
           <div class="col-sm-8">
        	   <div class="container" style="margin-bottom: 20px;">
                    <form method="post" action="{{url('image/upload/store')}}" enctype="multipart/form-data" class="dropzone" id="dropzone">
                    @csrf
                    <input type="hidden"  name="idgalerie" value="{{$galerie->id}}">
                    </form>
                </div>
           </div>
    </div>

    </div>
</div>

 <div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="ville" aria-hidden="true">
        <form  action="{{Route('galerie.save')}}" method="post">
            @csrf
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Photos galerie</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group ">
                            <label for="name">Description : </label>
                            <input type="text"
                            class="form-control {{ $errors->has('description') ? 'is-invalid' : ''}}"
                            name="description"
                            placeholder="Saisir une description de la galerie"
                            value="{{ old('description') }}"
                            required autofocus>
                            @if ($errors->has('description'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('description') }}</strong>
                                </span>
                            @endif
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button class="btn btn-primary">Ajouter</button>
                    </div>
                </div>
            </div>
        </form>
    </div>


@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
<meta name="_token" content="{{csrf_token()}}" />
@endpush

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
<script type="text/javascript">
        Dropzone.options.dropzone =
         {
            maxFilesize: 12,
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
               return time+file.name;
            },
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 50000,
            removedfile: function(file) 
            {
                var name = file.upload.filename;
                $.ajax({
                    headers: {
                                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                            },
                    type: 'POST',
                    url: '{{ url("image/delete") }}',
                    data: {filename: name},
                    success: function (data){
                        console.log("File has been successfully removed!!");
                    },
                    error: function(e) {
                        console.log(e);
                    }});
                    var fileRef;
                    return (fileRef = file.previewElement) != null ? 
                    fileRef.parentNode.removeChild(file.previewElement) : void 0;
            },
       
            success: function(file, response) 
            {
                console.log(response);
            },
            error: function(file, response)
            {
               return false;
            }
};
</script>

@endpush

@endsection