@extends('../padre.padre')

@section('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap4.min.css">
<style>
    .form-select, .form-control {
        border-radius: 8px;
        font-size: 0.9rem;
    }
    .card {
        transition: transform 0.2s;
    }
    .input-group-text {
        border-radius: 8px 0 0 8px;
        background-color: #fdfdfd;
    }
    .btn-primary {
        background-color: #0d6efd;
        border: none;
    }
    .btn-primary:hover {
        background-color: #0b5ed7;
        transform: translateY(-1px);
    }
    /* Estilos para DataTables */
    .dataTables_wrapper {
        padding: 20px 0;
    }
    [data-theme='dark'] .dataTables_wrapper {
        color: var(--text-dark);
    }
    [data-theme='dark'] .dataTables_length select,
    [data-theme='dark'] .dataTables_filter input {
        background-color: var(--card-bg) !important;
        color: var(--text-dark) !important;
        border-color: var(--border-color) !important;
    }
    [data-theme='dark'] .page-link {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-dark) !important;
    }
</style>
@endsection

@section('contenido')

<div id="infoVentas" class="container-fluid py-4" style="background-color: #f8f9fa; min-height: 100vh;">
    <!-- Header Section -->
    <div class="row mb-4 align-items-center">
        <div class="col-md-8">
            <h1 class="h3 mb-0 text-gray-800 font-weight-bold">
                <i class="fas fa-chart-line text-primary me-2"></i> Informe Detallado de Ventas
            </h1>
            <p class="text-muted small mb-0">Consulta avanzada de facturación, costos y rentabilidad por periodo.</p>
        </div>
        <div class="col-md-4 text-end">
            @include('menu.botonRegresar')
        </div>
    </div>

    <!-- Filters Card -->
    <div class="card shadow-sm border-0 mb-4 rounded-3">
        <form action="{{ route('ventasUlt') }}" method="GET" class="card-body p-4">
            <div class="row g-3">
                <!-- Date Filters -->
                <div class="col-md-3">
                    <label class="form-label small font-weight-bold text-muted">Fecha Inicial</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0"><i class="far fa-calendar-alt text-primary"></i></span>
                        <input type="date" name="fechaI" value="{{ request('fechaI') }}" required class="form-control border-start-0 shadow-none">
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="form-label small font-weight-bold text-muted">Fecha Final</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0"><i class="far fa-calendar-alt text-primary"></i></span>
                        <input type="date" name="fechaf" value="{{ request('fechaf') }}" required class="form-control border-start-0 shadow-none">
                    </div>
                </div>

                <!-- Main Filters -->
                <div class="col-md-3">
                    <label class="form-label small font-weight-bold text-muted">Bodega</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0"><i class="fas fa-warehouse text-muted"></i></span>
                        @include('../menu.bodegas')
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="form-label small font-weight-bold text-muted">No. Factura</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0"><i class="fas fa-hashtag text-muted"></i></span>
                        <input type="text" name="numeroFact" value="{{ request('numeroFact') }}" class="form-control border-start-0 shadow-none" placeholder="Opcional...">
                    </div>
                </div>

                <!-- Secondary Filters -->
                <div class="col-md-3">
                    <label class="form-label small font-weight-bold text-muted">Marca</label>
                    <select name="marca" class="form-select shadow-none">
                        <option value="Todos" {{ request('marca') == 'Todos' ? 'selected' : '' }}>Todas las Marcas</option>
                        @foreach ($marcas as $item)
                            <option value="{{ $item->codmarca }}" {{ request('marca') == $item->codmarca ? 'selected' : '' }}>{{ $item->nommarca }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small font-weight-bold text-muted">Categoría</label>
                    <select name="categoria" class="form-select shadow-none">
                        <option value="Todos" {{ request('categoria') == 'Todos' ? 'selected' : '' }}>Todas las Categorías</option>
                        @foreach ($categorias as $item)
                            <option value="{{ $item->codcategoria }}" {{ request('categoria') == $item->codcategoria ? 'selected' : '' }}>{{ $item->nomcategoria }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small font-weight-bold text-muted">Tipo Producto</label>
                    <select name="tipoProducto" class="form-select shadow-none">
                        <option value="Todos" {{ request('tipoProducto') == 'Todos' ? 'selected' : '' }}>Todos</option>
                        <option value="General" {{ request('tipoProducto') == 'General' ? 'selected' : '' }}>General</option>
                        <option value="terminado1" {{ request('tipoProducto') == 'terminado1' ? 'selected' : '' }}>Terminado 1</option>
                        <option value="Fabricacion" {{ request('tipoProducto') == 'Fabricacion' ? 'selected' : '' }}>Fabricación</option>
                        <option value="hibrido" {{ request('tipoProducto') == 'hibrido' ? 'selected' : '' }}>Híbrido</option>
                    </select>
                </div>

                <!-- Buscador de Producto -->
                <div class="col-md-3">
                    <label class="form-label small font-weight-bold text-primary">Buscar Producto Espécifico</label>
                    <div class="input-group">
                        <span class="input-group-text bg-primary text-white border-0"><i class="fas fa-search"></i></span>
                        <input type="text" name="busquedaProducto" value="{{ request('busquedaProducto') }}" 
                               class="form-control shadow-none border-primary" 
                               placeholder="Nombre o Código...">
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="col-12 text-center mt-3 d-flex flex-wrap justify-content-center gap-2">
                    <button type="submit" name="consultar" value="1" class="btn btn-primary px-4 py-2 shadow-sm rounded-pill font-weight-bold">
                        <i class="fas fa-search me-2"></i> Consultar Informe
                    </button>
                    <button type="submit" name="expT" value="1" class="btn btn-outline-danger px-4 py-2 shadow-sm rounded-pill font-weight-bold">
                        <i class="fas fa-file-excel me-2"></i> Exportar General
                    </button>
                    <button type="submit" name="vendedor" value="activo" class="btn btn-outline-success px-4 py-2 shadow-sm rounded-pill font-weight-bold">
                        <i class="fas fa-user-tie me-2"></i> Exportar Por Vendedor
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4">
        <!-- Results with IVA -->
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 h-100 rounded-3 overflow-hidden">
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center border-bottom border-light">
                    <h6 class="mb-0 text-primary font-weight-bold"><i class="fas fa-receipt me-2"></i> Resultados con IVA</h6>
                    @php
                        $modoFinanciero = intval($calculoFianciero ?? session('calculoFianciero', 0));
                        $ventaConIvaReal = $dtoVenta > 0 ? $Venta_Total_Con_Iva - (($Venta_Total_Con_Iva / 100) * $dtoVenta) : $Venta_Total_Con_Iva;
                        $utilidadConIvaReal = $dtoVenta > 0 ? $Total_utilidad_Con_Iva - (($Total_utilidad_Con_Iva / 100) * $dtoVenta) : $Total_utilidad_Con_Iva;
                        $costoConIvaReal = $dtoVenta > 0 ? $costoConiva - (($costoConiva / 100) * $dtoVenta) : $costoConiva;

                        $rentabilidadConIvaPorcentaje = 0;
                        if ($modoFinanciero == 1) {
                            if ($ventaConIvaReal != 0) {
                                $rentabilidadConIvaPorcentaje = ($utilidadConIvaReal / $ventaConIvaReal) * 100;
                            }
                        } else {
                            if ($costoConIvaReal != 0) {
                                $rentabilidadConIvaPorcentaje = ($utilidadConIvaReal / $costoConIvaReal) * 100;
                            }
                        }
                    @endphp
                    <span class="badge bg-primary rounded-pill px-3" title="{{ $modoFinanciero == 1 ? 'Cálculo Financiero: (Utilidad / Venta) * 100' : 'Cálculo Matemático: (Utilidad / Costo) * 100' }}">
                        Rentabilidad {{ $modoFinanciero == 1 ? '(Financiera)' : '(Comercial)' }}: {{ number_format($rentabilidadConIvaPorcentaje, 2) }}%
                    </span>
                </div>
                <div class="card-body">
                    <div class="row g-3 text-center">
                        <div class="col-md-4">
                            <div class="p-3 border-bottom border-primary border-3 bg-light rounded-2 h-100">
                                <small class="text-muted text-uppercase d-block mb-1 font-weight-bold" style="font-size: 10px;">Total Venta</small>
                                <span class="h5 mb-0 font-weight-bold text-primary">
                                    ${{ number_format($dtoVenta > 0 ? $Venta_Total_Con_Iva-(($Venta_Total_Con_Iva/100)*$dtoVenta) : $Venta_Total_Con_Iva) }}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border-bottom border-success border-3 bg-light rounded-2 h-100">
                                <small class="text-muted text-uppercase d-block mb-1 font-weight-bold" style="font-size: 10px;">Utilidad</small>
                                <span class="h5 mb-0 font-weight-bold text-success">
                                    {{ number_format($dtoVenta > 0 ? $Total_utilidad_Con_Iva-(($Total_utilidad_Con_Iva/100)*$dtoVenta) : $Total_utilidad_Con_Iva) }}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border-bottom border-danger border-3 bg-light rounded-2 h-100">
                                <small class="text-muted text-uppercase d-block mb-1 font-weight-bold" style="font-size: 10px;">Costo</small>
                                <span class="h5 mb-0 font-weight-bold text-danger">
                                    {{ number_format($dtoVenta > 0 ? $costoConiva-(($costoConiva/100)*$dtoVenta) : $costoConiva) }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Results without IVA -->
        <div class="col-lg-6">
            <div class="card shadow-sm border-0 h-100 rounded-3 overflow-hidden">
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center border-bottom border-light">
                    <h6 class="mb-0 text-secondary font-weight-bold"><i class="fas fa-calculator me-2"></i> Resultados sin IVA</h6>
                    @php
                        $ventaSinIvaReal = $dtoVenta > 0 ? $Venta_Total_Sin_Iva - (($Venta_Total_Sin_Iva / 100) * $dtoVenta) : $Venta_Total_Sin_Iva;
                        $utilidadSinIvaReal = $dtoVenta > 0 ? $Total_utilidad_Sin_iva - (($Total_utilidad_Sin_iva / 100) * $dtoVenta) : $Total_utilidad_Sin_iva;
                        $costoSinIvaReal = $dtoVenta > 0 ? $costoSiniva - (($costoSiniva / 100) * $dtoVenta) : $costoSiniva;

                        $rentabilidadSinIvaPorcentaje = 0;
                        if ($modoFinanciero == 1) {
                            if ($ventaSinIvaReal != 0) {
                                $rentabilidadSinIvaPorcentaje = ($utilidadSinIvaReal / $ventaSinIvaReal) * 100;
                            }
                        } else {
                            if ($costoSinIvaReal != 0) {
                                $rentabilidadSinIvaPorcentaje = ($utilidadSinIvaReal / $costoSinIvaReal) * 100;
                            }
                        }
                    @endphp
                    <span class="badge bg-success rounded-pill px-3" title="{{ $modoFinanciero == 1 ? 'Cálculo Financiero: (Utilidad / Venta) * 100' : 'Cálculo Matemático: (Utilidad / Costo) * 100' }}">
                        Rentabilidad {{ $modoFinanciero == 1 ? '(Financiera)' : '(Comercial)' }}: {{ number_format($rentabilidadSinIvaPorcentaje, 2) }}%
                    </span>
                </div>
                <div class="card-body">
                    <div class="row g-3 text-center">
                        <div class="col-md-4">
                            <div class="p-3 border-bottom border-secondary border-3 bg-light rounded-2 h-100">
                                <small class="text-muted text-uppercase d-block mb-1 font-weight-bold" style="font-size: 10px;">Total Venta</small>
                                <span class="h5 mb-0 font-weight-bold text-dark">
                                    ${{ number_format($dtoVenta > 0 ? $Venta_Total_Sin_Iva-(($Venta_Total_Sin_Iva/100)*$dtoVenta) : $Venta_Total_Sin_Iva) }}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border-bottom border-success border-3 bg-light rounded-2 h-100">
                                <small class="text-muted text-uppercase d-block mb-1 font-weight-bold" style="font-size: 10px;">Utilidad</small>
                                <span class="h5 mb-0 font-weight-bold text-success">
                                    {{ number_format($dtoVenta > 0 ? $Total_utilidad_Sin_iva-(($Total_utilidad_Sin_iva/100)*$dtoVenta) : $Total_utilidad_Sin_iva) }}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border-bottom border-danger border-3 bg-light rounded-2 h-100">
                                <small class="text-muted text-uppercase d-block mb-1 font-weight-bold" style="font-size: 10px;">Costo</small>
                                <span class="h5 mb-0 font-weight-bold text-danger">
                                    {{ number_format($dtoVenta > 0 ? $costoSiniva-(($costoSiniva/100)*$dtoVenta) : $costoSiniva) }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Results Section -->
    <div class="bg-white p-4 rounded-3 shadow-sm border overflow-auto">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0 text-muted"><i class="fas fa-list-ul me-2"></i> Detalle de Ventas</h5>
        </div>
        <hr class="mt-0 mb-4 opacity-10">
        @include('menu.exportar.exportar')
    </div>

</div>

@endsection

@section('pie')
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function() {
        if ($('#tablep').length) {
            $('#tablep').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"
                },
                "pageLength": 50,
                "responsive": true,
                "order": [[ 1, "asc" ]],
                "dom": '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>' +
                       '<"row"<"col-sm-12"tr>>' +
                       '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
            });
        }
    });
</script>
@endsection