@extends('fragments.fullTemplate')

@section('titulo')
    Normas
@endsection

@section('contenido')
    <div class="ui big breadcrumb">
        <div class="section">Calidad</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Normas Oficiales</div>
    </div>

    <div class="ui divider"></div>

    <div data-module-notifications-anchor></div>
    @include('fragments.navs', [
        "navs" => [
            [
                "active" => 0,
                "url" => "normas",
                "name" => "Normas"
            ],
            [
                "active" => 1,
                "url" => "normas_oficiales",
                "name" => "Normas Oficiales"
            ]
        ]
    ])

    <div class="ui divider"></div>

    <div class="content">
        <div class="col-lg-12 col-md-12 col-sm-12">

            @if(session()->has('success'))
                <div class="alert alert-success text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('success') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if(session()->has('warning'))
                <div class="alert alert-warning text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('warning') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if(session()->has('error'))
                <div class="alert alert-danger text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('error') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if (count($errors) > 0)
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>

                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>

                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

        </div>
    </div>

    @if ($permisos->gerente == 1)
        <a class="ui button fluid primary" id="new_norma">
            <i class="add alternate icon"></i> Agregar Norma Oficial
        </a>

        <div class="ui divider"></div>
    @endif

    <div class="sx-scroll-x">
        <table id="normas-oficiales-dt" class="ui celled table unstackable" style="width: 100%;">
            <thead>
                <tr>
                    <th width="40%">Norma Oficial</th>
                    <th width="35%">Descripción</th>
                    <th width="15%">Versión</th>
                    <th class="collapsing text-center">Acciones</th>
                </tr>
            </thead>

            <tbody>
                @foreach ($normas as $norma)
                    <tr>
                        <td>{{ $norma->nombre }}</td>
                        <td>{{ $norma->descripcion }}</td>
                        <td>{{ $norma->version }}</td>
                        <td class="text-center">
                            @if ($permisos->gerente == 1)
                                <div class="ui tiny icon buttons">
                                    <a href="javascript:void(0);"
                                       class="ui button green edit_norma_oficial"
                                       title="Modificar"
                                       data-id="{{ $norma->id_norma_oficial }}">
                                        <i class="pencil alternate icon"></i>
                                    </a>

                                    <a href="javascript:void(0);"
                                       class="ui button red delete_norma_oficial"
                                       title="Eliminar"
                                       data-id="{{ $norma->id_norma_oficial }}">
                                        <i class="trash alternate icon"></i>
                                    </a>
                                </div>
                            @else
                                <span class="text-muted">Sin acciones</span>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    @include('NormasOficiales.new_norma')
    @include('NormasOficiales.edit_norma')
    @include('NormasOficiales.delete_norma')

    <script>
        var resultData = {};
        var id_norma_oficial = 0;

        $(document).ready(function () {

            /*
            |--------------------------------------------------------------------------
            | DataTables
            |--------------------------------------------------------------------------
            | Importante:
            | - Ya no usamos id="lang-dt".
            | - Ya no usamos sx-autorender.
            | - Se valida que la tabla no esté inicializada antes de crear DataTable.
            |--------------------------------------------------------------------------
            */
            if (!$.fn.DataTable.isDataTable('#normas-oficiales-dt')) {
                $('#normas-oficiales-dt').DataTable({
                    pageLength: 10,
                    lengthMenu: [
                        [10, 25, 50, 100, -1],
                        [10, 25, 50, 100, 'Todos']
                    ],
                    ordering: true,
                    searching: true,
                    responsive: false,
                    autoWidth: false,
                    order: [[0, 'asc']],
                    columnDefs: [
                        {
                            targets: 3,
                            orderable: false,
                            searchable: false
                        }
                    ],
                    language: {
                        decimal: '',
                        emptyTable: 'No se encontraron registros',
                        info: 'Mostrando _START_ a _END_ de _TOTAL_ registros',
                        infoEmpty: 'Mostrando 0 a 0 de 0 registros',
                        infoFiltered: '(filtrado de _MAX_ registros totales)',
                        infoPostFix: '',
                        thousands: ',',
                        lengthMenu: 'Mostrar _MENU_ registros',
                        loadingRecords: 'Cargando...',
                        processing: 'Procesando...',
                        search: 'Buscar:',
                        zeroRecords: 'No se encontraron registros coincidentes',
                        paginate: {
                            first: 'Primero',
                            last: 'Último',
                            next: 'Siguiente',
                            previous: 'Anterior'
                        },
                        aria: {
                            sortAscending: ': activar para ordenar ascendente',
                            sortDescending: ': activar para ordenar descendente'
                        }
                    }
                });
            }

            /*
            |--------------------------------------------------------------------------
            | Nueva norma oficial
            |--------------------------------------------------------------------------
            */
            $('#new_norma').on('click', function () {
                $('#modalNewNormaOficial').modal('show');
            });

            /*
            |--------------------------------------------------------------------------
            | Editar norma oficial
            |--------------------------------------------------------------------------
            | Se usa delegación de eventos porque DataTables redibuja el tbody.
            |--------------------------------------------------------------------------
            */
            $(document).on('click', '.edit_norma_oficial', function () {
                id_norma_oficial = $(this).data('id');

                $.ajax({
                    url: "{{ url('normas/show_norma_oficial') }}",
                    method: "POST",
                    data: {
                        id_norma_oficial: id_norma_oficial,
                        _token: $('input[name="_token"]').val()
                    },
                    success: function (response) {
                        var result = response;

                        if (typeof response === 'string') {
                            result = JSON.parse(response);
                        }

                        resultData = result.data || {};

                        $('#modalEditNormaOficial').modal('show');
                    },
                    error: function () {
                        alert('Ocurrió un error al consultar la norma oficial.');
                    }
                });
            });

            /*
            |--------------------------------------------------------------------------
            | Eliminar norma oficial
            |--------------------------------------------------------------------------
            */
            $(document).on('click', '.delete_norma_oficial', function () {
                id_norma_oficial = $(this).data('id');

                $('#modalDeleteNormaOficial').modal('show');
            });

            /*
            |--------------------------------------------------------------------------
            | Cargar datos en modal editar
            |--------------------------------------------------------------------------
            */
            $('#modalEditNormaOficial').on('show.bs.modal', function () {
                $('#modal-form-modify :input').each(function () {
                    var input = $(this).attr('id');

                    if (input && resultData.hasOwnProperty(input)) {
                        $('#modal-form-modify #' + input).val(resultData[input]);

                        if (input === 'estatus') {
                            $('#modal-form-modify #' + input).selectpicker('val', resultData[input]);
                        }
                    }
                });
            });

            /*
            |--------------------------------------------------------------------------
            | Cargar ID en modal eliminar
            |--------------------------------------------------------------------------
            */
            $('#modalDeleteNormaOficial').on('show.bs.modal', function () {
                $('#modal-form-delete input#id_norma_oficial').val(id_norma_oficial);
            });

        });
    </script>

    <script src="{{ url('assets/js/standars/official.js') }}"></script>
@endsection