@extends('layout.master',['activePage' => 'mantenimiento_{{ $tabla }}', 'menuParent' => 'Configuración', 'titlePage' => __('Mantenimiento {{ $tabla }}'),])

@push('plugin-styles')
    {!! Html::style('assets/css/loader.css') !!}
    {!! Html::style('plugins/apex/apexcharts.css') !!}
    {!! Html::style('assets/css/dashboard/dashboard_1.css') !!}
    {!! Html::style('plugins/flatpickr/flatpickr.css') !!}
    {!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
    {!! Html::style('assets/css/elements/tooltip.css') !!}
    {!! Html::style('plugins/table/datatable/datatables.css') !!}
    <style>
        .btn-submit:hover {
            background-color: #E8C552 !important;
            color: black !important;
            border-color: #E8C552 !important
        }

        .elemento {
            background-color: #f0f0f0;
            padding: 10px;
            margin-bottom: .3rem !important;
        }

        .btn-drag:hover {
            cursor: move !important;
            background-color: #E8C552 !important;
            color: black !important;
            border-color: #E8C552 !important

        }

        .titulo-lista-enabled.sticky-top,
        .titulo-lista-disabled.sticky-top {
            top: 35px;
        }

        .dragging {
            background-color: #E8C552 !important;
        }
        .lista {
            min-height: 10rem !important;
        }

        .titulo-lista-enabled {
            background-color: #0a2f5d;
            padding: 10px;
            margin-bottom: .3rem !important;
        }

        .titulo-lista-disabled {
            background-color: #0a2f5d;
            padding: 10px;
            margin-bottom: .3rem !important;
        }

        .titulo-lista:hover {
            cursor: no-drop !important;
        }

        .titulo-lista-enabled h2,
        .titulo-lista-disabled h2 {
            color: white !important;
        }

        .texto-elemento {
            font-weight: normal !important;
        }

        .campo-nota {
            margin-top: 2% !important;
            label {
                font-size: 1rem !important;
                .precaucion {
                    color: #FF3333 !important;
                }
            };

            a {
                color: #0000CC
            }

            a:hover {
                font-weight: bold !important;
            }
        }

        .gu-mirror {
            position: fixed !important;
            margin: 0 !important;
            z-index: 9999 !important;
            opacity: 0.8;
            list-style-type: none;
        }


        .gu-hide {
        display: none !important;
        }

        .gu-unselectable {
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
        }

        .gu-transit {
            opacity: 0.2;
        }
    </style>

@endpush

@section('content')
    <!--  Navbar Starts / Breadcrumb Area Starts -->
    <div class="sub-header-container">
        <header class="header navbar navbar-expand-sm">
            <ul class="navbar-nav flex-row">
                <li>
                    <div class="page-header">
                        <nav class="breadcrumb-one" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{ __('CR') }}</a></li>
                                <li class="breadcrumb-item"><a href="javascript:void(0);"> {{ __('Reportes') }}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    <span> {{ __('Mantenimiento de ' . $tabla ) }}</span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </header>
    </div>
    <!--  Navbar Ends / Breadcrumb Area Ends -->

    <!--  Inicia Lista de Campos -->

    <div class="col-md-8 m-auto">

        <div class="statbox widget box box-shadow mb-2 mt-5">
            <div class="widget-content widget-content-area">

                <div class="campo-nota mb-5">
                    <label><b style="color: #0a2f5d">Instrucciones:</b> Para <u>agregar</u> o <u>quitar</u> un campo que será incluido dentro del formulario de <b>{{ $tabla }}</b>, simplemente debe <b>arrastrarlo</b> de una lista a otra y <b>automaticamente</b> su cambio será aplicado.</label>
                </div>

                <div class="row">

                    <div class="col-md-6">
                        <div class="titulo-lista-enabled sticky-top">
                            <h2 class="text-center">HABILITADOS</h2>
                        </div>
                        <div id="listaHabilitados" class="lista" data-habilitar="1">
                            @foreach ($campos_habilitados as $campo => $nombreAmigable)
                                <div class="elemento d-flex justify-start" data-campo="{{ $campo }}" data-amigable="{{ $nombreAmigable }}">
                                    <div type="button" class="btn btn-primary btn-drag mr-3">
                                        <i class="las la-angle-right"></i>
                                    </div>
                                    <h5 class="texto-elemento">
                                        <b>Campo:</b> {{ $nombreAmigable }}
                                    </h5>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="titulo-lista-disabled sticky-top">
                            <h2 class="text-center">DESHABILITADOS</h2>
                        </div>
                        <div id="listaDeshabilitados" class="lista" data-habilitar="0">
                            @foreach ($campos_deshabilitados as $campo => $nombreAmigable)
                                <div class="elemento d-flex justify-start" data-campo="{{ $campo }}" data-amigable="{{ $nombreAmigable }}">
                                    <div type="button" class="btn btn-primary btn-drag mr-3">
                                        <i class="las la-angle-right"></i>
                                    </div>
                                    <h5 class="texto-elemento">
                                        <b>Campo:</b> {{ $nombreAmigable }}
                                    </h5>
                                </div>
                            @endforeach
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <!--  Termina Lista de Campos -->

