@extends('layoutsV2.public')
@push('style')
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <link href="{{ asset('vendor/jhtree/CSS/jquery-ui-1.10.4.custom.css') }}" rel="stylesheet">
    <link href="{{ asset('vendor/jhtree/CSS/jHTree.css') }}" rel="stylesheet">
    <link href="{{ asset('vendor/jhtree/CSS/style.css') }}" rel="stylesheet">
    <style>
        .btn-link {
            color: #ffffff !important;
        }

        .btn-link:hover {
            text-decoration: none !important;
        }

        .btn-link:focus, .btn-link.focus {
            text-decoration: none !important;
        }
    </style>
@endpush
@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 24 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="cascading-tree" class="pricing">
        <div class="container">
            <div class="section-title" data-aos="fade-up">
                <h2>Informasi</h2>
                <p>Tematik (v2)</p>
            </div>
        </div>

        <div class="container{{ isset($data) && $data->isNotEmpty() ? '-fluid' : '' }}">
            <div class="row">
                <div class="col-md-12">
                    @if(isset($data) && $data->isNotEmpty())
                        <div id="accordion">
                            <div class="card" style="border-radius:8px !important; margin-bottom: .75rem;">
                                <div class="card-header p-2 bg-oliver-green" id="headingOne">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link p-1" data-toggle="collapse"
                                                data-target="#collapseOne"
                                                aria-expanded="true" aria-controls="collapseOne">
                                            1. {{ $data['tematik'] }}
                                        </button>
                                        <button class="btn btn-warning float-right text-white" data-toggle="modal"
                                                data-target="#exampleModalCenter">
                                            Tampilkan Logicframe
                                        </button>
                                    </h5>
                                </div>

                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                     data-parent="#accordion">
                                    <div class="card-body">
                                        @if($data['tematik_indikator'])
                                            <div class="table-responsive mb-3">
                                                <table class="table table-bordered">
                                                    <thead>
                                                    <tr class="align-middle text-center">
                                                        <th rowspan="2" class="align-middle">
                                                            Indikator
                                                        </th>
                                                        <th rowspan="2" class="align-middle w-10">
                                                            Satuan
                                                        </th>
                                                        <th colspan="{{ $data['periode']['periode_akhir'] - $data['periode']['periode_awal'] + 1 }}">
                                                            Outcome
                                                        </th>
                                                    </tr>
                                                    <tr class="align-middle text-center">
                                                        @for($i=$data['periode']['periode_awal']; $i<=$data['periode']['periode_akhir']; $i++)
                                                            <th class="w-10">
                                                                {{ $i }}
                                                            </th>
                                                        @endfor
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($data['tematik_indikator'] as $row)
                                                        <tr>
                                                            <td>
                                                                {{ $row['indikator'] }}
                                                            </td>
                                                            <td class="text-center">
                                                                {{ $row['satuan'] }}
                                                            </td>
                                                            @foreach($row['tematik_indikator_target'] as $target)
                                                                <td class="text-center">
                                                                    {{ $target['target_pemda'] }}
                                                                </td>
                                                            @endforeach
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        @else
                                            <div class="alert alert-info">
                                                Data tematik indikator tidak tersedia!
                                            </div>
                                        @endif

                                        @if($data['sasaran_tematik'])
                                            <div id="accordionTwo">
                                                @foreach($data['sasaran_tematik'] as $d1 => $sarTem)
                                                    <div class="card" style="border-radius:8px !important;">
                                                        <div class="card-header p-2 bg-oliver-green" id="headingTwo">
                                                            <h5 class="mb-0">
                                                                <button class="btn btn-link p-1" data-toggle="collapse"
                                                                        data-target="#collapseTwo"
                                                                        aria-expanded="true"
                                                                        aria-controls="collapseTwo">
                                                                    1.{{ $d1+1 }}. {{ $sarTem['sasaran_tematik'] }}
                                                                </button>
                                                            </h5>
                                                        </div>

                                                        <div id="collapseTwo" class="collapse show"
                                                             aria-labelledby="headingTwo"
                                                             data-parent="#accordionTwo">
                                                            <div class="card-body">
                                                                <div class="table-responsive mb-3">
                                                                    <table class="table table-bordered">
                                                                        <thead>
                                                                        <tr class="align-middle text-center">
                                                                            <th rowspan="2" class="align-middle">
                                                                                Indikator
                                                                            </th>
                                                                            <th rowspan="2" class="align-middle w-10">
                                                                                Satuan
                                                                            </th>
                                                                            <th colspan="{{ $data['periode']['periode_akhir'] - $data['periode']['periode_awal'] + 1 }}">
                                                                                Outcome
                                                                            </th>
                                                                        </tr>
                                                                        <tr class="align-middle text-center">
                                                                            @for($i=$data['periode']['periode_awal']; $i<=$data['periode']['periode_akhir']; $i++)
                                                                                <th class="w-10">
                                                                                    {{ $i }}
                                                                                </th>
                                                                            @endfor
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        @foreach($sarTem['sasaran_tematik_indikator'] as $row)
                                                                            <tr>
                                                                                <td>
                                                                                    {{ $row['indikator'] }}
                                                                                </td>
                                                                                <td class="text-center">
                                                                                    {{ $row['satuan'] }}
                                                                                </td>
                                                                                @foreach($row['sasaran_tematik_indikator_target'] as $target)
                                                                                    <td class="text-center">
                                                                                        {{ $target['target_pemda'] }}
                                                                                    </td>
                                                                                @endforeach
                                                                            </tr>
                                                                        @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>

                                                                <div id="accordionThree">
                                                                    @foreach($sarTem['sub_sasaran_tematik'] as $d2 => $subSarPerm)
                                                                        <div class="card"
                                                                             style="border-radius:8px !important;">
                                                                            <div class="card-header p-2 bg-oliver-green"
                                                                                 id="headingThree">
                                                                                <h5 class="mb-0">
                                                                                    <button class="btn btn-link p-1"
                                                                                            data-toggle="collapse"
                                                                                            data-target="#collapseThree"
                                                                                            aria-expanded="true"
                                                                                            aria-controls="collapseThree">
                                                                                        1.{{ ($d1+1).'.'.($d2+1) }}
                                                                                        . {{ $subSarPerm['sub_sasaran_tematik'] }}
                                                                                    </button>
                                                                                </h5>
                                                                            </div>

                                                                            <div id="collapseThree"
                                                                                 class="collapse show"
                                                                                 aria-labelledby="headingThree"
                                                                                 data-parent="#accordionThree">
                                                                                <div class="card-body">
                                                                                    <div class="table-responsive mb-3">
                                                                                        <table class="table table-bordered">
                                                                                            <thead>
                                                                                            <tr class="align-middle text-center">
                                                                                                <th rowspan="2"
                                                                                                    class="align-middle">
                                                                                                    Indikator
                                                                                                </th>
                                                                                                <th rowspan="2"
                                                                                                    class="align-middle w-10">
                                                                                                    Satuan
                                                                                                </th>
                                                                                                <th colspan="{{ $data['periode']['periode_akhir'] - $data['periode']['periode_awal'] + 1 }}">
                                                                                                    Outcome
                                                                                                </th>
                                                                                            </tr>
                                                                                            <tr class="align-middle text-center">
                                                                                                @for($i=$data['periode']['periode_awal']; $i<=$data['periode']['periode_akhir']; $i++)
                                                                                                    <th class="w-10">
                                                                                                        {{ $i }}
                                                                                                    </th>
                                                                                                @endfor
                                                                                            </tr>
                                                                                            </thead>
                                                                                            <tbody>
                                                                                            @if(empty($subSarPerm['sub_sasaran_tematik_indikator']))
                                                                                                <tr>
                                                                                                    <td colspan="{{ $data['periode']['periode_akhir'] - $data['periode']['periode_awal'] + 3 }}">
                                                                                                        Data indikator
                                                                                                        tidak ditemukan
                                                                                                    </td>
                                                                                                </tr>
                                                                                            @endif
                                                                                            @foreach($subSarPerm['sub_sasaran_tematik_indikator'] as $row)
                                                                                                <tr>
                                                                                                    <td>
                                                                                                        {{ $row['indikator'] }}
                                                                                                    </td>
                                                                                                    <td class="text-center">
                                                                                                        {{ $row['satuan'] }}
                                                                                                    </td>
                                                                                                    @foreach($row['sub_sasaran_tematik_indikator_target'] as $target)
                                                                                                        <td class="text-center">
                                                                                                            {{ $target['target_pemda'] }}
                                                                                                        </td>
                                                                                                    @endforeach
                                                                                                </tr>
                                                                                            @endforeach
                                                                                            </tbody>
                                                                                        </table>
                                                                                    </div>

                                                                                    @include('pagesV2.public.tematik._renaksi')
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            <div class="alert alert-info">
                                                Data sasaran tematik tidak tersedia
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="alert alert-info">
                            Data tidak tersedia!
                        </div>
                    @endif
                </div>
            </div>
        </div>

        @if(isset($data) && $data->isNotEmpty())
            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                 aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xxl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle">
                                {{ $data['tematik'] }}
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div id="tree" style="overflow-y: scroll"></div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </section>
@endsection

@push('plugin-scripts')
    {!! Html::script('https://cdn.jsdelivr.net/npm/sweetalert2@11') !!}
    <script src="{{ url('vendor/jhtree/js/jquery-ui-1.10.4.custom.min.js') }}"></script>
    <script src="{{ url('vendor/jhtree/js/jQuery.jHTree.js') }}"></script>
    @if(isset($data) && $data->isNotEmpty())
        <script type="text/javascript">
            $(function() {
                function data(tematikId) {
                    $('#tree').empty();
                    axios.get(window.location.origin + `/v2/public/tematik`, {
                        params: {
                            tematik_id: tematikId,
                            logicframe: 'show',
                        },
                    }).then(r => {
                        $('#tree').jHTree({
                            callType: 'obj',
                            structureObj: r.data,
                        });
                    }).catch(e => {
                        console.log('e', e);
                    });
                }

                data({{ request('tematik_id') }});
            });
        </script>
    @endif
@endpush