@extends('layouts.dashboardnew')

@section('content')

<div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
    <div class="card-body p-0">
        <div class="row g-0 align-items-center">

            {{-- Izquierda: saludo + KPIs --}}
            <div class="col-md-8 p-4 p-lg-5">
                <div class="d-flex align-items-center gap-2 text-muted small mb-2">
                    <i class="fa-regular fa-calendar"></i>
                    <span class="text-capitalize">
                        {{ \Carbon\Carbon::now()->locale('es')->isoFormat('dddd, D [de] MMMM') }}
                    </span>
                </div>

                <h2 class="text-info-emphasis fw-bold mb-1 element-type" style="min-height:2.5rem;"></h2>
                <p class="text-muted mb-4">Esto es lo que está pasando hoy en tu tienda</p>

                <div class="row g-3">
                    {{-- KPI: Cantidad de ventas hoy --}}
                    <div class="col-sm-6">
                        <div class="bg-info-subtle rounded-4 p-3 h-100">
                            <div class="d-flex align-items-center gap-3">
                                <div class="d-inline-flex align-items-center justify-content-center bg-white rounded-3 shadow-sm flex-shrink-0" style="width:48px;height:48px;">
                                    <i class="fa-solid fa-cart-shopping text-info fs-5"></i>
                                </div>
                                <div>
                                    <small class="text-muted text-uppercase fw-semibold d-block" style="letter-spacing:.5px;">Ventas del día</small>
                                    <h3 class="fw-bold text-info-emphasis mb-0">{{ number_format($datos['total_cantidad_hoy']) }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- KPI: Monto total hoy --}}
                    <div class="col-sm-6">
                        <div class="bg-success-subtle rounded-4 p-3 h-100">
                            <div class="d-flex align-items-center gap-3">
                                <div class="d-inline-flex align-items-center justify-content-center bg-white rounded-3 shadow-sm flex-shrink-0" style="width:48px;height:48px;">
                                    <i class="fa-solid fa-sack-dollar text-success fs-5"></i>
                                </div>
                                <div class="min-w-0">
                                    <small class="text-muted text-uppercase fw-semibold d-block" style="letter-spacing:.5px;">Monto del día</small>
                                    <h3 class="fw-bold text-success-emphasis mb-0">
                                        @if ($datos['moneda']->mostrar_a_d)
                                          {{ $datos['moneda']->simbolo }} {{ number_format($datos['total_monto_hoy'], 2) }}
                                        @else
                                          {{ number_format($datos['total_monto_hoy'], 2) }} {{ $datos['moneda']->simbolo }}
                                        @endif
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Derecha: ilustración --}}
            <div class="col-md-4 d-none d-md-block text-center">
                <img src="{{ asset('fondo/5.jpg') }}" class="img-fluid">
            </div>

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



@if($datos['por_agotarse'] > 0 || $datos['agotados'] > 0 || $datos['compras_en_espera'] > 0)
<div class="row g-3 mb-4">

    @if($datos['por_agotarse'] > 0)
    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-4 h-100" style="border-left:4px solid #f59e0b !important;">
            <div class="card-body p-3 d-flex align-items-center gap-3">
                <div class="d-inline-flex align-items-center justify-content-center bg-warning-subtle text-warning-emphasis rounded-3 flex-shrink-0" style="width:44px;height:44px;">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                </div>
                <div class="flex-grow-1 min-w-0">
                    <p class="mb-0 small">
                        <strong>{{ $datos['por_agotarse'] }} producto{{ $datos['por_agotarse'] > 1 ? 's' : '' }}</strong> por agotarse
                    </p>
                    <a href="{{ route('sucursal-inventario') }}" class="text-warning-emphasis fw-semibold small text-decoration-none">
                        Ver inventario <i class="fa-solid fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if($datos['agotados'] > 0)
    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-4 h-100" style="border-left:4px solid #ef4444 !important;">
            <div class="card-body p-3 d-flex align-items-center gap-3">
                <div class="d-inline-flex align-items-center justify-content-center bg-danger-subtle text-danger-emphasis rounded-3 flex-shrink-0" style="width:44px;height:44px;">
                    <i class="fa-solid fa-box-open"></i>
                </div>
                <div class="flex-grow-1 min-w-0">
                    <p class="mb-0 small">
                        <strong>{{ $datos['agotados'] }} producto{{ $datos['agotados'] > 1 ? 's' : '' }}</strong> sin inventario
                    </p>
                    <a href="{{ route('sucursal-inventario') }}" class="text-danger-emphasis fw-semibold small text-decoration-none">
                        Ver inventario <i class="fa-solid fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if($datos['compras_en_espera'] > 0)
    <div class="col-md-4">
        <div class="card border-0 shadow-sm rounded-4 h-100" style="border-left:4px solid #0EA5E9 !important;">
            <div class="card-body p-3 d-flex align-items-center gap-3">
                <div class="d-inline-flex align-items-center justify-content-center bg-info-subtle text-info-emphasis rounded-3 flex-shrink-0" style="width:44px;height:44px;">
                    <i class="fa-regular fa-clock"></i>
                </div>
                <div class="flex-grow-1 min-w-0">
                    <p class="mb-0 small">
                        <strong>{{ $datos['compras_en_espera'] }} compra{{ $datos['compras_en_espera'] > 1 ? 's' : '' }}</strong> pendiente{{ $datos['compras_en_espera'] > 1 ? 's' : '' }}
                    </p>
                    <a href="{{ route('tienda-solicitudes') }}" class="text-info-emphasis fw-semibold small text-decoration-none">
                        Ver compras <i class="fa-solid fa-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endif

