@extends('layouts.index', ['subHeader' => 'Importaciones'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('importaciones.index') }}" class="text-decoration-none text-dark"> / Importaciones</a>
@endsection

@section('js')
    <script>
        // Pasar los datos necesarios a JavaScript desde Blade
        const NOMBRE_MESES = @json(\App\Models\Importacion::NOMBRE_MESES);
        const TIPOS_VIA = @json(\App\Models\Importacion::TIPOS_VIA);
        const PAISES = @json($paises);
        const CIUDADES = @json($ciudades);
        const PRODUCTOS = @json($productos);

        $('#tabla_importaciones').DataTable({
            dom: `<'row d-flex align-items-center justify-content-between'
                        <'col-8 d-flex align-items-center'f>
                        <'col-4 d-flex align-items-center justify-content-end'B>>
                    <'table-responsive'tr>
                    <'row'<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>>`,
        });

        // Mapeo de IDs a nombres
        function getNombreMes(id) {
            return NOMBRE_MESES[id] || 'N/A';
        }

        function getNombreVia(id) {
            return TIPOS_VIA[id] || 'N/A';
        }

        function getNombrePais(id) {
            const pais = PAISES.find(p => p.id === id);
            return pais ? pais.nombre : 'N/A';
        }

        function getNombreCiudad(id) {
            const ciudad = CIUDADES.find(c => c.id === id);
            return ciudad ? ciudad.nombre : 'N/A';
        }

        function getNombreProducto(id) {
            const producto = PRODUCTOS.find(p => p.id === id);
            return producto ? producto.nombre : 'N/A';
        }

        $(document).on('click', '.btn-toggle-details', function() {
        var importacionId = $(this).data('id');

        $.ajax({
            url: `/importaciones/${importacionId}`,
            method: 'GET',
            success: function(response) {
                var detailsHtml = '';

                response.registros.forEach(function(registro, index) {
                    detailsHtml += `
                        <div class="card mb-3">
                            <div class="card-header" style="align-content: center !important;color: #7a00e6;">
                                <strong>Registro de Importación ${index + 1}</strong>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <strong>Mes Entrega Carga:</strong> ${getNombreMes(registro.mes_id)}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Origen Despacho:</strong> ${getNombrePais(registro.pais_origen_id)}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Puerto/Aeropuerto Despacho:</strong> ${getNombreCiudad(registro.lugar_despacho_id)}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>OC - SAP:</strong> ${registro.oc_sap}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Código:</strong> ${registro.codigo}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Producto:</strong> ${getNombreProducto(registro.producto_id)}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Cantidad:</strong> ${registro.cantidad}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Lote:</strong> ${registro.lote}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Fecha Vto.:</strong> ${registro.fecha_vto}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Pellets / F. Fab:</strong> ${registro.pellets_f_fab}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>EE / LIC:</strong> ${registro.ee_lic}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Vía:</strong> ${getNombreVia(registro.via_id)}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Recomendado:</strong> ${registro.recomendado}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Vr CIF Declaración de Importación $:</strong> ${registro.valor_cif}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>TC:</strong> ${registro.tc}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Factura:</strong> ${registro.factura}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Fecha:</strong> ${registro.fecha}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Valor:</strong> ${registro.valor}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>Peso Bruto:</strong> ${registro.peso_bruto}
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                });

                $('#importacionDetails').html(detailsHtml);
                $('#importacionModal').modal('show');
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
    </script>
    
@endsection


@section('content')
    <div class="row">
        <div class="d-flex w-100 voltearv" style="flex-direction: row-reverse;">
            <div class="w-s">
                <div class="btn-group mb-2" role="group" aria-label="">
                    <a href="{{ route('importaciones.createView') }}" type="button"
                        class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-file-earmark-plus"></i> Nuevo registro
                    </a>
                </div>
            </div>
        </div>
    </div>
    <br>

    <div class="contanier">
        <div class="shadow-s p-4">
            <div class="table-responsive">
                <table id="tabla_importaciones" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col" class="grayt">S.P.</th>
                            <th scope="col" class="grayt">IMPO</th>
                            <th scope="col" class="grayt">N° Estibas / N° Contenedor</th>
                            <th scope="col" class="grayt">BL - AWB</th>
                            <th scope="col" class="grayt">ETA</th>
                            <th scope="col" class="grayt">F. Nacionalización</th>
                            <th scope="col" class="grayt">F. Entrega ZOL</th>
                            <th scope="col" class="grayt" style="width: 101px;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (!$importaciones->isEmpty())
                            @foreach ($importaciones as $importacion)
                                <tr>
                                    <td>{{ $importacion->sp ?? 'N/A' }}</td>
                                    <td>{{ $importacion->impo ?? 'N/A' }}</td>
                                    <td>{{ $importacion->n_estibas_contenedor ?? 'N/A' }}</td>
                                    <td>{{ $importacion->bl_awb ?? 'N/A' }}</td>
                                    <td>{{ $importacion->eta ?? 'N/A' }}</td>
                                    <td>{{ $importacion->f_nacionalizacion ?? 'N/A' }}</td>
                                    <td>{{ $importacion->f_entrega_zol ?? 'N/A' }}</td>
                                    <td>
                                        <a href="{{ route('importaciones.editView', ['id' => $importacion->id]) }}"
                                            class="btn btn-outline-p"><i class="bi bi-pencil-square"></i></a>
                                        <button type="button" class="btn btn-outline-p btn-toggle-details" data-id="{{ $importacion->id }}">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="8" style="text-align: center">"No hay Registros para mostrar"</td>
                            </tr>
                        @endif
                    </tbody>


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

    <!-- Modal -->
    <div class="modal fade" id="importacionModal" tabindex="-1" aria-labelledby="importacionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importacionModalLabel">Detalles de Importación</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Contenido del modal -->
                    <div id="importacionDetails"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>


@endsection