@endsection

@push('plugin-scripts')
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('assets/js/apps/companies.js') !!}
    {!! Html::script('assets/js/basicui/sweet_alerts.js') !!}
    {!! Html::script('assets/js/custom.js') !!}
    {!! Html::script('plugins/notification/snackbar/snackbar.min.js') !!}
    {!! Html::script('plugins/flatpickr/flatpickr.js') !!}
    {!! Html::script('plugins/flatpickr/custom-flatpickr.js') !!}
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/table/datatable/datatables.js') !!}
    <!--  The following JS library files are loaded to use Copy CSV Excel Print Options-->
    {!! Html::script('plugins/table/datatable/button-ext/dataTables.buttons.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/jszip.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/buttons.html5.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/buttons.print.min.js') !!}
    <!-- The following JS library files are loaded to use PDF Options-->
    {!! Html::script('plugins/table/datatable/button-ext/pdfmake.min.js') !!}
    {!! Html::script('plugins/table/datatable/button-ext/vfs_fonts.js') !!}
    {!! Html::script('plugins/dragula/dragula.min.js') !!}
@endpush

@push('custom-scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>

        const Toast = Swal.mixin({
            toast: true,
            position: 'bottom-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
                toast.addEventListener('click', () => {
                    Swal.close();
                });
            }
        })

        const workDoneMessageOptions = {
            icon: 'success',
            title: '¡Hecho!',
        }

        $(document).ready(() => {
            iniciarListas();
        });

        function iniciarListas() {
            const listaHabilitados    = document.getElementById('listaHabilitados');
            const listaDeshabilitados = document.getElementById('listaDeshabilitados');

            const sortableHabilitados = dragula([listaHabilitados, listaDeshabilitados], {
                revertOnSpill: true,
                ignoreInputTextSelection: true
            }).on('drag', function (el) {
                el.classList.add('dragging');
                const rect = el.getBoundingClientRect();
                const elementoY = rect.top + window.scrollY;

                if (elementoY > window.innerHeight) {
                    window.scrollTo(0, 0);
                }
            }).on('dragend', function (el) {
                el.classList.remove('dragging');
            }).on('drop', function (el, target, source) {
                if(target != source) {
                    const campo = el.dataset.campo;
                    const amigable = el.dataset.amigable;
                    const habilitar = target.dataset.habilitar;

                    $.ajax({
                        url: "{{ url('/configuracion/mantenimiento-proveedores') }}",
                        type: "POST",
                        data: {
                            'campo': campo,
                            'habilitar': habilitar
                        },
                        success: (_) => {
                            workDoneMessageOptions.html = 'Se ha aplicado la <b>configuracion</b> correctamente. Campo:  <b>' + amigable + '</b>';
                            Toast.fire(workDoneMessageOptions)
                        }
                    })
                }
            });
        }

    </script>
@endpush