@extends('admin.layout.app')
@section('content')
<style type="text/css">
    .small-box-footer{
            color: #55b350 !important;
    background: none !important;
    }
    .icon i{
           color: #ee3a3a;
           font-size: 50px !important;
    }
   
    .small-box>.inner {
        padding: 10px;
        height: 100px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px
    }
    .info-box{
        color: #000 !important;
    }
    .float-rights{
        color: #fff;
        padding-left: 19px;
        padding-top: 0px;
        font-size: 21px;
        position: absolute;
    }
    .progress-sm {
        height: 30px;
    }
    .progress-group{
        margin-bottom: 0px;
    }
    .col-md-12.row {
        margin-bottom: 6px;
    }
    .progress{
        background: #aaadaf;
    }
    .bg-success {
        background-color: #ee3a3a!important;
    }
    .bg-primary {
        background-color: #111111 !important;
    }
</style>

        <div class="content-wrapper">
            <div class="content-header">
                <div class="container">
                    <div class="row mb-2">
                        <div class="col-sm-10">
                            <h1 class="m-0">Sales Graph</h1>
                        </div>

                      
                        <div class="col-sm-2">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="{{url('admin/dashboard')}}"><i class="fas fa-home"></i></a>
                                </li>
                                <li class="breadcrumb-item active">Sales Graph</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>   

            <section class="content">
                <div class="">
                    <div class="row card">
                        <p class="text-center">
                            <strong>Sales Chart</strong>
                        </p>
                        <div class="col-md-12 row mb-3">  
                            <div class="col-md-4">
                                <label>Filter By</label>
                                <select class="form-control" onchange="showDateRange()" id="filter_by">
                                    <option value="">All</option>
                                    <option value="1">Today</option>
                                    <option value="2">Yesterday</option>
                                    <option value="5">Custom Date</option>
                                </select>
                            </div>
                            <div class="col-md-3 custom_section">
                                <label>From</label>
                                <input type="date" name="custom_date_from" id="custom_date_from" class="form-control">
                            </div>
                            <div class="col-md-3 custom_section">
                                <label>To</label>
                                <input type="date" name="custom_date_to" id="custom_date_to" class="form-control">
                            </div>
                            <div class="col-md-2 custom_section">
                                <label style="width: 80%;"></label>
                               <button type="button" class="btn btn-primary" onClick="showDateRange()">Search</button>
                            </div>
                            <div class="col-md-4">
                                <label>Sort By</label>
                                <select class="form-control" onchange="showDateRange()" id="sort_by">
                                    <option value="1">Business (A to Z)</option>
                                    <option value="2">Order Amount (High to Low)</option>
                                    <option value="3">Order Amount (Low to High)</option>
                                    <option value="4">Order Count (High to Low)</option>
                                    <option value="5">Order Count (Low to High)</option>
                                </select>
                            </div>
                        </div>

                        <div id="datsats">
                           
                        </div>
                        <div id="start_data">
                            @foreach($all_business_list as $all_business_lists)
                            
                            @php
                                $total_orders = \DB::table('orders')->where('restaurant',$all_business_lists->reference_market_id)->where('status','!=','6')->count();
                                $total_orders_done = \DB::table('orders')->where('restaurant',$all_business_lists->reference_market_id)->where('status','5')->count();

                                $total_orders_amount = \DB::table('orders')->where('restaurant',$all_business_lists->reference_market_id)->where('status','!=','6')->sum('total');
                                $total_orders_done_amount = \DB::table('orders')->where('restaurant',$all_business_lists->reference_market_id)->where('status','5')->sum('total');

                            @endphp

                            <div class="col-md-12 row">  
                                <div class="col-md-3" style="padding: 21px 0px;">
                                    <strong>{{@$all_business_lists->name}}</strong>
                                </div>
                                <div class="col-md-9">
                                    <div class="progress-group">
                                        <!-- Total Complete Order -->
                                        <span class="float-rights"><b>{{$total_orders_done}}</b>/{{$total_orders}}</span>
                                        <div class="progress progress-sm">
                                        @if($total_orders ==0)
                                        <div class="progress-bar bg-primary" style="width: 0%"></div>
                                        </div>
                                        @else
                                        <div class="progress-bar bg-primary" style="width: {{($total_orders_done/$total_orders)*100}}%"></div>
                                        </div>
                                        @endif
                                        
                                    </div>
                                    <div class="progress-group">
                                        <!-- <span class="progress-text">Total Earning</span> -->
                                        <span class="float-rights"><b>${{$total_orders_done_amount}}</b>/${{$total_orders_amount}}</span>
                                        <div class="progress progress-sm">
                                        @if($total_orders_amount ==0)
                                        <div class="progress-bar bg-success" style="width: 0%"></div>
                                        </div>
                                        @else
                                        <div class="progress-bar bg-success" style="width: {{($total_orders_done_amount/$total_orders_amount)*100}}%"></div>
                                        </div>
                                        @endif
                                    </div>
                                </div>  
                            </div>
                            @endforeach
                        </div>
                    </div>
                       
                    </div>

                   
                    
                </div>
            </section>   



        </div>

        <!-- new section -->

@endsection