@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">المدينة</label>
                        <select id="riskType" class="form-control">
                            <option value="1">الرياض</option>
                            <option value="2">بريدة</option>
                            <option value="3">الدمام</option>
                            <option value="4">المدينة</option>
                            <option value="5">مكة</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="startDate">تاريخ البداية</label>
                        <input id="startDate" class="form-control" type="date" />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="endDate">تاريخ النهاية</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-salek">تطبيق الفلتر</button>
                        <button class="btn bg-gradient-dark">مسح الفلتر</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <!-- <span class="text-sm">للاطلاع على مدن أخرى، نرجو الذهاب إلى صفحة الاشتراكات واختيار المدينة التي تود الاشتراك بها.</span> -->
        </div>
        <!-- End Search Filters-->
    </div>
    <div class="row">
        <div class="col-lg-3 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-salek shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                        <i class="material-icons opacity-10">track_changes</i>
                    </div>
                    <div class="text-start pt-1">
                        <p class="text-sm mb-0 text-capitalize">مجموع المخاطر</p>
                        <h4 class="mb-0">1,240</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 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-salek shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                        <i class="material-icons opacity-10">remove_road</i>
                    </div>
                    <div class="text-start pt-1">
                        <p class="text-sm mb-0 text-capitalize">عدد الحفر</p>
                        <h4 class="mb-0">128</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 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-salek shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                        <i class="material-icons opacity-10">looks</i>
                    </div>
                    <div class="text-start pt-1">
                        <p class="text-sm mb-0 text-capitalize">عدد المطبات</p>
                        <h4 class="mb-0">
                            253
                        </h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div class="card">
                <div class="card-header p-3 pt-2">
                    <div class="icon icon-lg icon-shape bg-salek shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                        <i class="material-icons opacity-10">water</i>
                    </div>
                    <div class="text-start pt-1">
                        <p class="text-sm mb-0 text-capitalize">عدد البلاعات</p>
                        <h4 class="mb-0">859</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-salek 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')

@endpush