@extends('admin.layouts.app')
@section('title','Admin | Dashboard')

@section('content')
    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0">Dashboard</h3></div>
            </div>
        </div>
    </div>

    <div class="app-content">
        <div class="container-fluid">

            {{-- KPI boxes --}}
            <div class="row">
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon text-bg-primary shadow-sm"><i class="bi bi-people-fill"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Clienți</span>
                            <span class="info-box-number">{{ $totCustomers }}</span>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon text-bg-success shadow-sm"><i class="bi bi-bag-check-fill"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Comenzi OK</span>
                            <span class="info-box-number">{{ $okOrders }}</span>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon text-bg-warning shadow-sm"><i class="bi bi-currency-euro"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Venit total (OK)</span>
                            <span class="info-box-number">{{ number_format($revenue,2) }}</span>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon text-bg-info shadow-sm"><i class="bi bi-box-seam"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Produse</span>
                            <span class="info-box-number">{{ $productsCount }}</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Alert produse cu lipsuri critice --}}
            @if($missingCritical->count() > 0)
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-danger d-flex align-items-start" role="alert">
                        <i class="bi bi-exclamation-octagon-fill me-2 fs-4"></i>
                        <div>
                            <div class="fw-bold">Produse cu date vitale lipsă</div>
                            <div class="small">Lipsesc unul sau mai multe: <code>internal_lp</code>, <code>internal_offer_id</code>, <code>internal_link_script</code>.</div>
                            <div class="mt-2">
                                <span class="badge bg-danger me-2">{{ $missingCriticalCount }} produse afectate</span>
                                @if($missingCritical->count())
                                    <div class="table-responsive mt-2">
                                        <table class="table table-sm table-borderless align-middle mb-0">
                                            <thead>
                                            <tr class="text-muted">
                                                <th>#</th><th>Nume</th><th>LP</th><th>Offer</th><th>Script</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach($missingCritical as $m)
                                                <tr>
                                                    <td class="text-muted"><a href="admin/products/{{$m->id}}/edit">#{{ $m->id }}</a></td>
                                                    <td class="text-truncate" style="max-width:360px"><a href="admin/products/{{$m->id}}/edit">{{ $m->name }}</a></td>
                                                    <td>{!! $m->internal_lp ? '<span class="badge bg-success">OK</span>' : '<span class="badge bg-danger">Lipsă</span>' !!}</td>
                                                    <td>{!! $m->internal_offer_id ? '<span class="badge bg-success">OK</span>' : '<span class="badge bg-danger">Lipsă</span>' !!}</td>
                                                    <td>{!! $m->internal_link_script ? '<span class="badge bg-success">OK</span>' : '<span class="badge bg-danger">Lipsă</span>' !!}</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            {{-- Row: grafice + ținte --}}
            <div class="row">
                <div class="col-md-8">
                    <div class="card mb-4">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="card-title mb-0">Evoluție comenzi (ultimele 30 zile)</h5>
                            <small class="text-muted">Comenzi & sumă (OK+altele)</small>
                        </div>
                        <div class="card-body">
                            <div id="sales-chart"></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    {{-- Distribuție status comenzi --}}
                    <div class="card mb-4">
                        <div class="card-header"><h5 class="card-title mb-0">Status comenzi</h5></div>
                        <div class="card-body">
                            <div id="pie-chart"></div>
                            <div class="mt-3 small text-muted">
                                pending: {{ $statusData['pending'] }} &nbsp; | &nbsp;
                                ok: {{ $statusData['ok'] }} &nbsp; | &nbsp;
                                error: {{ $statusData['error'] }}
                            </div>
                        </div>
                    </div>

                    {{-- Categorii & total comenzi --}}
                    <div class="info-box mb-3 text-bg-secondary">
                        <span class="info-box-icon"><i class="bi bi-diagram-3-fill"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Categorii</span>
                            <span class="info-box-number">{{ $categoriesCount }}</span>
                        </div>
                    </div>

                    <div class="info-box mb-3 text-bg-dark">
                        <span class="info-box-icon"><i class="bi bi-receipt"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Total comenzi</span>
                            <span class="info-box-number">{{ $totOrders }}</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Ultimele produse --}}
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h5 class="card-title mb-0">Ultimele produse</h5>
                            <a href="{{ url('/admin/products') }}" class="btn btn-sm btn-outline-secondary">Vezi toate</a>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table m-0 align-middle">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Nume</th>
                                        <th>Preț</th>
                                        <th>Creat la</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @forelse($latestProducts as $p)
                                        <tr>
                                            <td><a href="admin/products/{{$p->id}}/edit">#{{ $p->id }}</a></td>
                                            <td class="text-truncate" style="max-width:380px">{{ $p->name }}</td>
                                            <td>{{ number_format((float)$p->price,2) }}</td>
                                            <td>{{ \Carbon\Carbon::parse($p->created_at)->format('d.m.Y H:i') }}</td>
                                        </tr>
                                    @empty
                                        <tr><td colspan="4" class="text-center text-muted py-4">Nu există produse.</td></tr>
                                    @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer small text-muted">
                            Doar ultimele {{ $latestProducts->count() }} produse.
                        </div>
                    </div>
                </div>

                {{-- Mini-carduri simpatice --}}
                <div class="col-md-4">
                    <div class="card h-100">
                        <div class="card-header"><h5 class="card-title mb-0">Sinteză rapidă</h5></div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex justify-content-between">
                                    <span>Rata OK din total comenzi</span>
                                    <strong>
                                        @php
                                            $rate = $totOrders ? round(($okOrders/$totOrders)*100) : 0;
                                        @endphp
                                        {{ $rate }}%
                                    </strong>
                                </li>
                                <li class="list-group-item d-flex justify-content-between">
                                    <span>Valoare medie / comandă (OK)</span>
                                    <strong>
                                        @php
                                            $avg = $okOrders ? $revenue / $okOrders : 0;
                                        @endphp
                                        {{ number_format($avg,2) }}
                                    </strong>
                                </li>
                                <li class="list-group-item d-flex justify-content-between">
                                    <span>Produse / categorie (medie)</span>
                                    <strong>
                                        @php
                                            // Heuristic simplu (fără join-uri): total produse / total categorii
                                            $avgProdCat = $categoriesCount ? $productsCount / $categoriesCount : 0;
                                        @endphp
                                        {{ number_format($avgProdCat,1) }}
                                    </strong>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div> {{-- /row ultimele produse --}}

        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.49.0"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function(){
            // Date din PHP pentru grafice
            const dates = @json($chartDates);
            const counts = @json($chartCounts);
            const sums = @json($chartSums);
            const statusData = @json($statusData);

            // LINE: comenzi + sume
            if (window.ApexCharts && document.querySelector('#sales-chart')) {
                const el = document.querySelector('#sales-chart');
                const chart = new ApexCharts(el, {
                    chart: { type: 'line', height: 320, toolbar: { show: false } },
                    series: [
                        { name: 'Comenzi', data: counts },
                        { name: 'Sume', data: sums }
                    ],
                    xaxis: { categories: dates },
                    stroke: { width: 3 },
                    dataLabels: { enabled: false },
                    yaxis: [{ title: { text: 'Comenzi' } }, { opposite: true, title: { text: 'Sume' } }],
                    tooltip: { shared: true }
                });
                chart.render();
            } else {
                const el = document.querySelector('#sales-chart');
                if (el) el.innerHTML = '<div class="text-muted">ApexCharts nu este încărcat. Grafic indisponibil.</div>';
            }

            // PIE: status comenzi
            if (window.ApexCharts && document.querySelector('#pie-chart')) {
                const el2 = document.querySelector('#pie-chart');
                const pie = new ApexCharts(el2, {
                    chart: { type: 'donut', height: 280 },
                    labels: ['pending','ok','error'],
                    series: [statusData.pending, statusData.ok, statusData.error],
                    legend: { position: 'bottom' }
                });
                pie.render();
            } else {
                const el2 = document.querySelector('#pie-chart');
                if (el2) el2.innerHTML = '<div class="text-muted">ApexCharts nu este încărcat. Grafic indisponibil.</div>';
            }
        });
    </script>
@endpush