@extends('website.layouts.app')

@section('title')
    Halaman Dashboard | admin
@endsection

@section('content')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Dashboard</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Dahsboard</a></li>
                        <li class="breadcrumb-item active">Admin</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        {{-- jumlah kecamatan --}}
        <div class="col-md-6">
            <div class="card card-animate">
                <a href="{{ route('list-sub-district.index') }}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="fw-medium text-muted mb-0">Kecamatan</p>
                                <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value"
                                        data-target="{{ $countSubDistrict }}">0</span> kecamatan</h2>
                            </div>
                            <div>
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                        <i class="text-info ri-pin-distance-line"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div><!-- end card body -->
                </a>
            </div> <!-- end card-->
        </div>

        {{-- jumlah desa --}}
        <div class="col-md-6">
            <div class="card card-animate">
                <a href="{{ route('list-village.index') }}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="fw-medium text-muted mb-0">Desa</p>
                                <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value"
                                        data-target="{{ $countVillage }}">0</span> Desa </h2>
                            </div>
                            <div>
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                        <i class="text-info ri-pin-distance-line"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div><!-- end card body -->
                </a>
            </div> <!-- end card-->
        </div>

        {{-- jumlah tanaman --}}
        <div class="col-md-6">
            <div class="card card-animate">
                <a href="{{ route('list-plant.index') }}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="fw-medium text-muted mb-0">Tanaman</p>
                                <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value"
                                        data-target="{{ $countPlant }}">0</span> tanaman</h2>
                            </div>
                            <div>
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                        <i class="text-info ri-plant-line"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div><!-- end card body -->
                </a>
            </div> <!-- end card-->
        </div>

        {{-- jumlah kriteria --}}
        <div class="col-md-6">
            <div class="card card-animate">
                <a href="{{ route('list-data-kriteria.index') }}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="fw-medium text-muted mb-0">Kriteria</p>
                                <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value"
                                        data-target="{{ $countCriteria }}">0</span> kriteria</h2>
                            </div>
                            <div>
                                <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-soft-info rounded-circle fs-2">
                                        <i class="text-info ri-file-list-3-line"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div><!-- end card body -->
                </a>
            </div> <!-- end card-->
        </div>
    </div> <!-- end row-->

    {{-- maps --}}
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-2">
                    <h4 class="card-title mb-0 flex-grow-1">
                        Hasil preferensi kecamatan (tahunan)
                    </h4>

                    <div class="d-flex">
                        <select class="form-select w-100 w-sm-auto" id="choiceYear" aria-label="pilih-tahun">
                            @foreach ($years as $year)
                                <option value="{{ $year }}"> {{ $year }}</option>
                            @endforeach
                        </select>
                    </div>
                </div><!-- end card header -->

                <div class="card-body">
                    <div id="map" class="map" style="height: 500px; width: 100%;"></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 flex-column flex-sm-row align-items-sm-center justify-content-between gap-2">
                    <h4 class="card-title mb-0 flex-grow-1">
                        Hasil Tahun <span id="spanYear"></span>, <span id="spanSubDistrict"></span>
                    </h4>

                    <div class="d-flex">
                        <select class="form-select w-100 w-sm-auto" id="choiceSubDistrict" aria-label="choice-sub-disrict">
                            @foreach ($listSubDistrict as $subDistrict)
                                <option value="{{ $subDistrict['sub_district'] }}">
                                    {{ $subDistrict['sub_district'] }}
                                </option>
                            @endforeach
                        </select>
                    </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>

    <script src="{{ asset('assets/libs/prismjs/prism.js') }}"></script>
    <script src="{{ asset('assets/libs/gridjs/gridjs.umd.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <!-- leaflet plugin -->
    <script src="{{ asset('assets/libs/leaflet/leaflet.js') }}"></script>

    {{-- custom js --}}
    <script src="{{ asset('assets/js/custom/dashboard.js') }}"></script>
@endsection