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

@section('styleSheets')
    <link rel="stylesheet" type="text/css" href="{{ URL::to('css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2.min.css') }}">
    <!-- Datetimepicker CSS -->
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-datetimepicker.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">Permissions</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">Employés</li>
                            <li class="breadcrumb-item active">Permissions</li>
                        </ul>
                    </div>
                    <div class="col-auto float-right ml-auto">
                        <a href="#" class="btn add-btn" data-toggle="modal" data-target="#add_leave"><i class="fa fa-plus"></i> Ajouter une permission</a>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <!-- Leave Statistics -->
            <div class="row">
                <div class="col-md-3">
                    <div class="stats-info">
                        <h6>Présences</h6>
                        <h4>12 / 60</h4>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-info">
                        <h6>Permissions</h6>
                        <h4>8 <span>Ajourd'hui</span></h4>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-info">
                        <h6>Absences</h6>
                        <h4>0 <span>Ajourd'hui</span></h4>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-info">
                        <h6>En attente</h6>
                        <h4>12</h4>
                    </div>
                </div>
            </div>
            <!-- /Leave Statistics -->

            <!-- Search Filter -->
            <div class="row filter-row">
                <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">
                    <div class="form-group form-focus">
                        <input type="text" class="form-control floating">
                        <label class="focus-label">Nom employé</label>
                    </div>
                </div>

                <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">
                    <div class="form-group form-focus select-focus">
                        <select class="select floating">
                            <option> -- Selectionner -- </option>
                            @foreach($types as $type)
                                <option value="{{ $type->idLeaveType }}">{{ $type->leaveTypeName }}</option>
                            @endforeach
                        </select>
                        <label class="focus-label">Type de permission</label>
                    </div>
                </div>

                <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">
                    <div class="form-group form-focus select-focus">
                        <select class="select floating">
                            <option> -- Selectionner -- </option>
                            @foreach($states as $state)
                                <option value="{{ $state->idLeaveState }}">{{ $state->leaveStateName }}</option>
                            @endforeach
                        </select>
                        <label class="focus-label">Status permission</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">
                    <div class="form-group form-focus">
                        <div class="cal-icon">
                            <input class="form-control floating datetimepicker" type="text">
                        </div>
                        <label class="focus-label">Du</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">
                    <div class="form-group form-focus">
                        <div class="cal-icon">
                            <input class="form-control floating datetimepicker" type="text">
                        </div>
                        <label class="focus-label">Au</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">
                    <a href="javascript:void(0)" class="btn btn-success btn-block"> Rechercher </a>
                </div>
            </div>
            <!-- /Search Filter -->

            <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>Employé</th>
                                <th>Type</th>
                                <th>Du</th>
                                <th>Au</th>
                                <th>Jours</th>
                                <th>Raison</th>
                                <th class="text-center">Status</th>
                                <th class="text-right">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach($leaves as $leave)
                                    <tr>
                                        <td>
                                            <h2 class="table-avatar">
                                                <a href="javascript:void(0);" class="avatar"><img alt="" src="{{ asset('storage/usersProfiles/'.$leave->employerProfile) }}"></a>
                                                <a href="#">{{ $leave->employeeFirstname.' '.$leave->employeeLastname }} <span>{{ $leave->designationName }}</span></a>
                                            </h2>
                                        </td>
                                        <td>{{ $leave->leaveTypeName }}</td>
                                        <td>{{ App\Utils\Utils::getDBDateFormat($leave->leaveBoardFrom, true) }}</td>
                                        <td>{{ App\Utils\Utils::getDBDateFormat($leave->leaveBoardTo, true) }}</td>
                                        <td>1 jour</td>
                                        <td>{{ Str::limit($leave->leaveBoardReason, 30) }}   <a href="#" style="font-size: 1em;"><i class="la la-eye"></i></a></td>
                                        <td class="text-center">
                                            <div class="dropdown action-label">
                                                <a class="btn btn-white btn-sm btn-rounded dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
                                                    <i class="fa fa-dot-circle-o text-info"></i> {{ $leave->leaveStateName }}
                                                </a>
                                                @php
                                                    $colors = [
                                                        1 => 'info',
                                                        2 => 'success',
                                                        3 => 'danger'
                                                    ];
                                                @endphp
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    @foreach($states as $state)
                                                        <a class="dropdown-item" href="#" data-toggle="modal" data-target="#approve_leave"><i class="fa fa-dot-circle-o text-{{ $colors[$state->idLeaveState] }}"></i> {{ $state->leaveStateName }}</a>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-right">
                                            <div class="dropdown dropdown-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_leave"><i class="fa fa-pencil m-r-5"></i> Editer</a>
                                                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#delete_approve"><i class="fa fa-trash-o m-r-5"></i> Suppri,er</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Content -->

        <!-- Add Leave Modal -->
        <div id="add_leave" 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">Ajouter une permission</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" method="post">
                            <div class="form-group">
                                <label for="idLeaveType">Type de permission </label>
                                <select class="select" id="idLeaveType">
                                    <option>Selectionner</option>
                                    @foreach($types as $type)
                                        <option value="{{ $hashids->encode($type->idLeaveType) }}">{{ $type->leaveTypeName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="leaveBoardFrom">Du </label>
                                <div class="cal-icon">
                                    <input class="form-control datetimepicker" type="text" id="leaveBoardFrom">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="leaveBoardTo">Au </label>
                                <div class="cal-icon">
                                    <input class="form-control datetimepicker" type="text" id="leaveBoardTo">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="daysCounter">Nombre total de jours </label>
                                <input class="form-control" readonly type="text" id="daysCounter">
                            </div>

                            <div class="form-group">
                                <label for="leaveBoardReason">Raison </label>
                                <textarea rows="4" class="form-control" id="leaveBoardReason"></textarea>
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn" onclick="submitLeaveStoring()">Ajouter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Add Leave Modal -->

        <!-- Edit Leave Modal -->
        <div id="edit_leave" 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 de permission</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" method="post" autocomplete="off">
                            <div class="form-group">
                                <label for="idLeaveTypeEdit">Type de permission </label>
                                <select class="select" id="idLeaveTypeEdit">
                                    <option>Sélectionner</option>
                                    @foreach($types as $type)
                                        <option value="{{ $hashids->encode($type->idLeaveType) }}">{{ $type->leaveTypeName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="leaveBoardFromEdit">Du </label>
                                <div class="cal-icon">
                                    <input class="form-control datetimepicker" type="text" id="leaveBoardFromEdit">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="leaveBoardToEdit">Au</label>
                                <div class="cal-icon">
                                    <input class="form-control datetimepicker" type="text" id="leaveBoardToEdit">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="daysCounterEdit">Nombre total de jours </label>
                                <input class="form-control" readonly type="text" id="daysCounterEdit">
                            </div>

                            <div class="form-group">
                                <label for="leaveBoardReasonEdit">Raison </label>
                                <textarea rows="4" class="form-control" id="leaveBoardReasonEdit"></textarea>
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn" onclick="submitLeaveEditing()">Ajouter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Edit Leave Modal -->

        <!-- Approve Leave Modal -->
        <div class="modal custom-modal fade" id="approve_leave" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-header">
                            <h3>Un instant</h3>
                            <p>Etes vous sûr de vouloir modifier le status de cette permision ?</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">Modidier</a>
                                </div>
                                <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>
        <!-- /Approve Leave Modal -->

        <!-- Delete Leave Modal -->
        <div class="modal custom-modal fade" id="delete_approve" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-header">
                            <h3>Un instant</h3>
                            <p>Etes vous sûr de vouloir supprimer cette permission ?</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">Supprimer</a>
                                </div>
                                <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 Leave Modal -->
        {{ csrf_field() }}
    </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 src="{{ asset('js/moment.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap-datetimepicker.min.js') }}"></script>

    <script type="text/javascript">
        let _token = $('input[name="_token"]').val();

        function submitLeaveStoring() {

            let idLeaveType = $('#idLeaveType');
            let leaveBoardFrom = $('#leaveBoardFrom');
            let leaveBoardTo = $('#leaveBoardTo');
            let leaveBoardReason = $('#leaveBoardReason');

            if (idLeaveType.val().length > 5) {
                if (leaveBoardFrom.val().length === 10) {
                    if (leaveBoardTo.val().length === 10) {
                        if (leaveBoardReason.val().length > 3) {
                            //AJAX REQUEST
                            $.ajax({
                                type: 'POST',
                                url: '{{ route("root-storeLeave") }}',
                                data: {
                                    idLeaveType: idLeaveType.val(),
                                    leaveBoardFrom: leaveBoardFrom.val(),
                                    leaveBoardTo: leaveBoardTo.val(),
                                    leaveBoardReason: leaveBoardReason.val(),
                                    _token: _token
                                },

                                success: function (result) {

                                    if (result === '1') {
                                        swalWithBootstrapButtons.fire({
                                            title: 'Good Job',
                                            text: 'Permission ajoutée avec succès !',
                                            type: 'success',
                                            showConfirmButton: true,
                                            confirmButtonText: 'D\'accord'
                                        }).then((action) => {
                                            window.location.reload()
                                        });
                                    } else if (result === '-1') {
                                        swalWithBootstrapButtons.fire({
                                            title: 'Oops',
                                            text: 'Permission 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: 'Raison permission invalide',
                                type: 'error',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: 'D\'accord'
                            })
                        }
                    } else{
                        swalWithBootstrapButtons.fire({
                            title: 'Oops',
                            text: 'Date fin permission incorrecte',
                            type: 'error',
                            showCancelButton: true,
                            showConfirmButton: false,
                            cancelButtonText: 'D\'accord'
                        })
                    }
                } else{
                    swalWithBootstrapButtons.fire({
                        title: 'Oops',
                        text: 'Date début permission incorrecte',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'D\'accord'
                    })
                }
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Veuillez sélectionner le type de permission',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }

        function submitLeaveEditing() {

        }
    </script>
@endsection