@extends('layouts.app')

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/datatable/css/dataTables.bootstrap4.min.css')}}">
<style>
    body {
        background-color: #f8f9fc !important;
    }

    .table-sm td,
    .table-sm th {
        font-size: 0.85rem;
        vertical-align: middle;
    }

    /* Estilos para diferencias */
    .diff-bad {
        color: #e74a3b;
        font-weight: bold;
    }

    .diff-good {
        color: #1cc88a;
        font-weight: bold;
    }

    .diff-neutral {
        color: #858796;
    }

    /* Bloques de info dentro de la celda */
    .info-block {
        display: block;
        line-height: 1.2;
        margin-bottom: 2px;
    }

    .label-mini {
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #aaa;
        margin-right: 4px;
    }
</style>
@endsection

@section('content')
<div class="container-fluid p-3">

    <div class="d-flex justify-content-between align-items-center mb-4 mt-4">
        <h2 class="h3 text-gray-800">Historial de Cierres de Caja</h2>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Auditoría de Cuadres</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover table-bordered table-sm" id="cauadres" width="100%">
                    <thead class="thead-light">
                        <tr>
                            <th width="5%">ID</th>
                            <th width="15%">Fecha / Usuario</th>
                            <th width="25%">Control Efectivo (Cajón)</th>
                            <th width="20%">Control Bancos/Doc.</th>
                            <th width="15%">Balance Global</th>
                            <th width="15%">Observaciones</th>
                            <th width="5%">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($cuadres as $cau)
                        <tr>
                            <td class="text-center font-weight-bold">{{ $cau->id }}</td>

                            <td>
                                <div class="font-weight-bold text-dark">
                                    {{ \Carbon\Carbon::parse($cau->created_at)->format('d/m/Y') }}
                                </div>
                                <small class="text-muted">
                                    {{ \Carbon\Carbon::parse($cau->created_at)->format('H:i A') }}
                                </small>
                                <div class="mt-1">
                                    <span class="badge badge-light border">{{ $cau->user->name ?? 'Desconocido' }}</span>
                                </div>
                            </td>

                            <td>
                                <div class="info-block">
                                    <span class="label-mini">Sistema:</span> Q. {{ number_format($cau->sistema_efectivo, 2) }}
                                </div>
                                <div class="info-block">
                                    <span class="label-mini">Físico:</span> <strong>Q. {{ number_format($cau->fisico_efectivo, 2) }}</strong>
                                </div>
                                <hr class="my-1">
                                <div class="info-block">
                                    <span class="label-mini">Diferencia:</span>
                                    @if(abs($cau->diff_efectivo) < 0.05)
                                        <span class="badge badge-success">OK</span>
                                        @elseif($cau->diff_efectivo < 0)
                                            <span class="text-danger font-weight-bold">FALTA Q. {{ number_format(abs($cau->diff_efectivo), 2) }}</span>
                                            @else
                                            <span class="text-primary font-weight-bold">SOBRA Q. {{ number_format($cau->diff_efectivo, 2) }}</span>
                                            @endif
                                </div>
                            </td>

                            <td>
                                @php
                                // Sumamos lo físico de bancos para mostrar un total
                                $fisicoBancos = $cau->fisico_tarjeta + $cau->fisico_transf + $cau->fisico_cheque;
                                $sistemaBancos = $cau->sistema_tarjeta + ($cau->sistema_transf ?? 0) + ($cau->sistema_cheque ?? 0);
                                $diffBancos = $fisicoBancos - $sistemaBancos;
                                @endphp
                                <div class="info-block">
                                    <span class="label-mini">Tarjetas:</span> Q. {{ number_format($cau->fisico_tarjeta, 2) }}
                                </div>
                                <div class="info-block">
                                    <span class="label-mini">Transf:</span> Q. {{ number_format($cau->fisico_transf, 2) }}
                                </div>
                                <div class="info-block">
                                    <span class="label-mini">Cheques:</span> Q. {{ number_format($cau->fisico_cheque, 2) }}
                                </div>

                                @if(abs($diffBancos) > 0.05)
                                <div class="mt-1 text-warning small font-weight-bold">
                                    <i class="fas fa-exclamation-triangle"></i> Descuadre Bancos: {{ number_format($diffBancos, 2) }}
                                </div>
                                @endif
                            </td>

                            <td class="text-center">
                                @if(abs($cau->faltante) < 0.10)
                                    <h5 class="m-0"><span class="badge badge-success px-3">CUADRADO</span></h5>
                                    @elseif($cau->faltante < 0)
                                        <h5 class="m-0"><span class="badge badge-danger px-3">FALTANTE</span></h5>
                                        <div class="text-danger font-weight-bold mt-1">
                                            Q. {{ number_format($cau->faltante, 2) }}
                                        </div>
                                        @else
                                        <h5 class="m-0"><span class="badge badge-warning px-3">SOBRANTE</span></h5>
                                        <div class="text-dark font-weight-bold mt-1">
                                            + Q. {{ number_format($cau->faltante, 2) }}
                                        </div>
                                        @endif
                            </td>

                            <td>
                                @if($cau->observaciones)
                                <small class="text-muted font-italic">"{{ Str::limit($cau->observaciones, 50) }}"</small>
                                @if(strlen($cau->observaciones) > 50)
                                <button type="button" class="btn btn-link btn-sm p-0" data-toggle="popover" title="Observaciones Completas" data-content="{{ $cau->observaciones }}"><i class="fas fa-info-circle"></i></button>
                                @endif
                                @else
                                <span class="text-muted small">- Sin notas -</span>
                                @endif
                            </td>

                            <td class="text-center">
                                <div class="btn-group" role="group">
                                    <a href="#" onclick="imprimirTicket( ); return false;" class="btn btn-secondary btn-sm" title="Re-imprimir Ticket">
                                        <i class="fas fa-print"></i>
                                    </a>

                                    @php
                                    $aux = explode(" ", $cau->created_at);
                                    @endphp

                                    @can('caja_movimientos_dia')
                                    <a href="{{route('caja.cuadreFecha', [ 'fecha' => $aux[0] ] )}}" class="btn btn-sm btn-info"> <i class="fa fa-eye" aria-hidden="true"></i></a>
                                    @endcan

                                    @can('caja_cuadre_delete')
                                    <a href="{{route('caja.deleteCuadre', [ 'id' => $cau->id ] )}}" class="btn btn-danger btn-sm" onclick="return confirm('¿Eliminar este registro de cierre? Esto no borra las ventas, solo el reporte.')" title="Eliminar">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{asset('plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('plugins/datatable/js/dataTables.bootstrap4.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $('#cauadres').DataTable({
            "order": [
                [0, "desc"]
            ], // Ordenar por ID descendente (lo más reciente primero)
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            }
        });

        // Activar popovers para observaciones largas
        $('[data-toggle="popover"]').popover();
    });

    function imprimirTicket(id) {
        let url = "{{ route('caja.printCuadre', ':id') }}";
        url = url.replace(':id', id);
        window.open(url, '_blank', 'width=400,height=600,menubar=no,status=no,titlebar=no');
    }
</script>
@endsection