</div>
@endif


<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">

        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-2 mb-3">
            <div>
                <h5 class="fw-bold mb-1">
                    <i class="fa-solid fa-chart-line text-info me-1"></i> Ventas anuales
                </h5>
                <p class="text-muted small mb-0">Evolución mensual de ventas durante el año</p>
            </div>
            <div class="d-flex align-items-center gap-2">
                <label class="small text-muted fw-semibold mb-0 me-1">Año:</label>
                <select id="yearFilter" class="form-select form-select-sm" style="width:auto;">
                    @for($i=0; $i<5; $i++)
                        <option value="{{ (date('Y') - $i) }}">{{ (date('Y') - $i) }}</option>
                    @endfor
                </select>
            </div>
        </div>

        <div id="grafica_ventas" data-url="{{ route('chart.panel.ventas-mensual') }}" style="min-height:420px;"></div>
    </div>
</div>



<div class="row g-4 mb-4">

    {{-- Productos más vendidos --}}
    <div class="col-xl-8">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">

                <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-3">
                    <div>
                        <h5 class="fw-bold mb-1">
                            <i class="fa-solid fa-fire text-info me-1"></i> Productos más vendidos
                        </h5>
                        <p class="text-muted small mb-0">Top productos del periodo seleccionado</p>
                    </div>
                    <div class="d-flex gap-2">
                        <select id="filtYear" class="form-select form-select-sm" style="width:auto;">
                            @foreach(range(date('Y'), date('Y')-3) as $y)
                                <option value="{{ $y }}">{{ $y }}</option>
                            @endforeach
                        </select>
                        <select id="filtMonth" class="form-select form-select-sm" style="width:auto;">
                            @for($m=1; $m<=12; $m++)
                                <option value="{{ sprintf('%02d', $m) }}" {{ $m == date('n') ? 'selected' : '' }}>
                                    {{ Illuminate\Support\Str::ucfirst(\Carbon\Carbon::create()->month($m)->locale('es')->monthName) }}
                                </option>
                            @endfor
                        </select>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr class="text-uppercase small text-muted" style="letter-spacing:.5px;">
                                <th class="border-0 ps-3" style="width:50px;">#</th>
                                <th class="border-0">Producto</th>
                                <th class="border-0 text-end">Precio</th>
                                <th class="border-0 text-center">Vendidos</th>
                                <th class="border-0 text-end pe-3">Total</th>
                            </tr>
                        </thead>
                        <tbody id="tablaVentas" data-url="{{ route('chart.panel.producto-vendidos') }}">
                            
                        </tbody>
                    </table>
                </div>

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

  
    <div class="col-xl-4">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">

                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <h5 class="fw-bold mb-1">
                            <i class="fa-solid fa-layer-group text-info me-1"></i> Categorías
                        </h5>
                        <p class="text-muted small mb-0">Con más productos</p>
                    </div>
                </div>

                @php
                    $maxProductos = collect($datos['categorias'])->max('productos_count') ?: 1;
                @endphp

                @forelse($datos['categorias'] as $cate)
                    @php
                        $pct = round(($cate->productos_count / $maxProductos) * 100);
                    @endphp
                    <div class="mb-3 {{ !$loop->last ? 'pb-3 border-bottom' : '' }}">
                        <div class="d-flex align-items-center gap-3 mb-2">
                            @if($cate->imagen != null)
                                <img src="{{ $cate->imagen }}" class="rounded-3 border flex-shrink-0" style="width:40px;height:40px;object-fit:cover;">
                            @else
                                <div class="rounded-3 bg-info-subtle text-info-emphasis d-flex align-items-center justify-content-center flex-shrink-0" style="width:40px;height:40px;">
                                    <i class="fa-solid fa-folder"></i>
                                </div>
                            @endif
                            <div class="flex-grow-1 min-w-0">
                                <p class="mb-0 fw-semibold text-truncate">{{ $cate->titulo }}</p>
                                <small class="text-muted">{{ $cate->productos_count }} {{ $cate->productos_count == 1 ? 'producto' : 'productos' }}</small>
                            </div>
                        </div>
                        <div class="progress" style="height:5px;">
                            <div class="progress-bar bg-info" role="progressbar" style="width:{{ $pct }}%;"></div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-5">
                        <i class="fa-solid fa-layer-group text-muted fs-1 mb-2"></i>
                        <p class="text-muted mb-0">Sin categorías</p>
                    </div>
                @endforelse

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

