@extends('vendor.dashboards.layouts.master')

@push('css')
    <style>
        #map {
            width: 100%;
            height: 500px;
            margin: 0 auto;
        }
    </style>
@endpush

@section('content')
    <div class="row card mb-5 p-3">
        <!-- Search Filters-->
        <div class="col-md-12">
            <div class="container row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="riskType">{{ __('general.city') }}</label>
                        <select id="riskType" class="form-control">
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="startDate">{{ __('general.from_date') }}</label>
                        <input id="startDate" class="form-control" type="date" />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="endDate">{{ __('general.date_to') }}</label>
                        <input id="endDate" class="form-control" type="date" />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group" style="margin-top: 34px">
                        <button class="btn bg-panel">{{ __('general.filter') }}</button>
                        <button class="btn bg-gradient-dark">{{ __('general.clear_filter') }}</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
        </div>
        <!-- End Search Filters-->
    </div>
    <div class="row">
        <div class="col-lg-6 col-sm-6 mb-lg-0 mb-4">
            <div class="card">
                <div class="card-header p-3 pt-2">
                    <div class="icon icon-lg icon-shape bg-panel shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                        <i class="material-icons opacity-10">shopping_bag</i>
                    </div>
                    <div class="{{ Auth::user()->locale == 'ar' ? 'text-start':'text-end' }} pt-1">
                        <p class="text-sm mb-0 text-capitalize">{{ __('general.dashboard_tabs.packages') }}</p>
                        <h4 class="mb-0">{{ $packages_count }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-6 mb-lg-0 mb-4">
            <div class="card">
                <div class="card-header p-3 pt-2">
                    <div class="icon icon-lg icon-shape bg-panel shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                        <i class="material-icons opacity-10">calendar_month</i>
                    </div>
                    <div class="{{ Auth::user()->locale == 'ar' ? 'text-start':'text-end' }} pt-1">
                        <p class="text-sm mb-0 text-capitalize">{{ __('general.dashboard_tabs.bookings') }}</p>
                        <h4 class="mb-0">{{ $bookings_count }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{--<div class="row mt-4">
        <div class="col-lg-12 col-md-6 mt-4 mb-4">
            <div class="card z-index-2 ">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
                    <div class="bg-panel shadow-dark border-radius-lg py-3 pe-1">
                        <div class="chart">
                            <canvas id="chart-bars" class="chart-canvas" height="170"></canvas>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <h6 class="mb-0 ">عدد المخاطر المسجلة يومياً</h6>
                    <p class="text-sm ">هذه المخاطر تشمل المخاطر التي تم تكرار وجودها من مستخدمين مختلفين.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-6 mt-4 mb-4">
            <div class="card z-index-2  ">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
                    <iframe width="100%" height="450" style="border:0" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/view?zoom=10&center=26.3592%2C43.9818&key=AIzaSyDvC0Las3Lz4Viu8kfSbNATuwSWfBMPTdM"></iframe>
                </div>
                <div class="card-body">
                    <h6 class="mb-0 "> أماكن المخاطر على الخريطة </h6>
                    <p class="text-sm "> هذه البيانات بناء على آخر بث وصل لنا من كل الأجهزة الموجودة. </p>
                    <hr class="dark horizontal">
                    <div class="d-flex ">
                        <i class="material-icons text-sm my-auto ms-1">schedule</i>
                        <p class="mb-0 text-sm"> آخر تحديث من أي جهاز: 2024-03-21 الساعة 11:00 </p>
                    </div>
                </div>
            </div>
        </div>
    </div>--}}
@endsection

@push('js')
    <script src="{{ asset('assets/panel/') }}/assets/js/plugins/chartjs.min.js"></script>
    <script>
        var ctx = document.getElementById("chart-bars").getContext("2d");

        new Chart(ctx, {
            type: "bar",
            data: {
                labels: ["M", "T", "W", "T", "F", "S", "S"],
                datasets: [{
                    label: "Sales",
                    tension: 0.4,
                    borderWidth: 0,
                    borderRadius: 4,
                    borderSkipped: false,
                    backgroundColor: "rgba(255, 255, 255, .8)",
                    data: [50, 20, 10, 22, 50, 10, 40],
                    maxBarThickness: 6
                }, ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5],
                            color: 'rgba(255, 255, 255, .2)'
                        },
                        ticks: {
                            suggestedMin: 0,
                            suggestedMax: 500,
                            beginAtZero: true,
                            padding: 10,
                            font: {
                                size: 14,
                                weight: 300,
                                family: "Roboto",
                                style: 'normal',
                                lineHeight: 2
                            },
                            color: "#fff"
                        },
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5],
                            color: 'rgba(255, 255, 255, .2)'
                        },
                        ticks: {
                            display: true,
                            color: '#f8f9fa',
                            padding: 10,
                            font: {
                                size: 14,
                                weight: 300,
                                family: "Roboto",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });


    </script>
@endpush