@extends('fragments.fullTemplate')
@section('titulo')
    Clasificadores
@endsection
@section('contenido')
    <div class="ui big breadcrumb">
        <div class="section">Catálogo</div>
        <i class="right chevron icon divider"></i>
        <div class="section">Normas</div>
        <i class="right chevron icon divider"></i>
        <div class="section">{{ $clasificadorOpciones->norma->nombre }}</div>
        <i class="right chevron icon divider"></i>
        <div class="section">Clasificadores</div>
        <i class="right chevron icon divider"></i>
        <div class="section">{{ $clasificadorOpciones->clasificador }}</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Opciones</div>
    </div>
    <div class="ui divider"></div>
    <div data-module-notifications-anchor></div>
    <div class="container-fluid">
        <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>
        <a class="ui button fluid primary" id="new_opcion">
            <i class="add alternate icon"></i> Nueva Opción
        </a>
        <div class="ui divider"></div>

        <div class="sx-autorender">
            <div class="sx-scroll-x">
                <table class="ui celled table unstackable">
                    <thead>
                        <tr>
                            <th class="">Opción</th>
                            <th class="">Traducción opción</th>
                            <th class="collapsing">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if ($clasificadorOpciones->opciones->count())
                            @foreach ($clasificadorOpciones->opciones as $opcion)
                                <tr>
                                    <td>{{ $opcion->opcion }}</td>
                                    <td>{{ $opcion->eng_opcion ?? 'Sin traducción' }}</td>

                                    <td>
                                        <div class="ui tiny icon buttons">
                                            <!-- Editar -->
                                            <a class="ui button green" title="Modifica" id="edit_opcion"
                                                data-id="{{ $opcion->id_opcion }}">
                                                <i class="pencil alternate icon"></i>
                                            </a>

                                            <a class="ui button red" title="Eliminar" id="delete_opcion"
                                                data-id="{{ $opcion->id_opcion }}">
                                                <i class="trash alternate icon"></i>
                                            </a>

                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="8">No se encontraron registros</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <br><br>
    <!--Boton regeresa  -->
    <div>
        <a class="ui button grey" href="{{ url('normas/'.$clasificadorOpciones->norma->id_norma.'/clasificadores') }}">
            <i class="arrow circle left icon"></i>Regresar
        </a>
    </div>

    @include('NormasClasificadoresOpciones.new_opcion')
    @include('NormasClasificadoresOpciones.edit_opcion')
    @include('NormasClasificadoresOpciones.delete_opcion')
    <script>
        resultData = [];
        id_norma = 0;
        $(document).ready(function() {
            $('#new_opcion').click(function() {
                $('#modalNewOpcion').modal('show');
            });

            $('a#edit_opcion').click(function() {
                showLoader();
                id_opcion = $(this).data('id');

                $.ajax({
                    url: "{{ url('opciones/show_opcion') }}",
                    method: "POST",
                    data: {
                        'id_opcion': id_opcion,
                        '_token': _token = $('input[name="_token"]').val()
                    },
                    success: function(response) {
                        result = JSON.parse(response);
                        resultData = result.data;
                        $('#modalEditOpcion').modal('show');
                        hideLoader();
                    },
                    error: function() {
                        hideLoader();               
                    }
                });
            });

            $('a#delete_opcion').click(function() {
                id_norma = $(this).data('id');
                $('#modalDeleteOpcion').modal('show');
            });
        });

        $('#modalEditOpcion').on('show.bs.modal', function() {
            $("#modal-form-modify :input").each(function() {
                input = $(this).attr('id');
                if (input in resultData) {
                    $('#modal-form-modify #' + input).val(resultData[input]);
                }
            });
        });

        $('#modalDeleteOpcion').on('show.bs.modal', function() {
            $('#modal-form-delete input#id_opcion').val(id_norma);
        });
    </script>
    <script src="{{ url('assets/js/standars/clasificadores_opciones.js') }}"></script>
@endsection