<!DOCTYPE html>
<html lang="en">
@include('partials.header')
{{--<style>--}}
{{--    .cursor-pointer {--}}
{{--        cursor: pointer;--}}
{{--    }--}}

{{--    .card, .custom-select, .card-header:first-child {--}}
{{--        border-radius: 4px !important;--}}
{{--    }--}}

{{--    .card__head .form-control {--}}
{{--        height: calc(1em + .75rem + 7px);--}}
{{--        padding: .375rem .75rem;--}}
{{--        font-size: .9rem;--}}
{{--        font-weight: 300;--}}
{{--        border-radius: 4px;--}}
{{--    }--}}

{{--    .card__head .form-group {--}}
{{--        margin: .4rem 0 !important;--}}
{{--    }--}}

{{--    .card__head .btn {--}}
{{--        border-radius: 4px;--}}
{{--        font-size: .9rem;--}}
{{--        padding: 5px .75rem;--}}
{{--    }--}}

{{--    .card-custom-bg {--}}
{{--        background-color: transparent !important;--}}
{{--    }--}}

{{--    .table thead th {--}}
{{--        vertical-align: bottom;--}}
{{--        border-bottom: 2px solid #d1def5;--}}
{{--    }--}}

{{--    .table .thead-light th {--}}
{{--        color: var(--light-blue-active) !important;--}}
{{--        background-color: #eaecf4;--}}
{{--        border-color: #e3e6f0;--}}
{{--        font-weight: 500;--}}
{{--        background-color: #e1ecff !important;--}}
{{--        border-color: #d6e5ff !important;--}}
{{--    }--}}

{{--    .table .thead-light th:first-child, .card .table td:first-child {--}}
{{--        width: 120px;--}}
{{--        text-align: center;--}}
{{--    }--}}

{{--    .table .thead-light th:last-child, .card .table td:last-child {--}}
{{--        text-align: center;--}}
{{--        justify-content: center !important;--}}
{{--        /*margin-right: -1px;*/--}}
{{--        /*border-top: none;*/--}}
{{--        /*border-left: none;*/--}}
{{--        /*border-top: none;*/--}}
{{--        /*border-left: none;*/--}}
{{--    }--}}

{{--    .btn-secondary.btn__export {--}}
{{--        color: #000000;--}}
{{--        background-color: #f9f9f9;--}}
{{--        border-color: #e3e3e3;--}}
{{--    }--}}

{{--    .table__top__txt {--}}
{{--        color: #071437;--}}
{{--        font-size: 1.25rem;--}}
{{--    }--}}

{{--    /*//data-table*/--}}
{{--    .dataTables_length,--}}
{{--    .dataTables_filter {--}}
{{--        margin-left: 22px;--}}
{{--        margin-right: 22px;--}}
{{--    }--}}

{{--    .page-item.active .page-link {--}}
{{--        z-index: 1;--}}
{{--        color: var(--white);--}}
{{--        background-color: var(--light-blue);--}}
{{--        border-color: var(--light-blue);--}}
{{--    }--}}

{{--    .page-link {--}}
{{--        color: var(--light-blue);--}}
{{--    }--}}

{{--    .dataTables_info,--}}
{{--    #dataTable_paginate,--}}
{{--    .dataTables_paginate {--}}
{{--        margin-left: 22px;--}}
{{--        margin-right: 22px;--}}
{{--        margin-bottom: 20px;--}}
{{--    }--}}

{{--    .dataTables_wrapper.dt-bootstrap4 {--}}
{{--        padding-top: 15px;--}}
{{--    }--}}

{{--    div.dataTables_paginate {--}}
{{--        padding-right: 22px;--}}
{{--    }--}}

{{--    .table td, .table th {--}}
{{--        padding: .65rem .75rem;--}}
{{--        vertical-align: middle;--}}
{{--        border: 1px solid #e3e6f0;--}}
{{--        color: #494949;--}}
{{--        font-weight: 300;--}}
{{--        font-size: 15px;--}}
{{--    }--}}

{{--    /*.table th {*/--}}
{{--    /*    padding: .65rem .75rem;*/--}}
{{--    /*    vertical-align: middle;*/--}}
{{--    /*    border: 1px solid #e3e6f0;*/--}}
{{--    /*    color: var(--gray-800);*/--}}
{{--    /*    font-weight: 500;*/--}}
{{--    /*    font-size: 15px;*/--}}
{{--    /*}*/--}}
{{--    .table th {--}}
{{--        color: var(--light-blue-active);--}}
{{--        background-color: #eaecf4;--}}
{{--        font-size: 15px;--}}
{{--        font-weight: 500;--}}
{{--        background-color: #e1ecff !important;--}}
{{--        border: 1px solid #d1def5;--}}
{{--    }--}}

{{--    /*===================--}}
{{--    Action Button--}}
{{--    =====================*/--}}
{{--    /*tbody td .btn{--}}
{{--        border-radius: 50%;--}}
{{--        width: 30px;--}}
{{--        height: 30px;--}}
{{--        display: inline-flex;--}}
{{--        justify-content: center;--}}
{{--        align-items: center;--}}
{{--    }*/--}}
{{--    tbody td .btn i {--}}
{{--        font-size: 12px;--}}
{{--    }--}}

{{--    .btn-soft-info,--}}
{{--    .btn-soft-danger,--}}
{{--    .btn-soft-success,--}}
{{--    .btn-soft-secondary {--}}
{{--        border-radius: 50%;--}}
{{--        width: 30px;--}}
{{--        height: 30px;--}}
{{--        display: inline-flex;--}}
{{--        justify-content: center;--}}
{{--        align-items: center;--}}
{{--    }--}}

{{--    .btn-soft-info {--}}
{{--        background-color: rgba(55, 125, 255, .15);--}}
{{--        color: #377dff;--}}
{{--    }--}}

{{--    .btn-soft-info:hover {--}}
{{--        background-color: #377dff;--}}
{{--        color: #fff;--}}
{{--    }--}}

{{--    .btn-soft-danger {--}}
{{--        background-color: rgba(239, 72, 106, .15);--}}
{{--        color: #ef486a;--}}
{{--    }--}}

{{--    .btn-soft-danger:hover {--}}
{{--        background-color: #ef486a;--}}
{{--        color: #fff;--}}
{{--    }--}}

{{--    .btn-soft-success {--}}
{{--        background-color: rgba(10, 187, 117, .15);--}}
{{--        color: #0abb75;--}}
{{--    }--}}

{{--    .btn-soft-success:hover {--}}
{{--        background-color: #0abb75;--}}
{{--        color: #fff;--}}
{{--    }--}}

{{--    .btn-soft-secondary {--}}
{{--        background-color: rgba(112, 112, 112, .15);--}}
{{--        color: #757575;--}}
{{--    }--}}

{{--    .btn-soft-secondary:hover {--}}
{{--        background-color: #757575;--}}
{{--        color: #fff;--}}
{{--    }--}}

{{--    .alert-danger {--}}
{{--        color: #ff4f45 !important;--}}
{{--        background-color: #fc544b36;--}}
{{--    }--}}
{{--    .alert-success {--}}
{{--        color: var(--bright-green) !important;--}}
{{--        background-color: var(--submit-soft);--}}
{{--        border-color: var(--bright-green);--}}
{{--    }--}}

{{--    .action__col {--}}
{{--        width: 130px;--}}
{{--        text-align: center;--}}
{{--    }--}}

{{--    /*//switch css open*/--}}
{{--    .switch {--}}
{{--        position: relative;--}}
{{--        display: inline-block;--}}
{{--        width: 40px;--}}
{{--        height: 21px;--}}
{{--    }--}}

{{--    .switch input {--}}
{{--        opacity: 0;--}}
{{--        width: 0;--}}
{{--        height: 0;--}}
{{--    }--}}

{{--    input:checked + .slider {--}}
{{--        background-color: #0785118c !important;--}}
{{--    }--}}

{{--    .slider.round {--}}
{{--        border-radius: 30px;--}}
{{--    }--}}

{{--    .slider {--}}
{{--        position: absolute;--}}
{{--        cursor: pointer;--}}
{{--        top: 0;--}}
{{--        left: 0;--}}
{{--        right: 0;--}}
{{--        bottom: 0;--}}
{{--        background-color: #ccc;--}}
{{--        -webkit-transition: .4s;--}}
{{--        transition: .4s;--}}
{{--    }--}}

{{--    input:checked + .slider:before {--}}
{{--        -webkit-transform: translateX(17px);--}}
{{--        -ms-transform: translateX(17px);--}}
{{--        transform: translateX(17px);--}}
{{--    }--}}

{{--    .slider.round:before {--}}
{{--        border-radius: 50%;--}}
{{--    }--}}

{{--    .slider:before {--}}
{{--        position: absolute;--}}
{{--        content: "";--}}
{{--        height: 17px;--}}
{{--        width: 17px;--}}
{{--        left: 3px;--}}
{{--        bottom: 2px;--}}
{{--        background-color: white;--}}
{{--        -webkit-transition: .4s;--}}
{{--        transition: .4s;--}}
{{--    }--}}

{{--    /*switch css end*/--}}


{{--    /*dropify*/--}}
{{--    .dropify-message .file-icon {--}}
{{--        display: none;--}}
{{--    }--}}

{{--    /*data-table column*/--}}
{{--    .table.dataTable {--}}
{{--        width: 100% !important;--}}
{{--    }--}}

{{--    #column-panel-parent {--}}
{{--        position: relative;--}}
{{--    }--}}

{{--    #column-toggle-panel {--}}
{{--        position: absolute;--}}
{{--        z-index: 1000;--}}
{{--        margin: 0px;--}}
{{--        padding: 0px;--}}
{{--        background-color: #f8f9fa;--}}
{{--        width: 100%;--}}
{{--    }--}}

{{--    #column-toggle-panel .column-form-check-label {--}}
{{--        cursor: pointer;--}}
{{--        padding: 5px 0 5px 1rem;--}}
{{--        width: 100%;--}}
{{--        display: block;--}}
{{--        margin: 0;--}}
{{--    }--}}

{{--    #column-toggle-panel .form-check {--}}
{{--        background-color: #fff;--}}
{{--        color: black;--}}
{{--        padding-left: 0px;--}}
{{--    }--}}

{{--    .column-form-check-input:checked + .column-form-check-label {--}}
{{--        background-color: #8f9193;--}}
{{--        display: block;--}}
{{--        color: white;--}}
{{--    }--}}

{{--    .column-form-check-label:hover {--}}
{{--        background-color: transparent;--}}
{{--    }--}}

{{--    #column-toggle-panel .restorebutton {--}}
{{--        background-color: transparent; /* Make the background transparent */--}}
{{--        border: none; /* Remove the border */--}}
{{--        outline: none; /* Remove the outline */--}}
{{--        color: #8f9193;--}}
{{--        padding: 10px 20px;--}}
{{--        font-size: 16px;--}}
{{--        cursor: pointer;--}}
{{--        transition: all 0.3s ease;--}}
{{--    }--}}

{{--    #column-toggle-panel .restorebutton:hover {--}}
{{--        color: #8f9193;--}}

{{--    }--}}

{{--    #column-toggle-panel .restorebutton:focus,--}}
{{--    #column-toggle-panel .restorebutton:active {--}}
{{--        border: none;--}}
{{--        outline: none;--}}
{{--        box-shadow: none;--}}
{{--    }--}}

{{--    /*readonly style*/--}}
{{--    .form-control.date360[readonly] {--}}
{{--        background-color: #fff;--}}
{{--        opacity: 1;--}}
{{--    }--}}

{{--    .table td, .table th {--}}
{{--        text-transform: capitalize;--}}
{{--    }--}}


{{--    /*====================--}}
{{--    Table Design New--}}
{{--    =====================================*/--}}
{{--    #wrapper #content-wrapper {--}}
{{--        background-color: #f7f7f7;--}}
{{--    }--}}

{{--    .card {--}}
{{--        -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03) !important;--}}
{{--        /*border: 1px solid #e9e9e9;*/--}}
{{--        border: none;--}}
{{--        padding: 36px;--}}
{{--        border-radius: 9px !important;--}}
{{--        box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.04) !important;--}}
{{--        margin-top: 0px !important;--}}
{{--        margin-bottom: 1.5rem !important;--}}
{{--    }--}}

{{--    .card-header {--}}
{{--        padding: .75rem 0;--}}
{{--        margin-bottom: 0px;--}}
{{--        background-color: var(--white);--}}
{{--        /*border-bottom: 1px solid #e9e9e9;*/--}}
{{--    }--}}

{{--    .card-header h6 {--}}
{{--        margin-bottom: 0 !important;--}}
{{--        font-size: 1.25rem;--}}
{{--        color: #071437;--}}
{{--    }--}}

{{--    .sidebar {--}}
{{--        min-height: 100vh;--}}
{{--        width: 18rem;--}}
{{--        background-color: var(--white) !important;--}}
{{--        -webkit-box-shadow: none !important;--}}
{{--        box-shadow: none !important;--}}
{{--        z-index: 0;--}}
{{--        border-right: 1px solid #e9e9e9;--}}
{{--        padding-bottom: 40px;--}}
{{--    }--}}


{{--    .card.item {--}}
{{--        padding: 1.25rem;--}}
{{--    }--}}

{{--    .card.item .h4 {--}}
{{--        font-weight: 600;--}}
{{--    }--}}

{{--    .card.item .card__title {--}}
{{--        letter-spacing: .5px;--}}
{{--    }--}}

{{--    .card-body {--}}
{{--        padding: 0;--}}
{{--    }--}}

{{--    div.dataTables_paginate {--}}
{{--        padding-right: 0;--}}
{{--        padding-top: 0.85em;--}}
{{--    }--}}

{{--    .dataTables_info, #dataTable_paginate, .dataTables_paginate {--}}
{{--        margin-left: 0;--}}
{{--        margin-right: 0;--}}
{{--        margin-bottom: 0;--}}
{{--    }--}}

{{--    .dataTables_length, .dataTables_filter {--}}
{{--        margin-left: 0;--}}
{{--        margin-right: 22px;--}}
{{--    }--}}

{{--    .dataTables_length, .dataTables_filter {--}}
{{--        margin-left: 0;--}}
{{--        margin-right: 0px;--}}
{{--    }--}}

{{--    .dataTables_wrapper.dt-bootstrap4 {--}}
{{--        padding: 15px 0;--}}
{{--    }--}}

{{--    @media (max-width: 981px) {--}}
{{--        .main__dashboard .item .fas {--}}
{{--            font-size: 23px;--}}
{{--        }--}}
{{--        .card.item {--}}
{{--            padding: .85rem;--}}
{{--            height: 4.5rem;--}}
{{--            overflow: hidden;--}}
{{--        }--}}
{{--        .card.item .txt__info{--}}
{{--            display: none;--}}
{{--        }--}}
{{--        .card.item .card__title {--}}
{{--            letter-spacing: 0;--}}
{{--            font-size: .8rem;--}}
{{--        }--}}
{{--    }--}}

{{--</style>--}}

<body id="page-top">
<div id="wrapper">
    <!-- Sidebar -->
@include('partials.sidebar')
<!-- Sidebar -->
    <div id="content-wrapper" class="d-flex flex-column">
        <div id="content">
            <!-- TopBar -->
        @include('partials.navbar')
        <!-- Topbar -->

            <!-- Container Fluid-->
            <div class="container-fluid main__dashboard mb-3" id="container-wrapper">

                @include('partials.alert-message')
                @yield('content')

            </div>
            <!---Container Fluid-->
        </div>
        <!-- Footer -->
    @include('partials.footer')
    <!-- Footer -->
    </div>
</div>

<!-- Scroll to top -->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<script src="{{asset('assets/vendor/jquery/jquery.min.js')}}"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.16/js/bootstrap-multiselect.min.js"></script>
<script src="{{asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('assets/vendor/toastr/toastr.min.js')}}"></script>
<script src="{{asset('assets/vendor/select2/dist/js/select2.min.js')}}"></script>
<script src="{{asset('assets/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
<script src="{{asset('assets/js/ruang-admin.min.js')}}"></script>
<script src="{{asset('assets/js/custom.js')}}"></script>
<script src="{{asset('assets/vendor/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('assets/vendor/datatables/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('assets/vendor/jquery-ui/jquery-ui.min.js')}}"></script>

<script src="{{asset('assets/vendor/daterangepicker/moment.min.js')}}"></script>
<script src="{{asset('assets/vendor/daterangepicker/daterangepicker.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-bs4.min.js"></script>
<script src="{{asset('assets/vendor/dropify/js/dropify.min.js')}}"></script>
<script src="{{asset('assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{asset('assets/vendor/sweetalert/sweetalert.min.js')}}"></script>
<script src="{{asset('assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{asset('assets/vendor/chart/Chart.min.js')}}"></script>
<script src="{{asset('assets/vendor/chart/highcharts.js')}}"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover({
            trigger: 'manual', // Use manual trigger
            html: true
        }).on('mouseenter', function () {
            var _this = this;
            $(this).popover('show');
            $('.popover').on('mouseleave', function () {
                $(_this).popover('hide');
            });
        }).on('mouseleave', function () {
            var _this = this;
            setTimeout(function () {
                if (!$('.popover:hover').length) {
                    $(_this).popover('hide');
                }
            }, 300);
        });

        Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
        Chart.defaults.global.defaultFontColor = '#858796';

        $('#dataTable').DataTable({
            "pageLength": 20,
            "lengthMenu": [10, 20, 50, 100],
            "searching": true,
            "paging": true,
            "order": [[0, 'asc']],
        });

        $(function () {
            var start = moment().subtract(29, 'days');
            var end = moment();

            function cb(start, end) {
                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#reportrange').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            }, cb);
            cb(start, end);
        });

        function formatCurrency(value) {
            if (value === null || value === '') {
                return '0';
            }
            let roundedValue = Math.round(value);
            return roundedValue.toString();
        }

    });
</script>
@yield('scripts')
@stack('scripts')
<script src="{{asset('js/printHtml.js')}}"></script>
</body>

</html>
