@extends('layoutsV2.public')

@push('plugin-styles')
    {!! Html::style('/assets/plugins/select2/select2.min.css') !!}
    {!! Html::style('/assets/plugins/select2/css/select2-bootstrap4.css') !!}
    {{--{!! Html::style('/assets/plugins/tree/tree.css') !!}--}}
    {{--{!! Html::style('/assets/plugins/tree/custom-tree_view.css') !!}--}}
    {!! Html::style('/assets/plugins/jstree/dist/themes/default/style.css') !!}
    {!! Html::style('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css') !!}
    <style>
        .is-invalid .select2-selection,
        .needs-validation ~ span > .select2-dropdown {
            border-color: #dc3545 !important;
        }

        .search-table-outter {
            border: 2px solid red;
        }

        .search-table {
            table-layout: fixed;
            margin: 40px auto 0px auto;
        }

        .search-table, td, th {
            border-collapse: collapse;
            border: 1px solid #777;
        }

        th {
            padding: 20px 7px;
            font-size: 15px;
            color: #444;
            background: #66C2E0;
        }

        td {
            padding: 5px 10px;
            height: 35px;
        }

        .search-table-outter {
            overflow-x: scroll;
        }

        .mt-container {
            max-width: 570px;
        }

        /*
        =====================
            Basic
        =====================
        */
    </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>GRAFIK REALISASI FISIK (v2)</p>
            </div>
            <div class="row">
                <div class="col-lg-2">
                    <div class="form-group">
                        <div class="fab-button">
                            <select class="form-control select2" id="filterTahun" onchange="filter_tahun(this)" aria-label="filterTahun">
                                <option>PILIH TAHUN</option>
                                @foreach ($years->sortByDesc('tahun') as $tahun)
                                    <option value="{!! $tahun->tahun !!}">{!! $tahun->tahun !!}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group">
                        <div class="fab-button">
                            <select class="form-control select2" id="filterSkpd" onchange="filter_tahun(this)" aria-label="filterTahun">
                                <option>PILIH SKPD</option>
                                @foreach ($organisasi as $org)
                                    <option value="{!! $org->kode_organisasi !!}">{!! $org->nama !!}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row" id="content_main">
                                <div class="text-center">
                                    <span class="text-warning">Belum Ada Yang ditampilkan</span>
                                </div>
                            </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('/assets/plugins/jstree/dist/jstree.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('https://cdn.jsdelivr.net/npm/apexcharts')}}"></script>
    <script>
        $('#filterSkpd').select2();
        $('#filterTahun').select2();
    </script>
    <script src="{{asset('js/V2/public/grafik/skpd/fisik/index.js')}}"></script>
@endpush