@extends('layoutsV2.public')

@push('plugin-styles')
    {!! Html::style('assets/plugins/select2/select2.min.css') !!}
    {!! Html::style('assets/plugins/select2/css/select2-bootstrap4.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">
    <link href="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css') }}"
          rel="stylesheet">
@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>Logic Frame (v2)</p>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="text-info mb-0"><i class="fa fa-code-branch"></i> Logic Frame</h6>
                        </div>
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-lg-2">
                                    <select id="filterPeriode" name="filterPeriode" class="w-100">
                                        <option></option>
                                        @foreach($periode as $item)
                                            <option value="{{ $item->id }}">{{ $item->tahun_awal.'-'.$item->tahun_akhir }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <select id="filterTahun" name="filterTahun" class="w-100">
                                        <option></option>
                                    </select>
                                </div>
                                <div class="col-lg-8">
                                    <select id="filterSkpd" name="filterSkpd" class="w-100">
                                        <option></option>
                                    </select>
                                </div>
                            </div>
                            <hr>
                            <div id="tree" style="overflow-y: scroll"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('plugin-scripts')
    {!! Html::script('/assets/js/axios.js') !!}
    {!! Html::script('/assets/plugins/select2/select2.min.js') !!}
    {!! Html::script('https://cdn.jsdelivr.net/npm/sweetalert2@11') !!}
    {!! Html::script('/assets/plugins/moment/moment.min.js') !!}
    {!! Html::script('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js') !!}
    <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>
    <script type="text/javascript">
        $(function() {
            $('#filterPeriode')
                    .select2({
                        placeholder: 'Pilih Periode',
                    })
                    .on('change', function(e) {
                        $('#filterTahun').empty().append('<option></option>');
                        let tahun = $('#filterPeriode').select2('data')[0].text.split('-');
                        for (let i = parseInt(tahun[0]); i <= parseInt(tahun[1]); i++) {
                            var opt = new Option(i, i, false, i === new Date().getFullYear());
                            var filTahun = $('#filterTahun').prepend(opt);
                            if (i === new Date().getFullYear()) {
                                filTahun.trigger('change');
                            }
                        }
                    });

            $('#filterTahun').select2({
                placeholder: 'Pilih Tahun',
            }).on('change', function(e) {
                $('#filterSkpd').empty().append('<option></option>');

                if (
                        !$.isEmptyObject($('#filterPeriode').val()) &&
                        !$.isEmptyObject($('#filterTahun').val())
                ) {
                    axios.post(window.location.origin + '/v2/public/administratif/organisasi',
                            {
                                periode: $('#filterPeriode').val(),
                                tahun: $('#filterTahun').val(),
                            },
                    ).then((r) => {
                        r.data.forEach(function(v) {
                            $('#filterSkpd').append(new Option(v.nama, v.kode_organisasi));
                        });
                    });
                }
            });

            $('#filterSkpd').select2({
                placeholder: 'Pilih Organisasi',
            }).on('change', function(e) {
                var periode = $('#filterPeriode').val();
                var tahun = $('#filterTahun').val();
                var organisasi = $('#filterSkpd').val();
                data(periode, tahun, organisasi);
            });

            function data(periode, tahun, organisasi) {
                $('#tree').empty();
                axios.get(window.location.origin + '/v2/public/pokin', {
                    params: {
                        periode: periode,
                        tahun: tahun,
                        organisasi: organisasi,
                    },
                }).then(r => {
                    $('#tree').jHTree({
                        callType: 'obj',
                        structureObj: r.data,
                    });
                });
            }
        });
    </script>
@endpush