@extends('db::layouts.app')

@section('head')

<!-- Prism -->
<link rel="stylesheet" href="{{ url('vendors/prism/prism.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url('vendors/datepicker/daterangepicker.css') }}">

<style>
    table {
        border: 1px solid #666;
        table-layout: fixed;
        width: 180px;
    }

    th,
    td {
        border: 1px solid #666;
        width: 90px;
        overflow: hidden;
    }

    .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
        transition: 0.3s;
    }

    .card-body .rotate {
        z-index: 8;
        float: right;
        height: 100%;
    }

    .card-body .rotate i {
        color: rgba(20, 20, 20, 0.15);
        position: absolute;
        left: 0;
        left: auto;
        right: 10px;
        bottom: 0;
        display: block;
        -webkit-transform: rotate(-44deg);
        -moz-transform: rotate(-44deg);
        -o-transform: rotate(-44deg);
        -ms-transform: rotate(-44deg);
        transform: rotate(-44deg);
    }



    /* .card .read-more:hover {
            font-size: 14px;
        } */

    .card:hover {
        /* box-shadow: 8px 8px 8px blue; */
        transform: scale(1.1);
        cursor: pointer;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
</style>


<script>
    var uid = "{{ Auth::user()->id }}";
    var userRoleID = "{{ Auth::user()->user_role_id }}";
    var userName = "{{ Auth::user()->name }}";
    var permission = "{{ Auth::user()->can('employee') }}";
</script>

@endsection

@section('content')

<div class="container">

    <div class="row my-3">
        <div class="col-md-1"></div>


        <div class="col-md-12">

            <div class="row">


                <div class="col-md-3">
                    <div class="card bg-primary">
                        <div class="card-header">USA Office Orders</div>
                        <div class="card-body">
                            <h2 id="h_usa_today">Today</h2>
                            <p class="card-text"></p>
                        </div>
                    </div>
                </div>





                <div class="col-md-3">
                    <div class="card bg-primary">
                        <div class="card-header">USA Office Orders</div>
                        <div class="card-body">
                            <h2 id="h_usa_month">This Month</h2>
                            <p class="card-text"></p>
                        </div>
                    </div>
                </div>





                <div class="col-md-3">
                    <div class="card" style="background-color: yellow;">
                        <div class="card-header">Local Orders</div>
                        <div class="card-body">
                            <h2 id="h_local_today">Today</h2>
                            <p class="card-text"></p>
                        </div>
                    </div>
                </div>




                <div class="col-md-3">
                    <div class="card" style="background-color: yellow;">
                        <div class="card-header">Local Orders</div>
                        <div class="card-body">
                            <h2 id="h_local_month">This Month</h2>
                            <p class="card-text"></p>
                        </div>
                    </div>
                </div>


            </div>
        </div>


        <div class="col-md-1"></div>

    </div>







    <div class="row my-3">
        <div class="col-md-1"></div>


        <div class="col-md-12">

            <div class="row">


                <div class="col-md-3">
                    <div class="card bg-success">
                        <div class="card-header">Orders (All)</div>
                        <div class="card-body">
                            <h2 id="h_new_status">New : 0</h2>
                            <p class="card-text"></p>
                        </div>
                    </div>
                </div>




                <div class="col-md-3">
                    <div class="card bg-success">
                        <div class="card-header">Orders (All)</div>
                        <div class="card-body">
                            <h2 id="h_accept_status">Accepted : 0</h2>
                            <p class="card-text"></p>
                        </div>
                    </div>
                </div>





                <div class="col-md-3">
                    <div class="card bg-danger">
                        <div class="card-header">Production (This Month)</div>
                        <div class="card-body">
                            <h2 id="h_plan_status">Planned : 0</h2>
                            <p class="card-text"></p>
                        </div>
                    </div>
                </div>




                <div class="col-md-3">
                    <div class="card bg-danger">
                        <div class="card-header">Production (This Month)</div>
                        <div class="card-body">
                            <h2 id="h_schedule_status">Scheduled : 0</h2>
                            <p class="card-text"></p>
                        </div>
                    </div>
                </div>


            </div>
        </div>


        <div class="col-md-1"></div>

    </div>

    <hr>
    <br>
    <div class="row">
        <div class="col-md-2 mb-3">
            <i class="fa fa-calendar text-info" aria-hidden="true"></i>
            <lable>Date</lable>
            <input id="txtDate" name="txtDate" class="form-control" type="text">
        </div>
    </div>
    <div class="row">

        <div class="col-md-12 mb-3">
            <h4>Production Scheduled</h4>
            <div class="table-responsive">
                <table id="myTable" class="table table-bordered table-striped table-responsive-stack">
                    <thead class="thead-dark">
                        <tr>
                            <th style="max-width:100px;">Customer Order No</th>
                            <th style="max-width:100px;min-width:100px;">Factory Order No</th>
                            <th>Customer Name</th>
                            <th>Product Name</th>
                            <th style="max-width:100px;">Ordered Quantity</th>
                            <th style="max-width:100px;">Produced Quantity</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <hr>

    <div class="row">
        <div class="col-md-12 mb-3">
            <h4>Production Ongoing</h4>
            <div class="table-responsive">
                <table id="tableOngoing" class="table table-bordered table-striped table-responsive-stack">
                    <thead class="thead-dark">
                        <tr>
                            <th style="max-width:100px;">Customer Order No</th>
                            <th style="max-width:100px;min-width:100px;">Factory Order No</th>
                            <th>Customer Name</th>
                            <th>Product Name</th>
                            <th style="max-width:100px;">Ordered Quantity</th>
                            <th style="max-width:100px;">Produced Quantity</th>
                            <th style="max-width:100px;">Today Quantity</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>





</div>




@endsection

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('script')
<!-- DataTable -->

<!-- Prism -->
<script src="{{ url('vendors/prism/prism.js') }}"></script>
<script src="{{ url('vendors/datepicker/daterangepicker.js') }}"></script>
<script src="{{ Module::asset('db:js/svr.js') }}?random=67da1598811dc"></script>
<script src="{{ Module::asset('db:js/dashboard.js') }}?random=67da1598811df"></script>
@endsection