@extends('layouts.master')
@section('header')
    <style>
        .card-counter {
            box-shadow: 2px 2px 10px #DADADA;
            margin: 5px;
            padding: 20px 10px;
            background-color: #fff;
            height: 100px;
            border-radius: 5px;
            transition: .3s linear all;
        }

        .card-counter:hover {
            box-shadow: 4px 4px 20px #DADADA;
            transition: .3s linear all;
        }

        .card-counter.primary {
            background-color: #007bff;
            color: #FFF;
        }

        .card-counter.danger {
            background-color: #ef5350;
            color: #FFF;
        }

        .card-counter.success {
            background-color: #66bb6a;
            color: #FFF;
        }

        .card-counter.info {
            background-color: #26c6da;
            color: #FFF;
        }

        .card-counter i {
            font-size: 5em;
            opacity: 0.2;
        }

        .card-counter .count-numbers {
            position: absolute;
            right: 35px;
            top: 20px;
            font-size: 32px;
            display: block;
        }

        .card-counter .count-name {
            position: absolute;
            right: 35px;
            top: 65px;
            font-style: italic;
            text-transform: capitalize;
            opacity: 0.5;
            display: block;
            font-size: 18px;
        }
    </style>
@endsection
@section('content')
    <div class=" card bg-white p-2" style="height: 89vh">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <a href="{{ route('order.index', $cnt_or > 0 ? 1 : null) }}">
                        <div class="card-counter primary">
                            <i class="fa fa-industry fa-3x"></i>
                            <span class="count-numbers">{{ $cnt_or }}</span>
                            <span class="count-name">ใบสั่งผลิตสินค้า (OR)</span>
                        </div>
                    </a>
                </div>

                <div class="col-md-3">
                    <a href="{{ route('po.index', $cnt_po > 0 ? 1 : null) }}">
                        <div class="card-counter secondary">
                            <i class="fa fa-shopping-cart fa-3x"></i>
                            <span class="count-numbers">{{ $cnt_po }}</span>
                            <span class="count-name">ใบสั่งซื้อสินค้า (PO)</span>
                        </div>
                    </a>
                </div>

                <div class="col-md-3">
                    <a href="{{ route('gr.index', $cnt_gr > 0 ? 1 : null) }}">
                        <div class="card-counter success">
                            <i class="fa fa-archive fa-3x"></i>
                            <span class="count-numbers">{{ $cnt_gr }}</span>
                            <span class="count-name">ใบรับเข้าวัสดุ (GR)</span>
                        </div>
                    </a>
                </div>

                <div class="col-md-3">
                    <a href="{{ route('gi.index', $cnt_gi > 0 ? 1 : null) }}">
                        <div class="card-counter danger">
                            <i class="fa fa-tag fa-3x"></i>
                            <span class="count-numbers">{{ $cnt_gi }}</span>
                            <span class="count-name">ใบเบิกวัสดุ (GI)</span>
                        </div>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <a href="{{ route('fr.index', $cnt_fr > 0 ? 1 : null) }}">
                        <div class="card-counter dark">
                            <i class="fa fa-bookmark fa-3x"></i>
                            <span class="count-numbers">{{ $cnt_fr }}</span>
                            <span class="count-name">ใบรับเข้าสินค้า (FR)</span>
                        </div>
                    </a>
                </div>

                <div class="col-md-3">
                    <a href="{{ route('fi.index', $cnt_fi > 0 ? 1 : null) }}">
                        <div class="card-counter info">
                            <i class="fa fa-trademark fa-3x"></i>
                            <span class="count-numbers">{{ $cnt_fi }}</span>
                            <span class="count-name">ใบเบิกสินค้า (FI)</span>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="{{ route('NotiMaterial') }}">
                        <div class="card-counter " style = "background-color: #ef5350;">
                            <i class="fa fa-industry fa-3x"></i>
                            <span class="count-numbers">{{ $cnt_inwah }}</span>
                            <span class="count-name">รายการวัสดุต่ำกว่าสต๊อกต่ำสุด</span>
                        </div>
                    </a>
                </div>

                <div class="col-md-3">
                    <a href="{{ route('OrderNotEnough') }}">
                        <div class="card-counter " style = "background-color: #50efda;">
                            <i class="fa fa-industry fa-3x"></i>
                            <span class="count-numbers">{{ $cnt_notenough }}</span>
                            <span class="count-name">รายการวัสดุไม่พอต่อการผลิต</span>
                        </div>
                    </a>
                </div>

                <!-- <div class="col-md-3">
                                            <div class="card-counter primary">
                                                    <i class="fa fa-bicycle fa-3x"></i>
                                                    <span class="count-numbers">12</span>
                                                    <span class="count-name">Flowz</span>
                                            </div>
                                    </div>
                                    
                                    <div class="col-md-3">
                                            <div class="card-counter primary">
                                                    <i class="fa fa-bicycle fa-3x"></i>
                                                    <span class="count-numbers">12</span>
                                                    <span class="count-name">Flowz</span>
                                            </div>
                                    </div> -->
            </div>

        </div>
     
        <div class="p-2 border mt-5">
            <h3 class="text-center">รายการเอกสารไม่อนุมัติ</h3>
            <div>
                <table id="myTable" class="display">
                    <thead>
                        <tr>
                            <th>วันที่เอกสาร</th>
                            <th>รหัสเอกสาร</th>
                            <th>สถานะ</th>
                        </tr>
                    </thead>

                    <tbody>
             @foreach ($oList_docNotApprove as $item)
          <tr>
             <td>{{$item->XDGihDocDate}}</td>
             <td>{{$item->XVGihDocNo}}</td>
             <td>{{$item->XVStatus}}</td>
        </tr>
             @endforeach

                    </tbody>

                </table>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $("#myTable").DataTable({
                lengthMenu: [
                    [10, -1],
                    [10, 'All']
                ],
                scrollCollapse: true,
                scrollY: '30vh'
            });

        });
    </script>
@endsection