@extends('layouts.partials.master')

@section('title', 'Dashboard')

@push('styles')
    <link href="{{ asset('assets/css/cards.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/css/badges.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/css/forms.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/css/resumed-statistics-cards.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/css/entities-cards.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/css/ranking-cards.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/css/charts.css') }}" rel="stylesheet" type="text/css">
@endpush

@section('content')
    @include('layouts.components.alerts')
    @include('layouts.components.general-title', ['title' => 'Dashboard'])

    <div class="d-flex flex-column gap-4">
        <div>
            @include('layouts.components.section-title', [
                'title' => 'Geral',
                'withDateFilter' => true,
                'route' => 'dashboard.indicators',
            ])

            <div class="d-flex flex-column gap-4 my-4">
                <div class="row g-4">
                    <div class="col-12 col-md-12">
                        @include('dashboard.partials.donut-chart', ['title' => 'Novos comerciantes'])
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div>
        @include('layouts.components.section-title', ['title' => 'Vendas'])
        <div class="d-flex flex-column gap-4 my-4">
            <div class="row g-4">
                <div class="col-12">
                    @include('dashboard.partials.line-chart', [
                        'title' => 'Produtos adicionados ao carrinho',
                        'type' => 'cart',
                    ])
                </div>
                <div class="col-12">
                    @include('dashboard.partials.line-chart', [
                        'title' => 'Produtos comprados no marketplace',
                        'type' => 'sell_products',
                    ])
                </div>
            </div>
            <div class="row g-4">
                <div class="col-12">
                    @include('dashboard.partials.bar-chart', [
                        'title' => 'Produtos comprados no marketplace (por comerciante)',
                        'type' => 'products_per_merchant',
                    ])
                </div>
                <div class="col-12">
                    @include('dashboard.partials.bar-chart', [
                        'title' => 'Serviços reservados no marketplace (por comerciante)',
                        'type' => 'services_per_merchant',
                    ])
                </div>
                <div class="col-12">
                    @include('dashboard.partials.bar-chart', [
                        'title' => 'Nº de visitantes por estabelecimento',
                        'type' => 'visits_per_place',
                    ])
                </div>
                <div class="col-12">
                    @include('dashboard.partials.bar-chart', [
                        'title' => 'Nº de pontos por cliente final',
                        'type' => 'points_per_user',
                    ])
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    @vite('resources/js/charts.js')
    @include('dashboard.partials.charts-configuration', [
        'newMerchants' => $newMerchants,
        'logsCounts' => $logsCounts,
        'chartDataProductsToCart' => $chartDataProductsToCart,
        'chartDataProductsSold' => $chartDataProductsSold,
        'chartDataProductsPerMerchant' => $chartDataProductsPerMerchant,
        'chartDataPeoplePerPlace' => $chartDataPeoplePerPlace,
        'chartDataServiceReservation' => $chartDataServiceReservation,
        'chartDataPointsPerUser' => $chartDataPointsPerUser,
    ])
@endpush