@extends('layouts.manage')

@section('title', __('manage.top-ten-sales'))

@section('header')
  <a href="{{ route('manage.sales.top') }}" class="{{ Nav::isRoute('manage.sales.top') }}">
    <span class="menu-icon">
      <img src="{{ asset($storage_url.'img/manage-icons/top10.jpg') }}" alt="">
    </span><span class="menu-text">
      @lang('manage.top-10-sales')
    </span>
  </a>
@endsection

@section('content')

  <div class="container-fluid">

		<div class="row">
			
			{{-- search form --}}
			<form action="{{ route('manage.api.top-ten-sales') }}" class="form-horizontal form-search dt-form-search" method="post" data-table-selector=".dt-initiate">
				{{ csrf_field() }}
				{{ method_field('post') }}
				
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 m-b-10">
            <div class="input-group date" data-provide="datepicker">
				    	<input type="text" 
				    		class="form-control datepicker onChangeSubmit" name="from" 
				    		placeholder="@lang('manage.from')" value="">
					    <div class="input-group-addon">
				        <span class="glyphicon glyphicon-th"></span>
					    </div>
					</div>
				</div>
				
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 m-b-10">
          <div class="input-group date" data-provide="datepicker">
			    <input type="text" 
			    	class="form-control datepicker onChangeSubmit" name="to" 
			    	placeholder="@lang('manage.to')" value="">
				    <div class="input-group-addon">
			        <span class="glyphicon glyphicon-th"></span>
				    </div>
					</div>
				</div>

				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 m-b-10">
					<label class="radio-inline">
          	<input type="radio" name="by" class="onChangeSubmit" value="quantity">@lang('manage.quantity')
          </label> 
					<label class="radio-inline">
          	<input type="radio" name="by" class="onChangeSubmit" value="margin">@lang('manage.margin')
          </label> 
					<label class="radio-inline">
          	<input type="radio" name="by" class="onChangeSubmit" value="income">@lang('manage.income')
          </label>
				</div>

			</form>
			{{-- /. search form --}}

  		<div class="col-xs-12">
					
					{{-- table --}}
					<div class="table-responsive">

	    			<table class="table table-hover dt-initiate" data-url="{{ route('manage.api.top-ten-sales') }}">
					    <thead>
						    <tr>
						    	<th data-column="DT_Row_Index" data-search="false">#</th>
						    	<th data-column="category">@lang('manage.category')</th>
						    	<th data-column="name">@lang('manage.name')</th>
						    	<th data-column="weight">@lang('manage.weight')</th>
						    	<th data-column="quantity_sold">@lang('manage.quantity-sold')</th>
						    	<th data-column="price">@lang('manage.price')</th>
						    	<th data-column="income">@lang('manage.income')</th>
						    	<th data-column="global_margin">@lang('manage.global-margin')</th>
					        <th data-column="action" data-order="false" data-search="false" style="min-width: 65px;">@lang('manage.action')</th>
						    </tr>
					    </thead>
					    <tbody>
					    	<tr></tr>
					    </tbody>
						</table>
												
	    			</div>
	    		{{-- /. table --}}

			</div>
		</div>

	</div>					
@endsection

