@extends('layouts.admin')
@section('style')
@section('content')
    <style>
        *, ::after, ::before {
            box-sizing: border-box;
        }


        .bg-info, .bg-info > a {
            color: #fff !important;
        }

        .small-box {
            border-radius: .25rem;
            box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
            display: block;
            margin-bottom: 20px;
            position: relative;
        }

        .small-box > .inner {
            padding: 10px;
            padding-bottom: 0px;
        }

        .small-box h3, .small-box p {
            z-index: 5;
        }

        .small-box h3 {
            font-size: 2.2rem;
            font-weight: 700;
            margin: 0 0 10px 0;
            padding: 0;
            white-space: nowrap;
        }

        .small-box h3, .small-box p {
            z-index: 5;
        }

        .small-box p + p {
            font-size: 1rem;
        }

        p {
            margin-top: 0;
            margin-bottom: 1rem;
        }

        p {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }

        .small-box .icon {
            color: rgba(0, 0, 0, .15);
            z-index: 0;
        }

        .small-box .icon > i.fa, .small-box .icon > i.fab, .small-box .icon > i.far, .small-box .icon > i.fas, .small-box .icon > i.glyphicon, .small-box .icon > i.ion {
            font-size: 70px;
            top: 20px;
        }

        .small-box .icon > i {
            font-size: 90px;
            position: absolute;
            right: 15px;
            top: 15px;
            transition: all .3s linear;
        }

        .fa, .fas {
            font-weight: 900;
        }

        .fa, .far, .fas {
            font-family: "Font Awesome 5 Free";
        }

        .fa, .fab, .fad, .fal, .far, .fas {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            line-height: 1;
        }

        .small-box > .small-box-footer {
            background: rgba(0, 0, 0, .1);
            color: rgba(255, 255, 255, .8);
            display: block;
            padding: 3px 0;
            position: relative;
            text-align: center;
            text-decoration: none;
            z-index: 10;
        }

        a {
            color: #007bff;
            text-decoration: none;
            background-color: transparent;
        }

        a:-webkit-any-link {
            color: -webkit-link;
            cursor: pointer;
            text-decoration: underline;
        }

        .bg-info {
            background-color: #17a2b89c !important;
        }

        .bg-green {
            background-color: #028900 !important;
        }

        .bg-purple {
            background-color: #ad44ae94 !important;
        }

        .bg-redbrown {
            background-color: #b83517 !important;
        }


        .bg-bluelight {
            background-color: #a1b6ff !important;
        }

        .bg-pink {
            background-color: #de296c !important;
        }

        .bg-greenlight {
            background-color: #c1c32c !important;
        }

        .bg-blue {
            background-color: #4c6ad5 !important;
        }

        .bg-yellow {
            background-color: #d1a320 !important;
        }
    </style>
    {{--    <style>--}}
    {{--        .chartWrapper {--}}
    {{--            position: relative;--}}
    {{--        }--}}

    {{--        .chartWrapper > canvas {--}}
    {{--            position: absolute;--}}
    {{--            left: 0;--}}
    {{--            top: 0;--}}
    {{--            pointer-events:none;--}}
    {{--        }--}}

    {{--        .chartAreaWrapper {--}}
    {{--            width: 1200px;--}}
    {{--            /*overflow-x: scroll;*/--}}
    {{--        }--}}
    {{--    </style>--}}
    <div class="content">
        {{-- <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                <div class="small-box bg-purple">
                    <div class="inner">
                        <h3>{{$allBox[0]->num ?? 0}}</h3>
                        <p>จำนวนสินค้าจัดส่ง</p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <a href="{{url('/admin/show/tbox')}}" class="small-box-footer">
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
        </div>
        <hr> --}}

        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                <div class="small-box bg-purple">
                    <div class="inner">
                        <p class="h3">{{$XDDatePalit[0]->num ?? 0}}</p>
                        <p>สั่งผลิตวัน
                            17/12/2025                        </p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-qrcode" style="font-size: 50px"></i>
                    </div>
                    <a href="{{url('/admin/order')}}" class="small-box-footer">
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                <div class="small-box" style="background-color: #4495ae94">
                    <div class="inner">
                        <p class="h3">{{$XDfg[0]->num ?? 0}}</p>
                        <p>FG
                            17/12/2025                        </p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-home" style="font-size: 50px"></i>
                    </div>
                    <a href="{{url('/admin/scannfg')}}" class="small-box-footer">
                    {{-- <a href="#" class="small-box-footer"> --}}
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                <div class="small-box" style="background-color: #44ae7994">
                    <div class="inner">
                        <p class="h3">{{$XDqc[0]->num ?? 0}}</p>
                        <p>เข้า QC
                            17/12/2025
                        </p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-shopping-cart" style="font-size: 50px"></i>
                    </div>
                    <a href="{{url('/admin/qcin')}}" class="small-box-footer">
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                <div class="small-box" style="background-color: #62ae4494">
                    <div class="inner">
                        <p class="h3">{{$XDpk[0]->num ?? 0}}</p>
                        <p>เข้าPacking
                            17/12/2025
                        </p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-shopping-bag" style="font-size: 50px"></i>
                    </div>
                    <a href="{{url('/admin/scanpack')}}" class="small-box-footer">
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                <div class="small-box " style="background-color: #dbe64894">
                    <div class="inner">
                        <p class="h3">{{$XDbox[0]->num ?? 0}}</p>
                        <p>สินค้าลงกล่อง
                            17/12/2025
                        </p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-flag" style="font-size: 50px"></i>
                    </div>
                    <a href="{{url('/admin/scanbox')}}" class="small-box-footer">
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>


        </div>



        <hr>

        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                <div class="small-box bg-purple">
                    <div class="inner">
                        <p class="h3">{{$XDDateInBlench[0]->num ?? 0}}</p>
                        <p>สั่งผลิต เดือน
                            12/2025                        </p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-qrcode" style="font-size: 50px"></i>
                    </div>
                    <a href="{{url('/admin/order')}}" class="small-box-footer">
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            {{-- <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                <div class="small-box" style="background-color: #5f44ae94">
                    <div class="inner">
                        <p class="h3">{{$XDDateInThread[0]->num ?? 0}}</p>
                        <p>ส่งงานฟอก</p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-shopping-cart" style="font-size: 50px"></i>
                    </div>
                    <a href="{{url('/admin/scansendbleach')}}" class="small-box-footer">
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div> --}}
            <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                <div class="small-box" style="background-color: #4495ae94">
                    <div class="inner">
                        <p class="h3">{{$XDDateInStockFG[0]->num ?? 0}}</p>
                        <p>Stock FG เดือน
                            12/2025
                        </p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-home" style="font-size: 50px"></i>
                    </div>
                    <a href="{{url('/admin/scannfg')}}" class="small-box-footer">
                    {{-- <a href="{{url('/admin/scanstockfg')}}" class="small-box-footer"> --}}
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                <div class="small-box" style="background-color: #44ae7994">
                    <div class="inner">
                        <p class="h3">{{$XDDateInQC[0]->num ?? 0}}</p>
                        <p>เข้า QC
                            12/2025
                        </p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-shopping-cart" style="font-size: 50px"></i>
                    </div>
                    <a href="{{url('/admin/qcin')}}" class="small-box-footer">
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                <div class="small-box" style="background-color: #62ae4494">
                    <div class="inner">
                        <p class="h3">{{$XDDateInPack[0]->num ?? 0}}</p>
                        <p>เข้าPacking
                            12/2025
                        </p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-shopping-bag" style="font-size: 50px"></i>
                    </div>
                    <a href="{{url('/admin/scanpack')}}" class="small-box-footer">
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-2 col-md-3 col-sm-3 col-6">
                <div class="small-box " style="background-color: #dbe64894">
                    <div class="inner">
                        <p class="h3">{{$XDDateInBox[0]->num ?? 0}}</p>
                        <p>สินค้าลงกล่อง
                            12/2025
                        </p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-flag" style="font-size: 50px"></i>
                    </div>
                    <a href="{{url('/admin/scanbox')}}" class="small-box-footer">
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

        </div>
        <hr>

        {{-- <div class="row">
            <div class="col-lg-4 col-md-3 col-sm-3 col-6">
                <div class="small-box " style="background-color: #e72a7394">
                    <div class="inner">
                        <p class="h3">{{$XDDateInBox[0]->num ?? 0}}</p>
                        <p>ตรวจสอบสินค้าที่ต้องส่ง ตามช่วงเวลา
                        </p>
                    </div>
                    <div class="icon iconsm">
                        <i class="fas fa-flag" style="font-size: 50px"></i>
                    </div>
                    <a href="{{url('#')}}" class="small-box-footer">
                        <Mo></Mo>
                        ข้อมูลเพิ่มเติม <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

        </div> --}}

        {{-- <div class="row">
            <div class="col-md-6">
                <div class="card card-info">
                    <div class="card-header" style="padding-bottom: 0">
                        <h5 class="card-title  mr-1">กราฟสั่งผลิต รายเดือน</h5>

                        <div class="card-tools" id="average_date">

                        </div>
                        <p class="text-right"></p>

                    </div>
                    <div class="card-body" style="">
                        <div class="chart" id="avgChart">
                            <canvas id="BG_Chart" typechart="avgChart" data-id="1" data-name="chart"
                                    style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                        </div>
                    </div>


                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-info">
                    <div class="card-header" style="padding-bottom: 0">
                        <h5 class="card-title  mr-1">กราฟ Stock FG รายเดือน</h5>

                        <div class="card-tools" id="average_date">

                        </div>
                        <p class="text-right"></p>

                    </div>
                    <div class="card-body" style="">
                        <div class="chart" id="avgChart">
                            <canvas id="FG_Chart" typechart="avgChart" data-id="1" data-name="chart"
                                    style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                        </div>
                    </div>

                </div>
            </div>
        </div> --}}


        @endsection
        @section('scripts')
            @parent
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
            <script>
                var labelsArray = [];
                var amountArray = [];


                var FgData = @json($dataFG);
                var BgData = @json($dataBG);
                // console.log(FgData);
                var size = FgData.length;
                var options = {
                    responsive: true,
                    maintainAspectRatio: false,
                    datasetFill: false,
                    legend: {
                        display: true
                    },
                    scales: {
                        yAxes: [{
                            stacked: true,
                            ticks: {
                                min: 0,
                                stepSize: 1000
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'จำนวน'
                            }
                        }
                        ],
                        xAxes: [{
                            stacked: true
                        }]
                    },
                    plugins: [{}],
                };
                // var myChart = new Chart('FG_Chart');

                initBarGraph(FgData,'FG_Chart',"rgba(68,242,255)");
                initBarGraph(BgData,'BG_Chart',"rgba(249, 119, 249, 1)");

                function initBarGraph(dataJson,nameChart,color) {
                    var labelsArray = [];
                    var amountArray = [];
                    // myChart.destroy();
                    console.log(dataJson);
                    for (var i = 0; i < size; i++) {
                        labelsArray.push(dataJson[i].date);
                        amountArray.push(Math.round(dataJson[i].num));
                        // labelsArray.push('aaaa');
                    }
                    var data = {
                        labels: labelsArray,
                        datasets: [{
                            label: 'จำนวนสินค้าของแต่ละเดือน',
                            backgroundColor: color,
                            "borderColor": "rgba(0,21,235)",
                            strokeColor: "brown",
                            borderWidth: 1,
                            data: amountArray,
                            hoverBackgroundColor: 'rgba(208,165,255,0.5)',
                        },
                        ]
                    };

                    myChart = Chart.Bar(nameChart, {
                        type: 'bar',
                        data: data,
                        options: options,
                    });

                }

                function commaify(value) {
                    var result = ('' + value).replace(/^(-?\d+)(\d{3})/, '$1,$2');
                    return value == result ? result : commaify(result);
                }
            </script>
@endsection