@extends('layouts.menu')

@section('tittle')
    ACCIONES DE PLANES POR TIPO DE USUARIO
@endsection

@section('contenido')
    <div class="row">
        <div class="col-lg-12">

            <div class="card card-table comman-shadow shadow-lg">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="page-title">ACCIONES DE PLANES POR TIPO DE USUARIO</h3>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-auto">
                            <div class="form-group d-inline-block ms-2">
                                <label for="">Tipo Usuario</label>
                                <select class="form-select form-select-sm" id="tipo_usuario_plan" name="tipo_usuario_plan">
                                    @foreach ($tiposUsersPlanData as $tipo)
                                        <option value="{{ $tipo->id_tipo_usuario }}">
                                            {{ $tipo->tipo_usuario }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group d-inline-block ms-2">
                                <label for="">Acciones</label>
                                <select class="form-select form-select-sm" id="accion_plan" name="accion_plan">
                                    @foreach ($accionesPlanData as $accion)
                                        <option value="{{ $accion->id_accion }}">
                                            {{ $accion->nombre_accion }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group d-inline-block ms-2">
                                <button class="btn btn-sm btn-primary" id="btnAgg"><i class="fas fa-plus"></i></button>
                            </div>

                        </div>
                    </div>

                    <br>
                    <div class="table-responsive">
                        <table id="accionesTable" class="table table-hover table-center table-bordered table-striped"
                            style="width:100%">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Tipo Usuario</th>
                                    <th class="text-center">Accion Asignada</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            var buttons = "Bfrtlip";

            $('#kanbanMenu, #accionesTipoUsuarioPlanKanban').addClass('active');

            var toastMixin = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: true,
                position: 'top-right',
                showConfirmButton: false,
                timer: 2500,
                timerProgressBar: true,
                customClass: {
                    popup: 'custom-toast'
                },
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            var toastMixinLong = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: true,
                position: 'top-right',
                showConfirmButton: false,
                timer: 5000,
                timerProgressBar: true,
                customClass: {
                    popup: 'custom-toast'
                },
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });


            accionesTable = $("#accionesTable").DataTable({
                orderCellsTop: true,
                deferRender: true,
                scrollX: true,
                scrollY: '400px',
                scrollCollapse: true,
                pageLength: 50,
                initComplete: function() {
                    accionesTable.columns.adjust().draw();

                    accionesTable.column(1).search($.trim($('#tipo_usuario_plan option:selected')
                    .text())).draw();
                },
                buttons: [{
                        extend: 'excel',
                        text: '<i class="fas fa-file-excel"></i>',
                        titleAttr: 'Excel',
                        className: 'btn btn-success',
                    },
                    {
                        extend: 'pdf',
                        text: '<i class="fas fa-file-pdf"></i>',
                        titleAttr: 'PDF',
                        className: 'btn btn-danger',
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print"></i>',
                        titleAttr: 'Imprimir',
                        className: 'btn btn-null',
                    }
                ],
                ajax: {
                    url: "{{ url('/api/get/acciones/asignadas/tipo/usuario') }}",
                    method: "GET"
                },
                language: {
                    url: "{{ URL::asset('json/es-ES.json') }}",
                },
                dom: buttons,
                columns: [{
                        data: 'id_secuencia'
                    },
                    {
                        data: 'tipo_usuario',
                        className: 'text-wrap'
                    },
                    {
                        data: 'nombre_accion',
                        className: 'text-wrap'
                    },
                    {
                        data: null,
                        render: function(data, type, row) {
                            return "<div class='text-center'><div class='btn-group'><button class='btn btn-danger btn-sm btnDeleteAccion' data-id='" +
                                data.id_secuencia +
                                "' title='Eliminar'><i class='material-icons'>delete</i></button></div></div>";
                        }
                    },
                ],
                order: ["1", "asc"]
            });


            $('#tipo_usuario_plan').change(function() {
                value = $.trim($('#tipo_usuario_plan option:selected').text());

                accionesTable.column(1).search(value).draw();
            });


            $('#btnAgg').click(function(e) {
                e.preventDefault();

                tipo_usuario = $('#tipo_usuario_plan').val();
                accion_plan = $('#accion_plan').val();

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/api/add/kanban/acciones/tipos/usuarios') }}",
                        method: 'POST',
                        data: {
                            tipo: tipo_usuario,
                            accion: accion_plan
                        },
                        success: function(data) {
                            if (data.save == 1) {

                                if (data.existe == 1) {
                                    toastMixin.fire({
                                        icon: 'warning',
                                        animation: true,
                                        title: 'Ya has asignado esta Accion a este Tipo de Usuario!'
                                    });
                                } else {
                                    toastMixin.fire({
                                        icon: 'success',
                                        animation: true,
                                        title: 'Accion Asignada!'
                                    });
                                }

                                accionesTable.ajax.reload(null, false);

                            } else {
                                Swal.fire("", "Error L: " + data.error, "error");
                            }
                        },

                    });
                } catch (error) {
                    Swal.fire("", "Error A: " + error, "error");
                }

            });


            $(document).on('click', '.btnDeleteAccion', function() {
                id = $(this).data('id');

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/api/delete/kanban/acciones/tipos/usuarios') }}",
                        method: 'POST',
                        data: {
                            id: id
                        },
                        success: function(data) {
                            if (data.save == 1) {

                                toastMixin.fire({
                                    icon: 'success',
                                    animation: true,
                                    title: 'Accion Eliminada!'
                                });

                                accionesTable.ajax.reload(null, false);

                            } else {
                                Swal.fire("", "Error L: " + data.error, "error");
                            }
                        },

                    });
                } catch (error) {
                    Swal.fire("", "Error A: " + error, "error");
                }
            });




        });
    </script>
@endsection