@extends('fragments.fullTemplate')
@section('titulo')
    Equipos
@endsection

@section('contenido')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<style>
    .select2-container { width: 100% !important; }
    .select2-container .select2-selection--multiple {
        min-height: 38px;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        padding-top: 2px;
        background-color: #fff !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin-top: 5px;
        color: #000 !important;
        background-color: #e9ecef !important;
        border: 1px solid #ced4da !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: #000 !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        color: #000 !important;
    }
    .select2-container .select2-selection--single {
        height: 38px !important;
        border: 1px solid #ced4da !important;
        border-radius: .25rem !important;
        background-color: #fff !important;
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
        color: #000 !important;
    }
    .select2-container .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }
    .select2-results__option .equipo-title {
        font-weight: 600;
        color: #000 !important;
    }
    .select2-results__option .equipo-subtitle {
        font-size: 11px;
        color: #6c757d !important;
        margin-top: 2px;
    }
    .select2-dropdown {
        z-index: 9999 !important;
        background-color: #fff !important;
    }
    .select2-container--default .select2-results__option {
        color: #000 !important;
        background-color: #fff !important;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        color: #000 !important;
        background-color: #f1f3f5 !important;
    }
    .select2-container--default .select2-search--dropdown .select2-search__field {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        background: #fff !important;
        caret-color: #000 !important;
        opacity: 1 !important;
        border: 1px solid #ced4da !important;
        box-shadow: none !important;
    }
    .select2-container--default .select2-search--inline .select2-search__field {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        background: transparent !important;
        caret-color: #000 !important;
        opacity: 1 !important;
        border: 0 !important;
        box-shadow: none !important;
        width: 250px !important;
        min-width: 120px !important;
    }
</style>

<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">{{ $norma->nombre }}</div>
    <i class="right chevron icon divider"></i>
    <div class="active section">Equipos</div>
</div>

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

<div data-module-notifications-anchor></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-4 col-lg-3">
            <div class="ui menu nav flex-column nav-pills">
                <a class="nav-link" href="{{ url('normas/'.$norma->id_norma.'/indices') }}">Index General</a>
                <a class="nav-link" href="{{ url('normas/'.$norma->id_norma.'/clasificadores') }}">Clasificadores</a>
                <a class="nav-link" href="{{ url('normas/'.$norma->id_norma.'/capitulos') }}">Capítulos</a>
                <a class="nav-link" href="{{ url('normas/'.$norma->id_norma.'/incisos') }}">Incisos</a>
                <a class="nav-link active" href="{{ url('normas/'.$norma->id_norma.'/equipos_asignados') }}"><b> > &nbsp; Equipos</b></a>
                {{--<a class="nav-link" id="" href="{{url('normasEquipo/'.$norma->id_norma.'/equipos')}}">Equipos</a>--}}
            </div>

            <hr>

                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                        <a class="ui button gray btn-block" href="{{url('normas')}}">
                            <i class="arrow circle left icon"></i>Atrás
                        </a>
                    </div>
                </div>
                
        </div>

        <div class="col-12 col-sm-12 col-md-8 col-lg-9">
            @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"><span>&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"><span>&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"><span>&times;</span></button>
                </div>
            @endif

            @if (count($errors) > 0)
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <strong>¡Error!</strong>
                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    <ul style="margin-bottom:0;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if ($permisos->gerente == 1)
                <button type="button" class="ui button fluid primary" id="new_equipo_norma">
                    <i class="pencil alternate icon"></i> Nuevo equipo
                </button>
            @endif

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

            <form id="form_buscar_equipos" action="{{ url('normas/'.$norma->id_norma.'/buscar_equipos_asignados') }}" method="GET">
                <div class="ui action input" style="width: 100%;">
                    <input
                        type="text"
                        name="search"
                        id="input_search_equipos"
                        placeholder="Buscar por clave, equipo, marca o modelo"
                        value="{{ request('search') }}">
                    <button class="ui button primary" type="submit">
                        <i class="search icon"></i> Buscar
                    </button>
                </div>
            </form>

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

            <p class="text-center"><b>{{ $relaciones->total() }}</b> resultados encontrados</p>

            <table class="ui celled table unstackable">
                <thead>
                    <tr class="text-center">
                        <th>Clave</th>
                        <th>Equipo</th>
                        <th>Marca</th>
                        <th>Modelo</th>
                        <th>Calibración</th>
                        <th>Estatus</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($relaciones as $relacion)
                        <tr class="text-center">
                            <td>{{ $relacion->equipo->clave ?? '' }}</td>
                            <td>{{ $relacion->equipo->equipo ?? '' }}</td>
                            <td>{{ $relacion->equipo->marca ?? '' }}</td>
                            <td>{{ $relacion->equipo->modelo ?? '' }}</td>
                            <td>
                                @php
                                    $calibracion = $relacion->equipo->calibracion ?? '';
                                @endphp

                                @if($calibracion === 'Si')
                                    Calibrado
                                @elseif($calibracion === 'Si (Verif. Interna)')
                                    Verificado
                                @elseif($calibracion === 'No')
                                    No
                                @else
                                    No
                                @endif
                            </td>
                            <td>
                                @if($relacion->equipo->estatus == "verde")
                                    <span class="btn btn-success">Activo</span>
                                @elseif($relacion->equipo->estatus == "rojo")
                                    <span class="btn btn-danger">Inactivo</span>
                                @endif
                            </td>
                            <td>
                                @if ($permisos->gerente == 1)
                                    <div class="ui tiny icon buttons">
                                        <a class="ui button green" id="edit_equipo_norma" data-id="{{ $relacion->id_norma_x_equipo }}">
                                            <i class="pencil alternate icon"></i>
                                        </a>
                                        <a class="ui button red" id="delete_equipo_norma" data-id="{{ $relacion->id_norma_x_equipo }}">
                                            <i class="trash alternate icon"></i>
                                        </a>
                                    </div>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6">No se encontraron registros</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            <div class="text-center">
                {{ $relaciones->appends(request()->query())->links('pagination::bootstrap-4') }}
            </div>
        </div>
    </div>
