@extends('layoutsV2.public')
<style>
    .chartdiv {
        width: 100%;
        height: 350px;
    }
</style>
@section('_content')
    <section id="hero" style="padding: 3px 0 0 0 !important;">
        <svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
             viewBox="0 10 150 28 " preserveAspectRatio="none">
            <defs>
                <path id="wave-path"
                      d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
            </defs>
            <g class="wave1">
                <use xlink:href="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)"></use>
            </g>
            <g class="wave2">
                <use xlink:href="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)"></use>
            </g>
            <g class="wave3">
                <use xlink:href="#wave-path" x="50" y="9" fill="#fff"></use>
            </g>
        </svg>

    </section>

    <section id="faq" class="faq section-bg">
        <div class="container-fluid">

            <div class="section-title" data-aos="fade-up">
                <h2>INFORMASI</h2>
                <p>GRAFIK MONEV KABUPATEN (v2)</p>
            </div>
            <nav data-aos="fade-up">
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-rpjmd-tujuan-tab" data-toggle="tab"
                            data-target="#nav-rpjmd-tujuan" type="button" role="tab" aria-controls="nav-rpjmd-tujuan"
                            aria-selected="true">
                        RPJMD Tujuan
                    </button>
                    <button class="nav-link" id="nav-rpjmd-sasaran-tab" data-toggle="tab"
                            data-target="#nav-rpjmd-sasaran" type="button" role="tab" aria-controls="nav-rpjmd-sasaran"
                            aria-selected="false">
                        RPJMD Sasaran
                    </button>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent" data-aos="fade-up">
                {{-- RPJMD Tujuan --}}
                <div class="tab-pane fade show active" id="nav-rpjmd-tujuan" role="tabpanel"
                     aria-labelledby="nav-rpjmd-tujuan-tab">
                    <div id="accordionTujuan" class="accordion" role="tablist">
                        {{-- Misi --}}
                        @foreach($rpjmd->rpjmdMisi as $idxMisi => $misi)
                            <div class="card @if (!$loop->last) mb-3 @endif" style="border-radius:8px !important;">
                                <div class="card-header p-3" role="tab" id="headingMisi{{$idxMisi}}">
                                    <h6 class="mb-0">
                                        <a data-toggle="collapse" href="#collapseMisi{{$idxMisi}}" aria-expanded="false"
                                           aria-controls="collapse{{$idxMisi}}">
                                            Misi {{ $idxMisi + 1 .'. '. $misi->misi }}
                                        </a>
                                    </h6>
                                </div>
                                <div id="collapseMisi{{$idxMisi}}" class="collapse show" role="tabpanel"
                                     aria-labelledby="headingMisi{{$idxMisi}}"
                                     data-parent="#accordionTujuan">
                                    <div class="card-body">
                                        <div class="faq-list">
                                            <ul class="mb-0">
                                                {{-- Tujuan --}}
                                                @foreach($misi->rpjmdTujuan as $idxTujuan => $tujuan)
                                                    <li class="p-0">
                                                        <a data-toggle="collapse" class="collapse p-0"
                                                           href="#faq-list-tujuan{{$idxMisi.$idxTujuan}}">
                                                            Tujuan {{ $idxTujuan + 1 }} : {{ $tujuan->tujuan }}
                                                            <i class="bx bx-chevron-down icon-show"></i>
                                                            <i class="bx bx-chevron-up icon-close"></i>
                                                        </a>
                                                        <div id="faq-list-tujuan{{$idxMisi.$idxTujuan}}"
                                                             class="collapse show"
                                                             data-parent=".faq-list">
                                                            {{-- Tujuan Indikator --}}
                                                            @foreach($tujuan->rpjmdTujuanIndikator as $idxTujuanIndikator => $tujuanIndikator)
                                                                <p>
                                                                    {{ $idxTujuan + 1 .'.'. $idxTujuanIndikator + 1 .'. ' . $tujuanIndikator->indikator }}
                                                                </p>
                                                                <div class="chartdiv pt-4"
                                                                     id="charttujuandiv{{$tujuanIndikator->id}}"></div>
                                                            @endforeach
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                {{-- RPJMD Sasaran --}}
                <div class="tab-pane fade" id="nav-rpjmd-sasaran" role="tabpanel"
                     aria-labelledby="nav-rpjmd-sasaran-tab">
                    <div id="accordionSasaran" class="accordion" role="tablist">
                        {{-- Tujuan --}}
                        @foreach($rpjmd->rpjmdMisi->pluck('rpjmdTujuan')->collapse() as $idxTujuan => $tujuan)
                            <div class="card @if (!$loop->last) mb-3 @endif" style="border-radius:8px !important;">
                                <div class="card-header p-3" role="tab" id="headingTujuan{{$idxTujuan}}">
                                    <h6 class="mb-0">
                                        <a data-toggle="collapse" href="#collapseTujuan{{$idxTujuan}}"
                                           aria-expanded="false"
                                           aria-controls="collapse{{$idxTujuan}}">
                                            Tujuan {{ $idxTujuan + 1 .'. '. $tujuan->tujuan }}
                                        </a>
                                    </h6>
                                </div>
                                <div id="collapseTujuan{{$idxTujuan}}" class="collapse show" role="tabpanel"
                                     aria-labelledby="headingTujuan{{$idxTujuan}}"
                                     data-parent="#accordionSasaran">
                                    <div class="card-body">
                                        <div class="faq-list">
                                            <ul class="mb-0">
                                                {{-- Sasaran --}}
                                                @foreach($tujuan->rpjmdSasaran as $idxSasaran => $sasaran)
                                                    <li class="p-0">
                                                        <a data-toggle="collapse" class="collapse p-0"
                                                           href="#faq-list-sasaran{{$idxTujuan.$idxSasaran}}">
                                                            Sasaran {{ $idxSasaran + 1 }} : {{ $sasaran->sasaran }}
                                                            <i class="bx bx-chevron-down icon-show"></i>
                                                            <i class="bx bx-chevron-up icon-close"></i>
                                                        </a>
                                                        <div id="faq-list-sasaran{{$idxTujuan.$idxSasaran}}"
                                                             class="collapse show"
                                                             data-parent=".faq-list">
                                                            {{-- Sasaran Indikator --}}
                                                            @foreach($sasaran->rpjmdSasaranIndikator as $idxSasaranIndikator => $sasaranIndikator)
                                                                <p>
                                                                    {{ $idxSasaran + 1 .'.'. $idxSasaranIndikator + 1 .'. ' . $sasaranIndikator->indikator }}
                                                                </p>
                                                                <div class="chartdiv pt-4"
                                                                     id="chartsasarandiv{{$sasaranIndikator->id}}"></div>
                                                            @endforeach
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>
    </section>

@endsection

@push('plugin-scripts')

    <script src="{{asset('js/grafik/core.js')}}"></script>
    <script src="{{asset('js/grafik/charts.js')}}"></script>
    <script src="{{asset('js/grafik/animated.js')}}"></script>
    <script src="{{asset('js/axios.min.js')}}"></script>
    <script src="{{url('https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js')}}"></script>
    <script src="{{asset('js/V2/public/grafik/kabupaten/monev_grafik.js')}}"></script>
@endpush