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


@section('content')
    <h4 class="dashboard-title">{{ __("site.Home.Statistics") }}</h4>
    <div class="row">
        <div class="col-lg-4 col-md-6">
            <div class="stat-card">
                <p class="mb-2">{{ __("site.Home.Statistics_1") }}</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">{{ \App\Http\Helpers\HelperApp::convert_numbers($counts['rfq_buyer_count']) }}</p>
                        <span class="med-text opacity-50">RFQ</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-4 col-md-6">
            <div class="stat-card">
                <p class="mb-2">{{ __("site.Home.Statistics_2") }}</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">{{ \App\Http\Helpers\HelperApp::convert_numbers($counts['rfq_buyer_month']) }}</p>
                        <span class="med-text opacity-50">RFQ</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-4 col-md-6">
            <div class="stat-card">
                <p class="mb-2">{{ __("site.Home.Statistics_3") }}</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">{{ \App\Http\Helpers\HelperApp::convert_numbers($counts['offer_buyer_count']) }}</p>
                        <span class="med-text opacity-50">{{ __("site.Home.Statistics_4") }}</span>
                    </div>


                    <div class="stat-icon d-flex align-items-center justify-content-center">
                        <i class="icon-delivery-air"><span class="path1"></span><span class="path2"></span><span
                                class="path3"></span></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="stat-card">
                <p class="mb-2">{{ __("site.Home.Statistics_5") }}</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">{{ \App\Http\Helpers\HelperApp::convert_numbers($counts['offer_buyer_month']) }}</p>
                        <span class="med-text opacity-50">{{ __("site.Home.Statistics_4") }}</span>
                    </div>

                    <div class="stat-icon d-flex align-items-center justify-content-center">
                        <i class="icon-delivery-air"><span class="path1"></span><span class="path2"></span><span
                                class="path3"></span></i>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-lg-4 col-md-6">
            <div class="stat-card">
                <p class="mb-2">{{ __("site.Home.Statistics_6") }}</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">{{ \App\Http\Helpers\HelperApp::convert_numbers($counts['chat_count']) }}</p>
                        <span class="med-text opacity-50">{{ __("site.Home.Statistics_7") }}</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-4 col-md-6">
            <div class="stat-card">
                <p class="mb-2">{{ __("site.Home.Statistics_8") }}</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="stat-num mb-0">{{ \App\Http\Helpers\HelperApp::convert_numbers($counts['chat_month']) }}</p>
                        <span class="med-text opacity-50">{{ __("site.Home.Statistics_7") }}</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>
    <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">{{ __("site.Home.Statistics_1") }} ({{ \App\Http\Helpers\HelperApp::convert_numbers($counts['rfq_buyer_count']) }})</h5>
            </div>
            <div class="main-form white">
                <div class="input-icon">
                    <select name="year" class="form-select" id="yearSelect">
                        @for ($i = now()->year; $i >= now()->year - 5; $i--)
                            <option value="{{ $i }}" @selected(old('year',request('year')) == $i)>{{ \App\Http\Helpers\HelperApp::convert_numbers($i) }}</option>
                        @endfor

                    </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">{{ __("site.Home.Statistics_3") }}</h5>
            </div>
            <div class="main-form white">
                <div class="input-icon">
                    <select name="year_offer" class="form-select" id="yearOfferSelect">
                        @for ($i = now()->year; $i >= now()->year - 5; $i--)
                            <option value="{{ $i }}" @selected(old('year_offer',request('year_offer')) == $i)>{{ \App\Http\Helpers\HelperApp::convert_numbers($i) }}</option>
                        @endfor
                    </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: "RFQs",
                data: "{{ $charts['orders_chart'] }}".split(",")
            }, ],
            fill: {
                type: "gradient",
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0,
                    opacityTo: 0,
                    stops: [0, 90, 100]
                }
            },
            grid: {
                // borderColor: ,
                strokeDashArray: 8,
            },
            xaxis: {
                categories: "{{ $charts['filter_year'] ?: $charts['month_year'] }}".split(",")
            }
        };
        var options_offer = {
            chart: {
                height: 200,
                toolbar: {
                    show: false
                },
                type: "area"
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: 3,
                curve: 'smooth'
            },
            series: [{
                name: "Offers",
                data: "{{ $charts['offers_buyer_chart'] }}".split(",")
            }],
            fill: {
                type: "gradient",
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0,
                    opacityTo: 0,
                    stops: [0, 90, 100]
                }
            },
            grid: {
                // borderColor: ,
                strokeDashArray: 8,
            },
            xaxis: {
                categories: "{{ $charts['filter_year_offer'] ?: $charts['month_year'] }}".split(",")
            }
        };

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

        chart.render();
        chart2.render();
    </script>
    <script>
        $(document).ready(function() {
            $('#yearSelect').change(function() {
                var selectedYear = $(this).val();
                window.location.href = "?year=" + selectedYear;
            });

            $('#yearOfferSelect').change(function() {
                var selectedYear = $(this).val();
                window.location.href = "?year_offer=" + selectedYear;
            });
        });
    </script>
@endsection