@extends('sur-mesure.layouts.app')

@section('title', __('surmesure.dashboard'))

@section('styles')
    <style>
        .sm-back-btn {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 9px 18px; border-radius: 10px;
            background: #111; color: #C3AD66;
            font-weight: 600; font-size: 14px; text-decoration: none;
            transition: transform .15s ease, background .15s ease;
        }
        .sm-back-btn:hover { background: #000; transform: translateX(-2px); color: #C3AD66; }
    </style>
@endsection

@section('content')
    <div class="transection">
        <div class="title-right-actioin-btn-wrapper-product-list">
            <h3 class="title">{{ __('surmesure.hello') }} {{ $smUser->name ?? '' }} — {{ __('surmesure.dashboard') }}</h3>
            <div class="button-wrapper" style="display:flex;flex-direction:column;align-items:flex-end;gap:10px;">
                <a href="{{ session('sur_mesure_prelogin_url', url('/')) }}" class="sm-back-btn">
                    <span style="font-size:18px;line-height:1;">&larr;</span> {{ __('surmesure.back') }}
                </a>
                <a href="{{ route('sur-mesure.creations.create') }}" class="rts-btn btn-primary menu-btn">+ {{ __('surmesure.add_creation') }}</a>
            </div>
        </div>

        {{-- Cartes statistiques --}}
        <div class="row g-5">
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12">
                <div class="single-over-fiew-card">
                    <span class="top-main">{{ __('surmesure.stat_creations') }}</span>
                    <div class="bottom">
                        <h2 class="title">{{ $totalCreations }}</h2>
                        <div class="right-primary"><img src="{{ asset('vendor/images/avatar/06.png') }}" alt=""></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12">
                <div class="single-over-fiew-card">
                    <span class="top-main">{{ __('surmesure.stat_orders') }}</span>
                    <div class="bottom">
                        <h2 class="title">{{ $totalOrders }}</h2>
                        <div class="right-primary"><img src="{{ asset('vendor/images/avatar/05.png') }}" alt=""></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12">
                <div class="single-over-fiew-card">
                    <span class="top-main">{{ __('surmesure.stat_customers') }}</span>
                    <div class="bottom">
                        <h2 class="title">{{ $totalCustomers }}</h2>
                        <div class="right-primary"><img src="{{ asset('vendor/images/avatar/04.png') }}" alt=""></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12">
                <div class="single-over-fiew-card">
                    <span class="top-main">{{ __('surmesure.stat_revenue') }}</span>
                    <div class="bottom">
                        <h2 class="title">{{ number_format($totalRevenue, 2, ',', ' ') }} €</h2>
                        <div class="right-primary"><img src="{{ asset('vendor/images/avatar/07.png') }}" alt=""></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Graphique du chiffre d'affaires --}}
        <div class="row mt--10 g-5">
            <div class="col-12">
                <div class="apex-xhart-area-one">
                    <div class="apex-chart-top-area-banner mb--20">
                        <div class="left-area">
                            <h1 class="title-top mb--10">{{ __('surmesure.chart_revenue') }}</h1>
                        </div>

                        <div class="right-area sale-statictics-button">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#sm-week" type="button" role="tab">{{ __('surmesure.week') }}</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#sm-month" type="button" role="tab">{{ __('surmesure.month') }}</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#sm-year" type="button" role="tab">{{ __('surmesure.year') }}</button>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="sm-week" role="tabpanel"><div id="sm-chart-week" class="server-request-chart"></div></div>
                        <div class="tab-pane fade" id="sm-month" role="tabpanel"><div id="sm-chart-month" class="server-request-chart"></div></div>
                        <div class="tab-pane fade" id="sm-year" role="tabpanel"><div id="sm-chart-year" class="server-request-chart"></div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.27.0/dist/apexcharts.min.js"></script>
    <script>
        const smRevenue = {
            week: @json($revenueWeek),
            month: @json($revenueMonth),
            year: @json($revenueYear),
        };

        function smMakeChart(selector, chartData) {
            const el = document.querySelector(selector);
            if (!el || !chartData) return;
            el.innerHTML = '';

            new ApexCharts(el, {
                chart: { type: 'area', height: 350, toolbar: { show: false } },
                colors: ['#C3AD66'],
                series: [{ name: '{{ __('surmesure.chart_revenue') }}', data: chartData.data || [] }],
                xaxis: {
                    categories: chartData.labels || [],
                    tickAmount: 10,
                    labels: { rotate: -45, hideOverlappingLabels: true, style: { fontSize: '11px' } }
                },
                stroke: { curve: 'smooth', width: 3 },
                fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.05 } },
                dataLabels: { enabled: false },
                yaxis: { labels: { formatter: v => Math.round(v) + ' €' } },
                tooltip: { y: { formatter: v => Number(v).toFixed(2) + ' €' } }
            }).render();
        }

        document.addEventListener('DOMContentLoaded', function () {
            smMakeChart('#sm-chart-week', smRevenue.week);
            smMakeChart('#sm-chart-month', smRevenue.month);
            smMakeChart('#sm-chart-year', smRevenue.year);
        });
    </script>
@endsection