@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> Ajout Service

                    </h2>

                    <div class="block block-rounded invisible" data-toggle="appear">

                        <div class="block-content block-content-full ">

                            <div class="col-lg-12">

                                <form action="#" 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 service</label>

                                                    <input type="text" class="form-control" id="titre" name="titre" value="">

                                                </div>

                                                <div class="form-group col-md-10">

                                                    

                                                    <label for="dm-ecom-product-name">Contenu</label>



                                                    <textarea name="editor" id="editor"></textarea>

                                                        

                                                        <script>

                                                            CKEDITOR.replace('editor', {

                                                                filebrowserUploadUrl: '../editor/ckeditor/ck_upload.php',

                                                                filebrowserUploadMethod: 'form'

                                                            });

                                                        </script>

                                                </div>

                                        </div>



                                        <div class="form-group col-md-6 row align-items-center text-center">

                                            <label>Sise 410 x 270 pixel</label>

                                                    <label for="photo" style="cursor: pointer; margin-top: 20px">

                                                        <img class="" src="{{ URL::to('default.png') }}" 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" >Ajouter</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('default.png') }}').fadeIn('slow');

                        }

                    }

                    else{

                        $('#coverPreview').attr('src', '{{ URL::to('default.png') }}').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: '/add_service',

                                                    data:data,

                                                    processData: false,  // Important!

                                                    contentType: false,

                                                    cache: false,

                                                    timeout: 600000,



                                                    success:function(result) {

                                                        showWaitingMask(false);

                                                        if(result == '1'){

                                                            swalWithBootstrapButtons.fire({

                                                                title: 'Succès',

                                                                text: 'service ajouté avec succès !',

                                                                type: 'success',

                                                                showConfirmButton: true,

                                                                confirmButtonText: 'Super'

                                                            })



                                                            window.location = 'nouveau_service';

                                                

                                                            

                                                            

                                                        }

                                                        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