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

@section('styleSheets')
    <!-- Datatable CSS -->
    <link rel="stylesheet" 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épartements</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">Employés</li>
                            <li class="breadcrumb-item active">Listing des départements</li>
                        </ul>
                    </div>
                    <div class="col-auto float-right ml-auto">
                        <a href="#" class="btn add-btn" data-toggle="modal" data-target="#add_department"><i class="fa fa-plus"></i> Ajouter un Département</a>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <div class="row">
                <div class="col-md-12">
                    <div>
                        <table class="table table-striped custom-table mb-0 datatable">
                            <thead>
                            <tr>
                                <th style="width: 30px;">#</th>
                                <th>Départements</th>
                                <th class="text-right">Visibilité</th>
                                <th class="text-right">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                                                        @foreach($departments as $department)
                                <tr>
                                    <td>{{ $i++ }}</td>
                                    <td>{{ $department->departmentName  }}</td>
                                    <td>
                                        <div class="onoffswitch" style="margin-right: 20px">
                                            @if ($department->departmentStatus == 1)
                                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="departmentStatus-{{ $department->idDepartment }}" checked>
                                            @else
                                                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="departmentStatus-{{ $department->idDepartment }}">
                                            @endif

                                            <label class="onoffswitch-label" for="departmentStatus-{{ $department->idDepartment }}">
                                                <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_department" 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_department" 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 Department Modal -->
        <div id="add_department" 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 de départment</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 for="departmentName">Nom du département</label>
                                <input class="form-control" type="text" id="departmentName">
                            </div>

                            <div class="form-group">

                                <div class="onoffswitch" style="float: right; margin-left: 20px;">
                                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="departmentStatus" checked>
                                    <label class="onoffswitch-label" for="departmentStatus">
                                        <span class="onoffswitch-inner"></span>
                                        <span class="onoffswitch-switch"></span>
                                    </label>
                                </div>

                                <h4 style="float: right; margin: 5px 0 0 0">Visibilité</h4>
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn" onclick="submitDepartmentStoring()">Ajouter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Add Department Modal -->

        <!-- Edit Department Modal -->
        <div id="edit_department" 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">Edition du département</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">
                            <div class="form-group">
                                <label>Nom du département</label>
                                <input class="form-control" value="" type="text" id="currentDepartmentEdition">
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn">Enregistrer</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Edit Department Modal -->

        <!-- Delete Department Modal -->
        <div class="modal custom-modal fade" id="delete_department" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-header">
                            <h3>Suppression de département</h3>
                            <p>Etes vous sûr de vouloir supprimer ce département ?</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 continue-btn-danger">Supprimer</a>
                                </div>
                                <style type="text/css">
                                    .continue-btn-danger{
                                        border: 1px solid red;
                                        color: red;
                                    }

                                    .continue-btn-danger:hover{
                                        border: 1px solid red;
                                        background: red;
                                        color: #FFF;
                                    }
                                </style>
                                <div class="col-6">
                                    <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Annuler</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Delete Department Modal -->

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

@endsection

@section('scriptsSheets')
    <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 submitDepartmentStoring(){
            let departmentName = $('#departmentName');
            let departmentStatus = $('#departmentStatus');

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

            if(departmentName.val().length >3){
                //AJAX REQUEST
                $.ajax({
                    type: 'POST',
                    url: '{{ route("root-storeDepartment") }}',
                    data: {
                        departmentName:departmentName.val(),
                        departmentStatus:departmentStatus.prop("checked")?1:0,
                        _token:_token
                    },

                    success:function(result) {

                        if(result === '1'){
                            swalWithBootstrapButtons.fire({
                                title: 'Good Job',
                                text: 'Département ajouté avec succès !',
                                type: 'success',
                                showConfirmButton: true,
                                confirmButtonText: 'D\'accord'
                            }).then((action)=>{
                                departmentName.val('');
                                window.location.reload()
                            });
                        }
                        else if (result === '-1') {
                            swalWithBootstrapButtons.fire({
                                title: 'Oops',
                                text: 'Département 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: 'Le nom du département est trop court !',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }

    </script>
@endsection