@extends('both.template')
@section('title', 'CLIENTS | OPTIMIA')

@section('styleSheets')
    <link rel="stylesheet" type="text/css" href="{{ URL::to('css/select2.min.css') }}">
@endsection

@section('content')

    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <!-- Page Content -->
        <div class="content container-fluid">

            <!-- Page Header -->
            <div class="page-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="page-title">Clients</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">Clients</li>
                            <li class="breadcrumb-item active">Listing des clients</li>
                        </ul>
                    </div>
                    <div class="col-auto float-right ml-auto">
                        <a href="#" class="btn add-btn" data-toggle="modal" data-target="#add_client"><i class="fa fa-plus"></i> Ajouter un client</a>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <!-- Search Filter -->
            <!-- <div class="row filter-row">
                <div class="col-sm-6 col-md-3">
                    <div class="form-group form-focus">
                        <input type="text" class="form-control floating">
                        <label class="focus-label">Client ID</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="form-group form-focus">
                        <input type="text" class="form-control floating">
                        <label class="focus-label">Nom client </label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="form-group form-focus select-focus">
                        <select class="select" id="">
                            <option>Selectionnez une société</option>
                            @foreach($societies as $society)
                                <option value="{{ $society->idSociety }}" >{{ $society->societyName }}</option>
                            @endforeach
                        </select>
                        <label class="focus-label">Sociétés</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="btn btn-success btn-block"> Rechercher </a>
                </div>
            </div> -->
            <!-- Search Filter -->

            <div class="row staff-grid-row">
                @foreach($clients as $client)
                    <div class="col-md-4 col-sm-6 col-12 col-lg-4 col-xl-3">
                    <div class="profile-widget">
                        <div class="profile-img">
                            <a href="javascript:void(0);" class="avatar"><img alt="" src="{{ asset('storage/usersProfiles/default_avatar.png')  }}"></a>
                        </div>
                        <div class="dropdown profile-action">
                            <a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#edit_client" onclick='editThisClient("{{ $client->idClient }}", "{{ $client->clientFullName }}", "{{ $client->societyName }}", "{{ $client->clientEmail }}", "{{ $client->clientPhone }}", "{{ $client->clientAdress }}", "{{ $client->clientGender }}")'><i class="fa fa-pencil m-r-5"></i> Edition</a>
                                <!-- <a class="dropdown-item" href="#" data-toggle="modal" data-target="#delete_client"><i class="fa fa-trash-o m-r-5"></i> Suppression</a> -->
                            </div>
                        </div>
                        <h4 class="user-name m-t-10 mb-0 text-ellipsis"><a href="#">{{ $client->clientFullName }}</a></h4>
                        <h5 class="user-name m-t-10 mb-0 text-ellipsis"><a href="#">{{ $client->societyName }}</a></h5>
                        <div class="small text-muted">{{ $client->clientEmail }}</div>
                        <!-- <a href="javascript:void(0);" class="btn btn-white btn-sm m-t-10">Message</a>
                        <a href="javascript:void(0);" class="btn btn-white btn-sm m-t-10">Voir le profil</a> -->
                    </div>
                </div>
                @endforeach
            </div>
            {{ csrf_field() }}
        </div>
        <!-- /Page Content -->

        <!-- Add Client Modal -->
        <div id="add_client" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Ajout d'un client</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form onsubmit="return false" autocomplete="off">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group ">
                                        <label>Sociétés</label>
                                        <select class="select" id="idSociety">
                                            <option>Selectionnez une société</option>
                                            @foreach($societies as $society)
                                                <option value="{{ $society->idSociety }}" >{{ $society->societyName }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group" >
                                        <label class="col-form-label">Nom complet Client</label>
                                        <input class="form-control" type="text" id="clientFullName">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-form-label">Email Client</label>
                                        <input class="form-control floating" type="email" id="clientEmail">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-form-label">Contact Client</label>
                                        <input class="form-control" type="number" id="clientPhone">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-form-label">Adresse Client</label>
                                        <input class="form-control" type="text" id="clientAdress">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="employeeGender">Sexe du Client </label>
                                        <select class="select" id="clientGender">
                                            <option selected disabled>Sélectionnez le sexe</option>
                                            <option value="Masculin">Masculin</option>
                                            <option value="Féminin">Féminin</option>
                                        </select>
                                    </div>
                                </div>

                            </div>

                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn" onclick="submitDesignationStoring()">Ajouter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Add Client Modal -->

        <!-- Edit Client Modal -->
        <div id="edit_client" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Editer le client</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form onsubmit="return false" autocomplete="off">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group ">
                                        <label>Sociétés</label>
                                        <select class="select" id="societyNameEdit">
                                            <option>Selectionnez une société</option>
                                            @foreach($societies as $society)
                                                <option value="{{ $society->idSociety }}" >{{ $society->societyName }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group" >
                                        <label class="col-form-label">Nom complet Client</label>
                                        <input class="form-control" type="text" id="clientFullNameEdit">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-form-label">Email Client</label>
                                        <input class="form-control floating" type="email" id="clientEmailEdit">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-form-label">Contact Client</label>
                                        <input class="form-control" type="number" id="clientPhoneEdit">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-form-label">Adresse Client</label>
                                        <input class="form-control" type="text" id="clientAdressEdit">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="employeeGender">Sexe du Client </label>
                                        <select class="select" id="clientGenderEdit">
                                            <option selected disabled>Sélectionnez le sexe</option>
                                            <option value="Masculin">Masculin</option>
                                            <option value="Féminin">Féminin</option>
                                        </select>
                                    </div>
                                </div>

                            </div>
                            <input type="hidden" id="idClientEdit" style="display: none; z-index: -9999; position:absolute;">

                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn" onclick="submitClientEditing()">Ajouter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Edit Client Modal -->

        <!-- Delete Client Modal -->
        <div class="modal custom-modal fade" id="delete_client" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-header">
                            <h3>Delete Client</h3>
                            <p>Are you sure want to delete?</p>
                        </div>
                        <div class="modal-btn delete-action">
                            <div class="row">
                                <div class="col-6">
                                    <a href="javascript:void(0);" class="btn btn-primary continue-btn">Delete</a>
                                </div>
                                <div class="col-6">
                                    <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Delete Client Modal -->

    </div>
    <!-- /Page Wrapper -->
@endsection

@section('scriptsSheets')


    <script src="{{ URL::to('js/select2.min.js') }}"></script>

    <script type="text/javascript">
        let idClientEdit = $('#idClientEdit');
        let clientFullNameEdit = $('#clientFullNameEdit');
        let societyNameEdit = $('#societyNameEdit');
        let clientEmailEdit = $('#clientEmailEdit');
        let clientPhoneEdit = $('#clientPhoneEdit');
        let clientAdressEdit = $('#clientAdressEdit');
        let clientGenderEdit = $('#clientGenderEdit');

        function editThisClient(idClient, clientFullName, societyName, clientEmail, clientPhone, clientAdress, clientGender) {
            idClientEdit.val(idClient);
            clientFullNameEdit.val(clientFullName);
            societyNameEdit.val(societyName); 
            clientEmailEdit.val(clientEmail);
            clientPhoneEdit.val(clientPhone);
            clientAdressEdit.val(clientAdress);
            clientGenderEdit.val(clientGender);
        }

        function submitClientEditing() {
            if(clientFullNameEdit.val().length > 3 && clientGenderEdit.val().length > 1){
               if($.isNumeric(idClientEdit.val())){
                   $.ajax({
                       type: 'POST',
                       url: '{{ route("root-editClient") }}',
                       data: {
                           idClientEdit: idClientEdit.val(),
                           clientFullNameEdit: clientFullNameEdit.val(),
                           societyNameEdit: societyNameEdit.val(),
                           clientEmailEdit: clientEmailEdit.val(),
                           clientPhoneEdit: clientPhoneEdit.val(),
                           clientAdressEdit: clientAdressEdit.val(),
                           clientGenderEdit: clientGenderEdit.val(),
                           _token: $('input[name="_token"]').val()
                       },

                       success: function (result) {
                           if (result === '1') {
                               swalWithBootstrapButtons.fire({
                                   title: 'Good Job',
                                   text: 'Client editée avec succès !',
                                   type: 'success',
                                   showConfirmButton: true,
                                   confirmButtonText: 'D\'accord'
                               }).then((action) => {
                                   window.location.reload();
                               });
                           } else {
                               console.log(result);
                               swalWithBootstrapButtons.fire({
                                   title: 'Oops',
                                   text: 'Echec de l\'opération',
                                   type: 'error',
                                   showCancelButton: true,
                                   showConfirmButton: false,
                                   cancelButtonText: 'Hummmm'
                               })
                           }
                       },

                       error: function (error) {

                           console.log(error);
                           swalWithBootstrapButtons.fire({
                               title: 'Oops',
                               text: 'Echec de chargement',
                               type: 'error',
                               showCancelButton: true,
                               showConfirmButton: false,
                               cancelButtonText: 'Hummmm'
                           })
                       }
                   })
               } else{
                   swalWithBootstrapButtons.fire({
                       title: 'Oops',
                       text: 'Veuillez choisir la priorité de la tâche',
                       type: 'error',
                       showCancelButton: true,
                       showConfirmButton: false,
                       cancelButtonText: 'D\'accord'
                   })
               }
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Veuillez renseigner tous les champs',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }


        function submitDesignationStoring(){

            let idSociety = $('#idSociety');
            let clientFullName = $('#clientFullName');
            let clientEmail = $('#clientEmail');
            let clientPhone = $('#clientPhone');
            let clientAdress = $('#clientAdress');
            let clientGender = $('#clientGender');
            let _token = $('input[name="_token"]').val();
            const regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

            if($.isNumeric(idSociety.val())) {
                if(clientFullName.val().length >3) {
                    if(regex.test(clientEmail.val())) {
                        if($.isNumeric(clientPhone.val())) {
                            if(clientAdress.val().length > 3) {
                                if((clientGender.val() === "Masculin") || (clientGender.val() === "Féminin")) {
                                    //AJAX REQUEST
                                    $.ajax({
                                        type: 'POST',
                                        url: '{{ route("root-storeClient") }}',
                                        data: {
                                            idSociety: idSociety.val(),
                                            clientFullName: clientFullName.val(),
                                            clientEmail: clientEmail.val(),
                                            clientPhone: clientPhone.val(),
                                            clientAdress: clientAdress.val(),
                                            clientGender: clientGender.val(),
                                            _token: _token
                                        },

                                        success: function (result) {

                                            if (result === '1') {
                                                swalWithBootstrapButtons.fire({
                                                    title: 'Good Job',
                                                    text: 'Client ajouté avec succès !',
                                                    type: 'success',
                                                    showConfirmButton: true,
                                                    confirmButtonText: 'D\'accord'
                                                }).then((action) => {

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

                                        error: function (result) {
                                            console.log(result);
                                            swalWithBootstrapButtons.fire({
                                                title: 'Oops',
                                                text: 'Echec de l\'opération',
                                                type: 'error',
                                                showCancelButton: true,
                                                showConfirmButton: false,
                                                cancelButtonText: 'Hummmm'
                                            })
                                        }
                                    });
                                } else{
                                    swalWithBootstrapButtons.fire({
                                        title: 'Oops',
                                        text: 'Sexe client invalide !',
                                        type: 'error',
                                        showCancelButton: true,
                                        showConfirmButton: false,
                                        cancelButtonText: 'D\'accord'
                                    })
                                }
                            } else{
                                swalWithBootstrapButtons.fire({
                                    title: 'Oops',
                                    text: 'Adress client invalide !',
                                    type: 'error',
                                    showCancelButton: true,
                                    showConfirmButton: false,
                                    cancelButtonText: 'D\'accord'
                                })
                            }
                        } else{
                            swalWithBootstrapButtons.fire({
                                title: 'Oops',
                                text: 'Contact client invalide !',
                                type: 'error',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: 'D\'accord'
                            })
                        }
                    } else{
                        swalWithBootstrapButtons.fire({
                            title: 'Oops',
                            text: 'Email client invalide !',
                            type: 'error',
                            showCancelButton: true,
                            showConfirmButton: false,
                            cancelButtonText: 'D\'accord'
                        })
                    }
                } else{
                    swalWithBootstrapButtons.fire({
                        title: 'Oops',
                        text: 'Nom client invalide !',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'D\'accord'
                    })
                }
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Veuillez sélectionner une société !',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }
    </script>
@endsection