@extends('layouts.admin_template')
@section('content')
<!-- container Start -->
<div class="container-fluid px-3 px-xxl-5">
	<div class="titel-head pb-4">
        <h1>Lot Report</h1>
	</div>

    <div class="row g-4 g-xxl-5 d-flex align-items-stretch">
        <div class="col-6 col-md-4 col-lg-3 col-xxl-2 mb-4">
			<div class="bg-dark rounded-3 p-2 text-center">
				<div class="image-part p-4">
					<div class="h1 mb-0">{{$totoallot}}</div>
					<p class="text-muted">Total Lot</p>
				</div>
			</div>
		</div>        
	</div>

	<div class="row">
		<div class="col-md-12">
			<form class="select2black" method="GET" action="{{ url('/admin/report/lotreport') }}">
				<div class="row">					
					<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
						<div class="form-group mb-3">
							<label><strong>@lang('translate.from') :</strong></label>
							<input name="fromdate" type="text" class="form-control form-control-lg bg-dark" id="fromdate" value="{{$fromdate}}">
						</div>
					</div>
					<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
						<div class="form-group mb-3">
							<label><strong>@lang('translate.to') :</strong></label>
							<input name="todate" type="text" class="form-control form-control-lg bg-dark" id="todate" value="{{$todate}}">
						</div>
					</div>
					<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
						<div class="form-group mb-3" style="padding-top:20px;">
							<button type="submit" class="btn btn-sm btn-primary">@lang('translate.submit')</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	
	<div class="row mb-2">
		<div class="col-sm-12 col-md-6">
			<div class=" bg-dark rounded-3 p-3 borderbx mb-4">
				<div class="managementtitle mb-4">
					<h4>Symbol Wise Lots</h4>
				</div>
				<div class="chart">
					<canvas id="CountryWiseChart" style="height:300px"></canvas>
				</div>
			</div>
		</div>
		 
    </div>
	
    <div class="bg-dark pb-4 rounded-3 box-shadow">
        <div class="table-responsive-lg table-p15">
            <table id="level1listing" class="table table-dark table-striped mb-0 text-center table-hover">
                <thead>
                    <tr>
                        <th>@lang('translate.login')</th>
                        <th>@lang('translate.date')</th>
                        <th>@lang('translate.ticket')</th>
                        <th>@lang('translate.symbol')</th>
                        <th>@lang('translate.price')</th>
                        <th>@lang('translate.profit')</th>
                        <th>@lang('translate.volume')</th>                                                              
                        <th>@lang('translate.action')</th>
                        
                    </tr>
                </thead>
                <tbody>                                                         
                    @foreach($totoallotreport as $depositdata)							
                    <tr>
                        <td>{{ $depositdata->Login }}</td>
                        <td>{{ $depositdata->Date }}</td>
                        <td>{{ $depositdata->Order }}</td>
                        <td>{{ $depositdata->Symbol }}</td>
                        <td>{{ $depositdata->Price }}</td>
                        <td>{{ $depositdata->Profit }}</td>
                        <td>{{ $depositdata->Volume }}</td>                                                                        
                        <td class="depostst">@if($depositdata->Action == '0') Buy @elseif($depositdata->Action == '1') Sell @elseif($depositdata->Action == '2') Balance @elseif($depositdata->Action == '3') Credit @endif</td>                                             				
                    </tr>							
                    @endforeach                                        
                </tbody>
            </table>           
        </div>	
</div>


<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script type="text/javascript">
$(function () {
	$("#fromdate").datepicker({ 
		minDate: $("#fromdate").value,
		dateFormat: 'yy-mm-dd',
		changeYear:true,
		onSelect: function (date) {
			$("#todate").datepicker('option', 'minDate', date);
		}
	});
	$("#todate").datepicker({
		maxDate: $("#todate").value,
		dateFormat: 'yy-mm-dd',
		changeYear:true,
		onSelect: function (date) {
			$("#fromdate").datepicker('option', 'maxDate', date);
		}
	});
	
	let data = {!! json_encode($depositchart) !!}
	colors = [];
	for (let i = 0; i < data.length; i++) {
		colors.push('#' + Math.floor(Math.random() * 16777215).toString(16));
	}
	let ctx = document.querySelector("#CountryWiseChart").getContext('2d');
	let myChart = new Chart(ctx, {
		type: 'pie',
		data: {
			labels: data.map((el) => `${el.Symbol}(${el.total_deposit.toFixed(2)})`),
			datasets: [{
				label: "Symbol Wise Lot",
				data: data.map(el => el.total_deposit),
				fill: false,
				backgroundColor: [
					'#f37b4c',
					'#bed4fb',
					'#4CAF50',
					'#b62925',
					'#13456c',
					'#c59dbd',
					'#666666',
					'#7ca40a',                            
					...colors
				],
				borderColor: ['#111116'],
				borderWidth: 1,
				pointRadius: 5,
				pointHoverRadius: 8
			}]
		},
		options: {
			aspectRatio: 1,
			responsive: true,
			maintainAspectRatio: false
		}
	})
	
	  
});

</script>
@endsection