@extends('users/layouts.template')

@section('content')
    <style>

    </style>
    <section class="wrapper bg-gradient-orange">
        <div class="container pt-6 pt-md-14 pb-14 pb-md-16 text-center">
            <div class="row gx-lg-8 gx-xl-12 gy-10 gy-xl-0 mb-14 align-items-center">
                <div class="col-lg-6 order-lg-2 pl-2">
                    <figure><img class="img-auto" style="width: 550px;" src="assets/dashboard/images/accident.png"
                            alt="" /></figure>
                </div>
                <!-- /column -->
                <div class="col-md-10 offset-md-1 offset-lg-0 col-lg-6 text-center text-lg-start">
                    <h1 class="display-1 fs-54 mb-5 mx-md-n5 mx-lg-0 mt-7 arial">
                        Keselamatan di Jalan Bukanlah Suatu Kebetulan!</h1>
                    <!-- <br> Mari berkendara dengan <br class="d-md-none"> -->
                    <h3 class="fs-50 mx-lg-0" style="margin-top: -20px;"><span class="rotator-fade text-warning"
                            style="text-align: justify;"> Berkendara dengan Baik, Tiba dengan Selamat</span></h3>
                    <p class="lead fs-lg mb-7" style="text-align: justify;">
                        <strong>
                            <span class="text-primary">SIKETAS</span>
                        </strong>
                        menyediakan informasi dan panduan tentang cara berkendara yang aman.
                        Di samping itu, website ini menyajikan informasi mengenai kecelakaan lalu lintas yang terjadi di
                        Kabupaten Lumajang.
                        Informasi ini disajikan secara visual melalui peta interaktif, sehingga pengguna dapat dengan mudah
                        memahami lokasi dan konteks kecelakaan yang terjadi di wilayah tersebut.
                    </p>
                    <span><a href="{{ '/pemetaan' }}" class="btn btn-lg btn-warning rounded-pill me-2">Cek
                            Pemetaan</a></span>
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
            <hr>
            <h1 class="text-center" style="margin-top: 30px;">Data Korban Kecelakaan Lalu Lintas Kabupaten Lumajang</h1><br>
            <h3 class="text-center" style="margin-top: -30px;">Berdasarkan Data Kecelakaan di Jalan Nasional Tahun 2018 dan
                2019</h3>
            <div class="row d-flex align-items-center justify-content-center pt-3">
                <div class="col-lg-8 mt-lg-2">
                    <div class="row align-items-center counter-wrapper gy-6 text-center">
                        <div class="col-md-4">
                            <div class="icon btn btn-circle btn-lg btn-soft-orange pe-none mb-4"> <i
                                    class="uil uil-user-check"></i> </div>
                            <h2 class="counter">{{ $md }}</h2>
                            <h3>Meninggal Dunia</h3>
                        </div>
                        <!--/column -->
                        <div class="col-md-4">
                            <div class="icon btn btn-circle btn-lg btn-soft-orange pe-none mb-4"> <i
                                    class="uil uil-user-check"></i> </div>
                            <h3 class="counter">{{ $lb }}</h3>
                            <h3>Luka Berat</h3>
                        </div>
                        <!--/column -->
                        <div class="col-md-4">
                            <div class="icon btn btn-circle btn-lg btn-soft-orange pe-none mb-4"> <i
                                    class="uil uil-user-check"></i> </div>
                            <h3 class="counter">{{ $lr }}</h3>
                            <h3>Luka Ringan</h3>
                        </div>
                        <!--/column -->
                    </div>
                    <!--/.row -->
                </div>
            </div>
        </div>
        <!-- /.container -->
        <!-- <div class="overflow-hidden">
                <div class="divider text-soft-orange mx-n2">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
                        <path fill="currentColor" d="M1260,1.65c-60-5.07-119.82,2.47-179.83,10.13s-120,11.48-180,9.57-120-7.66-180-6.42c-60,1.63-120,11.21-180,16a1129.52,1129.52,0,0,1-180,0c-60-4.78-120-14.36-180-19.14S60,7,30,7H0v93H1440V30.89C1380.07,23.2,1319.93,6.15,1260,1.65Z" />
                    </svg>
                </div>
            </div> -->
        <!-- /.overflow-hidden -->
    </section>
    <!-- /section -->

    <!-- /section -->
    <section class="wrapper bg-light">
        <div class="container pt-6 pb-14 pb-md-16">
            <hr>
            <div class="row text-center">
                <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                    <h1 class="text-center" style="margin-top: 30px;">Informasi Tambahan</h1><br>
                </div>
            </div>
            <div class="row gx-lg-8 gx-xl-12 gy-10">
                <div class="col-lg-6 mb-0" style="align-self:center;">
                    <div id="accordion-3" class="accordion-wrapper">
                        <div class="card accordion-item shadow-lg">
                            <div class="card-header" id="accordion-heading-3-1">
                                <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-3-1"
                                    aria-expanded="false" aria-controls="accordion-collapse-3-1">Apa itu
                                    <strong>
                                        <span class="text-primary">SIKETAS?</span>
                                    </strong>
                                </button>
                            </div>
                            <!-- /.card-header -->
                            <div id="accordion-collapse-3-1" class="collapse" aria-labelledby="accordion-heading-3-1"
                                data-bs-target="#accordion-3">
                                <div class="card-body">
                                    <p>
                                        SIKETAS merupakan sistem informasi berbasis website yang memberikan hasil pemetaan
                                        daerah rawan kecelakaan lalu lintas
                                        yang ada di Kabupaten Lumajang.
                                    </p>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <!-- /.collapse -->
                        </div>

                        <!-- /.card -->
                        <div class="card accordion-item shadow-lg">
                            <div class="card-header" id="accordion-heading-3-2">
                                <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-3-2"
                                    aria-expanded="false" aria-controls="accordion-collapse-3-4">Bagaimana cara menampilkan
                                    hasil
                                    pemetaan?</button>
                            </div>
                            <!-- /.card-header -->
                            <div id="accordion-collapse-3-2" class="collapse" aria-labelledby="accordion-heading-3-2"
                                data-bs-target="#accordion-3">
                                <div class="card-body">
                                    <p>Anda bisa klik pada menu "Pemetaan" yang terdapat pada bagian atas website ini
                                        atau dapat juga menggunakan Tombol ini <a href="" type="sumbit"
                                            style="color: orange;">Pemetaan</a> untuk menampilkan hasil pemetaan.
                                    </p>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <!-- /.collapse -->
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
                <!--/column -->
                <div class="col-lg-6">
                    <div id="accordion-3" class="accordion-wrapper">
                        <!-- /.card -->
                        <div class="card accordion-item shadow-lg">
                            <div class="card-header" id="accordion-heading-3-3">
                                <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-3-3"
                                    aria-expanded="false" aria-controls="accordion-collapse-3-3">Data apa yang digunakan
                                    pada penelitian
                                    ini?</button>
                            </div>
                            <!-- /.card-header -->
                            <div id="accordion-collapse-3-3" class="collapse" aria-labelledby="accordion-heading-3-3"
                                data-bs-target="#accordion-3">
                                <div class="card-body">
                                    <p>Data yang digunakan pada penelitian ini adalah data kecelakaan lalu lintas
                                        di Kabupaten Lumajang berdasarkan data Kecelakaan di jalan nasional tahun 2018 dan
                                        2019.
                                    </p>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <!-- /.collapse -->
                        </div>
                        <!-- /.card -->
                        <div class="card accordion-item shadow-lg">
                            <div class="card-header" id="accordion-heading-3-4">
                                <button class="collapsed" data-bs-toggle="collapse"
                                    data-bs-target="#accordion-collapse-3-4" aria-expanded="false"
                                    aria-controls="accordion-collapse-3-4">Dari mana sumber data yang digunakan dalam
                                    penelitian ini?</button>
                            </div>
                            <!-- /.card-header -->
                            <div id="accordion-collapse-3-4" class="collapse" aria-labelledby="accordion-heading-3-4"
                                data-bs-target="#accordion-3">
                                <div class="card-body">
                                    <p>Data yang di gunakan pada penelitian ini bersumber dari Sat Lantas Polres Lumajang.
                                    </p>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <!-- /.collapse -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.accordion-wrapper -->
                </div>
                <!--/column -->
            </div>
            <!--/.row -->
        </div>
        <!-- /.container -->
        <!-- <div class="overflow-hidden">
                    <div class="divider text-navy mx-n2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
                            <path fill="currentColor" d="M1260,1.65c-60-5.07-119.82,2.47-179.83,10.13s-120,11.48-180,9.57-120-7.66-180-6.42c-60,1.63-120,11.21-180,16a1129.52,1129.52,0,0,1-180,0c-60-4.78-120-14.36-180-19.14S60,7,30,7H0v93H1440V30.89C1380.07,23.2,1319.93,6.15,1260,1.65Z" />
                        </svg>
                    </div>
                </div> -->
        <!-- /.overflow-hidden -->
        <div style="margin-top: 20px;">
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d252785.83089567986!2d112.97433907358432!3d-8.124009298915823!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd64289c77255ab%3A0x3027a76e352bda0!2sKabupaten%20Lumajang%2C%20Jawa%20Timur!5e0!3m2!1sid!2sid!4v1714893869516!5m2!1sid!2sid"
                width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
    </section>
    </div>
    <!-- /section -->
@endsection