{{-- example_article/page --}}

@extends('admin.frest_admin.page_layout')

@section('title')
    {{ $title }} - @parent
@endsection

@push('style')
    {{-- vendor css --}}
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/css/vendors.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/css/tables/datatable/datatables.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/css/extensions/toastr.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/css/forms/select/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/css/pickers/pickadate/pickadate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/css/pickers/daterange/daterangepicker.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/swiper/swiper-bundle.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/css/charts/apexcharts.css') }}">

    {{-- theme css --}}
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/css/bootstrap.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/css/bootstrap-extended.css') }}" />

    {{-- after bootstrap --}}
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/datatables/datatables.min.css') }}" />
    {{-- <link rel="stylesheet" type="text/css" href="{{ url('libraries/datatables/Buttons-1.6.1/css/buttons.dataTables.min.css') }}" /> --}}
    {{-- <link rel="stylesheet" type="text/css" href="{{ url('libraries/datatables/Responsive-2.2.3/css/responsive.dataTables.min.css') }}" /> --}}
    {{-- <link rel="stylesheet" type="text/css" href="{{ url('libraries/datatables/FixedColumns-3.3.0/css/fixedColumns.dataTables.min.css') }}" /> --}}
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/datatables/Buttons-1.6.1/css/buttons.bootstrap4.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/datatables/Responsive-2.2.3/css/responsive.bootstrap4.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/datatables/FixedColumns-3.3.0/css/fixedColumns.bootstrap4.min.css') }}" />

    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/css/colors.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/css/components.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/css/themes/dark-layout.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/css/themes/semi-dark-layout.css') }}" />

    {{-- page css --}}
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/css/core/menu/menu-types/horizontal-menu.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/css/plugins/extensions/toastr.css') }}"> <!-- harus di page css atau setelah bootstrap -->
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/app-assets/css/plugins/extensions/swiper.css') }}" />

    {{-- custom css --}}
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin-v2.1/assets/css/style.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/default/assets/css/custom.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/video-js/video-js.min.css') }}" />

@endpush

@push('style-after-global')
@endpush

@section('body-attribute')
    class="horizontal-layout horizontal-menu navbar-sticky 2-columns footer-static"
    style="background-color: #FFFFFF;"
    data-open="hover"
    data-menu="horizontal-menu"
    data-col="2-columns"
@endsection

@section('body')
    {{-- header --}}

    <div class="container">
        <div class="row justify-content-md-center">

            {{-- navbar --}}
            <div class="app-content content">
                <div class="content-overlay"></div>

                <div class="content-wrapper" style="margin: 0rem !important;">
                    <div class="content-body">
                        <div class="content-container">

                            {{-- header --}}
                            <div class="row">
                                <div class="col-12">
                                    @component('header_component', [
                                    // form config here
                                    'slug' => $slug,
                                    'sliders' => $sliders,
                                    'times' => $times,
                                    'menus' => $menus,
                                    ])
                                    {{-- slot --}}
                                    @endcomponent
                                </div>
                            </div>
                            {{-- end header --}}

                            {{-- main menu --}}
                            <div class="row">
                                <div class="col-12">
                                    @component('activity.content', [
                                    // form config here
                                    'slug' => $slug,
                                    'page_name' => $page_name,
                                    'url' => $url,
                                    'values' => $values,
                                    'activities' => $activities,
                                    'banner_widgets' => $banner_widgets,
                                    'links' => $links,
                                    'visits' => $visits,
                                    ])
                                    {{-- slot --}}
                                    @endcomponent
                                </div>
                            </div>
                            {{-- end main menu --}}

                            {{-- footer --}}
                            <div class="row">
                                <div class="col-12">
                                    @component('footer_component', [
                                        'links' => $links,
                                    ])
                                    {{-- slot --}}
                                    @endcomponent
                                </div>
                            </div>
                            {{-- end footer --}}

                            <div class="nav-mobile-responsive card-footer" style="margin: 3rem 0rem 0rem 0rem; padding: 1rem 1rem 1rem 1rem;"></div>

                            {{-- chat widget --}}
                            @component('widget.chat_message_component', [
                            // form config here
                            ])
                            {{-- slot --}}
                            @endcomponent
                            {{-- end chat widget --}}

                            {{-- arrow up --}}
                            <div class="mobile-responsive">
                                <button class="btn btn-arrow-up btn-icon scroll-top" type="button">
                                    <i class="bx bx-up-arrow-alt"></i>
                                </button>
                            </div>
                            {{-- end arrow up --}}

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @component('navbar_mobile_component', [
        // form config here
        'slug' => $slug,
        'menus' => $menus,
    ])
    {{-- slot --}}
    @endcomponent

    {{-- mobile navigation --}}
    @component('widget.mobile_navigation_component', [
        // form config here
    ])
    {{-- slot --}}
    @endcomponent
    {{-- end mobile navigation --}}

    <div class="sidenav-overlay"></div>
    <div class="drag-target"></div>

