@extends('front.practitioner.import.template.import')
@section('content')

<style>

   .newBusinessDetailsPage .top-pading{ 
      margin-top: 0.25rem !important; 
   }
   .sidebar-menu {
    display: none;
   }
   body.grey-bg {
    background: #f7f7f7;
   }
   .nav-link{
    pointer-events: none;
   }
 
</style>
<div class="online_payment_loader" style="display:none;z-index: 1066 !important;">
    <img class="img-fluid" src='{{asset("assets/images/online_payment_loader.gif")}}'>
 </div>
    <input type="hidden" name="step" value="amount_tab">
   <div class="voucher-main">
       <div class="voucher-header">
        <div class="container-fluid">
            <nav class="navbar navbar-light invoice-page-menu notes-menu w-100">
                <a class="p-0 cursor-pointer" id="backButton"><img src="{{asset('assets/images/Voucher/Back-button-grey.svg')}}" alt="" class="img-fluid" style="min-width: 40px"></a>          
             </nav>
        </div>
       </div>


        <div class="select-voucher-main">
            <div class="voucher-box">
                <div class="row">
                    <div class="col-sm-12 col-md-6">
                        <div class="select-voucher">
                            <input type="radio" value="book_appointment"  name="service_type" class="radio-btn">
                            <span class="check"></span>
                            <div class="icon">
                                <img src="{{asset('assets/images/Voucher/Calendar-circle.svg')}}" alt="icon" class="img-fluid">
                            </div>
                            <label for="">Book appointment</label>
                        </div>
                    </div>                       
                    <div class="col-sm-12 col-md-6">
                        <div class="select-voucher">
                            <input type="radio" value="gift_voucher"  name="service_type" class="radio-btn">
                            <span class="check"></span>
                            <div class="icon">
                                <img src="{{asset('assets/images/Voucher/Buy-Gift-Voucher.svg')}}" alt="icon" class="img-fluid">
                            </div>
                            <label for="">Buy gift voucher</label>
                        </div>
                    </div>                                     
                </div>
                <span id="type_error" class="invalid-feedback d-block float-center"></span>
                <div class="tab-footer">
                    <a class="back"></a>
                    <a class="btn goto_next" id="goto_next">Next</a>
                </div>
            </div>
        </div>

@endsection


@section('import-scripts')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://lateralpayments.com/checkout/scripts/latpay2.js"></script>

<script type="text/javascript">

    var businessId = @json($businessProfile->id);
    var baseUrl = "{{route('home')}}";

    $(document).on('click','#goto_next', function() {
       var type = $("input[name='service_type']:checked").val();
       if(type == undefined)
       {
            $("#type_error").text('Please select');
            return false;
       }else
       {
            if(type == 'book_appointment')
            {   
                window.location.href = baseUrl + "/get-embeded-code?" + 'business_id=' + btoa(businessId);
            }else{
                window.location.href = baseUrl + "/my/voucher?" + 'business_id=' + btoa(businessId);
            }
       }
    });
    
</script>
@endsection