@extends('layouts.app')
@section('title',Str::title($page->title))
@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">{{ Str::title($page->title) }}</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                            <li class="breadcrumb-item active">{{ Str::title($page->title) }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 text-right mb-3">
                        <div class="card">
                            <div class="card-body">
                                {!! Form::open(['url' => $page->link, 'method' => 'POST','class'=>'form-horizontal','id'=>'filter-form']) !!}
                                <div class="row">
                                    <label class="col-sm-1 px-0 col-form-label">Filter By: </label>
                                    <div class="col-sm-2">
                                        {!! Form::text('keyword', $request->keyword ?? '', ['class' => 'form-control','placeholder'=>'Keyword']) !!}
                                    </div>
                                    <div class="col-sm-2">
                                        {!! Form::select('status',$page->order_status, $request->status ?? '', ['class' => 'form-control','placeholder'=>'Status']) !!}
                                    </div>
                                    <div class="col-sm-2">
                                        {!! Form::text('start_date', $request->start_date ?? '', ['class' => 'form-control date-picker','placeholder'=>'From Date','id'=>'start_date','autocomplete'=>'off']) !!}
                                    </div>
                                    <div class="col-sm-2">
                                        {!! Form::text('end_date', $request->end_date ?? '', ['class' => 'form-control date-picker','placeholder'=>'To Date','id'=>'end_date','autocomplete'=>'off']) !!}
                                    </div>
                                    <div class="col-sm-2">
                                        {!! Form::select('sort',$page->sorts, $request->sort ?? '', ['class' => 'form-control','placeholder'=>'Sort By']) !!}
                                    </div>
                                    {!! Form::hidden('filter', '', ['id'=>'filter']) !!}
                                    <button class="btn btn-danger" id="filter-button"><i class="fas fa-search"></i>
                                    </button>
                                    <ul class="navbar-nav ml-2">
                                        <li class="nav-item dropdown">
                                            <a class="btn btn-dark" data-toggle="dropdown" href="#"
                                               aria-expanded="true">
                                                <i class="fas fa-cog"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right"
                                                 style="left:inherit;right:0">
                                                <span class="dropdown-item dropdown-header">Quick Filter</span>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0)" onclick="changeDates('all')"
                                                   class="dropdown-item">All</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0)" onclick="changeDates('today')"
                                                   class="dropdown-item">Today</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0)" onclick="changeDates('week')"
                                                   class="dropdown-item">This Week (From start this week)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0)" onclick="changeDates('month')"
                                                   class="dropdown-item">This Month (From start this month)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0)" onclick="changeDates('year')"
                                                   class="dropdown-item">This Year (From start this year)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0)" onclick="changeDates('lweek')"
                                                   class="dropdown-item">Week (Last 7 Days)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0)" onclick="changeDates('lmonth')"
                                                   class="dropdown-item">Month (Last 30 Days)</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="javascript:void(0)" onclick="changeDates('lyear')"
                                                   class="dropdown-item">Year (Last 365 Days)</a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                   
                  
                </div>
   
<div class="row">
<div class="col-6">
    <div class="card border-secondary card-secondary card-outline">
        <div class="card-header border-transparent">
            <h3 class="card-title">Shipping methods</h3>
        </div>

    <table class="table m-0 table-striped"><thead><tr><th>Shipping Methods</th><th>Order Count </th></tr></thead>
        <tbody>
 @foreach($orders as $order)
 <tr>
        @if($order->shippingMethod!=null)
    <td>{{$order->shippingMethod->title}}</td>
    <td>{{$order->orders}}</td>
@endif
    <td></td>


</tr>
 @endForeach

          
         </tbody></table>
    </div>
</div>

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

<div class="col-md-12">
    <div class="info-box">
        <span class="info-box-icon bg-primary elevation-1"><i class="fas fa-calendar-day  "></i></span>
        <div class="info-box-content">
            <span class="info-box-text">Same Day Delivery</span>
            <span class="info-box-number loadbar" id="same-day-counter"></span>
        </div>
    </div>
</div>

<div class="col-md-12">
    <div class="info-box">
        <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-arrow-right"></i></span>
        <div class="info-box-content">
            <span class="info-box-text">Next Day Delivery</span>
            <span class="info-box-number loadbar" id="next-day-counter"></span>
        </div>
    </div>
</div>

<div class="col-md-12">
    <div class="info-box">
        <span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-basket"></i></span>
        <div class="info-box-content">
            <span class="info-box-text">Normal Delivery</span>
            <span class="info-box-number loadbar" id="normal-counter"></span>
        </div>
    </div>
</div>


<div class="col-md-12">
    <div class="info-box">
        <span class="info-box-icon bg-cyan elevation-1"><i class="fas fa-envelope  "></i></span>
        <div class="info-box-content">
            <span class="info-box-text">Postage</span>
            <span class="info-box-number loadbar" id="postage-counter"></span>
        </div>
    </div>
</div>



</div>

</div>
                
                <div class="row">
                    <div class="col-12">
                        <div class="card card-danger card-outline">
                            <div class="card-header">
                                <h3 class="card-title">Orders Lists</h3>
                            </div>
                            <div class="card-body p-0 data-table-container">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="table-responsive p-3">
                                            <table class="table table-hover table-striped table-bordered data-tables"
                                                   data-url="{{ $page->link.'/lists' }}" data-form="filter"
                                                   data-length="25">
                                                   <thead>
                                                    <tr>
                                                        <th>Tracking Id</th>
                                                        <th>#Order</th>
                                                        <th>Order Date</th>
                                                        <th>Customer</th>
                                                        <th>Products</th>
                                                        <th>Product Count</th>
                                                        <th>Order Status</th>
                                                        <th>Delivery Address</th>
                                                        <th>Shipping Method</th>
                                                        <th>Customer Email</th>
                                                        <th>Payment Status</th>
                                                        <th>Pay Amount</th>
                                                        <th>Options</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('page-js')
    <script src="{{ asset('plugins/chart.js/Chart.min.js') }}"></script>
    <script src="{{ asset('dist/js/pages/orders.js') }}"></script>
@endpush