@extends('adminlte::page')

@section('title', 'Create Checkout Link')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<input type="hidden" value="{{ URL::to('/') }}" id="urlBase" /> 
    <div class="card-header with-border">
        <h3 class="box-title">Create Checkout Link</h3>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card box-primary">
                <form>
									<div class="card-body">
										<div class="col-md-6">
											<div class="form-group">
													<label>No. of Applicants</label>
													<input type="number" id="num_applicant" class="form-control" name="num_applicant" min="1" max="5" value="1">
											</div>
										</div>
										<div id="applicants-wrapper" class="row">
											<div class="applicant-block row col-md-12" data-index="1">
													<div class="form-group col-6">
															<label for="service_1">Service</label>
															<select id="service_1" name="service_id[]" class="select2 form-control" required>
																	<option value="">-- Select Service --</option>
																	@foreach($services as $service)
																			<option value="{{ $service->id }}">
																					{{ $service->title }} @if(isset($service->category->category_title))({{ $service->category->category_title }}) @endif
																			</option>
																	@endforeach
															</select>
													</div>
													<div class="form-group col-6">
															<label>Name</label>
															<input type="text" id="name_1" class="form-control" name="name[]" placeholder="name" required>
													</div>
											</div>
										</div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>email</label>
                            <input type="email" id="email" class="form-control" name="email" placeholder="test@mail.com" required>
                          </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Mobile No.</label>
                            <input type="text" id="mob_no" class="form-control" name="mob_no" placeholder="mobile number" required>
                          </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Currency</label>
                            <select class="form-control" id="pay_currency" name="pay_currency">
                              <option value="USD">USD</option>  
                              <option value="GBP">GBP</option>
                              <option value="INR">INR</option>   
                              <option value="AED">AED</option>   
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Amount</label>
                            <input type="text" id="amount" class="form-control" name="amount" placeholder="amount" required>
                          </div>
                    </div>
                    <div class="col-md-4 box-footer">
                        <button type="button" onclick="generatelink()" class="btn btn-primary">Generate Checkout Url</button>
                    </div>
                </div>
                <div class="checkout-link d-none"></div>
                <label for="link" id="link" style="margin-left:50px;"></label>
                </form>
            </div>
        </div>
    </div>
@stop
@section('js')
<script>
    $(document).ready(function() {
    $('.select2').select2();
        $("#heading_name").select2({
            // placeholder: "Blog Status",
            allowClear: true,
            minimumResultsForSearch: -1
        });
    });
</script>
<script>
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  function generatelink(){
    var service = $('#service').val();
    var email =$('#email').val();
    var name =$('#name').val();
    var mob_no =$('#mob_no').val();
    var pay_currency =$('#pay_currency').val();
    var amount =$('#amount').val(); 
    var BASE_URL = $("#urlBase").val(); 
    $(".fill_err").remove(); 
    var is_err = 0;
    if(email == ""){ 
        $("#email").after("<span style='color:red;margin-top:6px;display:block;font-size:13px;' class='fill_err'>Enter email address</span>"); 
        $("#email").focus(); 
        is_err = 1;
    }
    else {
        if (!regex.test(email)) {  
            $("#email").after("<span style='color:red;margin-top:6px;display:block;font-size:13px;' class='fill_err'>Enter valid email address</span>");  
            $("#email").focus(); 
            is_err = 1;    
        } 
    }

    if(name == ""){ 
        $("#name").after("<span style='color:red;margin-top:6px;display:block;font-size:13px;' class='fill_err'>Enter name</span>"); 
        $("#name").focus(); 
        is_err = 1;
    }

    if(mob_no == ""){ 
        $("#mob_no").after("<span style='color:red;margin-top:6px;display:block;font-size:13px;' class='fill_err'>Enter mobile number</span>"); 
        $("#mob_no").focus(); 
        is_err = 1;
    }

    if(amount == ""){ 
        $("#amount").after("<span style='color:red;margin-top:6px;display:block;font-size:13px;' class='fill_err'>Enter amount</span>"); 
        $("#amount").focus(); 
        is_err = 1;
    }

    if(is_err == 0){ 
        var form_data = new FormData();                   
				form_data.append('email', email);
				form_data.append('mob_no', mob_no); 
				form_data.append('pay_currency', pay_currency); 
				form_data.append('amount', amount);  
				form_data.append('num_applicant', $('#num_applicant').val());  

				$("select[name='service_id[]']").each(function () {
						form_data.append('service_id[]', $(this).val());
				});

				$("input[name='name[]']").each(function () {
						form_data.append('name[]', $(this).val());
				});
        $.ajax({
            url: BASE_URL+'/admin/generate-checkout',  
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            dataType: 'json',  
            processData: false,
            cache:false,
            data: form_data,
            contentType:false,                         
            type: 'post',
            success: function(obj_res){ 
                if(obj_res.result == "true") {
                    $('#link').html('https://visament.com/direct-pay?app_num='+obj_res.app_num); 
                }
            },
            error: function (response) {
                console.log(response);
            }
        });
    }
    
  }
	$(document).ready(function () {
    $('.select2').select2();

    $("#num_applicant").on("change", function () {
        var count = parseInt($(this).val());
        var wrapper = $("#applicants-wrapper");
        wrapper.empty();

        for (let i = 1; i <= count; i++) {
            let block = `
            <div class="applicant-block row col-md-12" data-index="${i}">
                <div class="form-group col-6">
                    <label for="service_${i}">Service ${i}</label>
                    <select id="service_${i}" name="service_id[]" class="select2 form-control" required>
                        <option value="">-- Select Service --</option>
                        @foreach($services as $service)
                            <option value="{{ $service->id }}">
                                {{ $service->title }} @if(isset($service->category->category_title))({{ $service->category->category_title }}) @endif
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-6 ">
                    <label>Name ${i}</label>
                    <input type="text" id="name_${i}" class="form-control" name="name[]" placeholder="name" required>
                </div>
            </div>`;
            wrapper.append(block);
        }

        $(".select2").select2(); // re-init select2 after append
    });
});
</script>
@endsection