@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 table = $('#example').DataTable({
            // "bLengthChange": false,
            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>',
                },
            },
            "lengthMenu": [[5,10,50,100,300,500, -1], [5,10,50,100,300,500, "All"]],
            "ordering":false,
            // columnDefs: [
            //     { width: 200, targets: 2 },
            //     { width: 200, targets: 3 },
            // ],
            fixedColumns: false,
            "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;
            },
        });
        $('.select2').select2();
    });
</script>
@section('content')
<div class="container-fluid">

    <div class="row">
        <div class="col-xl-12">
            <div class="breadcrumb-holder">
			<h5 style="text-align: center">@if(isset($editData) && !empty($editData)) Update Service @else Add New Service @endif</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>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <div class="row">
    	<div class="col-sm-12">
    		<div class="card" style="top: -18px;">
    			<form method="post" action="{{isset($editData) && $editData ? route('drivingRang.service', $editData->id):route('drivingRang.service')}}">
    				@csrf
    				@if(isset($editData) && !empty($editData))
    					@method('PUT')
    				@endif
	    			<div class="card-header">
	    				<h3 class="card-title">@if(isset($editData) && !empty($editData)) Update Service @else New Service @endif</h3>
	    			</div>
	    			<div class="card-body">
	    				<div class="row">
	    					<div class="col-sm-3">
	    						<div class="form-group">
	    							<label>Service</label>
	    							<input type="text" name="service_name" value="{{isset($editData) && !empty($editData)?$editData->service_name:''}}" class="form-control" required="" />
	    						</div>
	    					</div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>Coach Servicing percentage</label>
                                    <input type="text" name="coach_servicing_per" value="{{isset($editData->coach_servicing_per)?$editData->coach_servicing_per:''}}" class="form-control" required="" />
                                </div>
                            </div>
							<div class="form-group col-sm-3">
						<label class="control-label">Service Type</label>
						<select name="service_name_type" id="service_name_type" class="form-control form-control-sm">
							<option value="">Select Service Type</option>
							<option {{ @$editData->service_name_type == 'N'?'selected':'' }} value="N">Normal</option>
							<option {{ @$editData->service_name_type == 'C'?'selected':'' }} value="C">Course</option>
							<option {{ @$editData->service_name_type == 'T'?'selected':'' }} value="T">Training</option>
						</select>
					</div>
	    					<div class="col-sm-3">
	    						<div class="form-group">
	    							<label>Descriptions</label>
	    							<input type="text" name="description" value="{{isset($editData) && !empty($editData)?$editData->description:''}}" class="form-control" />
	    						</div>
	    					</div>
	    				</div>
	    			</div>
	    			<div class="card-footer text-right">
					@if(isset($editData) && !empty($editData))
	    				<button type="sumbit" class="btn btn-primary">Update</button>
					@else
						<button type="sumbit" class="btn btn-primary">Add</button>
					@endif
	    			</div>  				
    			</form>
    		</div>
    		<div class="card" style=" top: -30px; ">
    			<div class="card-header">
    				<h3 class="card-title">Service List</h3>
    			</div>
    			<div class="card-body">
    				<table class="table table-bordered table-sm" id="example" style="width: 100%;">
    					<thead>
    						<tr>
    							<th class="text-center">Serial</th>
    							<th class="text-center">Service Name</th>
								<th class="text-center">Coach Servicing percentage</th>
								<th class="text-center">Servicing Type</th>
    							<th class="text-center">Description</th>
    							<th class="text-center">Action</th>
    						</tr>
    					</thead>
    					<tbody>
    						@foreach($tee_categories as $category)
    						<tr>
    							<td class="text-center">{{$loop->index + 1}}</td>
    							<td>{{$category->service_name}}</td>
								<td>{{$category->coach_servicing_per}}</td>
								<td>{{$category->service_name_type}}</td>
    							<td>{{$category->description}}</td>
    							
    							<td class="text-center">
    								<a href="{{route('drivingRang.service', $category->id)}}" class="btn btn-sm btn-primary" style="margin-right: 8px;"><i class="fa fa-edit"></i></a>
    								<a href="#" class="btn btn-danger btn-sm tee-remove-btn"><i class="fa fa-remove"></i></a>
    								<form style="display: none;" method="post" action="{{route('drivingRang.service', $category->id)}}">
    									@csrf
    									@method('DELETE')
    								</form>
    							</td>
    						</tr>
    						@endforeach
    					</tbody>
    				</table>
    			</div>
    		</div>
    	</div>
    </div>   
    
</div>
@endsection
@section('page_script')
<script type="text/javascript">
	$(function(){								
		$('.tee-remove-btn').on('click', function(e){
			e.preventDefault();
			if(confirm('Are you sure to delete this service.')){
				$(this).closest('td').find('form').submit();
			}
		});			
	});
</script>
@endsection