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

@section('styleSheets')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2.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">Taxes</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">Comptes</li>
                            <li class="breadcrumb-item active">Taxes</li>
                        </ul>
                    </div>
                    <div class="col-auto float-right ml-auto">
                        <a href="#" class="btn add-btn" data-toggle="modal" data-target="#add_tax"><i class="fa fa-plus"></i> Ajouter une taxe</a>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-striped custom-table mb-0">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Nom de la taxe </th>
                                <th>Pourcentage (%) </th>
                                <th>Status</th>
                                <th class="text-right">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                                @php $i = 1; @endphp
                                @foreach($taxes as $taxe)
                                    <tr>
                                        <td>{{ $i }}</td>
                                        <td>{{ $taxe->taxeName }} </td>
                                        <td>{{ $taxe->taxePercent }} %</td>
                                        <td>
                                            <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-success"></i> {{ $taxe->taxeStatus === 1 ? 'Active':'Inactive' }}
                                                </a>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#"><i class="fa fa-dot-circle-o text-success"></i> Active</a>
                                                    <a class="dropdown-item" href="#"><i class="fa fa-dot-circle-o text-danger"></i> Inactive</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_tax"><i class="fa fa-pencil m-r-5"></i> Editer</a>
                                                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#delete_tax"><i class="fa fa-trash-o m-r-5"></i> Supprimer</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @php $i++; @endphp
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Content -->

        <!-- Add Tax Modal -->
        <div id="add_tax" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Ajout d'une taxe</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form onsubmit="return false" autocomplete="off" method="post">
                            <div class="form-group">
                                <label for="taxeName">Nom de la taxe </label>
                                <input class="form-control" type="text" id="taxeName">
                            </div>
                            <div class="form-group">
                                <label for="taxePercent">Pourcentage (%) </label>
                                <input class="form-control" type="text" id="taxePercent">
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn" onclick="submitTaxeStoring()">Ajouter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Add Tax Modal -->

        <!-- Edit Tax Modal -->
        <div id="edit_tax" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edition de Taxe</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form onsubmit="return false;" autocomplete="off" method="post">
                            <div class="form-group">
                                <div class="form-group">
                                    <label for="taxeNameEdit">Nom de la taxe </label>
                                    <input class="form-control" type="text" id="taxeNameEdit">
                                </div>
                                <div class="form-group">
                                    <label for="taxePercentEdit">Pourcentage (%) </label>
                                    <input class="form-control" type="text" id="taxePercentEdit">
                                </div>
                                <div class="submit-section">
                                    <button class="btn btn-primary submit-btn" onclick="">Editer</button>
                                </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Edit Tax Modal -->

        <!-- Delete Tax Modal -->
        <div class="modal custom-modal fade" id="delete_tax" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-header">
                            <h3>Suppression de taxe</h3>
                            <p>Etes vous sûr de vouloir supprimer cette taxe ?</p>
                        </div>
                        <div class="modal-btn delete-action">
                            <div class="row">
                                <div class="col-6">
                                    <a href="javascript:void(0);" class="btn btn-primary continue-btn">Supprimer</a>
                                </div>
                                <div class="col-6">
                                    <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Annuler</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Delete Tax Modal -->
    {{ csrf_field() }}
    </div>
    <!-- /Page Wrapper -->
@endsection

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

        let _token = $('input[name="_token"]').val();

        function submitTaxeStoring() {

            let taxeName = $('#taxeName');
            let taxePercent = $('#taxePercent');

            if(taxeName.val().length >2) {
                if ($.isNumeric(taxePercent.val())) {
                    //AJAX REQUEST
                    $.ajax({
                        type: 'POST',
                        url: '{{ route("root-storeTaxe") }}',
                        data: {
                            taxeName: taxeName.val(),
                            taxePercent: taxePercent.val(),
                            _token: _token
                        },

                        success: function (result) {

                            if (result === '1') {
                                swalWithBootstrapButtons.fire({
                                    title: 'Good Job',
                                    text: 'Taxe ajoutée avec succès !',
                                    type: 'success',
                                    showConfirmButton: true,
                                    confirmButtonText: 'D\'accord'
                                }).then((action) => {
                                    window.location.reload()
                                });
                            } else if (result === '-1') {
                                swalWithBootstrapButtons.fire({
                                    title: 'Oops',
                                    text: 'Taxe existante',
                                    type: 'error',
                                    showCancelButton: true,
                                    showConfirmButton: false,
                                    cancelButtonText: 'Hummmm'
                                })
                            } else {
                                console.log(result);
                                swalWithBootstrapButtons.fire({
                                    title: 'Oops',
                                    text: 'Echec de l\'opération',
                                    type: 'error',
                                    showCancelButton: true,
                                    showConfirmButton: false,
                                    cancelButtonText: 'Hummmm'
                                })
                            }
                        },

                        error: function (result) {
                            console.log(result);
                            swalWithBootstrapButtons.fire({
                                title: 'Oops',
                                text: 'Echec de l\'opération',
                                type: 'error',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: 'Hummmm'
                            })
                        }
                    });

                } else {
                    swalWithBootstrapButtons.fire({
                        title: 'Oops',
                        text: 'Pourcentage invalide !',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'D\'accord'
                    })
                }
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Nom de la taxe invalide !',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }
    </script>
@endsection