@extends('layouts.app')


@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/datatablesb5/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatablesb5/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatablesb5/colReorder.bootstrap5.min.css') }}">
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col">

                <div class="card shadow">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <h4 class="m-0 font-weight-bold text-primary">LISTADO DE FACTURAS</h4>

                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label class="btn btn-outline-primary btn-sm active" onclick="filtrarFacturas('TODAS')">
                                <input type="radio" name="options" autocomplete="off" checked> Todas
                            </label>
                            <label class="btn btn-outline-success btn-sm" onclick="filtrarFacturas('CONTADO')">
                                <input type="radio" name="options" autocomplete="off"> Solo Contado
                            </label>
                            <label class="btn btn-outline-danger btn-sm" onclick="filtrarFacturas('CREDITO')">
                                <input type="radio" name="options" autocomplete="off"> Solo Créditos
                            </label>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm table-hover" id="table_id">
                                <thead class="bg-dark text-white">
                                    <tr>
                                        <th>RECIBO / TIPO</th>
                                        <th>FECHA</th>
                                        <th>NOMBRE</th>
                                        <th>NIT</th>
                                        <th>DIRECCION</th>
                                        <th>DESCUENTO</th>
                                        <th>TOTAL</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($data as $fac)
                                        @php $tipoNormalizado = trim(strtoupper($fac->tipo)); @endphp

                                        <tr class="fila-factura" data-tipo="{{ $tipoNormalizado }}"
                                            data-monto="{{ $fac->total }}"
                                            @if ($tipoNormalizado == 'CREDITO') class="table-warning" @endif>
                                            <td>{{ $fac->id }} / <span
                                                    class="badge {{ $tipoNormalizado == 'CREDITO' ? 'badge-danger' : 'badge-success' }}">{{ $fac->tipo }}</span>
                                            </td>
                                            <td>{{ $fac->created_at }}</td>
                                            <td>{{ $fac->nombre }}</td>
                                            <td>{{ $fac->nit }}</td>
                                            <td>{{ $fac->direccion }}</td>
                                            <td>Q. {{ number_format($fac->descuento, 2) }}</td>
                                            <td class="font-weight-bold">Q. {{ number_format($fac->total, 2) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-4 offset-md-8">
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-4 offset-md-8">
                        <div class="card border-primary shadow-sm">
                            <div class="card-body p-3">
                                <div class="d-flex justify-content-between">
                                    <span id="label_total_1">Ventas de Contado:</span>
                                    <span class="font-weight-bold text-success" id="display_contado">Q.
                                        {{ number_format($totalContado, 2) }}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span id="label_total_2">Ventas al Crédito:</span>
                                    <span class="font-weight-bold text-danger" id="display_credito">Q.
                                        {{ number_format($totalCredito, 2) }}</span>
                                </div>
                                <hr class="my-2">
                                <div class="d-flex justify-content-between h5 mb-0">
                                    <span class="font-weight-bold">SUMA VISIBLE:</span>
                                    <span class="font-weight-bold text-primary" id="display_gran_total">Q.
                                        {{ number_format($totalContado + $totalCredito, 2) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function filtrarFacturas(tipo) {
            const filas = document.querySelectorAll('.fila-factura');
            let sumaContado = 0;
            let sumaCredito = 0;

            filas.forEach(fila => {
                // Suponemos que el tipo está en data-tipo y el monto en data-monto
                // Agregaremos data-monto a la fila en el HTML para facilitar esto
                const tipoFila = fila.getAttribute('data-tipo');
                const montoFila = parseFloat(fila.getAttribute('data-monto')) || 0;

                let visible = false;
                if (tipo === 'TODAS') {
                    visible = true;
                } else if (tipo === 'CONTADO') {
                    visible = (tipoFila !== 'CREDITO');
                } else if (tipo === 'CREDITO') {
                    visible = (tipoFila === 'CREDITO');
                }

                if (visible) {
                    fila.style.display = '';
                    // Sumar según el tipo de la fila procesada
                    if (tipoFila === 'CREDITO') {
                        sumaCredito += montoFila;
                    } else {
                        sumaContado += montoFila;
                    }
                } else {
                    fila.style.display = 'none';
                }
            });

            // Actualizar los textos en el DOM
            const formatter = new Intl.NumberFormat('es-GT', {
                style: 'currency',
                currency: 'GTQ'
            });

            document.getElementById('display_contado').innerText = formatter.format(sumaContado);
            document.getElementById('display_credito').innerText = formatter.format(sumaCredito);
            document.getElementById('display_gran_total').innerText = formatter.format(sumaContado + sumaCredito);

            // Ajustar etiquetas según el filtro para que sea más claro
            if (tipo === 'CONTADO') {
                document.getElementById('display_credito').parentElement.style.display = 'none';
            } else if (tipo === 'CREDITO') {
                document.getElementById('display_contado').parentElement.style.display = 'none';
            } else {
                document.getElementById('display_credito').parentElement.style.display = 'flex';
                document.getElementById('display_contado').parentElement.style.display = 'flex';
            }
        }
    </script>

    <!-- Tus plugins de DataTables -->
    <script src="{{ asset('plugins/datatablesb5/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/dataTables.bootstrap5.min.js') }}"></script>

    <script src="{{ asset('plugins/datatablesb5/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/buttons.print.min.js') }}"></script>

    <script src="{{ asset('plugins/datatablesb5/jszip.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/pdfmake.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/vfs_fonts.js') }}"></script>

    <script src="{{ asset('plugins/datatablesb5/dataTables.colReorder.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/dataTables.rowReorder.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/jquery.mark.min.js') }}"></script>
    <script src="{{ asset('plugins/datatablesb5/dataTables.searchHighlight.min.js') }}"></script>

    <!-- Script de inicialización con botones y traducción al español -->
    <script>
        $(document).ready(function() {
            $('#table_id').DataTable({
                // "B" define la posición de los botones en la estructura del DOM
                dom: 'Bfrtip',
                buttons: [{
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel"></i> Excel',
                        className: 'btn btn-success btn-sm',
                        titleAttr: 'Exportar a Excel'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf"></i> PDF',
                        className: 'btn btn-danger btn-sm',
                        titleAttr: 'Exportar a PDF'
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print"></i> Imprimir',
                        className: 'btn btn-info btn-sm text-white',
                        titleAttr: 'Imprimir tabla'
                    },
                    {
                        extend: 'colvis',
                        text: '<i class="fas fa-eye"></i> Columnas',
                        className: 'btn btn-secondary btn-sm',
                        titleAttr: 'Visibilidad de columnas'
                    }
                ],
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json'
                }
            });
        });
    </script>
@endsection