</div>


<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h5 class="fw-bold mb-1">
                    <i class="fa-solid fa-receipt text-info me-1"></i> Últimas compras
                </h5>
                <p class="text-muted small mb-0">Pedidos recientes en tu tienda</p>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr class="text-uppercase small text-muted" style="letter-spacing:.5px;">
                        <th class="border-0 ps-3">Pedido</th>
                        <th class="border-0">Cliente</th>
                        <th class="border-0">Productos</th>
                        <th class="border-0 text-center">Estado</th>
                        <th class="border-0 text-end">Total</th>
                        <th class="border-0 text-center pe-3">Fecha</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($datos['ultimas_compras'] as $ultimos)
                    @php
                        $productos = collect($ultimos->datoscompra)->pluck('producto')->implode(', ');
                        $iniciales = strtoupper(substr($ultimos->user->display_name ?? '?', 0, 2));
                    @endphp
                    <tr>
                        <td class="ps-3">
                            <code class="bg-light rounded-2 px-2 py-1 small text-info-emphasis">#{{ $ultimos->id }}</code>
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-3">
                                <div class="rounded-circle bg-info-subtle text-info-emphasis d-inline-flex align-items-center justify-content-center fw-bold flex-shrink-0" style="width:38px;height:38px;font-size:.8rem;">
                                    {{ $iniciales }}
                                </div>
                                <div class="min-w-0">
                                    <p class="mb-0 fw-semibold text-truncate">{{ $ultimos->user->display_name }}</p>
                                    <small class="text-muted text-truncate d-block">{{ $ultimos->user->user_email }}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="d-inline-block text-truncate" style="max-width:240px;" title="{{ $productos }}">
                                <small class="text-muted">{{ $productos }}</small>
                            </span>
                        </td>
                        <td class="text-center">
                            @if($ultimos->status == 1)
                                <span class="badge bg-success-subtle text-success-emphasis rounded-pill fw-semibold">
                                    <i class="fa-solid fa-circle-check me-1"></i> Completado
                                </span>
                            @elseif($ultimos->status == 0)
                                <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill fw-semibold">
                                    <i class="fa-regular fa-clock me-1"></i> En espera
                                </span>
                            @elseif($ultimos->status == 2)
                                <span class="badge bg-danger-subtle text-danger-emphasis rounded-pill fw-semibold">
                                    <i class="fa-solid fa-circle-xmark me-1"></i> Cancelado
                                </span>
                            @endif
                        </td>
                        <td class="text-end fw-bold text-info-emphasis">
                            @if ($datos['moneda']->mostrar_a_d)
                               {{$datos['moneda']->simbolo}} {{ number_format($ultimos->total, 2) }}
                            @else
                               {{ number_format($ultimos->total, 2) }} {{$datos['moneda']->simbolo}}
                            @endif
                        </td>
                        <td class="text-center pe-3">
                            <small class="text-muted">
                                {{ \Carbon\Carbon::parse($ultimos->fecha)->format('d/m/Y') }}
                            </small>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5">
                            <i class="fa-solid fa-receipt text-muted fs-1 mb-2"></i>
                            <p class="text-muted mb-0">Aún no hay compras registradas</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </div>
</div>
  
    
@endsection

@push('script')
<script src ="{{ asset('assets/plugins/amcharts/grafica_panel_ventas.js') }}"></script>

<script>
    new Typed('.element-type', {
        strings: [
            'Hola, {{ Auth::user()->display_name }}',
            'Es momento de revisar tus ventas'
        ],
        typeSpeed: 60,
        backSpeed: 30,
        backDelay: 2000,
        loop: true
    });
</script>
@endpush