@extends('layoutsV2.master')

@push('plugin-styles')
    {!! Html::style('/assets/plugins/select2/css/select2-bootstrap4.css') !!}
    {!! Html::style('/assets/plugins/select2/css/select2-bootstrap4.css') !!}
    {!! Html::style('/assets/plugins/sweetalert2/sweetalert2.min.css') !!}
    {!! Html::style('/assets/plugins/datatables-net/dataTables.bootstrap4.css') !!}
    <style>
        .is-invalid .select2-selection,
        .needs-validation ~ span > .select2-dropdown {
            border-color: #dc3545 !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            padding: 0 !important;
            left: auto !important;
            top: auto !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            position: relative !important;
            border: none !important;
        }

        .select2-container li:only-child,
        .select2-container input:placeholder-shown {
            width: 100% !important;
        }
    </style>
@endpush

@section('content')
    <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
        <div>
            <h5 class="mb-md-0">{{ENV('APP_TITLE')}}</h5>
        </div>
    </div>

    <nav class="settings-sidebar">
        <div class="sidebar-body">
            <a
                href="#"
                onclick="add(this)"
                class="settings-sidebar-toggler settings-open text-white"
                style="border-radius: 25px;border: 1px darkblue;">
                <i data-feather="plus-circle" style="color:white"></i>
            </a>
        </div>
    </nav>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header text-uppercase">
                    Cascading Tematika Program
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-condensed" id="master-tematik">
                        <thead>
                        <tr class="text-center">
                            <th>NO</th>
                            <th>PERIODE</th>
                            <th>TEMA</th>
                            <th>SUB TEMA</th>
                            <th>JUMLAH PROGRAM</th>
                            <th>#</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @include('pagesV2.adminKab.tematik.program.form')
@endsection

@push('plugin-scripts')
    {!! Html::script('/assets/plugins/select2/js/select2.min.js') !!}
    {!! Html::script('/assets/plugins/sweetalert2/sweetalert2.min.js') !!}
    {!! Html::script('/assets/plugins/datatables-net/jquery.dataTables.js') !!}
    {!! Html::script('/assets/plugins/datatables-net-bs4/dataTables.bootstrap4.js') !!}

@endpush

@push('custom-scripts')
    {!! Html::script('js/V2/adminKab/tematik/program.js?' . time()) !!}
@endpush