</div>

@if ($permisos->gerente == 1)
    @component('fragments.modal')
        @slot('idmodal') modalNewEquipoNorma @endslot
        @slot('title') Agregar equipo @endslot
        @slot('action')
            <form id="nuevo_equipo_norma" class="ui form" method="POST" action="{{ url('normas/'.$norma->id_norma.'/new_equipo_norma') }}" role="form">
        @endslot
        @slot('form')
            {{ csrf_field() }}
            <div class="field">
                <label>Norma</label>
                <input type="text" class="form-control" value="{{ $norma->nombre }}" readonly>
            </div>
            <div class="required field">
                <label for="id_equipo_multiple">Equipos</label>
                <select name="id_equipo[]" id="id_equipo_multiple" class="form-control" multiple="multiple" required style="width:100%;"></select>
            </div>
        @endslot
        @slot('button')
            <button type="submit" class="btn btn-primary"><i class="save icon"></i> Guardar</button>
        @endslot
    @endcomponent

    @component('fragments.modal')
        @slot('idmodal') modalEditEquipoNorma @endslot
        @slot('title') Modificar equipo @endslot
        @slot('action')
            <form id="modificar_equipo_norma" class="ui form" method="POST" action="{{ url('normas_x_equipos/update') }}" role="form">
        @endslot
        @slot('form')
            {{ csrf_field() }}
            <input type="hidden" name="id_norma_x_equipo" id="id_norma_x_equipo">
            <input type="hidden" name="id_norma" value="{{ $norma->id_norma }}">
            <div class="field">
                <label>Norma</label>
                <input type="text" class="form-control" value="{{ $norma->nombre }}" readonly>
            </div>
            <div class="required field">
                <label for="id_equipo">Equipo</label>
                <select name="id_equipo" id="id_equipo" class="form-control" required style="width:100%;"></select>
            </div>
        @endslot
        @slot('button')
            <button type="submit" class="btn btn-primary"><i class="save icon"></i> Actualizar</button>
        @endslot
    @endcomponent

    @component('fragments.modal')
        @slot('idmodal') modalDeleteEquipoNorma @endslot
        @slot('title') Eliminar relación @endslot
        @slot('action')
            <form id="eliminar_equipo_norma" class="ui form" method="POST" action="{{ url('normas_x_equipos/destroy') }}" role="form">
        @endslot
        @slot('form')
            {{ csrf_field() }}
            <input type="hidden" name="id_norma_x_equipo" id="delete_id_norma_x_equipo">
            <div class="field">¿Está seguro de eliminar esta relación?</div>
        @endslot
        @slot('button')
            <button type="submit" class="btn btn-danger"><i class="trash icon"></i> Eliminar</button>
        @endslot
    @endcomponent
