@extends('layout')
@section('almacenes-active', 'active')
@section('nota_ingreso-active', 'active')

@section('bread-module', 'Almacén')
@section('bread-submodule', 'Almacénes')
@section('hero-title', 'Lista de Notas de Ingreso')
@section('hero-subtitle', 'Almacénes')

@section('btn-add')
    <a class="main-btn-add" href="{{ route('almacenes.nota_ingreso.create') }}">
        <i class="fas fa-plus-circle"></i> Nuevo
    </a>
@endsection

@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12 mb-3">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <label style="font-weight: bold;" for="ALMACEN">ALMACÉN DESTINO</label>
                        <select class="select2_form" name="filtro-almacen" id="filtro-almacen"
                            onchange="$('.dataTables-ingreso_mercaderia').DataTable().ajax.reload();"
                            data-placeholder="SELECCIONAR">
                            <option>SELECCIONAR</option>
                            @foreach ($almacenes as $almacen)
                                <option @if ($almacen->tipo_almacen == 'PRINCIPAL') selected @endif value="{{ $almacen->id }}">
                                    {{ $almacen->descripcion }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="ibox ">
                    <div class="ibox-content">
                        <div class="table-responsive">
                            @include('almacenes.nota_ingresos.tables.tbl_ni_list')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
@endpush

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

        document.addEventListener('DOMContentLoaded', () => {
            init();
        });

        function init() {
            iniciarSelect2();
            loadDtErrores();
            loadDtIngresoMercaderia();
            events();
        }

        function events() {
            eventDtIngresoInit();
        }

        //================ SELECT2 ==================
        function iniciarSelect2() {
            $('.select2_form').select2({
                placeholder: "SELECCIONAR",
                allowClear: true,
                width: '100%',
            });
        }

        //================ DATATABLE ERRORES ==================
        function loadDtErrores() {
            dtErrores = new DataTable('.dataTables-errores', {
                responsive: true,
                paging: true,
                lengthChange: true,
                searching: true,
                info: true,
                autoWidth: false,
                language: {
                    url: "{{ asset('Spanish.json') }}"
                },
                columnDefs: [{
                    targets: [0, 1, 2, 3],
                    className: "text-center"
                }]
            });
        }

        //================ DATATABLE INGRESO MERCADERIA ==================
        function loadDtIngresoMercaderia() {

            const url = "{{ route('almacenes.nota_ingreso.data') }}";

            dtIngresoMercaderia = new DataTable('.dataTables-ingreso_mercaderia', {
                serverSide: true,
                responsive: true,
                processing: true,
                ajax: {
                    url: url,
                    type: 'GET',
                    data: function(d) {
                        d.filtro_almacen = document.querySelector('#filtro-almacen')?.value;
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'n.id',
                        className: "text-center"
                    },
                    {
                        data: 'registrador_nombre',
                        name: 'n.registrador_nombre',
                        className: "text-center"
                    },
                    {
                        data: 'created_at',
                        name: 'n.created_at',
                        className: "text-center"
                    },
                    {
                        data: 'almacen_destino_nombre',
                        name: 'n.almacen_destino_nombre',
                        className: "text-center"
                    },
                    {
                        data: 'cadena_detalles',
                        className: "text-center",
                        searchable: false
                    },
                    {
                        data: 'observacion',
                        className: "text-center",
                        searchable: false
                    },
                    {
                        data: null,
                        className: "text-center",
                        searchable: false,
                        render: function(data) {

                            let url_editar = '{{ route('almacenes.nota_ingreso.show', ':id') }}';
                            url_editar = url_editar.replace(':id', data.id);

                            let url_etiquetas =
                                '{{ route('almacenes.nota_ingreso.generarEtiquetas', ':nota_id') }}';
                            url_etiquetas = url_etiquetas.replace(':nota_id', data.id);

                            return `
                            <div class="btn-group">
                                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-th"></i>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="${url_editar}">
                                        <i class="fa fa-eye"></i> VER
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="${url_etiquetas}" target="_blank" id="adhesivo_${data.id}">
                                        <i class="fa fa-barcode"></i> GENERAR ETIQUETAS
                                    </a>
                                </div>
                            </div>
                        `;
                        }
                    }
                ],
                order: [
                    [0, "desc"]
                ],
                language: {
                    url: "{{ asset('Spanish.json') }}"
                }
            });
        }

        //================ EVENTOS ==================
        function eventDtIngresoInit() {

            const table = document.querySelector('.dataTables-ingreso_mercaderia');

            table.addEventListener('init.dt', function() {

                @if (Session::has('generarAdhesivos') && Session::has('nota_id'))
                    toastr.success('{{ Session::get('generarAdhesivos') }}', 'CARGANDO');

                    const nota_id = '{{ Session::get('nota_id') }}';
                    const btn = document.querySelector(`#adhesivo_${nota_id}`);

                    if (btn) {
                        btn.click();
                    }
                @endif

            });
        }
    </script>
@endpush