@extends('both.template')
@section('title', 'DEPENSES | 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">Dépenses</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">Comptes</li>
                            <li class="breadcrumb-item active">Listing des dépenses</li>
                        </ul>
                    </div>
                    <div class="col-auto float-right ml-auto">
                        <a href="#" class="btn add-btn" data-toggle="modal" data-target="#add_expense"><i class="fa fa-plus"></i> Ajouter une dépense</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">Dépense</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>
                            @foreach($employees as $employee)
                                <option value="{{ $hashids->encode($employee->idEmployee) }}">{{ $employee->employeeFirstname.' '.$employee->employeeLastname }}</option>
                            @endforeach
                        </select>
                        <label class="focus-label">Achetée par</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>
                            @foreach($employees as $employee)
                                <option value="{{ $hashids->encode($employee->idEmployee) }}">{{ $employee->employeeFirstname.' '.$employee->employeeLastname }}</option>
                            @endforeach
                        </select>
                        <label class="focus-label">Payée par</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 mb-0 datatable">
                            <thead>
                            <tr>
                                <th>Dépense</th>
                                <th>Adresse d'achat</th>
                                <th>Date d'achat</th>
                                <th>Effectuée par</th>
                                <th>Montant</th>
                                <th>Payée par</th>
                                <th class="text-center">Status</th>
                                <th class="text-right">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach($expenses as $expense)
                                    <tr>
                                        <td>
                                            <strong>{{ $expense->expenseName }}</strong>
                                        </td>
                                        <td>{{ $expense->purchaseFrom }}</td>
                                        <td>{{ App\Utils\Utils::getDBDateFormat($expense->purchaseDate, true) }}</td>
                                        <td>
                                            <h2 class="table-avatar">
                                                <a href="#" class="avatar avatar-xs">
                                                    <img src="{{ asset('/storage/usersProfiles/'.$expense->employerProfile) }}" alt="">
                                                </a>
                                                <a href="#">{{ $expense->employeeFirstname.' '.$expense->employeeLastname }}</a>
                                            </h2>
                                        </td>
                                        <td>
                                            <script type="text/javascript">
                                                document.write(
                                                    new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format('{{ $expense->purchaseAmount }}')
                                                );
                                            </script>
                                        </td>
                                        <td>{{ $expense->paidUserFirstname.' '.$expense->paidUserLastname }}</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-{{ $expense->expenseState === 0?'danger':'success' }}"></i> {{ $expense->expenseState === 0?'En attente':'Approuvée' }}
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#"><i class="fa fa-dot-circle-o text-danger"></i> En attente</a>
                                                    <a class="dropdown-item" href="#"><i class="fa fa-dot-circle-o text-success"></i> Approuvée</a>
                                                </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_expense"><i class="fa fa-pencil m-r-5"></i> Editer</a>
                                                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#delete_expense"><i class="fa fa-trash-o m-r-5"></i> Supprimer</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Content -->

        <!-- Add Expense Modal -->
        <div id="add_expense" 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'une dépense</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 method="post" onsubmit="return false" enctype="multipart/form-data" id="expenseAddingForm">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="expenseName">Dépense</label>
                                        <input class="form-control" type="text" id="expenseName" name="expenseName">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="purchaseFrom">Adresse d'achat</label>
                                        <input class="form-control" type="text" id="purchaseFrom" name="purchaseFrom">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="purchaseDate">Date d'achat</label>
                                        <div class="cal-icon"><input class="form-control datetimepicker" type="text" id="purchaseDate" name="purchaseDate"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="purchaseBy">Effectuée par </label>
                                        <select class="select" id="purchaseBy" name="purchaseBy">
                                            <option selected disabled>-- Sélectionnez --</option>
                                            @foreach($employees as $employee)
                                                <option value="{{ $hashids->encode($employee->idEmployee) }}">{{ $employee->employeeFirstname.' '.$employee->employeeLastname }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="purchaseAmount">Montant</label>
                                        <input class="form-control" type="number" id="purchaseAmount" name="purchaseAmount">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="paidBy">Payée par</label>
                                        <select class="select" id="paidBy" name="paidBy">
                                            <option selected disabled>-- Sélectionnez --</option>
                                            @foreach($employees as $employee)
                                                <option value="{{ $hashids->encode($employee->idEmployee) }}">{{ $employee->employeeFirstname.' '.$employee->employeeLastname }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center align-items-center align-content-center">

                                <label for="idFileManager" style="cursor: pointer; text-align: center" >
                                    <i class="la la-money" id="fileIco" style="font-size: 7em;"></i>
                                    <h6 id="fileQty">Fichier justificatif (Facultatif)</h6>
                                </label>
                                <input class="form-control" type="file" id="idFileManager" name="idFileManager" style="z-index: -99999; display: none; position: absolute; visibility: hidden; opacity: 0;">


                            </div>

                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn" onclick="submitExpenseStoring()">Ajouter</button>
                            </div>
                            {{ csrf_field() }}
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Add Expense Modal -->

        <!-- Edit Expense Modal -->
        <div id="edit_expense" 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">Edit Expense</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="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Item Name</label>
                                        <input class="form-control" value="Dell Laptop" type="text">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Purchase From</label>
                                        <input class="form-control" value="Amazon" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Purchase Date</label>
                                        <div class="cal-icon"><input class="form-control datetimepicker" type="text"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Purchased By </label>
                                        <select class="select">
                                            <option>Daniel Porter</option>
                                            <option>Roger Dixon</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Amount</label>
                                        <input placeholder="$50" class="form-control" value="$10000" type="text">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Paid By</label>
                                        <select class="select">
                                            <option>Cash</option>
                                            <option>Cheque</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Status</label>
                                        <select class="select">
                                            <option>Pending</option>
                                            <option>Approved</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Attachments</label>
                                        <input class="form-control" type="file">
                                    </div>
                                </div>
                            </div>
                            <div class="attach-files">
                                <ul>
                                    <li>
                                        <img src="assets/img/placeholder.jpg" alt="">
                                        <a href="#" class="fa fa-close file-remove"></a>
                                    </li>
                                    <li>
                                        <img src="assets/img/placeholder.jpg" alt="">
                                        <a href="#" class="fa fa-close file-remove"></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Edit Expense Modal -->

        <!-- Delete Expense Modal -->
        <div class="modal custom-modal fade" id="delete_expense" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-header">
                            <h3>Delete Expense</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 Expense 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 src="{{ asset('js/moment.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap-datetimepicker.min.js') }}"></script>

    <script type="text/javascript">

        let idFileManager = $('#idFileManager');
        idFileManager.on('change', function(){
            let qty = idFileManager.get(0).files.length;
            if(qty > 0) {
                $('#fileQty').text(qty + ' Fichier' + (qty > 1 ? 's':'') + ' Sélectionné');
                $('#fileIco').addClass('animated heartBeat infinite')
            }
            else {
                $('#fileQty').text('Fichier justificatif (Facultatif)');
                $('#fileIco').removeClass('animated heartBeat infinite')
            }
        });

        function submitExpenseStoring() {
            let purchaseBy = $('#purchaseBy');
            let paidBy = $('#paidBy');
            let expenseName = $('#expenseName');
            let purchaseFrom = $('#purchaseFrom');
            let purchaseDate = $('#purchaseDate');
            let purchaseAmount = $('#purchaseAmount');

            if(expenseName.val().length > 3){
                if(purchaseFrom.val().length > 3){
                    if(purchaseDate.val().length === 10){
                        if(purchaseBy.val()!=null){
                            if($.isNumeric(purchaseAmount.val())){
                                if(paidBy.val()!=null){
                                    let form = $('#expenseAddingForm')[0];
                                    let data = new FormData(form);
                                    //AJAX REQUEST
                                    $.ajax({
                                        type: 'POST',
                                        enctype: 'multipart/form-data',
                                        url: '{{ route("root-storeExpense") }}',
                                        data: data,
                                        processData: false,  // Important!
                                        contentType: false,
                                        cache: false,
                                        timeout: 600000,

                                        success: function (result) {
                                            if (result === '1') {
                                                swalWithBootstrapButtons.fire({
                                                    title: 'Good Job',
                                                    text: 'Dépense ajoutée avec succès !',
                                                    type: 'success',
                                                    showConfirmButton: true,
                                                    confirmButtonText: 'Super'
                                                }).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'
                                            })
                                        }
                                    });
                                } else{
                                    swalWithBootstrapButtons.fire({
                                        title: 'Oops',
                                        text: 'Qui a payé la dépense svp ?',
                                        type: 'error',
                                        showCancelButton: true,
                                        showConfirmButton: false,
                                        cancelButtonText: 'Sélectionnez le'
                                    })
                                }
                            } else{
                                swalWithBootstrapButtons.fire({
                                    title: 'Oops',
                                    text: 'Montant invalide',
                                    type: 'error',
                                    showCancelButton: true,
                                    showConfirmButton: false,
                                    cancelButtonText: 'D\'accord'
                                })
                            }
                        } else{
                            swalWithBootstrapButtons.fire({
                                title: 'Oops',
                                text: 'Qui a effectué la dépense svp ?',
                                type: 'error',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: 'Sélectionnez le'
                            })
                        }
                    } else{
                        swalWithBootstrapButtons.fire({
                            title: 'Oops',
                            text: 'Date invalide !',
                            type: 'error',
                            showCancelButton: true,
                            showConfirmButton: false,
                            cancelButtonText: 'D\'accord'
                        })
                    }
                } else{
                    swalWithBootstrapButtons.fire({
                        title: 'Oops',
                        text: 'Adresse invalide !',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'D\'accord'
                    })
                }
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Dépense invalide !',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }
    </script>
@endsection