@extends('layout')

@section('ventas-active', 'active')
@section('tipo_cliente-active', 'active')

@section('bread-module', 'Ventas')
@section('bread-submodule', 'Tipo Cliente')
@section('hero-title', 'Tipo Cliente')
@section('hero-subtitle', 'Tipo Cliente')

@section('btn-add')
    <a class="main-btn-add" href="#" onclick="openMdlCreate()">
        <i class="fas fa-plus-circle"></i> Nuevo
    </a>
@endsection

@section('content')
    @include('ventas.tipos_clientes.modals.mdl_create')
    @include('ventas.tipos_clientes.modals.mdl_edit')

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox ">
                    <div class="ibox-content">

                        <div class="row">
                            <div class="col-12">
                                <div class="table-responsive">
                                    @include('ventas.tipos_clientes.tables.tbl_list')
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let dtTipoCliente = null;


        document.addEventListener('DOMContentLoaded', function() {
            loadDtTipoCliente();
            events();
        });

        function events() {
            eventsMdlCreate();
            eventsMdlEdit();
        }

        function loadDtTipoCliente() {
            const url = '{{ route('ventas.tipo_cliente.get-all') }}';

            dtTipoCliente = new DataTable('#tbl-list', {
                serverSide: true,
                processing: true,
                responsive: true,
                ajax: {
                    url: url,
                    type: 'GET',
                },
                "order": [
                    [0, 'desc']
                ],
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'nombre',
                        name: 'nombre'
                    },
                    {
                        data: null,
                        render: function(data, type, row) {

                            return `
                                <div class="btn-group">
                                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                        <i class="fas fa-th"></i>
                                    </button>

                                    <div class="dropdown-menu dropdown-menu-right" style="max-height:150px; overflow-y:auto;">

                                        <a class="dropdown-item" href="javascript:void(0);" onclick="openMdlEdit(${data.id})">
                                            <i class="fas fa-edit"></i> Editar
                                        </a>

                                        <div class="dropdown-divider"></div>

                                        <a class="dropdown-item text-danger" href="javascript:void(0);" onclick="deleteTipoCliente(${data.id})">
                                            <i class="fas fa-trash"></i> Eliminar
                                        </a>

                                    </div>
                                </div>
                            `;
                        },
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                language: {
                    "lengthMenu": "Mostrar _MENU_ categorías por página",
                    "zeroRecords": "No se encontraron resultados",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ categorías",
                    "infoEmpty": "Mostrando 0 a 0 de 0 categorías",
                    "infoFiltered": "(filtrado de _MAX_ categorías totales)",
                    "search": "Buscar:",
                    "paginate": {
                        "first": "Primero",
                        "last": "Último",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    },
                    "loadingRecords": "Cargando...",
                    "processing": "Procesando...",
                    "emptyTable": "No hay datos disponibles en la tabla",
                    "aria": {
                        "sortAscending": ": activar para ordenar la columna de manera ascendente",
                        "sortDescending": ": activar para ordenar la columna de manera descendente"
                    }
                }
            });
        }

        function deleteTipoCliente(id) {
            toastr.clear();
            let row = getRowById(dtTipoCliente, id);
            let message = '';

            Swal.fire({
                title: `¿Desactivar tipo cliente?`,
                html: `
                    <p class="mb-2"><strong>${row.nombre}</strong></p>
                    <hr class="my-2">
                    <div class="text-left" style="font-size:0.875rem;">
                        <p class="mb-1 text-warning font-weight-bold">
                            <i class="fas fa-exclamation-triangle mr-1"></i> Atención
                        </p>
                        <p class="mb-1">Los precios asignados a este tipo de cliente <strong>no se mostrarán</strong> en:</p>
                        <ul class="mb-0 pl-4">
                            <li>Ventas</li>
                            <li>Cotizaciones</li>
                            <li>Pedidos</li>
                        </ul>
                        <p class="mt-2 mb-0 text-muted" style="font-size:0.8rem;">
                            Los precios quedan guardados y se restauran si se reactiva el tipo de cliente.
                        </p>
                    </div>
                `,
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                confirmButtonText: "Sí, desactivar",
                cancelButtonText: "Cancelar",
                reverseButtons: true
            }).then(async (result) => {
                if (result.isConfirmed) {

                    Swal.fire({
                        title: 'Cargando...',
                        html: 'Eliminando tipo cliente...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    try {
                        let url =
                            `{{ route('ventas.tipo_cliente.destroy', ['id' => ':id']) }}`;
                        url = url.replace(':id', id);
                        const token = document.querySelector('input[name="_token"]').value;

                        const response = await fetch(url, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': token
                            }
                        });

                        const res = await response.json();

                        if (res.success) {
                            dtTipoCliente.draw();
                            toastr.success(res.message, 'OPERACIÓN COMPLETADA');
                        } else {
                            toastr.error(res.message, 'Error en el servidor tipo cliente eliminar');
                        }

                    } catch (error) {
                        toastr.error(error, 'Error en la petición tipo cliente eliminar');
                    } finally {
                        Swal.close();
                    }

                } else if (
                    /* Read more about handling dismissals below */
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    Swal.fire({
                        title: "Operación cancelada",
                        text: "No se realizaron acciones",
                        icon: "error"
                    });
                }
            });
        }
    </script>
@endpush