@section('libs')
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="{{asset('assets/datatable.css')}}">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="{{asset('assets/datatable.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/Repo.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/Utils.js')}}"></script>
    <style>
        .container {
            max-width: 90%;
            width: 90%;
        }
        .modal-big {
            width: 85% !important ;
            height: 95% !important ;
        }
        .modal-small {
            width: 65% !important ;
            height: 65% !important ;
        }
        .btn {
            text-transform: none;
        }
        /*th{
            text-align: center !important;
        }*/
        .center-text{
            text-align: center !important;
        }
        .left-text{
            text-align: left !important;
        }
        .right-text{
            text-align: right !important;
        }
        .bold-text{
            font-weight: bold !important;
        }
        .large-text{
            font-size: 25px;
        }
        .padding-side {
            padding-right: 30px !important;
            padding-left: 30px !important;
        }

        .nativer{
            background: #077103 !important;
        }
        .nativer:hover{
            background: #077103 !important;
        }
        .nativer-text{
            color: #077103 !important;
        }
        .nativer-text-large{
            color: #077103 !important;
            font-size: large;
            font-weight: bold;
        }
        .nativer-text-small{
            color: #077103 !important;
            font-size: 10px;
            font-weight: bold;
        }

        .datepicker-table td.is-selected{
            background-color: #077103 !important;
        }
        [type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after{
            background-color:#077103 !important;
        }
        [type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after{
            border:#077103 !important;
        }
        .input-field input[type=date]:focus + label,
        .input-field input[type=text]:focus + label,
        .input-field input[type=email]:focus + label,
        .input-field input[type=number]:focus + label,
        .input-field input[type=password]:focus + label {
            color: #077103 !important;
        }

        .input-field input[type=date]:focus,
        .input-field input[type=text]:focus,
        .input-field input[type=email]:focus,
        .input-field input[type=number]:focus,
        .input-field input[type=password]:focus {
            border-bottom: 2px solid #077103 !important;
            box-shadow: none;
        }

        .checkbox-nativer[type="checkbox"]:checked+span:not(.lever):before{
            border-right:2px solid #077103 !important;
            border-bottom:2px solid #077103 !important;
            /*border: 2px solid #077103 !important;
            background-color: #077103 !important;*/
        }
        .switch label input[type=checkbox]:checked+.lever{
            background-color: #07c700 !important;
            border-bottom: 2px solid #07c700 !important;
        }
        .switch label input[type=checkbox]:checked+.lever:after{
            background-color: #077103 !important;
        }
        .tooltipped {
            background:white !important;
        }
        .btn{
            background: #077103 !important;
        }
        .bold{
            font-weight: bold !important;
        }
        .tabs .tab a,
        .tabs .tab a:hover,
        .tabs .tab a.active,
        .tabs .tab a:focus,
        .tabs .tab a:focus.active{
            color: #077103 !important
        }
        .tabs .indicator{
            background-color: #077103 !important
        }
        .tabs .tab a:hover, .tabs .tab a.active{
            background-color: #d5ffd3 !important
        }

        .datepicker-cancel{color: #077103 !important;}
        .datepicker-done{color: #077103 !important;}
        .datepicker-table td.is-today{color: #077103 !important;}
        .datepicker-date-display{background-color: #077103 !important;}
        .picker__date-display { background-color: #6d4e7a !important; }
        .picker__day.picker__day--today { color: red !important; }
        .picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected { background-color: #6d4e7a !important;}
        .picker__close { color: #6d4e7a !important;}
        .picker__today { color: #6d4e7a !important;}
        .clockpicker-tick:hover { background: #6d4e7a !important; }
        .clockpicker-canvas line { stroke: #6d4e7a !important; }
        .clockpicker-canvas-bearing { fill: #6d4e7a !important; }
        .clockpicker-canvas-bg { fill: #6d4e7a !important; }

        .fixedButton{
            position: fixed;
            bottom: 0px;
            right: 0px;
            padding: 20px;
        }
        .roundedFixedBtn {
            height: 60px;
            width: 60px;
            font-size: 2em;
            border-radius: 50%;
            color: white;
            text-align: center;
            cursor: pointer;
            background-color: #077103 !important;
        }
        .rightFixed {
            position:fixed;
            right:0px;
            top:60px;
            padding:10px;
            background-color: #077103 !important;
        }
        .flexbox {
            display: flex;
            flew-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
    </style>
    <script>
        var baseURL = "{{env('API_PATH')}}";
    </script>
@endsection

@section('menu')
    <nav>
        <div class="nav-wrapper nativer">
            <a class="brand-logo">Nativer</a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="{{asset('users')}}">Users</a></li>
                <li><a href="{{asset('staffs')}}">Staffs</a></li>
                <li><a href="{{asset('purchase')}}">Purchase</a></li>
                <li><a href="{{asset('products')}}">Products</a></li>
                <li><a href="{{asset('products/assoc')}}">Products Assoc</a></li>
                <li><a href="{{asset('clusterManagement')}}">Cluster Staffs</a></li>
                <li><a href="{{asset('salesPriceUpdater')}}">SPU</a></li>
                <li><a href="{{asset('projectionPlan')}}">Projection</a></li>
                <li><a href="{{asset('collection')}}">Collection</a></li>
                <li><a href="{{asset('expense')}}">Expense</a></li>
                <li><a class="dropdown-trigger" data-target="reportDropdown">Reports<i class="material-icons right">arrow_drop_down</i></a></li>
            </ul>
            <ul id="reportDropdown" class="dropdown-content">
                <li><a href="{{asset('report/transactional')}}">Transactions</a></li>
                <li><a href="{{asset('report/transactional/overall')}}">Prepaid Postpaid</a></li>
                <li><a href="{{asset('report/prepaid/balance')}}">Prepaid Balance</a></li>
                <li class="divider"></li>
                <li><a href="{{asset('report/purchase')}}">Purchase</a></li>
                <li><a href="{{asset('report/purchase/individual')}}">Purchase II</a></li>
                <li class="divider"></li>
                <li><a href="{{asset('report/expense')}}">Expenses</a>
                </li><li class="divider"></li>
                <li><a href="{{asset('report/sales')}}">Sales</a></li>
            </ul>
        </div>
    </nav>
    <div class="section"></div>
    <script>
        $(document).ready(function() {
            $(".dropdown-trigger").dropdown();
        });
    </script>


@endsection