@extends('both.template')
@section('title', 'PAYEMENTS | 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">Payements</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">Comptes</li>
                            <li class="breadcrumb-item active">Listing des payements</li>
                        </ul>
                    </div>
                    <div class="col-auto float-right ml-auto">
                        <a href="#" class="btn add-btn" data-toggle="modal" data-target="#add_payment"><i class="fa fa-plus"></i> Ajouter un payement</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">Facture</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($types as $type)
                                <option value="{{ $hashids->encode($type->idPaymentType) }}">{{ $type->paymentName }}</option>
                            @endforeach
                        </select>
                        <label class="focus-label">Type de payment</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($clients as $client)
                                @if (!Str::contains($client->clientFullName, 'Synergie') && !Str::contains($client->clientFullName, 'Logex') )
                                    <option value="{{ $hashids->encode($client->idClient) }}">
                                        {{ $client->clientFullName }} ( {{ $client->societyName }} )
                                    </option>
                                @endif
                            @endforeach
                        </select>
                        <label class="focus-label">Clients Facturé</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>Facture</th>
                                    <th>Client</th>
                                    <th>Type Payement</th>
                                    <th>Date Payement</th>
                                    <th>Montant Payée</th>
                                    <th>Reste à payer</th>
                                    <th>Reçu par</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($payments as $payment)
                                <tr>
                                    <td><strong><a href="{{ url('/root/invoices/details/'.$hashids->encode($payment->idInvoiceBoard)) }}">#{{ $payment->invoiceCode }}</a></strong></td>
                                    <td>{{ $payment->clientFullName }}</td>
                                    <td>{{ $payment->paymentName }}</td>
                                    <td>{{ App\Utils\Utils::getDBDateFormat($payment->paymentDate, true) }}</td>
                                    <td>
                                        <script type="text/javascript">
                                            document.write(
                                                new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format('{{ $payment->paymentAmount }}')
                                            );
                                        </script>
                                    </td>
                                    <td>
                                        <script type="text/javascript">
                                            document.write(
                                                new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format('{{ $payment->paymentRest }}')
                                            );
                                        </script>
                                    </td>
                                    <td>
                                        <h2 class="table-avatar">
                                            <a href="#" class="avatar avatar-xs">
                                                <img src="{{ asset('/storage/usersProfiles/'.$payment->employerProfile) }}" alt="">
                                            </a>
                                            <a href="#">{{ $payment->employeeFirstname.' '.$payment->employeeLastname }}</a>
                                        </h2>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Content -->

        <!-- Add Expense Modal -->
        <div id="add_payment" 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 payement</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" autocomplete="off">
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="form-group">
                                        <label for="idInvoice">Facture</label>
                                        <select class="select" id="idInvoice" onchange="updateRestAmount()">
                                            <option selected disabled>-- Sélectionnez --</option>
                                            @foreach($invoices as $invoice)
                                                <option id="{{ $invoice->invoiceGrandTotal }}" value="{{ $hashids->encode($invoice->idInvoiceBoard) }}">
                                                  {{ $invoice->clientFullName }} / {{ $invoice->invoiceCode }} ( {{ $invoice->invoiceName }} )
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="idPaymentType">Type de payement</label>
                                        <select class="select" id="idPaymentType">
                                            <option selected disabled>-- Sélectionnez --</option>
                                            @foreach($types as $type)
                                                <option value="{{ $hashids->encode($type->idPaymentType) }}">{{ $type->paymentName }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="paymentDate">Date de payement</label>
                                        <div class="cal-icon"><input class="form-control datetimepicker border-warning bg-warning text-white" type="text" id="paymentDate"></div>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="paymentTotal">Montant à payer</label>
                                        <input class="form-control border-info bg-info text-white" type="text" id="paymentTotal" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="paymentAmount">Montant payée</label>
                                        <input class="form-control border-success bg-success text-white" type="number" id="paymentAmount" onkeyup="updateRestAmount()" onchange="updateRestAmount()">
                                    </div>
                                </div>



                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="paymentRest">Restant</label>
                                        <input class="form-control border-danger bg-danger text-white" type="hidden" id="paymentRestHide" readonly>
                                        <input class="form-control border-danger bg-danger text-white" type="text" id="paymentRest" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn" onclick="submitPaymenttoring()">Ajouter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Add Expense 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">

        function updateRestAmount(){

            let paymentAmount = parseInt($('#paymentAmount').val());
            let paymentRest = $('#paymentRest');
            let paymentTotal = $('#paymentTotal');
            let paymentRestHide = $('#paymentRestHide');
            let invoiceTotal = parseInt($('#idInvoice').find('option:selected').attr('id'));

            paymentTotal.val(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format(invoiceTotal));
            let rest = invoiceTotal - paymentAmount;

            if($.isNumeric(rest)) {
                paymentRest.val(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format(rest));
                paymentRestHide.val(rest);
            }
        }

        function submitPaymenttoring() {
            let idInvoice = $('#idInvoice');
            let idPaymentType = $('#idPaymentType');
            let paymentDate = $('#paymentDate');
            let paymentAmount = $('#paymentAmount');
            let paymentRestHide = $('#paymentRestHide');

            if(idInvoice.val()!=null){
                if(idPaymentType.val()!=null){
                    if(paymentDate.val().length === 10){
                        if($.isNumeric(paymentAmount.val())){
                            //AJAX REQUEST
                            $.ajax({
                                    type: 'POST',
                                    url: '{{ route("root-storePayment") }}',
                                    data: {
                                        idInvoice:idInvoice.val(),
                                        idPaymentType:idPaymentType.val(),
                                        paymentDate:paymentDate.val(),
                                        paymentAmount:paymentAmount.val(),
                                        paymentRest:paymentRestHide.val(),
                                        _token:$('input[name="_token"]').val()
                                    },

                                    success: function (result) {
                                        if (result === '1') {
                                            swalWithBootstrapButtons.fire({
                                                title: 'Good Job',
                                                text: 'Payement ajouté 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: 'Montant payée invalide',
                                type: 'error',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: 'Sélectionnez le'
                            })
                        }
                    } else{
                        swalWithBootstrapButtons.fire({
                            title: 'Oops',
                            text: 'Date de payement invalide !',
                            type: 'error',
                            showCancelButton: true,
                            showConfirmButton: false,
                            cancelButtonText: 'D\'accord'
                        })
                    }
                } else{
                    swalWithBootstrapButtons.fire({
                        title: 'Oops',
                        text: 'Sélectionnez une type de payement !',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'D\'accord'
                    })
                }
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Sélectionnez une facture !',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }
    </script>
@endsection