<!doctype html>
<html lang="en" data-layout="vertical" data-layout-style="detached" data-sidebar="light" data-topbar="dark"
    data-sidebar-size="lg">

<head>

    <meta charset="utf-8" />
    <title>SPK-TANI | Result</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="Themesbrand" name="author" />
    <!-- App favicon -->
    <link rel="shortcut icon" href="{{ asset('assets/images/favicon.ico') }}">

    <!--Swiper slider css-->
    <link href="{{ asset('assets/libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet" type="text/css" />

    <!-- leaflet Css -->
    <link href="{{ asset('assets/libs/leaflet/leaflet.css') }}" rel="stylesheet" type="text/css" />
    <!-- gridjs css -->
    <link rel="stylesheet" href="{{ asset('assets/libs/gridjs/theme/mermaid.min.css') }}">


    <!-- Layout config Js -->
    <script src="{{ asset('assets/js/layout.js') }}"></script>
    <!-- Bootstrap Css -->
    <link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Icons Css -->
    <link href="{{ asset('assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link href="{{ asset('assets/css/app.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- custom Css-->
    <link href="{{ asset('assets/css/custom.min.css') }}" rel="stylesheet" type="text/css" />

    <style>
        .bg-overlay-pattern {
            background-image: url({{ asset('assets/images/landingpage/hero-home.png') }});
            background-position: bottom;
        }

        .bg-overlay {
            opacity: 0.2;
        }
    </style>

</head>

<body data-bs-spy="scroll" data-bs-target="#navbar-example">

    <div class="layout-wrapper landing">
        <nav class="navbar navbar-expand-lg navbar-landing fixed-top" id="navbar">
            <div class="container">
                <a class="navbar-brand" href="{{ route('home.index') }}">
                    <img src="{{ asset('assets/images/landingpage/logo-spk-tani.png') }}"
                        class="card-logo card-logo-dark" alt="logo dark" height="60">
                    <img src="{{ asset('assets/images/landingpage/logo-spk-tani.png') }}"
                        class="card-logo card-logo-light" alt="logo light" height="60">
                </a>
                <button class="navbar-toggler py-0 fs-20 text-body" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <i class="mdi mdi-menu"></i>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mx-auto mt-2 mt-lg-0" id="navbar-example">
                        <li class="nav-item">
                            <a class="nav-link fs-15" href="{{ route('home.index') }}">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fs-15" href="{{ route('home.index') }}#features">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fs-15" href="{{ route('home.index') }}#services">Steps</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fs-15  {{ Request::routeIs('user-result-preferensi.index') ? 'text-success' : '' }}"
                                href="{{ route('user-result-preferensi.index') }}">Result</a>
                        </li>
                        {{-- <li class="nav-item">
                            <a class="nav-link fs-15" href="#team">Team</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fs-15" href="#contact">Contact</a>
                        </li> --}}
                    </ul>

                    {{-- <div class="">
                        @if (Auth::user() == null)
                            <a href="{{ route('login.index') }}"
                                class="btn btn-link fw-medium text-decoration-none text-dark">
                                Login
                            </a>
                            <a href="{{ route('registrasi.index') }}" class="btn btn-primary">
                                Registrasi
                            </a>
                        @else
                            <form id="logout-form" action="{{ route('logout') }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-primary">
                                    Logout
                                </button>
                            </form>
                        @endif
                    </div> --}}
                </div>

            </div>
        </nav>
        <!-- end navbar -->

        <!-- start hero section -->
        <section class="section pb-0 hero-section">
            <div class="bg-overlay bg-overlay-pattern"></div>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8 col-sm-10">
                        <div class="text-center mt-lg-1 pt-5 mb-5">
                            <h1 class="display-6 fw-semibold mb-3 lh-base">Rekomendasi tanaman pangan
                                <span class="text-success">Tahunan</span>
                            </h1>
                            <p class="lead text-muted lh-base px-2">
                                Berikut adalah hasil perhitungan topsis berupa rekomendasi tanaman pangan (tahunan) pada
                                setiap kecamatan di Kabupaten Bondowoso.
                            </p>

                            <div class="d-flex gap-2 justify-content-center mt-4">
                                <a href="{{ route('home.index') }}" class="btn btn-primary">
                                    <i class="ri-arrow-left-line align-middle ms-1"></i>
                                    Home
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </section>
        <!-- end hero section -->

        <!-- start features -->
        <section class="section py-5">
            <div class="container">
                <div class="row align-items-center gy-4">
                    <div class="col-lg-6 col-sm-7 mx-auto">
                        <div>
                            <img src="{{ asset('assets/images/landingpage/hero-2.png') }}" alt=""
                                class="img-fluid mx-auto">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="text-muted">
                            <div class="avatar-sm icon-effect mb-4">
                                <div class="avatar-title bg-transparent rounded-circle text-success h1">
                                    <i class="ri-collage-line fs-36"></i>
                                </div>
                            </div>
                            <h3 class="mb-3 fs-20">Sistem pendukung keputusan</h3>
                            <p class="mb-4 ff-secondary fs-16">
                                Sistem Pendukung Keputusan adalah sistem yang memberikan sebuah rekomendasi khususnya
                                tanaman pangan dengan sebuah perhitungan salah satunya menggunakan metode topsis.
                            </p>

                            <h3 class="mb-3 fs-20">Metode TOPSIS</h3>
                            <p class="mb-4 ff-secondary fs-16">
                                TOPSIS (Technique for Order of Preference by Similarity to Ideal Solution) adalah salah
                                satu metode yang digunakan untuk pengambilan keputusan dalam memilih alternatif terbaik
                                berdasarkan kriteria.
                            </p>
                        </div>
                    </div>
                    <!-- end col -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </section>
        <!-- end features -->

        <section class="section bg-light py-5">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="text-center mb-5">
                            <h1 class="mb-3 ff-secondary fw-semibold lh-base">
                                Hasil rekomendasi tanaman pangan (Tahunan)
                            </h1>
                        </div>
                    </div>
                    <!-- end col -->
                </div>
                <!-- end row -->

                {{-- maps --}}
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <h4 class="card-title mb-0 flex-grow-1">
                                    Maps
                                </h4>

                                <div class="d-flex align-items-center">
                                    <div class="d-flex gap-1">
                                        <select class="form-select" id="choiceYear" aria-label="pilih-tahun">
                                            @foreach ($years as $year)
                                                <option value="{{ $year }}"> {{ $year }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div><!-- end card header -->

                            <div class="card-body">
                                <div id="map" class="map" style="height: 500px;"></div>
                            </div>

                        </div><!-- end card -->
                    </div>
                </div>

                {{-- table --}}
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <h4 class="card-title mb-0 flex-grow-1">
                                    Hasil Tahun <span id="spanYear"></span>, <span id="spanSubDistrict"></span>
                                </h4>

                                <div class="d-flex align-items-center">
                                    <div class="d-flex gap-1">
                                        <select class="form-select" id="choiceSubDistrict"
                                            aria-label="choice-sub-disrict">
                                            @foreach ($listSubDistrict as $subDistrict)
                                                <option value="{{ $subDistrict['sub_district'] }}">
                                                    {{ $subDistrict['sub_district'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div><!-- end card header -->

                            <div class="card-body">
                                <div id="table-result-sub-district-by-year" class="table-responsive">
                                </div>
                            </div><!-- end card-body -->
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start footer -->
        <footer class="custom-footer bg-dark py-5 position-relative">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 mt-4">
                        <div>
                            <div>
                                <img src="{{ asset('assets/images/landingpage/logo-spk-tani.png') }}"
                                    alt="logo light" height="60">
                            </div>
                            <div class="mt-4 text-justify">
                                <p>Sistem Pendukung Keputusan Kesesuaian Lahan Terhadap Jenis Tanaman Pangan</p>
                                <p class="ff-secondary">Sistem Pendukung Keputusan yang memberikan sebuah
                                    rekomendasi khususnya tanaman pangan dengan sebuah perhitungan salah satunya
                                    menggunakan metode topsis. TOPSIS (Technique for Order of Preference by Similarity
                                    to Ideal Solution) adalah salah satu metode yang digunakan untuk pengambilan
                                    keputusan dalam memilih alternatif terbaik berdasarkan kriteria.</p>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="row text-center text-sm-start align-items-center mt-5">
                    <div class="col-sm-6">

                        <div>
                            <p class="copy-rights mb-0">
                                <script>
                                    document.write(new Date().getFullYear())
                                </script> © Velzon - Themesbrand
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end footer -->
    </div>



    <!-- JAVASCRIPT -->
    <script src="{{ asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/libs/simplebar/simplebar.min.js') }}"></script>
    <script src="{{ asset('assets/libs/node-waves/waves.min.js') }}"></script>
    <script src="{{ asset('assets/libs/feather-icons/feather.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/plugins/lord-icon-2.1.0.js') }}"></script>
    <script src="{{ asset('assets/js/plugins.js') }}"></script>

    <!--Swiper slider js-->
    <script src="{{ asset('assets/libs/swiper/swiper-bundle.min.js') }}"></script>

    <!-- leaflet plugin -->
    <script src="{{ asset('assets/libs/leaflet/leaflet.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    {{-- grid js --}}
    <script src="{{ asset('assets/libs/prismjs/prism.js') }}"></script>
    <script src="{{ asset('assets/libs/gridjs/gridjs.umd.js') }}"></script>

    <!-- landing init -->
    <script src="{{ asset('assets/js/pages/landing.init.js') }}"></script>

    <script src="{{ asset('assets/js/custom/landingpage/result-preference.js') }}"></script>
</body>

</html>