@endsection

@push('script')
    <script src="{{ url('libraries/jquery/jquery.min.js') }}"></script>
    <script src="{{ url('libraries/bootstrap/js/popper.min.js') }}"></script>
    <script src="{{ url('libraries/bootstrap/js/bootstrap.min.js') }}"></script>

    {{-- Vendor JS --}}
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/vendors.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/fonts/LivIconsEvo/js/LivIconsEvo.tools.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/fonts/LivIconsEvo/js/LivIconsEvo.defaults.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/fonts/LivIconsEvo/js/LivIconsEvo.min.js') }}"></script>

    {{-- Page Vendor JS --}}
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/ui/jquery.sticky.js') }}"></script>
    <script src="{{ url('libraries/swiper/swiper-bundle.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/charts/apexcharts.min.js') }}"></script>
    <script src="{{ url('libraries/material-components-web/dist/material-components-web.js') }}"></script>

    {{-- <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/tables/datatable/datatables.min.js') }}"></script> --}}
    {{-- <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/tables/datatable/dataTables.bootstrap4.min.js') }}"></script> --}}
    {{-- <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/tables/datatable/dataTables.buttons.min.js') }}"></script> --}}
    {{-- <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/tables/datatable/buttons.html5.min.js') }}"></script> --}}
    {{-- <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/tables/datatable/buttons.print.min.js') }}"></script> --}}
    {{-- <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/tables/datatable/buttons.bootstrap.min.js') }}"></script> --}}
    {{-- <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/tables/datatable/pdfmake.min.js') }}"></script> --}}
    {{-- <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/tables/datatable/vfs_fonts.js') }}"></script> --}}

    <script src="{{ url('libraries/datatables/datatables.min.js') }}"></script>
    {{-- <script src="{{ url('libraries/datatables/Buttons-1.6.1/js/dataTables.buttons.min.js') }}"></script> --}}
    {{-- <script src="{{ url('libraries/datatables/Responsive-2.2.3/js/dataTables.responsive.min.js') }}"></script> --}}
    {{-- <script src="{{ url('libraries/datatables/FixedColumns-3.3.0/js/dataTables.fixedColumns.min.js') }}"></script> --}}
    <script src="{{ url('libraries/datatables/Buttons-1.6.1/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ url('libraries/datatables/Responsive-2.2.3/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ url('libraries/datatables/FixedColumns-3.3.0/js/fixedColumns.bootstrap4.min.js') }}"></script>

    <script src="{{ url('libraries/axios/axios.min.js') }}"></script>
    <script src="{{ url('libraries/bootbox/bootbox.min.js') }}"></script>
    <script src="{{ url('libraries/numeral/numeral.min.js') }}"></script>
    <script src="{{ url('libraries/resumable/resumable.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/extensions/toastr.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/pickers/pickadate/picker.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/pickers/pickadate/picker.date.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/pickers/pickadate/picker.time.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/pickers/pickadate/legacy.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/pickers/daterange/moment.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/pickers/daterange/daterangepicker.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/vendors/js/ui/blockUI.min.js') }}"></script>

    {{-- Theme JS --}}
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/js/scripts/configs/horizontal-menu.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/js/core/app-menu.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/js/core/app.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/js/scripts/components.js') }}"></script>
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/js/scripts/footer.js') }}"></script>

    {{-- Page JS --}}
    <script src="{{ url('libraries/frest-admin-v2.1/app-assets/js/scripts/extensions/ext-component-block-ui.js') }}"></script>
    {{-- <script src="{{ url('libraries/video-js/video.min.js') }}"></script> --}}

    {{-- type page js here --}}
@endpush