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

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

            <!-- 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 value=""> -- Selectionnez -- </option>
                            @foreach($designations as $designation)
                                <option value="">{{ $designation->designationName }}</option>
                            @endforeach
                        </select>
                        <label class="focus-label">Designations</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> -- Selectionnez -- </option>
                            <option> Payé </option>
                            <option> Impayé </option>
                        </select>
                        <label class="focus-label">Status Salaire</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="#" 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 datatable">
                            <thead>
                                <tr>
                                    <th>Employé</th>
                                    <th>Identifiant</th>
                                    <th>Email</th>
                                    <th>Date d'entrée</th>
                                    <th>Salaire Brute</th>
                                    <th>Payslip</th>
                                    <th class="text-right">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($salaries as $salary)
                                    <tr>
                                        <td>
                                            <h2 class="table-avatar">
                                                <a href="#" class="avatar"><img alt="" src="{{ asset('/storage/usersProfiles/'.$salary->employerProfile) }}"></a>
                                                <a href="#">
                                                    @if ($salary->idEmployee != auth()->id())
                                                        {{ $salary->employeeFirstname.' '.$salary->employeeLastname }}
                                                    @else
                                                        Vous
                                                    @endif

                                                    <span>{{ $salary->designationName }}</span>
                                                </a>
                                            </h2>
                                        </td>
                                        <td>{{ $salary->employeeCode }}</td>
                                        <td><a href="#" >{{ $salary->employeeEmail }}</a></td>
                                        <td>{{ App\Utils\Utils::getDBDateFormat($salary->employeeJoinDate, true) }}</td>
                                        <td>
                                            @if ($salary->employeeSalary!=0)
                                                <strong>
                                                    <script type="text/javascript">
                                                        document.write(
                                                            new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format('{{ $salary->employeeSalary }}')
                                                        );
                                                    </script>
                                                </strong>
                                            @else
                                                Aucun
                                            @endif
                                        </td>
                                        <td><a class="btn btn-sm btn-primary" href="{{ url('/root/salaries/payslip/'.Str::slug($salary->employeeFirstname.' '.$salary->employeeLastname, '-').'/'.$hashids->encode($salary->idEmployee).'') }}">Générer</a></td>
{{--                                        after generation employee w'll receive notifications that is salary is reday and approved it after that we can take money--}}
                                        <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_salary" onclick="editThisSalary('{{ $hashids->encode($salary->idEmployee) }}', '{{ $salary->employeeFirstname.' '.$salary->employeeLastname }}', '{{ $salary->employeeSalary }}')"><i class="fa fa-pencil m-r-5"></i> Editer</a>
                                                    <a class="dropdown-item" href="javascript:void(0);" onclick="deleteThisSalary('{{ $hashids->encode($salary->idEmployee) }}')"><i class="fa fa-trash-o m-r-5"></i> Supprimer</a>
{{--                                                    when deleted action salary pass to 0;--}}
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Content -->


        <!-- Add Salary Modal -->
        <div id="add_salary" 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 salaire</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="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="idEmployee">Employé</label>
                                        <select class="select" id="idEmployee" onchange="getThisEmployeeSalary()">
                                            <option selected disabled id="">--Sélectionnez--</option>
                                            @foreach($salaries as $employee)
                                                @if ($employee->employeeSalary === 0)
                                                    <option value="{{ $employee->employeeSalary }}" id="{{ $hashids->encode($employee->idEmployee) }}">
                                                        {{ $employee->employeeFirstname.' '.$employee->employeeLastname }}
                                                    </option>
                                                @endif

                                            @endforeach
                                        </select>
                                    </div>

                                </div>
                                <div class="col-sm-6">
                                    <label for="employeeSalary">Salaire Brute</label>
                                    <input class="form-control" type="number" id="employeeSalary">
                                </div>
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn" onclick="addSalary()">Ajouter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Add Salary Modal -->

        <!-- Edit Salary Modal -->
        <div id="edit_salary" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edition de salaire</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="row text-center">
                                <div class="col">
                                    <h3 id="employeeName">Employee Name</h3>
                                </div>
                            </div>
                            <div class="row justify-content-center align-items-center">
                                <div class="col-sm-6 text-center">
                                    <label for="employeeSalaryEdit">Nouveau salaire brute</label>
                                    <input class="form-control" type="number" value="" id="employeeSalaryEdit">
                                </div>
                            </div>

                            <div class="submit-section">
                                <input type="hidden" id="idEmployeeEdit">
                                <button class="btn btn-primary submit-btn" onclick="sendUpdate()">Editer</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Edit Salary Modal -->

        {{ csrf_field() }}
    </div>
    <!-- /Page Wrapper -->
@endsection

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

    <!-- Datetimepicker JS -->
    <script src="{{ asset('js/moment.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap-datetimepicker.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 addSalary() {
            let idEmployee = $('#idEmployee').find('option:selected').attr('id');
            let employeeSalary = $('#employeeSalary');

            if($.isNumeric(employeeSalary.val())){
                updateSalary(idEmployee, employeeSalary.val());
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Salaire invalide',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }

        function editThisSalary(idEmployee, employeeFullName, salary) {
            $('#employeeName').text(employeeFullName);
            $('#employeeSalaryEdit').val(salary);
            $('#idEmployeeEdit').val(idEmployee);
        }

        function sendUpdate(){
            updateSalary( $('#idEmployeeEdit').val(),  $('#employeeSalaryEdit').val())
        }

        function deleteThisSalary(idEmployee) {
            swalWithBootstrapButtons.fire({
                title: 'Un instant',
                text: 'Etes vous sûr de vouloir supprimer ce salaire ?',
                type: 'warning',
                showConfirmButton: true,
                showCancelButton: true,
                confirmButtonText: 'Non',
                cancelButtonText: 'Oui ! Supprimé'
            }).then((action)=>{
                if (action.dismiss === "cancel") {
                    updateSalary(idEmployee, 0)
                }
            })
        }

        function getThisEmployeeSalary() {

            $('#employeeSalary').val($('#idEmployee').val());
        }

        function updateSalary(idEmployee, employeeSalary) {
            $.ajax({
                type: 'POST',
                url: '{{ route("root-updateSalary") }}',
                data: {
                    idEmployee:idEmployee,
                    employeeSalary:employeeSalary,
                    _token: $('input[name="_token"]').val()
                },

                success: function (result) {
                    if (result === '1') {
                        swalWithBootstrapButtons.fire({
                            title: 'Good Job',
                            text: 'Opération effectué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 l\'opération',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'Hummmm'
                    })
                }
            })
        }
    </script>
@endsection