@extends('main-site.layouts.app')


@section('content')
    <h4 class="dashboard-title">{{ __("site.Home.Statistics") }}</h4>
    <div class="row">
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <p class="mb-2">إجمالي العروض</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">2312</p>
                        <span class="med-text opacity-50">طلب</span>
                    </div>
                    <div class="stat-icon d-flex align-items-center justify-content-center">
                        <i class="icon-chart"><span class="path1"></span><span class="path2"></span><span
                                class="path3"></span></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <p class="mb-2">العروض في الشهر</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">15</p>
                        <span class="med-text opacity-50">طلب</span>
                    </div>
                    <div class="stat-icon d-flex align-items-center justify-content-center">
                        <i class="icon-chart"><span class="path1"></span><span class="path2"></span><span
                                class="path3"></span></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <p class="mb-2">إجمالي الطلبات</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">15</p>
                        <span class="med-text opacity-50">طلب</span>
                    </div>
                    <div class="stat-icon d-flex align-items-center justify-content-center">
                        <i class="icon-open-box"><span class="path1"></span><span class="path2"></span><span
                                class="path3"></span></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <p class="mb-2">الطلبات في الشهر</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">15</p>
                        <span class="med-text opacity-50">طلب</span>
                    </div>
                    <div class="stat-icon d-flex align-items-center justify-content-center">
                        <i class="icon-open-box"><span class="path1"></span><span class="path2"></span><span
                                class="path3"></span></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <p class="mb-2">إجمالي العروض</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">2312</p>
                        <span class="med-text opacity-50">طلب</span>
                    </div>
                    <div class="stat-icon d-flex align-items-center justify-content-center">
                        <i class="icon-chart"><span class="path1"></span><span class="path2"></span><span
                                class="path3"></span></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <p class="mb-2">العروض في الشهر</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">15</p>
                        <span class="med-text opacity-50">طلب</span>
                    </div>
                    <div class="stat-icon d-flex align-items-center justify-content-center">
                        <i class="icon-chart"><span class="path1"></span><span class="path2"></span><span
                                class="path3"></span></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <p class="mb-2">إجمالي الطلبات</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">15</p>
                        <span class="med-text opacity-50">طلب</span>
                    </div>
                    <div class="stat-icon d-flex align-items-center justify-content-center">
                        <i class="icon-open-box"><span class="path1"></span><span class="path2"></span><span
                                class="path3"></span></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <p class="mb-2">الطلبات في الشهر</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">15</p>
                        <span class="med-text opacity-50">طلب</span>
                    </div>
                    <div class="stat-icon d-flex align-items-center justify-content-center">
                        <i class="icon-open-box"><span class="path1"></span><span class="path2"></span><span
                                class="path3"></span></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="stats-chart mt-1 mb-4">
        <div class="chart-header d-flex justify-content-between align-items-center gap-3 flex-wrap">
            <div class="title d-flex align-items-center gap-3">
                <div class="box-icon d-flex align-items-center justify-content-center">
                    <i class="icon-open-box"><span class="path1"></span><span class="path2"></span><span
                            class="path3"></span></i>
                </div>
                <h5 class="mb-0">إجمالي الطلبات (182)</h5>
            </div>
            <div class="main-form white">
                <div class="input-icon">
                    <select class="form-select">
                        <option>2024</option>
                        <option>2023</option>
                        <option>2022</option>
                    </select>
                    <i class="icon-calendar"><span class="path1"></span><span class="path2"></span><span
                            class="path3"></span><span class="path4"></span><span class="path5"></span><span
                            class="path6"></span></i>
                </div>
            </div>
        </div>
        <div id="orders-chart"></div>
    </div>
    <div class="stats-chart">
        <div class="chart-header d-flex justify-content-between align-items-center gap-3 flex-wrap">
            <div class="title d-flex align-items-center gap-3">
                <div class="box-icon d-flex align-items-center justify-content-center">
                    <i class="icon-chart"><span class="path1"></span><span class="path2"></span><span
                            class="path3"></span></i>
                </div>
                <h5 class="mb-0">إجمالي العروض</h5>
            </div>
            <div class="main-form white">
                <div class="input-icon">
                    <select class="form-select">
                        <option>2024</option>
                        <option>2023</option>
                        <option>2022</option>
                    </select>
                    <i class="icon-calendar"><span class="path1"></span><span class="path2"></span><span
                            class="path3"></span><span class="path4"></span><span class="path5"></span><span
                            class="path6"></span></i>
                </div>
            </div>
        </div>
        <div id="offers-chart"></div>
    </div>
@endsection
@section('script')
    <script>
        var options = {
            chart: {
                height: 200,
                toolbar: {
                    show: false
                },
                type: "area"
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: 3,
                curve: 'smooth'
            },
            series: [{
                name: "Series 1",
                data: [100, 150, 350, 250, 100, 30]
            }],
            fill: {
                type: "gradient",
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0,
                    opacityTo: 0,
                    stops: [0, 90, 100]
                }
            },
            grid: {
                // borderColor: ,
                strokeDashArray: 8,
            },
            xaxis: {
                categories: [
                    "01 Jan",
                    "02 Jan",
                    "03 Jan",
                    "04 Jan",
                    "05 Jan",
                    "06 Jan",
                    "07 Jan"
                ]
            }
        };

        var chart = new ApexCharts(document.querySelector("#orders-chart"), options);
        var chart2 = new ApexCharts(document.querySelector("#offers-chart"), options);

        chart.render();
        chart2.render();
    </script>
@endsection