@extends('layouts.simple')

@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') }}">

    <style>
        /* Ajuste visual para alinear y estilar el buscador y select de DataTables */
        .dataTables_filter input {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            padding: 0.375rem 0.75rem;
            outline: none;
        }

        .dataTables_filter input:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

        .dt-buttons .btn {
            margin-right: 0.25rem;
        }

        .btn-group>.btn-group:not(:first-child)>.btn,
        .btn-group>.btn:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            color: white;
        }

        .btn-group>.btn-group:not(:last-child)>.btn,
        .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            color: cornsilk;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <!-- Título Principal -->
                <div class="text-center mb-4">
                    <img src="{{ asset('assets/images/logo.png') }}" class="img-fluid mb-2" style="max-height: 80px;"
                        alt="{{ config('app.name', 'LIBRERIA ELY') }}">
                    <h3 class="fw-bold text-primary">Artículos Registrados</h3>
                </div>

                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                        <h5 class="m-0 fw-bold text-primary">
                            <i class="fas fa-boxes me-2"></i>Listado de Inventario
                        </h5>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped align-middle" id="table_id" width="100%">
                                <thead class="table-light">
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Descripción</th>
                                        <th>Categoría</th>
                                        <th>Precio Venta</th>
                                        <th>Precio Costo</th>
                                        <th>Utilidad</th>
                                        <th>Stock</th>
                                        <th>Stock Máx.</th>
                                        <th>Fabricante</th>
                                        <th>Medida</th>
                                        <th>Unidad</th>
                                        <th>Ubicación</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $pventaTotal = 0;
                                        $pcostoTotal = 0;
                                    @endphp

                                    @foreach ($articulos as $art)
                                        @php
                                            $pventaTotal += $art->p_venta * $art->stock;
                                            $pcostoTotal += $art->p_costo * $art->stock;
                                            $isLowStock =
                                                isset($art->stock_maximo) && $art->stock <= $art->stock_maximo;
                                        @endphp
                                        <tr class="{{ $isLowStock ? 'low-stock' : '' }}">
                                            <td class="fw-bold">{{ $art->nombre }}</td>
                                            <td>{!! $art->descripcion !!}</td>
                                            <td>
                                                <span class="badge bg-label-info text-info">{{ $art->nomCat }}</span>
                                            </td>
                                            <td class="text-end fw-bold text-success">Q.
                                                {{ number_format($art->p_venta, 2) }}</td>
                                            <td class="text-end text-muted">Q. {{ number_format($art->p_costo, 2) }}</td>
                                            <td class="text-end fw-bold text-primary">Q.
                                                {{ number_format($art->p_venta - $art->p_costo, 2) }}</td>
                                            <td class="text-center fw-bold">{{ $art->stock }}</td>
                                            <td class="text-center text-muted">{{ $art->stock_maximo }}</td>
                                            <td>{{ $art->fabricante ?? '-' }}</td>
                                            <td>{{ $art->medida ?? '-' }}</td>
                                            <td>{{ $art->unidad ?? '-' }}</td>
                                            <td>{{ $art->ubicacion ?? '-' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Resumen / Totales abajo de la tabla -->
                        <div class="row justify-content-end mt-4">
                            <div class="col-md-6 col-lg-5">
                                <div class="card bg-light border-0 shadow-sm">
                                    <div class="card-body">
                                        <h6 class="fw-bold text-uppercase text-muted border-bottom pb-2 mb-3">
                                            <i class="fas fa-calculator me-2"></i>Resumen General
                                        </h6>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-muted">Total Tipos de Artículos:</span>
                                            <span
                                                class="fw-bold">{{ number_format($total ?? count($articulos), 0) }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-muted">Total Precio Venta:</span>
                                            <span class="fw-bold text-success">Q.
                                                {{ number_format($pventaTotal, 2) }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-muted">Total Precio Costo:</span>
                                            <span class="fw-bold text-secondary">Q.
                                                {{ number_format($pcostoTotal, 2) }}</span>
                                        </div>
                                        <hr>
                                        <div class="d-flex justify-content-between">
                                            <span class="fw-bold text-dark">Total Utilidad:</span>
                                            <span class="fw-bold text-primary fs-5">Q.
                                                {{ number_format($pventaTotal - $pcostoTotal, 2) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

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