@extends('backend.layouts.app')
<style>
    table thead tr th{
        font-size:11px;
    }
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
    $('document').ready(function(){
        var stateStatus = '';
        if(localStorage.getItem('pageCounter')){
            localStorage.setItem('pageCounter',$(this).text())
            console.log(localStorage.getItem('pageCounter'));
            stateStatus = true;
        }else{
            stateStatus = false;
        }
        var table = $('#example').DataTable({
            language: {
                "lengthMenu": "Display _MENU_ Records",
                'paginate': {
                    'previous': '<span> <i class="fa fa-arrow-circle-left" style=" font-size: 18px; " aria-hidden="true"></i></span>',
                    'next': '<span><i class="fa fa-arrow-circle-right" style=" font-size: 18px; " aria-hidden="true"></i></span>',
                },
            },
            'bStateSave'  : false,
            "lengthMenu": [[5,10,20,50,100,300,500, -1], [5,10,20,50,100,300,500, "All"]],
            'paging'      : true,
            'searching'   : true,
            'ordering'    : false,
            'info'        : true,
            'autoWidth'   : false,
            'bStateSave'  : stateStatus,
            'saveState'   : stateStatus,
                
            initComplete: function () {
                this.api().columns([1,3,2,4]).every(function () {
                    var column = this;
                    var select = $('<select class="form-control select2"><option value="">Search</option></select>')
                        .appendTo($(column.header()).empty()).on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());
                            column.search(val ? '^' + val + '$' : '', true, false).draw();
                        });
                    column.data().unique().sort().each(function (d, j) {
                        select.append('<option value="' + d + '">' + d + '</option>');
                    });
                });
            },
            "infoCallback": function( settings, start, end, max, total, pre ) {
                var api = this.api();
                var pageInfo = api.page.info();
                var htmlView = '<strong>Total Records: '+total+'</strong>'
                return htmlView;
            },
            "footerCallback": function ( row, data, start, end, display ) {
                var api = this.api(), data;
                // Remove the formatting to get integer data for summation
                var intVal = function ( i ) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '')*1 :
                        typeof i === 'number' ?
                            i : 0;
                };
            },
            "drawCallback": function(){
                $('.paginate_button .page-item a', this.api().table().container())          
                    .on('click', function(){
                        localStorage.setItem('pageCounter',$(this).text());
                        console.log(localStorage.setItem('pageCounter',$(this).text()));
                    });       
            },
        });
        $('.select2').select2();
    });
</script>
@section('content')
<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h5 style="text-align: center"> Registered List </h5>
		 <a href="{{route('drivingrange.add')}}" class="btn btn-success" style="color: #000000; border: 1px solid #eee; margin: 0px auto;"  >
            <i class="fa fa-home" aria-hidden="true" style="font-size: 20px; "></i>
            {{-- <img src="{{ url('public/backend/images/icons/admission.png') }}" style="width: 20px"> --}}
                Driving Dashboard
        </a>
		
		<br>
	
		<div class="clearfix"></div>
	</div>
</div>
<div class="container-fluid" >
	<div class="row">
		<div class="col-xl-12">
			<form method="get">
				<div class="card">
					<div class="card-body">	
                        <form action="{{ route('category-wise') }}" method="get">
                            <div class="row justify-content-center daily-filter">
                                <label class="col-sm-1 control-label text-right">Start Date</label>
                                    <div class="col-sm-3 text-center">								
                                        <input type="text" name="date_from" class="datepickerjui text-center form-control" value="{{$date_from}}" autocomplete="off" required="" id="date_from"/>
                                    </div>
                                <label class="col-sm-1 control-label text-right">End Date</label>
                                    <div class="col-sm-3 text-center">
                                        <input type="text" name="date_to" class="datepickerjui text-center form-control" value="{{$date_to}}" autocomplete="off" required="" id="date_to" />
                                    </div>
                                <div class="col-sm-1 " style="display: inline-flex;">							
                                    <button type="submit" class="btn btn-info"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </form>
					</div>
				</div>
			</form>
		</div>
        <div class="card-body" style="background: white;">	
            <div class="row">
                <div class="col-xl-12 table-show">	
                    <table class="table table-striped table-bordered" id="example" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>SL</th>
                                <th>Recipt No</th>
                                <th>Date</th>
                                <th>Membership No</th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Price</th>
                                <th>Action</th>
                            </tr>
                            <tr>
                                <th>SL</th>
                                <th>Recipt No</th>
                                <th>Date</th>
                                <th>Membership No</th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Price</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(sizeof($model) > 0)
                            @foreach($model as $m)
                                <tr>
                                    <td>{{ ++$sl }}</td>
                                    <td>{{ sprintf('%05d', $m->id) }}</td>
                                    <td>{{ date("d-m-Y", strtotime($m->created_at)) }}</td>
                                    <td>{{ App\Drivingrangeservice::getMemberShipId($m->id)['name'] }}</td>
                                    <td>{{ App\Drivingrangeservice::getMemberWiseNameDetails($m->id)['name'] }}</td>
                                    <td>{{ $m->player_type }}</td>
                                    <td>{{ DB::table('driving_info_details')->where('driving_info_id',$m->id)->get()->sum('total_price') }}</td>
                                    <td>
                                        <a target="_blank" href="{{ route('print.recipt',$m->id) }}" type="button" id="categoryPrint" class="btn btn-info" title="Print Recipt"><i class="fa fa-print"></i></a>
                                        <a class="btn btn-danger" data-toggle="modal" data-target="#edit" data-target-id = "{{$m->id}}"   
                                            >
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>			
        </div>
	</div>
</div>
<div class="modal fade" id="edit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Records</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
            </div>
            <form id="editForm" action="{{ route('drivingRangeDeleteRecord') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                <input type="hidden" name="id" id="id">
                    <div class="box-body">
                        <div class="form-group">
                            <label>Reason<span style="color:red";>*</span> </label>
                            <textarea type="text" row="6" class="form-control" value="" name="reason" id="reason"  placeholder="Reason" autocomplete="" required></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<style type="text/css">
	table th, table td {
		font-size: 12px;
	}
</style>
@endsection
@section('page_script')
<script>
    $('document').ready(function(){
        $('#categoryPrint').click(function(){
            // alert("hi");
            $('#print_shift').val( $('#shift').val() );
            $('#print_date_from').val( $('#date_from').val() );
            $('#print_date_to').val( $('#date_to').val() );
            $('#categoryPrintForm').submit();
        });
        $("#edit").on("show.bs.modal", function(e) { 
            var id = $(e.relatedTarget).data('target-id');            
            $('.modal-body #id').val(id); 
        });
    });
</script>
@endsection