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

@section('styleSheets')
    <link rel="stylesheet" type="text/css" href="{{ URL::to('css/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL::to('css/dataTables.bootstrap4.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">Désignations</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">Employés</li>
                            <li class="breadcrumb-item active">Listing des désignations</li>
                        </ul>
                    </div>
                    <div class="col-auto float-right ml-auto">
                        <a href="#" class="btn add-btn" data-toggle="modal" data-target="#add_designation"><i class="fa fa-plus"></i> Ajouter un désignation</a>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->
                        <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">

                        <table class="table table-striped custom-table mb-0 datatable">
                            <thead>
                            <tr>
                                <th style="width: 30px;">#</th>
                                <th>Désignation </th>
                                <th>Département </th>
                                <!-- <th class="text-right">Visibilité</th>
                                <th class="text-right">Action</th> -->
                            </tr>
                            </thead>
                            <tbody>

                            @foreach($designations as $designation)
                                <tr>
                                    <td>{{ $i++ }}</td>
                                    <td>{{ $designation->designationName  }}</td>
                                    <td>{{ $designation->departmentName  }}</td>
                                    <!-- <td>
                                        <div class="onoffswitch" style="margin-right: 20px">
                                            @if ($designation->designationStatus == 1)
                                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="designationStatus-{{ $designation->idDesignation }}" checked>
                                            @else
                                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="designationStatus-{{ $designation->idDesignation }}">
                                            @endif

                                            <label class="onoffswitch-label" for="designationStatus-{{ $designation->idDesignation }}">
                                                <span class="onoffswitch-inner"></span>
                                                <span class="onoffswitch-switch"></span>
                                            </label>
                                        </div>
                                    </td> -->
                                    <!-- <td class="text-right">
                                        <a href="#" data-toggle="modal" data-target="#edit_designation" style="display: inline-block; margin-right: 10px">
                                            <i class="fa fa-pencil" style="font-size: 1.7em; color: #2dc3e8;"></i>
                                        </a>

                                        <a  href="#" data-toggle="modal" data-target="#delete_designation" style="display: inline-block">
                                            <i class="fa fa-trash-o" style="font-size: 1.8em; color: red;"></i>
                                        </a>
                                    </td> -->
                                </tr>
                            @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {{ csrf_field() }}
        </div>
        <!-- /Page Content -->

        <!-- Add Designation Modal -->
        <div id="add_designation" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Ajout d'une désignation</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="form-group">
                                <label>Nom de la désignation </label>
                                <input class="form-control" type="text" id="designationName">
                            </div>
                            <div class="form-group">
                                <label for="idDepartment">Département </label>
                                <select class="select" id="idDepartment">
                                    <option>Selectionnez un département</option>
                                    @foreach($departments as $department)
                                        <option value="{{ $department->idDepartment }}" >{{ $department->departmentName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn" onclick="submitDesignationStoring()">Ajouter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Add Designation Modal -->

        <!-- Edit Designation Modal -->
        <div id="edit_designation" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Designation</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>
                            <div class="form-group">
                                <label>Designation Name <span class="text-danger">*</span></label>
                                <input class="form-control" value="Web Developer" type="text">
                            </div>
                            <div class="form-group">
                                <label>Department <span class="text-danger">*</span></label>
                                <select class="select">
                                    <option>Select Department</option>
                                    <option>Web Development</option>
                                    <option>IT Management</option>
                                    <option>Marketing</option>
                                </select>
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Edit Designation Modal -->

        <!-- Delete Designation Modal -->
        <div class="modal custom-modal fade" id="delete_designation" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-header">
                            <h3>Delete Designation</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 Designation Modal -->

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

@endsection

@section('scriptsSheets')
    <script src="{{ URL::to('js/select2.min.js') }}"></script>
    <script src="{{ URL::to('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::to('js/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">
        function submitDesignationStoring(){

            let idDepartment = $('#idDepartment');
            let designationName = $('#designationName');
            let _token = $('input[name="_token"]').val();

            if(designationName.val().length >3) {
                if (idDepartment != null && $.isNumeric(idDepartment.val())){
                    //AJAX REQUEST
                    $.ajax({
                        type: 'POST',
                        url: '{{ route("root-storeDesignation") }}',
                        data: {
                            designationName: designationName.val(),
                            idDepartment: idDepartment.val(),
                            _token: _token
                        },

                        success: function (result) {

                            if (result === '1') {
                                swalWithBootstrapButtons.fire({
                                    title: 'Good Job',
                                    text: 'Désignation ajoutée avec succès !',
                                    type: 'success',
                                    showConfirmButton: true,
                                    confirmButtonText: 'D\'accord'
                                }).then((action) => {
                                    designationName.val('');
                                    window.location.reload()
                                });
                            } else if (result === '-1') {
                                swalWithBootstrapButtons.fire({
                                    title: 'Oops',
                                    text: 'Désignation existante',
                                    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: 'Veuillez sélectionner un départment !',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'D\'accord'
                    })
                }
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Le nom de la désignation est trop court !',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }
    </script>
@endsection