@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">{{ __('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['offers_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-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">{{ __('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['offers_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-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">{{ __('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_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-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">{{ __('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_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-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">{{ __('site.Home.Statistics_9') }}</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['offers_total']) }} $</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"> {{ __('site.Home.Statistics_10') }}</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['offers_total_month']) }} $</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">{{ __('site.Home.Statistics_11') }}</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['products_count']) }}</p>
                        <span class="med-text opacity-50">{{ __('messages.Product') }}</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">{{ __('site.Home.Statistics_12') }}</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['products_month']) }}</p>
                        <span class="med-text opacity-50">{{ __('messages.Product') }}</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">{{ __('site.Home.Statistics_1') }} ({{ \App\Http\Helpers\HelperApp::convert_numbers($counts['rfq_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
                        {{-- <option value="">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">{{ __('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_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