@extends('layouts.frontend')

@section('title')
تقرير التخصصات
@endsection

 @section('vendor_css')
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/datatables/datatables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/forms/selects/select2.min.css') }}">
 
@endsection
 
@section('custom_css')
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/forms/selects/select2.rtl.css') }}">
@endsection

@section('content')  
<div class="row mt-5  small_width page_header">
	<div class="col-12 col-md-12 col-lg-12">
		<h2 class="title mr-2">تقرير التخصصات</h2>   
  </div>
</div> 


<div class="row mt-3   small_width">
	<div class="col-12 col-md-12 col-lg-12">
 		<div class="card pl-1 pr-1 pt-2 pb-2 "> 
      <div class="card-body">    
        <div class="card-block">
        	<form action="{{ url(route('supervisor-specialties-report')) }}" method="get">
	        	<div class="row mb-4">
	        		<div class="col-6 col-md-6 col-lg-6">
	        			<label>من تاريخ:</label>
	        			<input size="16" name="from_date" type="text" value="{{ request('from_date') ?? date('Y-m-d') }}" readonly class="form_datetime p-2 rounded border pickadate-dropdown form-control"  required="" >
	        		</div>
	        		<div class="col-6 col-md-6 col-lg-6">
	        			<label>الى تاريخ:</label>
	        			<input size="16" name="to_date" type="text" value="{{ request('to_date') ?? date('Y-m-d') }}" readonly class="form_datetime p-2 rounded border pickadate-dropdown form-control"  required="" >
	        		</div>
	        	</div>  
 
	        	<div class="row">
	        		<div class="col-6 col-md-6 col-lg-6">
	        			<button type="submit" class="btn btn-primary w-100" name="">عرض</button> 
	        			<input type="hidden" name="" value="1">
	        		</div> 
	        	</div>  
        	</form>
        </div>
      </div>
    </div>
	</div> 
</div>


<div class="row mt-3 ">
	<div class="col-12 col-md-12 col-lg-12">
 		<div class="card pl-1 pr-1 pt-2 pb-2 "> 
      <div class="card-body">    
        <div class="card text-white bg-secondary  mb-3">
          <div class="card-header" style="font-family: 'Cairo' !important;">إجمالي الحالات : <span><strong>{{ number_format($data->sum('sessions')) }}</strong></span> حالة</div>
        </div>
        <div class="card-block"> 
        	<!-- <a class="btn btn-success mb-3" href="{{url(route('supervisor-daily-report-export'))}}">تصدير اكسل</a> -->
          	<table class="table table-striped datatable">
                  <thead>
                      <tr>
                        <th>التخصص</th>
                        <th>عدد الحالات</th> 
                      </tr>
                  </thead>
                  <tbody>  
                      @foreach ($data as $value)
                          <tr>
                            <td>{{ $value->name }}</td>
                            <td><strong>{{ $value->sessions }}</strong></td>
                          </tr>
                      @endforeach
                  </tbody>   
          </table>
        </div>
      </div>
    </div>
	</div> 
</div>


@endsection
 

@section('page_vendor_js') 
    <script src="{{ URL('/temp_frontend/app-assets/vendors/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js') }} " type="text/javascript"></script>
 <script src="{{ URL('/temp_frontend/app-assets/vendors/js/datatables/datatables.min.js') }} " type="text/javascript"></script>
@endsection

@section('page_level_js') 
<script src="{{ URL('/temp_frontend/app-assets/js/scripts/forms/select/form-select2.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    $('.datatable').DataTable({
    	"order": [[ 0, "desc" ]],
    	"lengthMenu": [[ 25, 50,100, -1], [ 25, 50,100, "الكل"]]
    });


  var date = new Date();
  date.setDate(date.getDate()); 
  $(".form_datetime").datetimepicker({
      format: 'yyyy-mm-dd',
      autoclose: true,
      orientation: "auto",
    endDate: date,
         minView: 2,
         bootcssVer:4,
    clearBtn: false
  });
  </script>
@endsection