@extends('root.layout.master')

@section('content')
            <!-- Main Container -->
            <main id="main-container">
                <script type="text/javascript">
                    $(document).ready(function() {
                        $('#example').DataTable( {
                            dom: 'Bfrtip',
                            buttons: [
                                'copy', 'csv', 'excel', 'pdf', 'print'
                            ]
                        } );
                    } );
                </script>

                <!-- Page Content -->
                <div class="content">
                    <!-- Quick Overview -->
                    <h2 class="content-heading">
                        <i class="fa fa-angle-right text-muted mr-1"></i> Modification Image
                    </h2>
                    <div class="block block-rounded invisible" data-toggle="appear">
                        <div class="block-content block-content-full ">
                            <div class="col-lg-12">
                                <form action="{{url('modif_image')}}" method="POST" enctype="multipart/form-data" id="accountForm" autocomplete="off" class="w-100 mt-5">
                                
                                    <div class="col-md-8 offset-md-2">
                                        <div class="row">
                                                <div class="form-group col-md-10">
                                                    
                                                    <label for="dm-ecom-product-name">Titre Image</label>
                                                    <input type="text" class="form-control" id="titre" name="titre" placeholder="laisser vide si vide par defaut" value="{{$image->title}}">
                                                </div>
                                                <input type="hidden" name="idimage" value="{{$image->id}}">
                                                
                                        </div>

                                        <div class="form-group col-md-6 row align-items-center text-center">
                                            <!-- <label>Sise 370 x 270 pixel</label> -->
                                                    <label for="photo" style="cursor: pointer; margin-top: 20px">
                                                        <img class="" src="{{asset($image->picture)}}" id="coverPreview" style="display: block; width: 150px; height: 150px;">
                                                        <p class="center-align" style="display: block; text-transform: uppercase; font-size: 0.6em; margin-top: 5px; margin-left: 15px">Cliquez ici</p>
                                                    </label>

                                                    <input type="file" accept="image/*" name="photo" id="photo" style="z-index: -9999; position: absolute; display: none;visibility: hidden; opacity: 0; ">
                                        </div>

                                            
                                        
                                        <div class="row">
                                            
                                            <div class="form-group col-md-6 mt-auto" align="right">
                                                <button type="submit" id="submitForm" class="btn btn-primary pull-right" name="modifier" >Modifier</button>
                                                
                                                
                                            </div>
                                        </div>
                                            
                                    </div>
                                    {{ csrf_field() }}
                                </form>
                            </div>        
                        </div>
                        </div>
                    </div>
                    <!-- END Quick Overview -->

                    


                </div>
                <!-- END Page Content -->
            </main>
            <!-- END Main Container -->

            <script type="text/javascript">


                $("#photo").on('change', function(){
                    readPictureURL(this);
                });

                function readPictureURL(input) {
                    if (input.files && input.files[0]) {
                        if(input.files.length==1){
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                $('#coverPreview').attr('src', e.target.result).fadeIn('slow');
                            }
                            reader.readAsDataURL(input.files[0]);
                        }
                        else{
                            $('#coverPreview').attr('src', '{{ URL::to($image->picture) }}').fadeIn('slow');
                        }
                    }
                    else{
                        $('#coverPreview').attr('src', '{{ URL::to($image->picture) }}').fadeIn('slow');
                    }
                }


                    $('#accountForm').on('submit', function(e){
                        e.preventDefault();
                    })

                    $('#submitForm').on('click', function(){

                        // var oEditor = CKEDITOR.instances.editor;
                        //  let editore = document.getElementById('editor').value = oEditor.getData();
                        
                        //  var role = $('#role');
                        //  var poste = $('#poste');
                        // var _token = $('input[name="_token"]').val();

                        // var emailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

                     
                                
                                             
                                               

                                                var form = $('#accountForm')[0];
                                                var data = new FormData(form);
                                                //AJAX REQUEST
                                                $.ajax({
                                                    type: 'POST',
                                                    enctype: 'multipart/form-data',
                                                    url: '{{url('modif_image')}}',
                                                    data:data,
                                                    processData: false,  // Important!
                                                    contentType: false,
                                                    cache: false,
                                                    timeout: 600000,

                                                    success:function(result) {
                                                        console.log(result);
                                                        showWaitingMask(false);
                                                        if(result == '1'){
                                                            swalWithBootstrapButtons.fire({
                                                                title: 'Succès',
                                                                text: 'Image modifiée avec succès !',
                                                                type: 'success',
                                                                showConfirmButton: true,
                                                                confirmButtonText: 'Super'
                                                            })

                                                            location.reload();
                                                
                                                            
                                                            
                                                        }
                                                        else if (result == '-1') {
                                                            swalWithBootstrapButtons.fire({
                                                                title: 'Erreur',
                                                                text: ' existant',
                                                                type: 'warning',
                                                                showCancelButton: true,
                                                                showConfirmButton: false,
                                                                cancelButtonText: 'D\'accord'
                                                            })
                                                        }
                                                        else{
                                                            console.log(result)
                                                            swalWithBootstrapButtons.fire({
                                                                title: 'Erreur',
                                                                text: 'Echec de l\'opération',
                                                                type: 'error',
                                                                showCancelButton: true,
                                                                showConfirmButton: false,
                                                                cancelButtonText: 'Hummmm'
                                                            })
                                                        }
                                                    },

                                                    error:function(result){
                                                        showWaitingMask(false);
                                                        console.log(result)
                                                        swalWithBootstrapButtons.fire({
                                                            title: 'Erreur',
                                                            text: 'Echec de l\'opération',
                                                            type: 'error',
                                                            showCancelButton: true,
                                                            showConfirmButton: false,
                                                            cancelButtonText: 'Réessayez'
                                                        })
                                                    }
                                                });
                                            
                                        
                                   
                                
                        
                    });
                
            </script>

            <!-- Footer -->
@endsection