@extends('layouts.backend-app')
@section('content')
<div class="page-body">
    <div class="container-fluid">        
        <div class="page-title">
            <div class="row">
                <div class="col-6">
                    <h3>Book Request</h3>
                </div>
                <div class="col-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="dashboard.html"> <i data-feather="home"></i></a></li>
                        <li class="breadcrumb-item">Dashboard</li>
                        <li class="breadcrumb-item active">Book Request </li>
                    </ol>
                </div>
            </div>
        </div>        
    </div>
    <!-- Container-fluid starts-->
    <div class="container-fluid">
        <div class="row">
            <!-- Zero Configuration  Starts-->
            <div class="col-sm-12">
                <div class="card">
                    <form id="request_form" name="request_form" class="theme-form" method="post" action="{{url('/request')}}">
                        @csrf
                        <div class="card-body"> 
                            <div class="three mt-4">
                                <h2>Contact Information</h2>
                            </div>   
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="col-form-label">First name</label>
                                    <input class="form-control" type="text" name="name" value="{{$user->name}}" id="name" required placeholder="First name">
                                </div>
                                <div class="col-md-3">
                                    <label class="col-form-label">Last name</label>
                                    <input class="form-control" type="text" name="last_name" value="{{$user->last_name}}" id="last_name" placeholder="Last name">
                                </div>
                                <div class="col-md-3">
                                    <label class="col-form-label">Phone Number</label>
                                    <input class="form-control" type="text" name="phone" id="phone" value="{{$user->phone}}" required placeholder="123456789">
                                </div>
                                <div class="col-md-3">
                                    <label class="col-form-label">Email Address</label>
                                    <input class="form-control" type="email" name="email" id="email" value="{{$user->email}}" required placeholder="Test@gmail.com">
                                </div>
                                <div class="col-md-6">
                                    <label class="col-form-label">Address</label>
                                    <input class="form-control" name="address" id="address" value="{{$user->address}}" type="text" required placeholder="Address">
                                </div>
                                <div class="col-md-3">
                                    <label class="col-form-label">City</label>
                                    <input class="form-control" id="city" name="city" type="text" value="{{$user->city}}" required placeholder="City">
                                </div>
                                <div class="col-md-3">
                                    <label class="col-form-label">State</label>
                                    <input class="form-control" type="text" name="state" id="state" value="{{$user->state}}" required placeholder="State">
                                </div>
                                <div class="col-md-3">
                                    <label class="col-form-label">Country</label>
                                    <input class="form-control" type="text" id="country" name="country" value="{{$user->country}}" required placeholder="Country">
                                </div>
                                <div class="col-md-3">
                                    <label class="col-form-label">Postal Code</label>
                                    <input class="form-control" type="text" id="postal_code" value="{{$user->postal_code}}" required name="postal_code" placeholder="Postal Code">
                                </div>            
                            </div>
                        </div>
                        <div class="card-header d-flex" style="padding: 40px;">
                            <h5 class="mb-0" id="test_type_title">Soil/Sediments </h5>
                            <div class="card-header-right">
                                <div class="d-inline-flex align-items-center">                            
                                    <select class="form-select mb-0" id="test_type" name="test_type" required onchange="getTestParameter(this.value);">
                                        @if(count($test_types))
                                            @foreach($test_types as $k=> $test_type)
                                                <option value="{{$test_type->id}}" @if($k==0) selected @endif>{{$test_type->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="card-body pt-2">                  
                            <div class="col-lg-4"></div>
                            <div class="table-responsive">
                                <table class="table table-striped" id="test_paramter_table">
                                    <thead class="table-light">
                                    <tr>
                                        <th></th>
                                        <th>Parameters</th>
                                        <th>IS Part Number</th>
                                        <th>Others</th>  
                                        <th>Price</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-body pt-1"> 
                            <div class="three mt-4">
                                <h2>Book Request</h2>
                            </div>   
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="form-label" for="collection_date">Date:</label>
                                    <div class="input-group">
                                        <input name="collection_date" id="collection_date" class=" form-control" value="{{date('d-m-Y')}}" type="text" data-language='en' aria-label="Recipient's username"><span class="input-group-text"><i class="icofont icofont-ui-calendar"> </i></span>
                                    </div>                      
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label" for="collection_time">Time :</label>
                                    <div class="input-group clockpicker">
                                        <input class="form-control" name="collection_time" id="collection_time" type="text" value="09:30"><span class="input-group-text"><i class="icofont icofont-ui-clock"> </i></span>
                                    </div>                        
                                </div>                        
                                
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button class="btn btn-primary  me-2" id="savebtn" type="submit" data-bs-original-title="" title="">Submit</button>
                            <input class="btn btn-light" type="reset" value="Cancel" data-bs-original-title="" title="">
                        </div>
                    </form>
                </div>
            </div>        
        </div>
    </div>
        <!-- Container-fluid Ends-->
</div>
@endsection
@push('javascript')
<script src="{{asset('backend-assets/js/validation/jquery.validate.min.js')}}" type="text/javascript"></script>
<script src="{{asset('backend-assets/js/validation/additional-methods.min.js')}}" type="text/javascript"></script>
<script src="{{asset('backend-assets/plugins/iziToast/iziToast.min.js')}}" type="text/javascript"></script>
<script>
(function ($) {
    getTestParameter(1);
	 var start = new Date();
	$('#collection_date').datepicker({
		language: 'en',
        minDate: 0,
		startDate: new Date(),
		dateFormat: 'dd-mm-yyyy'
	});
})(jQuery);

function getTestParameter(id) {
	const para_ids=[];	
	getTestParamterData(id, para_ids);
}
function getTestParameterByParameter() {
	const para_ids = [];
	$('input[name="parameter_ids[]"]:checked').each(function(){
        para_ids.push($(this).val());
    });	
	var id = $('#test_type').val();
	getTestParamterData(id, para_ids);
}

function getTestParamterData(id, para_ids) {
    $('#test_type_title').html($("#test_type option:selected" ).text());
	$.ajax({		
		url: "{{ url('request-paramter') }}",
		data: {id:id, paramter_ids:para_ids, _token: '{{csrf_token()}}'},
		type: "POST",		
		success: function (response) {
			$('#test_paramter_table tbody').html(response);
		},
		error: function (data) {
			console.log('Error:', data);
		}
	});

}

$(document).on('click','#savebtn',function (e) {
	var formId = "#request_form";
	var thizSelector = $(this);
	// $(this).html('Sending..');
	$("form"+formId).validate({
		errorElement: "label",
		rules: {
			name:{required:true},
            phone:{required:true},
			email:{required:true},			
			address:{required:true},
            city:{required:true},
            state:{required:true},
            country:{required:true},
            postal_code:{required:true},
            test_type:{required:true},
            collection_date:{required:true},
            collection_time:{required:true},			
		},
		messages: {
			name:{required:"Please enter user first name"},
            phone:{required:"Please enter phone number"},
			email:{required:"Please enter email"},
            address:{required:"Please enter address"},
            city:{required:"Please enter city"},
            state:{required:"Please enter state"},			
			country:{required:"Please enter country"},
			postal_code : {required: "Please enter postal code"},
			test_type : {required: "Please select test type"},
            collection_date : {required: "Please select collection date"},
            collection_time : {required: "Please select collection time"}			
		}

	});
});

</script>
@endpush