@extends('layouts.app')

@section('styles')
    <!-- Data table css -->
    <link href="{{ URL::asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('assets/plugins/datatable/responsivebootstrap4.min.css') }}" rel="stylesheet" />

    <!-- Owl Theme css-->
    <link href="{{ URL::asset('assets/plugins/owl-carousel/owl.carousel.css') }}" rel="stylesheet">

    <!-- Morris  Charts css-->
    <link href="{{ URL::asset('assets/plugins/morris/morris.css') }}" rel="stylesheet" />

    <!-- Select2 css -->
    <link href="{{ URL::asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />

    <link href="{{ URL::asset('assets/plugins/charts-nvd3/nv.d3.css') }}" rel="stylesheet" />
@endsection

@section('content')
    @if (mwz_roles('admin.dashboard.dashboard.index'))
        <div class="row">
            <div class="col-sm-12 col-lg-6 col-xl-4">
                <div class="card overflow-hidden">
                    <div class="card-header custom-header pb-0">
                        <div>
                            <h2 class="card-title text-body text-uppercase font-weight-semibold">วันนี้</h2>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-8">
                                <h6 class="text-body text-uppercase font-weight-semibold">
                                    <div id="today">0</div>รายการ
                                </h6>
                                <h2 class="text-primary count mt-0 font-30 mb-0">
                                    <div id="today2">0.00</div>
                                </h2>
                            </div>
                            <div class="col-4">
                                <img src="/assets/images/svg/chart.svg" alt="imag"
                                    class="w-40 h-100 text-right float-right">
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- col end -->
            <div class="col-sm-12 col-lg-6 col-xl-4">
                <div class="card overflow-hidden">
                    <div class="card-header custom-header pb-0">
                        <div>
                            <h6 class="card-title">สัปดาห์นี้</h6>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-8">
                                <h6 class="text-body text-uppercase font-weight-semibold">
                                    <div id="thisweek">0</div> รายการ
                                </h6>
                                <h2 class="text-secondary count mt-0 font-30 mb-0">
                                    <div id="thisweek2">0.00</div>
                                </h2>
                            </div>
                            <div class="col-4">
                                <img src="/assets/images/svg/businessman.svg" alt="imag"
                                    class="w-40 h-100 text-right float-right">
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- col end -->
            <div class="col-sm-12 col-lg-6 col-xl-4">
                <div class="card overflow-hidden">
                    <div class="card-header custom-header pb-0">
                        <div>
                            <h2 class="card-title">เดือนนี้</h2>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-8">
                                <h6 class="text-body text-uppercase font-weight-semibold">
                                    <div id="thismonth">0</div> รายการ
                                </h6>
                                <h2 class="text-warning count mt-0 font-30 mb-0">
                                    <div id="thismonth2">0.00</div>
                                </h2>
                            </div>
                            <div class="col-4">
                                <img src="/assets/images/svg/list.svg" alt="imag"
                                    class="w-40 h-100 text-right float-right">
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- col end -->

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header custom-header pb-0">
                        <div>
                            <h3 class="card-title">จำนวนรายการสั่งซื้อย้อนหลัง 30 วัน</h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="nvd3-chart1" class="chart-dropshadow chartsh"> <svg></svg></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header custom-header pb-0">
                        <div>
                            <h3 class="card-title">ยอดรายการสั่งซื้อย้อนหลัง 30 วัน</h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="nvd3-chart2" class="chart-dropshadow chartsh"> <svg></svg></div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6">
                <div class="card">
                    <div class="card-header pb-0">
                        <h3 class="card-title ">รายการสั่งซื้อล่าสุด</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table
                                class="table card-table table-striped table-vcenter table-outline table-bordered text-nowrap border-top">
                                <thead>
                                    <tr>
                                        <th scope="col" class="border-top-0" width="20%">รูป</th>
                                        <th scope="col" class="border-top-0" width="30%">ชื่อสินค้า</th>
                                        <th scope="col" class="border-top-0" width="30%">ราคา</th>
                                        <th scope="col" class="border-top-0" width="20%">รายระเอียด</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($orders_latest as $order)
                                        @php
                                            $get_img = getImage($order->item);
                                        @endphp
                                        <tr>
                                            <td><img style="max-width: 32px;"
                                                    src="{{ convert_image($get_img ?? '', 'product') }}" />
                                            </td>
                                            <td>{{ $order->item->product_name_th ?? '' }}</td>
                                            <td>{{ number_format($order->total_all ?? 0, 2) }}</td>
                                            <td class="text-center"><a class="btn btn-sm btn-info"
                                                    href="javascript:void(0);"
                                                    onclick="setShowOrderList({{ $order->id }});"><i
                                                        class="fa fa-info-circle"></i> รายละเอียด</a> </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div><!-- col end -->
            <div class="col-12 col-sm-6">
                <div class="card">
                    <div class="card-header pb-0">
                        <h3 class="card-title ">รายการสั่งซื้ออัพเดทล่าสุดล่าสุด</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table
                                class="table card-table table-striped table-vcenter table-outline table-bordered text-nowrap border-top">
                                <thead>
                                    <tr>
                                        <th scope="col" class="border-top-0" width="20%">รูป</th>
                                        <th scope="col" class="border-top-0" width="30%">ชื่อสินค้า</th>
                                        <th scope="col" class="border-top-0" width="30%">ราคา</th>
                                        <th scope="col" class="border-top-0 text-center" width="20%">รายระเอียด
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($order_updated as $order)
                                        @php
                                            $get_img = getImage($order->item);
                                        @endphp
                                        <tr>
                                            <td><img style="max-width: 32px;"
                                                    src="{{ convert_image($get_img ?? '', 'product') }}" />
                                            </td>
                                            <td>{{ $order->item->product_name_th ?? '' }}</td>
                                            <td>{{ number_format($order->total_all ?? 0, 2) }}</td>
                                            <td class="text-center"><a class="btn btn-sm btn-info"
                                                    href="javascript:void(0);"
                                                    onclick="setShowOrderList({{ $order->id }});"><i
                                                        class="fa fa-info-circle"></i> รายละเอียด</a> </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div><!-- col end -->

            <!-- PRODUCTS POPUP -->
            <div class="modal fade" id="products_popup" tabindex="-1" role="dialog" aria-labelledby="largemodal"
                aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="largemodal1">{{ __('order_admin.product_list') }} <span
                                    class="customer_order_code">(-)</span></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="grid-margin" id="data_products_popup">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary"
                                data-dismiss="modal">{{ __('order_admin.close') }}</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END : PRODUCTS POPUP -->
        @else
            <h2 class="text-center">คุณไม่ได้รับสิทธิ์การใช้งานหน้านี้</h2>
    @endif
