@extends('both.template')
@section('title', 'AJOUT D\'UNE ESTIMATION | OPTIMIA')

@section('styleSheets')
    <!-- Select2 CSS -->
    <link rel="stylesheet" href="{{ asset('css/select2.min.css') }}">
    <!-- Datetimepicker CSS -->
    <link rel="stylesheet" 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">
                    <div class="col-sm-12">
                        <h3 class="page-title">Ajout d'une estimation</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('/root/estimates/') }}">Estimations</a></li>
                            <li class="breadcrumb-item active">Ajout d'une estimation</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <div class="row">
                <div class="col-sm-12">
                    <form onsubmit="return false" autocomplete="off" method="post">
                        <div class="row">
                            <div class="col-sm-6 col-md-4">
                                <div class="form-group">
                                    <label for="idClient">Clients</label>
                                    <select class="select" id="idClient">
                                        <option selected disabled>Sélectionnez le client</option>

                                        <optgroup label="Projets Externes">
                                            @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
                                        </optgroup>

                                        <optgroup label="Projets Internes">
                                            @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
                                        </optgroup>
                                    </select>
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-4">
                                <div class="form-group">
                                    <label for="idEstimateState">Status</label>
                                    <select class="select" id="idEstimateState">
                                        <option selected disabled>Selectionnez le status</option>
                                        @foreach($states as $state)
                                            <option value="{{ $hashids->encode($state->idEstimateState) }}"> Estimation {{ $state->estimateStateName }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <div class="form-group">
                                    <label for="idTaxe">Taxes</label>
                                    <select class="select" id="idTaxe" onchange="updateEstimate(1)">
                                        <option selected disabled>Selectionnez une taxe</option>
                                        @foreach($taxes as $taxe)
                                            <option id="{{ $hashids->encode($taxe->idTaxe) }}" value="{{ $taxe->taxePercent }}">
                                                {{ $taxe->taxeName }} ( {{ $taxe->taxePercent }} %)
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 col-md-4">
                                <div class="form-group">
                                    <label for="estimateName">Nom de l'estimation </label>
                                    <input type="text" class="form-control" id="estimateName">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <div class="form-group">
                                    <label for="estimateCreatedDate">Date de création</label>
                                    <div class="cal-icon">
                                        <input class="form-control datetimepicker" type="text" id="estimateCreatedDate">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <div class="form-group">
                                    <label for="estimateExpiryDate">Date d'expiration </label>
                                    <div class="cal-icon">
                                        <input class="form-control datetimepicker" type="text" id="estimateExpiryDate">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12">
                                <div class="table-responsive">
                                    <table class="table table-hover table-white">
                                        <thead>
                                        <tr>
                                            <th style="width: 20px">#</th>
                                            <th class="col-md-6">Désignation</th>
                                            <th class="col-md-2">Description</th>
                                            <th style="width:100px;">Prix Unitaire</th>
                                            <th style="width:80px;">Quantité</th>
                                            <th>Prix Total</th>
                                            <th>
                                                <a href="javascript:void(0)" class="text-success" style="display: block; margin-bottom: -5px; color: #55ce63 !important;" onclick="addEstimateItem()">
                                                    <i class="la la-plus-circle" style="font-size: 2em"></i>
                                                </a>
                                            </th>
                                        </tr>
                                        </thead>

                                        <tbody id="estimateItems">
                                            <tr id="item-1" class="item">
                                                <td class="counter">1</td>
                                                <td>
                                                    <input class="form-control" type="text" id="estimateItemName-1" style="min-width:150px">
                                                </td>
                                                <td>
                                                    <input class="form-control" type="text" id="estimateItemDescription-1" style="min-width:150px">
                                                </td>
                                                <td>
                                                    <input class="form-control" style="width: 100px" type="number" id="estimateItemUnitCost-1" min="1" onkeyup="updateEstimate(1)" onchange="updateEstimate(1)">
                                                </td>
                                                <td>
                                                    <input class="form-control" style="width: 80px" type="number" id="estimateItemQuantity-1" min="1" value="1" onkeyup="updateEstimate(1)" onchange="updateEstimate(1)">
                                                </td>
                                                <td>
                                                    <input class="form-control" readonly style="width: 120px" type="number" id="estimateItemAmount-1">
                                                </td>
                                                <td>
                                                    <a href="javascript:void(0)" class="text-success" style="display: block; margin-top: 5px; color: #55ce63 !important;" onclick="addEstimateItem()">
                                                        <i class="la la-plus-circle" style="font-size: 2em"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-hover table-white">
                                        <tbody>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td class="text-right">Sous Total Facture</td>
                                            <td style="text-align: right; padding-right: 30px;width: 230px" id="estimateTotal">0</td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" class="text-right">
                                                <span style="display: inline-block; margin-top: 10px; ">Taxe calculée</span>
                                            </td>
                                            <td style="text-align: right; padding-right: 30px;width: 230px">
                                                <input class="form-control text-right" value="0" readonly type="text" id="taxAmount">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" class="text-right">
                                                <span style="display: inline-block; margin-top: 10px; ">Remise %</span>
                                            </td>
                                            <td style="text-align: right; padding-right: 30px;width: 230px">
                                                <input class="form-control text-right" type="number" id="estimateDiscount" value="0"  onchange="updateEstimate(1)"  onkeyup="updateEstimate(1)">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" style="text-align: right; font-weight: bold">
                                                Grand Total
                                            </td>
                                            <td style="text-align: right; padding-right: 30px; font-weight: bold; font-size: 16px;width: 230px" id="estimateGrandTotal">
                                                0.00 CFA
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="estimateAnotherInfos">Autre Information (Facultatif)</label>
                                            <textarea class="form-control" id="estimateAnotherInfos"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="submit-section">
                            <button class="btn btn-primary submit-btn m-r-10" onclick="submitEstimateStoring(true)">Enregistrer & Envoyer</button>
                            <button class="btn btn-primary submit-btn" onclick="submitEstimateStoring()">Enregistrer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /Page Content -->
        {{ csrf_field() }}
    </div>
    <!-- /Page Wrapper -->
@endsection

@section('scriptsSheets')
    <script src="{{ asset('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 type="text/javascript">

        let superTotal = 0;
        function addEstimateItem() {
            let x = parseInt($('#estimateItems tr:last-child td.counter').text()); x++;

            $('#estimateItems tr td:last').html(
                '<a href="javascript:void(0)" class="text-success" style="display: block; margin-top: 5px; color: #55ce63 !important" onclick="addEstimateItem()">'+
                    '<i class="la la-plus-circle" style="font-size: 2em"></i>'+
                '</a>'
            );
            $('#estimateItems tr:last-child').after(
                '<tr id="item-'+x+'" class="item">'+
                    '<td class="counter">'+x+'</td>'+
                    '<td>'+
                    '<input class="form-control" type="text" id="estimateItemName-'+x+'" style="min-width:150px">'+
                    '</td>'+
                    '<td>'+
                    '<input class="form-control" type="text" id="estimateItemDescription-'+x+'" style="min-width:150px">'+
                    '</td>'+
                    '<td>'+
                    '<input class="form-control" style="width: 100px" type="number" id="estimateItemUnitCost-'+x+'" min="1" onkeyup="updateEstimate('+x+')" onchange="updateEstimate('+x+')">'+
                    '</td>'+
                    '<td>'+
                    '<input class="form-control" style="width: 80px" type="number" id="estimateItemQuantity-'+x+'" min="1" value="1" onkeyup="updateEstimate('+x+')" onchange="updateEstimate('+x+')">'+
                    '</td>'+
                    '<td>'+
                    '<input class="form-control" readonly style="width: 120px" type="number" id="estimateItemAmount-'+x+'">'+
                    '</td>'+
                    '<td>'+
                    '<a href="javascript:void(0)" class="text-danger" style="display: block; margin-top: 5px" onclick="deleteEstimateItem()">'+
                    '<i class="la la-times-circle" style="font-size: 2em"></i>'+
                    '</a>'+
                    '</td>'+
                '</tr>'
            );
        }

        function updateEstimate(itemPosition){
            let idTaxe = $('#idTaxe'); //choosen taxe value
            let taxAmount = $('#taxAmount'); // calculated tax amount
            let subTotal = $('#estimateTotal'); // calculated subTotal amount
            let grandTotal = $('#estimateGrandTotal'); // calculated grandTotal amount

            let discount = $('#estimateDiscount').val(); // discount amount value
            let unitCost = $('#estimateItemUnitCost-'+itemPosition).val(); //current unitCost element value
            let qty = $('#estimateItemQuantity-'+itemPosition).val(); //current quantity element value
            let amount = $('#estimateItemAmount-'+itemPosition); //current total amount of this element
            let amountval = parseInt(unitCost) * parseInt(qty);  //current calculated amount of this element
            if($.isNumeric(amountval)) amount.val(amountval); //verif if calcul give correct result before update element

            let subTotalVal = 0; // temp subTotal val
            let discountVal = 0; // temp discount val
            let taxVal = 0; // temp tax val
            for (let i = 1; i <= $('#estimateItems tr').length; i++) {
                subTotalVal += parseInt($('#estimateItemAmount-'+i).val()); //sum all item amount (partial total for each element)
            }

            taxVal = subTotalVal * ((idTaxe.val()) /100); //calculated tax val compared to choosen tax value and subTotal value
            discountVal = subTotalVal * (discount /100); //calculated discount val compared to choosen discount and subTotal value

            subTotal.text(subTotalVal); //update subTotal element
            taxAmount.val(taxVal); //update tax amount element

            let total = 0; //temp grand total
            total = (subTotalVal + taxVal) - discountVal; //calculated grand total
            superTotal = total;
            grandTotal.text( new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format(total)); //update grand total

           // console.log($('#estimateItems tr').length)
        }

        function deleteEstimateItem() {
            $('#estimateItems tr:last-child').remove();
            $('#estimateItems tr td:last').html(
                '<a href="javascript:void(0)" class="text-danger" style="display:block; margin-top: 5px; color: #f62d51 !important" onclick="deleteEstimateItem()">'+
                '<i class="la la-times-circle" style="font-size: 2em"></i>'+
                '</a>'
            );
        }

        function submitEstimateStoring(sendIt = false) {

            let idClient = $('#idClient');
            let idEstimateState = $('#idEstimateState');
            let idTaxe = $('#idTaxe').find('option:selected').attr('id');
            let estimateName = $('#estimateName');

            let estimateCreatedDate = $('#estimateCreatedDate');
            let estimateExpiryDate = $('#estimateExpiryDate');

            let estimateTotal = $('#estimateTotal');
            let taxAmount = $('#taxAmount');
            let estimateDiscount = $('#estimateDiscount');
            let estimateAnotherInfos = $('#estimateAnotherInfos');


            if(idClient.val()!=null){
                if(idEstimateState.val()!=null){
                    if(idTaxe !=null){
                        if(estimateName.val().length > 3){
                            if(estimateCreatedDate.val().length === 10){
                                if(estimateExpiryDate.val().length === 10){
                                    if (controlItemsValues()) {
                                        if ($.isNumeric(estimateTotal.text()) && estimateTotal.text().length > 0) {
                                            if ($.isNumeric(taxAmount.val())) {
                                                if ($.isNumeric(estimateDiscount.val()) && estimateDiscount.val() >= 0) {
                                                    if ($.isNumeric(superTotal) && superTotal > 0) {
                                                        // make request
                                                        $.ajax({
                                                            type: 'POST',
                                                            url: '{{ route("root-storeEstimate") }}',
                                                            data: {
                                                                idClient:idClient.val(),
                                                                idEstimateState:idEstimateState.val(),
                                                                idTaxe:idTaxe,
                                                                estimateName:estimateName.val(),
                                                                estimateCreatedDate:estimateCreatedDate.val(),
                                                                estimateExpiryDate:estimateExpiryDate.val(),
                                                                estimateTotal:estimateTotal.text(),
                                                                estimateDiscount:estimateDiscount.val(),
                                                                estimateGrandTotal:superTotal,
                                                                estimateAnotherInfos: estimateAnotherInfos.val()!=null?estimateAnotherInfos.val():null,
                                                                estimateItems: getEstimateItems(),
                                                                _token: $('input[name="_token"]').val()
                                                            },

                                                            success: function (result) {
                                                                if (result === '1') {
                                                                    swalWithBootstrapButtons.fire({
                                                                        title: 'Good Job',
                                                                        text: 'Estimation ajoutée avec succès !',
                                                                        type: 'success',
                                                                        showConfirmButton: true,
                                                                        confirmButtonText: 'D\'accord'
                                                                    }).then((action) => {
                                                                        if(sendIt){
                                                                            //launch mail sending
                                                                        }
                                                                        window.location.replace('{{ url('/root/estimates/') }}');
                                                                    });
                                                                } 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: 'Grand Total invalide',
                                                            type: 'error',
                                                            showCancelButton: true,
                                                            showConfirmButton: false,
                                                            cancelButtonText: 'D\'accord'
                                                        })
                                                    }
                                                } else {
                                                    swalWithBootstrapButtons.fire({
                                                        title: 'Oops',
                                                        text: 'Remise facture invalide',
                                                        type: 'error',
                                                        showCancelButton: true,
                                                        showConfirmButton: false,
                                                        cancelButtonText: 'D\'accord'
                                                    })
                                                }
                                            } else {
                                                swalWithBootstrapButtons.fire({
                                                    title: 'Oops',
                                                    text: 'Taxe facture invalide',
                                                    type: 'error',
                                                    showCancelButton: true,
                                                    showConfirmButton: false,
                                                    cancelButtonText: 'D\'accord'
                                                })
                                            }
                                        } else {
                                            swalWithBootstrapButtons.fire({
                                                title: 'Oops',
                                                text: 'Sous total facture invalide',
                                                type: 'error',
                                                showCancelButton: true,
                                                showConfirmButton: false,
                                                cancelButtonText: 'D\'accord'
                                            })
                                        }
                                    } else{
                                        swalWithBootstrapButtons.fire({
                                            title: 'Oops',
                                            text: 'Champs facture invalide ! Veuillez les controler',
                                            type: 'error',
                                            showCancelButton: true,
                                            showConfirmButton: false,
                                            cancelButtonText: 'D\'accord'
                                        })
                                    }
                                } else{
                                    swalWithBootstrapButtons.fire({
                                        title: 'Oops',
                                        text: 'Date d\'expiration invalide',
                                        type: 'error',
                                        showCancelButton: true,
                                        showConfirmButton: false,
                                        cancelButtonText: 'D\'accord'
                                    })
                                }
                            } else{
                                swalWithBootstrapButtons.fire({
                                    title: 'Oops',
                                    text: 'Date de création invalide',
                                    type: 'error',
                                    showCancelButton: true,
                                    showConfirmButton: false,
                                    cancelButtonText: 'D\'accord'
                                })
                            }
                        } else{
                            swalWithBootstrapButtons.fire({
                                title: 'Oops',
                                text: 'Nom d\'estimation invalide',
                                type: 'error',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: 'D\'accord'
                            })
                        }
                    } else{
                        swalWithBootstrapButtons.fire({
                            title: 'Oops',
                            text: 'Veuillez sélectionner une taxe',
                            type: 'error',
                            showCancelButton: true,
                            showConfirmButton: false,
                            cancelButtonText: 'D\'accord'
                        })
                    }
                } else{
                    swalWithBootstrapButtons.fire({
                        title: 'Oops',
                        text: 'Veuillez sélectionner un status',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'D\'accord'
                    })
                }
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Veuillez sélectionner un client',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }

        function controlItemsValues() {
            let error = 0;
            $('#estimateItems').find(".item").each(function (index) {
                error += $(this).find("#estimateItemName-" + (index + 1)).val().length > 2?0:1;
                error += $(this).find("#estimateItemDescription-"+(index+1)).val().length > 3?0:1;
                error += ($.isNumeric($(this).find("#estimateItemUnitCost-"+(index+1)).val()) && $(this).find("#estimateItemUnitCost-"+(index+1)).val() > 0)?0:1;
                error += ($.isNumeric($(this).find("#estimateItemQuantity-"+(index+1)).val()) && $(this).find("#estimateItemQuantity-"+(index+1)).val() > 0)?0:1;
                error += ($.isNumeric($(this).find("#estimateItemAmount-"+(index+1)).val()) && $(this).find("#estimateItemAmount-"+(index+1)).val() > 0)?0:1;
            });

            return error === 0;
        }

        // return array who contains children ids
        function getEstimateItems(){
            let childrens = [];
            let estimateItemsName = [];
            let estimateItemsDescription = [];
            let estimateItemsUnitCost = [];
            let estimateItemsQuantity = [];
            let estimateItemsAmount = [];

            $('#estimateItems').find(".item").each(function (index) {
                estimateItemsName[index] = $(this).find("#estimateItemName-"+(index+1)).val();
                estimateItemsDescription[index] = $(this).find("#estimateItemDescription-"+(index+1)).val();
                estimateItemsUnitCost[index] = $(this).find("#estimateItemUnitCost-"+(index+1)).val();
                estimateItemsQuantity[index] = $(this).find("#estimateItemQuantity-"+(index+1)).val();
                estimateItemsAmount[index] = $(this).find("#estimateItemAmount-"+(index+1)).val();
            });

            childrens = [
                estimateItemsName, estimateItemsDescription, estimateItemsUnitCost, estimateItemsQuantity, estimateItemsAmount
            ];


            return childrens;
        }

    </script>
@endsection