@extends('layouts.app', ['activePage' => 'clientes', 'titlePage' => __('Autos')])

@section('content')


<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">

                    <div class="card-body">
                        <div class="row">
                            <div class="col-4">
                                <h4 class="card-title">Comisiónes</h4>
                                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
                            </div>
                            <div class="col-8" align="right">
                                <button type="button" class="btn btn-primary " id="addA">
                                    <i class="fa fa-user-plus" aria-hidden="true"></i>
                                    Nueva comisión
                                </button>
                                <button style="display: none;" type="button" class="btn btn-success " data-bs-toggle="modal" data-bs-target="#md_importar">
                                    <i class="fa fa-file-excel-o" aria-hidden="true"></i>
                                    Importar
                                </button>
                            </div>
                        </div>
                        <div class="row tablesss">
                            <div class="col-12 table-responsive">
                                <table class="table table-bordered table-hover" id="gridComisiones">
                                    <thead>
                                        <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Producto</th>
                                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Comisión</th>
                                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Estatus</th>
                                        <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalComisiones" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="exampleModalLabel">Agregar comision</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <input type="hidden" id="idComisionHidden">
            <div class="modal-body">
                <div class="col-12">
                    <label for="">Producto</label>
                    <select class="form-control select" style="width: 100%" id="Id_Producto">
                        <option value="0" selected>-[Seleccione una opción]-</option>
                        @foreach ($data['productos'] as $p)
                        <option value="{{$p->Id}}">{{$p->Descripcion}}</option>

                        @endforeach
                    </select>
                </div>
                <div class="col-12 ">
                    <div class="input-group input-group-static mb-4">
                        <label for="">Cantidad comisión</label>
                        <input type="text" class="form-control" id="Cant_Comision" >
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="agregarComision();">Guardar</button>
            </div>
        </div>
    </div>
</div>



<script>
    $(document).ready(function() {
        $('.dropify').dropify();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        loadGrid();
        var choices = new Choices($('#Id_Producto')[0]);
    });

    $('#addA').click(function() {
        $('#idComisionHidden').val('')
        $('#Id_Producto').val(0)
        $('#Cant_Comision').val('')
        $('#modalComisiones').modal('show')
    })



    function loadGrid() {
        //$('#').DataTable();
        $('#gridComisiones').dataTable().fnDestroy();
        $('#gridComisiones td').css('white-space', 'initial');

        $('#gridComisiones').DataTable({
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollY: '37vh',
            scrollCollapse: true,
            scrollX: true,

            //serverSide: true,
            ajax: {
                url: "{{url('config/comisiones/get_comisiones')}}",
                type: "POST",
            },
            columns: [{
                    data: "Id"
                },
                {
                    data: "producto"
                },
                {
                    data: "Cant_Comision"
                },
                {
                    data: "estatus"
                },
                {
                    data: "acciones"
                },

            ],
    
            order: [
                [0, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }
            ]
        });

    }

    function agregarComision() {
        var Id = $('#idComisionHidden').val();
        var Cant_Comision = $('#Cant_Comision').val();
        var Id_Producto = $('#Id_Producto option:selected').val();
  


        if (Cant_Comision == '' || Id_Producto == 0) {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Debes de ingresar toda la información del auto',

            })
            return false;
        }
        $.ajax({
                url: "{{ url('config/comisiones/guardar_comision')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: Id,
                    Cant_Comision: Cant_Comision,
                    Id_Producto: Id_Producto,
                    Estatus:1,
                },
            })
            .done(function(resp) {
                console.log("success");
                if (resp.result == 1) {
                    Swal.fire({
                        type: 'success',
                        title: '¡Se ha guardado con éxito!',
                        showConfirmButton: false,
                        timer: 2500
                    });
                    $('#modalComisiones').modal('hide')
                    loadGrid();

                } else {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: resp.msg
                    })
                }
            })
            .fail(function() {
                Swal.fire({
                    type: 'error',
                    title: 'Oops...',
                    text: '¡Algo salió mal!'
                })
            })
            .always(function() {
                console.log("complete");
            });

    }

    function desactivar(estatus, id) {
        if (estatus == 2) {
            Swal.fire({
                title: '¿Está seguro en desactivar el auto con el ID #' + id + '?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#43586b',
                cancelButtonColor: '#f54337',
                confirmButtonText: '¡Sí, desactivalo!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                            url: "{{url('catalogo/autos/update_auto')}}",
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                Id: id,
                                estatus: estatus,
                            }
                        })
                        .done(function(resp) {
                            console.log("success");
                            if (resp.result == 1) {
                                loadGrid();
                            }
                        })
                        .fail(function() {
                            console.log("error");
                        })
                        .always(function() {
                            console.log("complete");
                        });

                }
            })
        } else {
            Swal.fire({
                title: '¿Está seguro en activar el auto con el ID #' + id + '?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#43586b',
                cancelButtonColor: '#f54337',
                confirmButtonText: '¡Sí, activalo!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                            url: "{{url('catalogo/autos/update_auto')}}",
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                Id: id,
                                estatus: estatus,
                            }
                        })
                        .done(function(resp) {
                            console.log("success");
                            if (resp.result == 1) {
                                loadGrid();
                            }
                        })
                        .fail(function() {
                            console.log("error");
                        })
                        .always(function() {
                            console.log("complete");
                        });

                }
            })
        }
    }

    function editar(id) {

        $.ajax({
                url: "{{url('config/comisiones/get_comision')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: id,
                }
            })
            .done(function(resp) {
                console.log("success");
                if (resp.result == 1) {
                    console.log(resp.data)
                    $('#idComisionHidden').val(resp.data['Id']);
                    $('#Id_Producto').val(resp.data['Id_Producto']);
                    $('#Cant_Comision').val(resp.data['Cant_Comision']);
                    $('#modalComisiones').modal('show')
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }
</script>
@endsection