@extends('layouts.app')

@section('content')
    <div class="text-center mt-2">
        <h1 class="mb-5">Control individual de articulos trazables</h1>
    </div>

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
    <form action="{{ route('articulosTrazables.filtrarArticulosTrazables') }}" method="GET" class="mb-2 form-filter">
        <div class="row justify-content-end">
            <div class="col-md-2">
                <label for="articulo">Artículo:</label>
                <select name="articulo" id="articulo" class="form-select">
                    <option value="" disabled {{ !request()->filled('articulo') ? 'selected' : '' }}>Seleccione</option>
                    @foreach ($articulos as $id => $nombre)
                        <option value="{{ $id }}" {{ (string) $id === request('articulo') ? 'selected' : '' }}>
                            {{ $nombre }}</option>
                    @endforeach
                </select>
            </div>
            
            <div class="col-md-2">
                <label for="rubro">Rubro:</label>
                <select name="rubro" id="rubro" class="form-select">
                    <option value="" disabled {{ !request()->filled('rubro') ? 'selected' : '' }}>Seleccione </option>
                    @foreach ($rubros as $id=> $nombre)
                    <option value="{{ $id }}" {{ (string) $id === request('rubro') ? 'selected' : '' }}>
                        {{ $nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label for="subrubro">SubRubro:</label>
                <select name="subrubro" id="subrubro" class="form-select">
                    <option value="" disabled {{ !request()->filled('subrubro') ? 'selected' : '' }}>Seleccione </option>
                    @foreach ($subrubros as $id => $nombre)
                        <option value="{{ $id }}" {{ (string) $id === request('subrubro') ? 'selected' : '' }}>
                            {{ $nombre }}
                        </option>
                    @endforeach
                </select>
            </div>
        
            <div class="col-md-1">
                <label for="secuencia">Secuencia:</label>
                <input type="text" name="secuencia" id="secuencia" class="form-control mb-2 mr-2"
                    value="{{ request('secuencia') }}">
            </div>
            <div class="col-md-1">
                <label for="numeroSerie">Nº de serie:</label>
                <input type="text" name="numeroSerie" id="numeroSerie" class="form-control mb-2 mr-2"
                    value="{{ request('numeroSerie') }}">
            </div>
            <div class="col-md-2">
                <label for="observaciones">Observaciones:</label>
                <input type="text" name="observaciones" id="observaciones" class="form-control mb-2"
                    value="{{ request('observaciones') }}">
            </div>
            <div class="col-md-2 mt-4">
                <button type="submit" class="btn btn-primary mb-2 mr-2"><i class="fas fa-filter"></i> Filtrar</button>
                <a href="{{ route('articulosTrazables.index') }}" class="btn btn-success mb-2"><i class="fas fa-eraser"></i> Limpiar filtro</a>
            </div>
        </div>
    </form>
    


    <div class="d-flex justify-content-center align-items-center" style="min-height: 30vh;">
        @if (count($articulosTrazables) > 0)
            <div class="table-responsive" style="width: 80%;">
                <table class="table table-striped text-center">
                    <thead class="thead-light">
                        <tr>
                            <th>Artículo</th>
                            <th>Número de Serie</th>
                            <th>Prefijo</th>
                            <th>Secuencia</th>
                            <th>Observaciones</th>
                            <th>Historial</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($articulosTrazables as $articuloTrazable)
                            <tr>
                                <td>{{ $articuloTrazable->articulo->articulo }}</td>
                                <td>{{ $articuloTrazable->numeroSerie }}</td>
                                <td>{{ $articuloTrazable->prefijo->prefijo }}</td>
                                <td>{{ $articuloTrazable->secuencia }}</td>
                                <td>{{ $articuloTrazable->observaciones }}</td>
                                <td>
                                    <button class="btn btn-dark btn-detalle" data-id="{{ $articuloTrazable->id }}"
                                        data-toggle="modal" data-target="#detalleModal"><i class="fas fa-info-circle"></i>
                                    </button>
                                </td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="alert alert-warning text-center" style="margin-top: 5px;">
                No se encontraron resultados.
            </div>
        @endif
    </div>
    </div>

    <div class="modal fade" id="detalleModal" tabindex="-1" role="dialog" aria-labelledby="detalleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detalleModalLabel">Historial del artículo trazable</h5>
                </div>
                <div class="modal-body">
                    <!-- se muestran los detalles del articulo trazable -->
                    <div id="detalleBody"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('scripts')

    <script>
        $(document).ready(function() {
            $('.btn-detalle').click(function() {
                var articuloTrazableId = $(this).data('id');

                $.ajax({
                    url: "{{ route('articulosTrazables.historial')}}",
                    type: 'GET',
                    data: {
                        articulo_id: articuloTrazableId
                    },
                    success: function(data) {
                        var html = '<ul>';

                        $.each(data, function(index, trazabilidad) {
                            var observaciones = trazabilidad.articulo_trazable.observaciones;
                            var observacionesHtml = observaciones ? observaciones.trim() : 'Sin observaciones';

                            html += '<br><b>Movimiento:</b> '  + trazabilidad.movimiento.tipo_movimiento.trim() +
                            ' - ' + trazabilidad.movimiento.tipo_opciones.tipoOpcion.trim() + '<br>';
                            html += '<b>Detalles:</b> ' + (trazabilidad.movimiento.detalle ? trazabilidad.movimiento.detalle : 'Sin detalles') + '<br>';
                            html += '<b>Observaciones:</b> ' + observacionesHtml + '<br>';
                            html += '<b>Fecha del movimiento:</b> ' + moment(trazabilidad.movimiento.fecha_carga).format('DD-MM-YYYY') + '<br>';
                        });

                        html += '</ul>';
                        $('#detalleBody').html(html);
                    }
                });
            });

            // Cargar el historial cuando se abra el modal
            $('#detalleModal').on('shown.bs.modal', function(e) {
                var articuloTrazableId = $(e.relatedTarget).data('id');

                $.ajax({
                    url: "{{ route('articulosTrazables.historial')}}",
                    type: 'GET',
                    data: {
                        articulo_id: articuloTrazableId
                    },
                    success: function(data) {
                        var html = '<ul>';

                        $.each(data, function(index, trazabilidad) {
                            var observaciones = trazabilidad.articulo_trazable.observaciones;
                            var observacionesHtml = observaciones ? observaciones.trim() : 'Sin observaciones';

                            html += '<br><b>Movimiento:</b> '  + trazabilidad.movimiento.tipo_movimiento.trim() +
                            ' - '+ trazabilidad.movimiento.tipo_opciones.tipoOpcion.trim() + '<br>';
                            html += '<b>Detalles:</b> ' + (trazabilidad.movimiento.detalle ? trazabilidad.movimiento.detalle : 'Sin detalles') + '<br>';
                            html += '<b>Observaciones:</b> ' + observacionesHtml + '<br>';
                            html += '<b>Fecha del movimiento:</b> ' + moment(trazabilidad.movimiento.fecha_carga).format('DD-MM-YYYY') + '<br>';
                        });

                        html += '</ul>';
                        $('#detalleBody').html(html);
                    }
                });
            });
        });
    </script>
@endsection