@endif

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    var resultData = [];
    var id_norma_x_equipo = 0;

    function escapeHtml(text) {
        if (text === null || text === undefined) return '';
        return $('<div>').text(text).html();
    }

    function formatEquipoOption(data) {
        if (!data.id) return $('<span>' + escapeHtml(data.text || '') + '</span>');
        return $(
            '<div>' +
                '<div class="equipo-title">' + escapeHtml(data.equipo || data.text || '') + '</div>' +
                '<div class="equipo-subtitle">Clave: ' + escapeHtml(data.clave || '') + ' | Marca: ' + escapeHtml(data.marca || '') + ' | Modelo: ' + escapeHtml(data.modelo || '') + '</div>' +
            '</div>'
        );
    }

    function formatEquipoSelection(data) {
        return $('<span>' + escapeHtml(data.equipo || data.text || '') + '</span>');
    }

    function initEquipoMultipleSelect() {
        $('#id_equipo_multiple').select2({
            dropdownParent: $('#modalNewEquipoNorma'),
            width: '100%',
            placeholder: 'Seleccione uno o varios equipos',
            allowClear: true,
            ajax: {
                url: "{{ url('normas_x_equipos/buscar_equipos') }}",
                type: 'GET',
                dataType: 'json',
                delay: 300,
                data: function (params) { return { search: params.term || '' }; },
                processResults: function (response) { return { results: response.results || [] }; },
                cache: true
            },
            templateResult: formatEquipoOption,
            templateSelection: formatEquipoSelection,
            escapeMarkup: function (markup) { return markup; }
        });
    }

    function initEquipoSimpleSelect() {
        $('#id_equipo').select2({
            dropdownParent: $('#modalEditEquipoNorma'),
            width: '100%',
            placeholder: 'Seleccione una opción',
            allowClear: true,
            ajax: {
                url: "{{ url('normas_x_equipos/buscar_equipos') }}",
                type: 'GET',
                dataType: 'json',
                delay: 300,
                data: function (params) { return { search: params.term || '' }; },
                processResults: function (response) { return { results: response.results || [] }; },
                cache: true
            },
            templateResult: formatEquipoOption,
            templateSelection: formatEquipoSelection,
            escapeMarkup: function (markup) { return markup; }
        });
    }

    $(document).ready(function () {
        $('#new_equipo_norma').on('click', function (e) {
            e.preventDefault();
            $('#modalNewEquipoNorma').modal('show');
        });

        $(document).on('click', '#edit_equipo_norma', function (e) {
            e.preventDefault();
            id_norma_x_equipo = $(this).data('id');

            $.ajax({
                url: "{{ url('normas_x_equipos/show') }}",
                method: "POST",
                data: {
                    id_norma_x_equipo: id_norma_x_equipo,
                    _token: $('input[name="_token"]').first().val()
                },
                success: function (response) {
                    var result = JSON.parse(response);
                    resultData = result.data;
                    $('#modalEditEquipoNorma').modal('show');
                }
            });
        });

        $(document).on('click', '#delete_equipo_norma', function (e) {
            e.preventDefault();
            id_norma_x_equipo = $(this).data('id');
            $('#modalDeleteEquipoNorma').modal('show');
        });

        $('#modalNewEquipoNorma').on('shown.bs.modal', function () {
            if (!$('#id_equipo_multiple').hasClass('select2-hidden-accessible')) {
                initEquipoMultipleSelect();
            }
        });

        $('#modalNewEquipoNorma').on('hidden.bs.modal', function () {
            $('#id_equipo_multiple').val(null).trigger('change');
        });

        $('#modalEditEquipoNorma').on('shown.bs.modal', function () {
            if (!$('#id_equipo').hasClass('select2-hidden-accessible')) {
                initEquipoSimpleSelect();
            }
        });

        $('#modalEditEquipoNorma').on('show.bs.modal', function () {
            $('#id_norma_x_equipo').val(resultData.id_norma_x_equipo || '');

            if ($('#id_equipo').hasClass('select2-hidden-accessible')) {
                $('#id_equipo').empty();
            }

            if (resultData.id_equipo) {
                var option = new Option(
                    resultData.equipo ? resultData.equipo.equipo : '',
                    resultData.id_equipo,
                    true,
                    true
                );
                $('#id_equipo').append(option).trigger('change');
            }
        });

        $('#modalDeleteEquipoNorma').on('show.bs.modal', function () {
            $('#delete_id_norma_x_equipo').val(id_norma_x_equipo);
        });

        let searchTimeout = null;
        let ultimoValorBusqueda = $('#input_search_equipos').val().trim();

        $('#input_search_equipos').on('input', function () {
            const valorActual = $(this).val().trim();

            clearTimeout(searchTimeout);

            if (valorActual === '' && ultimoValorBusqueda !== '') {
                searchTimeout = setTimeout(function () {
                    $('#form_buscar_equipos').submit();
                }, 300);
            }

            ultimoValorBusqueda = valorActual;
        });
    });
</script>
@endsection