@php
    $selisih = $periode->tahun_akhir - $periode->tahun_awal + 1;
@endphp
<div class="row" id="content">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header text-uppercase">Rencana Strategis {!! $user->organisasi->nama !!}</div>
            <div class="card-body">

                <div id="accordion" class="accordion" role="tablist">
                    {{-- Tujuan --}}
                    <div class="card" style="border-radius:8px !important;">
                        <div class="card-header bg-info" role="tab" id="headingThree">
                            <h6 class="mb-0">
                                <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false"
                                   aria-controls="collapseThree" style="color:#fff !important;">
                                    TUJUAN
                                </a>
                            </h6>

                        </div>

                        <div id="collapseThree" class="collapse show" role="tabpanel" aria-labelledby="headingThree"
                             data-parent="#accordion">
                            <button id="renstraAddTujuan" type="button"
                                    class="btn btn-inverse-info btn-icon-tex mt-2 pr-2"
                                    style="border-bottom-left-radius: 0px;border-top-left-radius:0px; border-bottom-right-radius: 20px;border-top-right-radius: 20px">
                                TAMBAH
                                <i data-feather="plus-circle"></i>
                            </button>
                            <div class="card-body pt-2">
                                @include('pagesV2.adminSkpd.renstra.tujuan._table')
                            </div>
                        </div>
                    </div>

                    {{-- Sasaran --}}
                    <div class="card" style="border-radius:8px !important;">
                        <div class="card-header bg-danger" role="tab" id="headingFour">
                            <h6 class="mb-0">
                                <a class="collapsed" data-toggle="collapse" href="#collapseFour" aria-expanded="false"
                                   aria-controls="collapseFour" style="color:#fff !important;">
                                    SASARAN STRATEGIS
                                </a>
                            </h6>
                        </div>
                        <div id="collapseFour" class="collapse show" role="tabpanel" aria-labelledby="headingFour"
                             data-parent="#accordion">
                            <button type="button" class="btn btn-inverse-danger btn-icon-tex mt-2 pr-2"
                                    style="border-bottom-left-radius: 0px;border-top-left-radius:0px; border-bottom-right-radius: 20px;border-top-right-radius: 20px"
                                    id="renstraAddSasaran">
                                TAMBAH
                                <i data-feather="plus-circle"></i>
                            </button>
                            <div class="card-body pt-2">
                                @include('pagesV2.adminSkpd.renstra.sasaran._table', [
                                            'tahun_awal' => $periode->tahun_awal,
                                            'tahun_akhir'=>$periode->tahun_akhir,
                                            'sasarans' => $renstraSasaran])
                            </div>
                        </div>
                    </div>

                    {{-- Program --}}
                    <div class="card" style="border-radius:8px !important;">
                        <div class="card-header bg-primary" role="tab" id="headingFive">
                            <h6 class="mb-0">
                                <a class="collapsed" data-toggle="collapse" href="#collapseFive"
                                   aria-expanded="false"
                                   aria-controls="collapseFour" style="color:#fff !important;">
                                    PROGRAM
                                </a>
                            </h6>
                        </div>
                        <div id="collapseFive" class="collapse show" role="tabpanel" aria-labelledby="headingFive"
                             data-parent="#accordion">
                            <button type="button" class="btn btn-inverse-primary btn-icon-tex mt-2 pr-2"
                                    style="border-bottom-left-radius: 0px;border-top-left-radius:0px; border-bottom-right-radius: 20px;border-top-right-radius: 20px"
                                    id="renstraAddProgram">
                                TAMBAH
                                <i data-feather="plus-circle"></i>
                            </button>
                            <div class="card-body pt-2">
                                @include('pagesV2.adminSkpd.renstra.program._table', [
                                        'tahun_awal' => $periode->tahun_awal,
                                        'tahun_akhir'=>$periode->tahun_akhir,
                                        'programs' => $renstraProgram])
                            </div>
                        </div>
                    </div>

                    {{-- Kegiatan --}}
                    <div class="card" style="border-radius:8px !important;">
                        <div class="card-header bg-success" role="tab" id="headingSix">
                            <h6 class="mb-0">
                                <a class="collapsed" data-toggle="collapse" href="#collapseSix"
                                   aria-expanded="false"
                                   aria-controls="collapseFour" style="color:#fff !important;">
                                    KEGIATAN
                                </a>
                            </h6>
                        </div>
                        <div id="collapseSix" class="collapse show" role="tabpanel" aria-labelledby="headingSix"
                             data-parent="#accordion">
                            <button type="button" class="btn btn-inverse-success btn-icon-tex mt-2 pr-2"
                                    style="border-bottom-left-radius: 0px;border-top-left-radius:0px; border-bottom-right-radius: 20px;border-top-right-radius: 20px"
                                    id="renstraAddKegiatan">
                                TAMBAH
                                <i data-feather="plus-circle"></i>
                            </button>
                            <div class="card-body pt-2">
                                @include('pagesV2.adminSkpd.renstra.kegiatan._table', [
                                        'tahun_awal' => $periode->tahun_awal,
                                        'tahun_akhir'=>$periode->tahun_akhir,
                                        'kegiatans' => $renstraKegiatan])
                            </div>
                        </div>
                    </div>

                    {{-- Sub Kegiatan --}}
                    <div class="card" style="border-radius:8px !important;">
                        <div class="card-header bg-secondary" role="tab" id="headingSeven">
                            <h6 class="mb-0">
                                <a class="collapsed" data-toggle="collapse" href="#collapseSeven"
                                   aria-expanded="false"
                                   aria-controls="collapseFour" style="color:#fff !important;">
                                    SUB KEGIATAN
                                </a>
                            </h6>
                        </div>
                        <div id="collapseSeven" class="collapse show" role="tabpanel" aria-labelledby="headingSeven"
                             data-parent="#accordion">
                            <button type="button" class="btn btn-inverse-secondary btn-icon-tex mt-2 pr-2"
                                    style="border-bottom-left-radius: 0px;border-top-left-radius:0px; border-bottom-right-radius: 20px;border-top-right-radius: 20px"
                                    id="renstraAddSubKegiatan">
                                TAMBAH
                                <i data-feather="plus-circle"></i>
                            </button>
                            <div class="card-body pt-2">
                                @include('pagesV2.adminSkpd.renstra.subKegiatan._table', [
                                       'tahun_awal' => $periode->tahun_awal,
                                       'tahun_akhir'=>$periode->tahun_akhir,
                                       'subKegiatans' => $renstraSubKegiatan])
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>