@extends('voyager::master')

@section('page_title', 'Facturaciones')

@section('head')
    <style>
        .table p {
            font-size: 0.9rem;
        }

        .search-container {
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            margin-bottom: 20px;
        }

        .search-label {
            font-weight: bold;
            margin-bottom: 10px;
            display: block;
        }

        .search-fields {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .search-fields label {
            font-size: 14px;
            margin-right: 5px;
            white-space: nowrap;
        }

        .search-input {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            width: 300px;
            flex: 1;
        }

        .search-select {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            min-width: 150px;
        }

        .advanced-search-link {
            margin-left: auto;
            color: #007bff;
            text-decoration: none;
            font-size: 14px;
        }

        .advanced-search-link:hover {
            text-decoration: underline;
        }
    </style>
@endsection

@section('page_header')
    <div class="d-flex justify-between items-center">
        <div class="d-flex header-title">
            <h1 class="page-title">
                <img src="{{ voyager_asset('images/iconos/art_fact.webp') }}" alt="">
                Articulos facturados
            </h1>
        </div>
        <div class="btn-group"
            style="display: flex; justify-content: center; gap: 5px; align-items: center; margin-right: 30px;">
            <a href="/admin/cliente/{{ $cliente->id }}/show" class="btn btn-warning btn-add-new">
                <i class="voyager-double-left"></i>
                <span>Volver atras</span>
            </a>
        </div>
    </div>
@stop

@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <!-- Filtro de fechas -->
                        <form action="/admin/cliente/{{ $cliente->id }}/movimientos" method="GET">
                            <div class="d-flex" style="gap: 10px;">
                                <div class="form-group">
                                    <label for="fecha_inicio">Desde:</label>
                                    <input type="date" name="fecha_inicio" id="fecha_inicio" class="form-control"
                                        value="{{ request('fecha_inicio') }}">
                                </div>
                                <div class="form-group">
                                    <label for="fecha_fin">Hasta:</label>
                                    <input type="date" name="fecha_fin" id="fecha_fin" class="form-control"
                                        value="{{ request('fecha_fin') }}">
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Buscar</button>
                        </form>

                        <!-- Tabla de resultados -->
                        <table class="table table-bordered" style="margin-top: 20px;">
                            <thead>
                                <tr>
                                    <th>Fecha</th>
                                    <th>Porcentaje</th>
                                    <th>Nro. Factura</th>
                                    <th>Comprobante</th>
                                    <th>Importe gravado</th>
                                    <th>Importe IVA</th>
                                    <th>Total</th>
                                    <th>Ver articulos</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($facturas as $factura)
                                    <tr>
                                        <td>{{ $factura->created_at }}</td>
                                        <td>{{ $factura->porcentaje }}</td>
                                        <td>{{ $factura->factura_numero }}</td>
                                        <td>
                                            <a
                                                href="{{ route('factura.generarPDF', ['facturaId' => $factura->id, 'tipoDeCopia' => 'ORIGINAL']) }}">
                                                # {{ $factura->factura_numero }}
                                            </a>
                                        </td>
                                        <td>
                                            <p>$ {{ number_format($factura->importe_gravado, 2, ',', '.') }}</p>
                                        </td>
                                        <td>
                                            <p>$ {{ number_format($factura->importe_iva, 2, ',', '.') }}</p>
                                        </td>
                                        <td>
                                            <p>$ {{ number_format($factura->importe_iva + $factura->importe_gravado, 2, ',', '.') }}
                                            </p>
                                        </td>
                                        <td>
                                            <button type="button" class="" data-toggle="modal"
                                                data-target="#verArticulosModal"
                                                onclick="cargarArticulosFacturados({{ $factura->id }})">
                                                <img src="{{ voyager_asset('images/iconos/libreta.webp') }}" alt="">
                                            </button>
                                        </td>

                                    </tr>
                                @endforeach
                            </tbody>

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

        <!-- Modal para ver artículos facturados -->
        <div class="modal fade" id="verArticulosModal" tabindex="-1" role="dialog"
            aria-labelledby="verArticulosModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document" style="width: 800px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="verArticulosModalLabel">Artículos facturados</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Código</th>
                                    <th>Artículo</th>
                                    <th>Cantidad</th>
                                    <th>Precio unitario</th>
                                    <th>Total</th>
                                </tr>
                            </thead>
                            <tbody id="articulosFacturadosBody">
                                <!-- Los artículos se cargarán aquí -->
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
@stop


@section('javascript')
    <script>
        function cargarArticulosFacturados(facturaId) {
            // Limpiar el cuerpo de la tabla del modal
            $('#articulosFacturadosBody').empty();

            // Hacer una solicitud AJAX para obtener los artículos facturados
            $.ajax({
                url: '/facturas/' + facturaId + '/items',
                method: 'GET',
                success: function(response) {
                    // Verificar si la respuesta contiene artículos
                    if (response.articulos && response.articulos.length > 0) {
                        response.articulos.forEach(function(articulo) {
                            // Insertar cada artículo en el cuerpo de la tabla
                            $('#articulosFacturadosBody').append(`
                            <tr>
                                <td>${articulo.codigo}</td>
                                <td>${articulo.articulo}</td>
                                <td>${articulo.cantidad}</td>
                                <td>${articulo.precio_unitario}</td>
                                <td>${articulo.total}</td>
                            </tr>
                        `);
                        });
                    } else {
                        // Si no hay artículos, mostrar un mensaje
                        $('#articulosFacturadosBody').append(`
                        <tr>
                            <td colspan="5" class="text-center">No se encontraron artículos para esta factura.</td>
                        </tr>
                    `);
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error al cargar los artículos: ", error);
                }
            });
        }
    </script>

@stop