@section('content')
<x-other.titleHeader judul="Dashboard" />
<div class="d-flex flex-column-fluid">
    <div class="container-fluid">
       
        <div class="row">

            <div class="col-md-8">
                <div class="row mb-5">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Tanggal</label>
                            <div>
                                <input autocomplete="off" onchange="get_dashboard()" type="text" value="{{date('d-m-Y')}}" name="tanggal_filter" id="tanggal_filter" class="form-control znDate" />
                            </div>
                        </div>
                    </div>
                    {{-- <div class="col-md-4">
                        <div class="mb-2">Year</div>
                        <select onchange="get_dashboard()" id="filter_tahun" class="form-control selectpicker"
                            title="Filter Tahun" data-style="btn-danger">
                            @for ($i = date('Y'); $i >= date('Y')-2; $i--)
                            <option value="{{$i}}">{{$i}}</option>
                            @endfor
                        </select>
                    </div> --}}
                        <div class="col-md-8">
                            @php
                                $ds = \DB::table("merchant")->get();
                            @endphp
                            <div class="form-group">
                                <div class="mb-4">Merchant</div>
                                <div id="block_merchant">
                                    <select autocomplete="off" onchange="get_dashboard()" class="form-control selectpicker" data-style="btn-warning" name="merchant_filter" id="merchant_filter">
                                        <option selected value="all">Semua</option>
                                        @foreach($ds as $item)
                                            <option value="{{$item->mid}}">{{$item->merchant_nm}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="card card-custom bgi-no-repeat card-stretch gutter-b shadow"
                            style="background-position: right top;background-size: 30% auto;">
                            <!--begin::Body-->
                            <div class="card-body">
                                <div style="display: flex">
                                    <div>
                                        <span class="svg-icon svg-icon-info svg-icon-4x"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo5/dist/../src/media/svg/icons/Home/Building.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24"/>
                                                <path d="M13.5,21 L13.5,18 C13.5,17.4477153 13.0522847,17 12.5,17 L11.5,17 C10.9477153,17 10.5,17.4477153 10.5,18 L10.5,21 L5,21 L5,4 C5,2.8954305 5.8954305,2 7,2 L17,2 C18.1045695,2 19,2.8954305 19,4 L19,21 L13.5,21 Z M9,4 C8.44771525,4 8,4.44771525 8,5 L8,6 C8,6.55228475 8.44771525,7 9,7 L10,7 C10.5522847,7 11,6.55228475 11,6 L11,5 C11,4.44771525 10.5522847,4 10,4 L9,4 Z M14,4 C13.4477153,4 13,4.44771525 13,5 L13,6 C13,6.55228475 13.4477153,7 14,7 L15,7 C15.5522847,7 16,6.55228475 16,6 L16,5 C16,4.44771525 15.5522847,4 15,4 L14,4 Z M9,8 C8.44771525,8 8,8.44771525 8,9 L8,10 C8,10.5522847 8.44771525,11 9,11 L10,11 C10.5522847,11 11,10.5522847 11,10 L11,9 C11,8.44771525 10.5522847,8 10,8 L9,8 Z M9,12 C8.44771525,12 8,12.4477153 8,13 L8,14 C8,14.5522847 8.44771525,15 9,15 L10,15 C10.5522847,15 11,14.5522847 11,14 L11,13 C11,12.4477153 10.5522847,12 10,12 L9,12 Z M14,12 C13.4477153,12 13,12.4477153 13,13 L13,14 C13,14.5522847 13.4477153,15 14,15 L15,15 C15.5522847,15 16,14.5522847 16,14 L16,13 C16,12.4477153 15.5522847,12 15,12 L14,12 Z" fill="#000000"/>
                                                <rect fill="#FFFFFF" x="13" y="8" width="3" height="3" rx="1"/>
                                                <path d="M4,21 L20,21 C20.5522847,21 21,21.4477153 21,22 L21,22.4 C21,22.7313708 20.7313708,23 20.4,23 L3.6,23 C3.26862915,23 3,22.7313708 3,22.4 L3,22 C3,21.4477153 3.44771525,21 4,21 Z" fill="#000000" opacity="0.3"/>
                                            </g>
                                        </svg><!--end::Svg Icon--></span>
                                    </div>
                                    <div class="ml-3">
                                        <div class="font-weight-bold font-size-h5 mt-1 text-info"> Merchant </div>
                                        <div class="font-weight-bold font-size-sm">
                                            <span class="mr-2" style="font-size: 16px;" id="p_outlet"> 0</span>
                                        </div>
                                    </div>
                                </div>
                                
                               
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card card-custom bgi-no-repeat card-stretch gutter-b bg-light-warning shadow"
                            style="background-position: right top;background-size: 30% auto;">
                            <!--begin::Body-->
                            <div class="card-body">
                                <div style="display: flex">
                                    <div>
                                        <span class="svg-icon svg-icon-warning svg-icon-3x"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo5/dist/../src/media/svg/icons/Shopping/Cart1.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24"/>
                                                <path d="M18.1446364,11.84388 L17.4471627,16.0287218 C17.4463569,16.0335568 17.4455155,16.0383857 17.4446387,16.0432083 C17.345843,16.5865846 16.8252597,16.9469884 16.2818833,16.8481927 L4.91303792,14.7811299 C4.53842737,14.7130189 4.23500006,14.4380834 4.13039941,14.0719812 L2.30560137,7.68518803 C2.28007524,7.59584656 2.26712532,7.50338343 2.26712532,7.4104669 C2.26712532,6.85818215 2.71484057,6.4104669 3.26712532,6.4104669 L16.9929851,6.4104669 L17.606173,3.78251876 C17.7307772,3.24850086 18.2068633,2.87071314 18.7552257,2.87071314 L20.8200821,2.87071314 C21.4717328,2.87071314 22,3.39898039 22,4.05063106 C22,4.70228173 21.4717328,5.23054898 20.8200821,5.23054898 L19.6915238,5.23054898 L18.1446364,11.84388 Z" fill="#000000" opacity="0.3"/>
                                                <path d="M6.5,21 C5.67157288,21 5,20.3284271 5,19.5 C5,18.6715729 5.67157288,18 6.5,18 C7.32842712,18 8,18.6715729 8,19.5 C8,20.3284271 7.32842712,21 6.5,21 Z M15.5,21 C14.6715729,21 14,20.3284271 14,19.5 C14,18.6715729 14.6715729,18 15.5,18 C16.3284271,18 17,18.6715729 17,19.5 C17,20.3284271 16.3284271,21 15.5,21 Z" fill="#000000"/>
                                            </g>
                                        </svg><!--end::Svg Icon--></span>
                                    </div>
                                    <div class="ml-3">
                                        <div class="font-weight-bold mt-0 text-warning"> Transaction </div>
                                        <div class="font-weight-bold font-size-sm" style="color: #3f4254;">
                                            <span class="mr-2" style="font-size: 16px;" id="p_transaction"> 0</span>
                                        </div>
                                    </div>
                                </div>
                                
                               
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card card-custom bgi-no-repeat card-stretch gutter-b bg-light-primary shadow"
                            style="background-position: right top;background-size: 30% auto;">
                            <!--begin::Body-->
                            <div class="card-body">
                                <div style="display: flex">
                                    <div>
                                        <span class="svg-icon svg-icon-primary svg-icon-3x  ml-n1"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo5/dist/../src/media/svg/icons/Shopping/Bag2.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24"/>
                                                <path d="M5.94290508,4 L18.0570949,4 C18.5865712,4 19.0242774,4.41271535 19.0553693,4.94127798 L19.8754445,18.882556 C19.940307,19.9852194 19.0990032,20.9316862 17.9963398,20.9965487 C17.957234,20.9988491 17.9180691,21 17.8788957,21 L6.12110428,21 C5.01653478,21 4.12110428,20.1045695 4.12110428,19 C4.12110428,18.9608266 4.12225519,18.9216617 4.12455553,18.882556 L4.94463071,4.94127798 C4.97572263,4.41271535 5.41342877,4 5.94290508,4 Z" fill="#000000" opacity="0.3"/>
                                                <path d="M7,7 L9,7 C9,8.65685425 10.3431458,10 12,10 C13.6568542,10 15,8.65685425 15,7 L17,7 C17,9.76142375 14.7614237,12 12,12 C9.23857625,12 7,9.76142375 7,7 Z" fill="#000000"/>
                                            </g>
                                        </svg><!--end::Svg Icon--></span>
                                    </div>
                                    <div class="ml-3">
                                        <div class="font-weight-bold mt-0 text-primary"> Order </div>
                                        <div class="font-weight-bold font-size-sm" style="color: #3f4254;">
                                            <span class="mr-2" style="font-size: 16px;" id="p_order"> 0</span>
                                        </div>
                                    </div>
                                </div>
                                
                               
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card card-custom bgi-no-repeat card-stretch gutter-b shadow"
                            style="background-position: right top;background-size: 30% auto;">
                            <!--begin::Body-->
                            <div class="card-body">
                                <div style="display: flex">
                                    <div>
                                        <span class="svg-icon svg-icon-dark svg-icon-4x"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo5/dist/../src/media/svg/icons/Shopping/Box2.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24"/>
                                                <path d="M4,9.67471899 L10.880262,13.6470401 C10.9543486,13.689814 11.0320333,13.7207107 11.1111111,13.740321 L11.1111111,21.4444444 L4.49070127,17.526473 C4.18655139,17.3464765 4,17.0193034 4,16.6658832 L4,9.67471899 Z M20,9.56911707 L20,16.6658832 C20,17.0193034 19.8134486,17.3464765 19.5092987,17.526473 L12.8888889,21.4444444 L12.8888889,13.6728275 C12.9050191,13.6647696 12.9210067,13.6561758 12.9368301,13.6470401 L20,9.56911707 Z" fill="#000000"/>
                                                <path d="M4.21611835,7.74669402 C4.30015839,7.64056877 4.40623188,7.55087574 4.5299008,7.48500698 L11.5299008,3.75665466 C11.8237589,3.60013944 12.1762411,3.60013944 12.4700992,3.75665466 L19.4700992,7.48500698 C19.5654307,7.53578262 19.6503066,7.60071528 19.7226939,7.67641889 L12.0479413,12.1074394 C11.9974761,12.1365754 11.9509488,12.1699127 11.9085461,12.2067543 C11.8661433,12.1699127 11.819616,12.1365754 11.7691509,12.1074394 L4.21611835,7.74669402 Z" fill="#000000" opacity="0.3"/>
                                            </g>
                                        </svg><!--end::Svg Icon--></span>
                                    </div>
                                    <div class="ml-3">
                                        <div class="font-weight-bold font-size-h5 mt-1 text-dark"> Product </div>
                                        <div class="font-weight-bold font-size-sm">
                                            <span class="mr-2" style="font-size: 16px;" id="p_product"> 0</span>
                                        </div>
                                    </div>
                                </div>
                                
                               
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card card-custom bgi-no-repeat card-stretch gutter-b bg-light-success shadow"
                            style="background-position: right top;background-size: 30% auto;">
                            <!--begin::Body-->
                            <div class="card-body">
                                <div style="display: flex">
                                    <div>
                                        <span class="svg-icon svg-icon-success svg-icon-3x"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo5/dist/../src/media/svg/icons/Shopping/Chart-line1.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24"/>
                                                <path d="M5,19 L20,19 C20.5522847,19 21,19.4477153 21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 C4.55228475,3 5,3.44771525 5,4 L5,19 Z" fill="#000000" fill-rule="nonzero"/>
                                                <path d="M8.7295372,14.6839411 C8.35180695,15.0868534 7.71897114,15.1072675 7.31605887,14.7295372 C6.9131466,14.3518069 6.89273254,13.7189711 7.2704628,13.3160589 L11.0204628,9.31605887 C11.3857725,8.92639521 11.9928179,8.89260288 12.3991193,9.23931335 L15.358855,11.7649545 L19.2151172,6.88035571 C19.5573373,6.44687693 20.1861655,6.37289714 20.6196443,6.71511723 C21.0531231,7.05733733 21.1271029,7.68616551 20.7848828,8.11964429 L16.2848828,13.8196443 C15.9333973,14.2648593 15.2823707,14.3288915 14.8508807,13.9606866 L11.8268294,11.3801628 L8.7295372,14.6839411 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                            </g>
                                        </svg><!--end::Svg Icon--></span>
                                    </div>
                                    <div class="ml-3">
                                        <div class="font-weight-bold  mt-0 text-success"> Omzet </div>
                                        <div class="font-weight-bold font-size-sm" style="color: #3f4254;">
                                            <span class="mr-2" style="font-size: 16px;" id="p_omzet"> 0</span>
                                        </div>
                                    </div>
                                </div>
                                
                               
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card card-custom bgi-no-repeat card-stretch gutter-b bg-light-danger shadow"
                            style="background-position: right top;background-size: 30% auto;">
                            <!--begin::Body-->
                            <div class="card-body">
                                <div style="display: flex">
                                    <div>
                                        <span class="svg-icon svg-icon-danger svg-icon-3x"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/demo5/dist/../src/media/svg/icons/Shopping/Money.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24"/>
                                                <path d="M2,6 L21,6 C21.5522847,6 22,6.44771525 22,7 L22,17 C22,17.5522847 21.5522847,18 21,18 L2,18 C1.44771525,18 1,17.5522847 1,17 L1,7 C1,6.44771525 1.44771525,6 2,6 Z M11.5,16 C13.709139,16 15.5,14.209139 15.5,12 C15.5,9.790861 13.709139,8 11.5,8 C9.290861,8 7.5,9.790861 7.5,12 C7.5,14.209139 9.290861,16 11.5,16 Z" fill="#000000" opacity="0.3" transform="translate(11.500000, 12.000000) rotate(-345.000000) translate(-11.500000, -12.000000) "/>
                                                <path d="M2,6 L21,6 C21.5522847,6 22,6.44771525 22,7 L22,17 C22,17.5522847 21.5522847,18 21,18 L2,18 C1.44771525,18 1,17.5522847 1,17 L1,7 C1,6.44771525 1.44771525,6 2,6 Z M11.5,16 C13.709139,16 15.5,14.209139 15.5,12 C15.5,9.790861 13.709139,8 11.5,8 C9.290861,8 7.5,9.790861 7.5,12 C7.5,14.209139 9.290861,16 11.5,16 Z M11.5,14 C12.6045695,14 13.5,13.1045695 13.5,12 C13.5,10.8954305 12.6045695,10 11.5,10 C10.3954305,10 9.5,10.8954305 9.5,12 C9.5,13.1045695 10.3954305,14 11.5,14 Z" fill="#000000"/>
                                            </g>
                                        </svg><!--end::Svg Icon--></span>
                                    </div>
                                    <div class="ml-3">
                                        <div class="font-weight-bold mt-0 text-danger"> Tax </div>
                                        <div class="font-weight-bold font-size-sm" style="color: #3f4254;">
                                            <span class="mr-2" style="font-size: 16px;" id="p_tax"> 0</span>
                                        </div>
                                    </div>
                                </div>
                                
                               
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
           
                    <div class="col-md-12">
                        <div class="card card-custom card-stretch gutter-b">
                            <div class="card-body">
                                <div class="font-weight-bolder font-size-h5 mb-1 mt-5">Today's Transaction </div>
                                <div class="font-size-sm mb-4 text-muted">Gain Today's Transaction </div>
        
                                <div class="crt" id="crt_con_today">
                                    <canvas id="crt_today"></canvas>
                                </div>
        
                            </div>
                        </div>
                    </div>
        
                    {{-- <div class="col-md-12">
                        <div class="card card-custom card-stretch gutter-b">
                            <div class="card-body">
                                <div class="font-weight-bolder font-size-h5 mb-1 mt-5">Day's Transaction </div>
                                <div class="font-size-sm mb-4 text-muted">Gain Day's Transaction </div>
        
                                <div class="crt" id="crt_con_week">
                                    <canvas id="crt_week"></canvas>
                                </div>
        
                            </div>
                        </div>
                    </div> --}}
        
                    <div class="col-md-12">
                        <div class="card card-custom card-stretch gutter-b">
                            <div class="card-body">
                                <div class="font-weight-bolder font-size-h5 mb-1 mt-5">Graph of All Transactions </div>
                                <div class="font-size-sm mb-4 text-muted">Gain Graph of All Transactions </div>
        
                                <div class="crt" id="crt_con">
                                    <canvas id="crt"></canvas>
                                </div>
        
                            </div>
                        </div>
                    </div>
        
                  
                </div>
        
            </div>
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-custom card-stretch gutter-b scrollStyle"
                            style="overflow: auto;padding-bottom: 30px;">
                            <!--begin::Header-->
                            <div class="card-header border-0 pt-6 mb-2">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label font-weight-bolder text-dark font-size-h4 mb-3">Week's Transaction</span>
                                    <span class="text-muted font-weight-bold font-size-sm">Report Week's Transaction</span>
                                </h3>
                                <div class="card-toolbar">
                                </div>
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="card-body pt-2">
                                <!--begin::Table-->
                              
                                <div class="table-responsive">
                                    <table class="table table-borderless mb-0">
                                        <tbody id="list_week">
                                        
                                        </tbody>
                                    </table>
                                </div>
                                <!--end::Table-->
                            </div>
                            <!--end::Body-->
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="card card-custom card-stretch gutter-b scrollStyle"
                            style="overflow: auto;padding-bottom: 30px;">
                            <!--begin::Header-->
                            <div class="card-header border-0 pt-6 mb-2">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label font-weight-bolder text-dark font-size-h4 mb-3">Best Selling Products</span>
                                    <span class="text-muted font-weight-bold font-size-sm">Report Best Selling Products</span>
                                </h3>
                                <div class="card-toolbar">
                                </div>
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="card-body pt-2">
                                <!--begin::Table-->
                              
                                <div class="table-responsive">
                                    <table class="table table-borderless mb-0">
                                        <tbody id="best_product">
                                           
                                        
                                        
                                        </tbody>
                                    </table>
                                </div>
                                <!--end::Table-->
                            </div>
                            <!--end::Body-->
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="card card-custom card-stretch gutter-b scrollStyle"
                            style="overflow: auto;padding-bottom: 30px;">
                            <!--begin::Header-->
                            <div class="card-header border-0 pt-6 mb-2">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label font-weight-bolder text-dark font-size-h4 mb-3">Stock Minimum</span>
                                    <span class="text-muted font-weight-bold font-size-sm">Report Stock Minimum</span>
                                </h3>
                                <div class="card-toolbar">
                                </div>
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="card-body pt-2">
                              
                                <!--begin::Table-->
                                <div class="table-responsive">
                                    <table class="table table-borderless mb-0">
                                        <tbody id="stock_minimum">
                                            
                                        </tbody>
                                    </table>
                                </div>
                                <!--end::Table-->
                            </div>
                            <!--end::Body-->
                        </div>
                    </div>
                </div>
              
            </div>
          
        </div>

    


    </div>
</div>

@include('content.dashboard_act')

@endsection