@endsection('content')

@section('scripts')
    <!--Jquery Sparkline js-->
    <script src="{{ URL::asset('assets/plugins/vendors/jquery.sparkline.min.js') }}"></script>

    <!-- Chart Circle js-->
    <script src="{{ URL::asset('assets/plugins/vendors/circle-progress.min.js') }}"></script>

    <!--Time Counter js-->
    <script src="{{ URL::asset('assets/plugins/counters/jquery.missofis-countdown.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/counters/counter.js') }}"></script>

    <!-- INTERNAL Data tables -->
    <script src="{{ URL::asset('assets/plugins/datatable/js/jquery.dataTables.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/vfs_fonts.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/buttons.html5.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/buttons.print.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/buttons.colVis.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/responsive.bootstrap4.min.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/plugins/datatable/datatable-2.js') }}"></script> -->


    <!-- Notifications js -->
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/jquery.growl.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/notifIt.css') }}" rel="stylesheet" />
    <script src="{{ URL::asset('assets/plugins/bootbox/bootbox.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/rainbow.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/jquery.growl.js') }}"></script>

    <script src="{{ URL::asset('assets/plugins/charts-nvd3/d3.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/charts-nvd3/nv.d3.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/charts-nvd3/stream_layers.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/js/nvd3.js') }}"></script> -->

    <!-- mwz master js css -->
    <link rel="stylesheet" href="{{ mix('css/mwz.css') }}">
    <script src="{{ mix('js/mwz.js') }}"></script>

    <!-- module js css -->
    <link rel="stylesheet" href="{{ mix('css/dashboard.css') }}">
    <script src="{{ mix('js/dashboard.js') }}"></script>
@endsection