@extends('layout.front.app',[
    'title' => Config::get('constants.SITE_NAME')
])
@section('content')
<style>
.error {
    color: #ff0000;
    font-size: 15px;
    width:100%;
}
form.user .form-control-user{
    border-radius: 0px;
}
.requiredcls{
    color: #ff0000;
}

</style>
<div class="row justify-content-center">

    <div class="col-xl-12 col-lg-12 col-md-12">

        <div class="card o-hidden border-0 shadow-lg my-5">
            <div class="card-body p-0">
                <!-- Nested Row within Card Body -->
                <!-- <div class="row"> -->
                    <div class="col-lg">
                        <div class="p-3">
                            <div class="text-center">
                                <h1 class="h3 text-gray-900 mb-4">REGISTER HERE</h1>
                                @include('layout.component.alert-dismissible')
                            </div>
                            <hr/>
                            
                            @if(!$isPurchased)
                                @if($isTicketAvailable)
                                    @if($isDisablePurcahseButton)
                                      
                                        <div style="font-size:large;text-align:center;color: green;font-weight: bold;">The tickets will be available after 8 AM</div>
                                    @else   
                                        <a class="small" style="color:white;" href="{{ route('purchase-pin') }}">
                                        <button type="button" class="btn btn-primary-black btn-user btn-block">
                                            Purchase Your Ticket
                                        </button>
                                        </a>
                                    @endif
                               
                                @else 
                                    @if($isDisablePurcahseButton)
                                        <div style="font-size:large;text-align:center;color: green;font-weight: bold;">The tickets will be available after 8 AM</div>
                                    @else   
                                        <button type="button" class="btn btn-primary-black btn-user btn-block" style="height: 100px; font-size: larger;">
                                        There is no available ticket please try again later
                                        </button>
                                    @endif
                                @endif
                            @else
                            <div id="QrCodeDiv">
                             <div style="font-weight: bold;">Hello, please pay the registration amount by scanning the QR code. you can also pay using the UPI id which is mentioned below. <br/> Please take your payment screenshot and attach it with registration.</div>
                             <hr/>
                             <!-- <br/>
                            <div class="qr_upi">UPI : {{ Config::get('constants.UPI_ID') }}</div> -->
                            <!-- <br/>
                            <div class="qr_or"><b>OR</b></div> -->
                            <img style="width: 100%;" src="{{ asset('images/qr_code.jpeg') }}" />
                            <button type="button" class="btn btn-primary-black btn-user btn-block" onclick="skipQrcode();">
                               Continue
                            </button>
                            </div>
                          
                            @endif

                            <form name="registrationForm" class="user userForm" enctype="multipart/form-data" method="POST" action="{{ route('register-user-form') }}" style="display:none;">
                                @csrf
                                
                                <div class="form-group">
                                    <label for="mobile">Attached Payment Screenshot<span class="requiredcls">*</span></label>
                                    <input type="file" onchange="readURL(this);" name="payment_schreenshot" class="form-control"  id="payment_schreenshot" />
                                    <img id="imagePre" src="#" alt="your image" style="width: 250px; display:none;" />
                                </div>

                                <div class="form-group">
                                    <label for="mobile">Bank <span class="requiredcls">*</span></label>
                                    <input type="text" name="bank" class="form-control form-control-user"  id="bank" placeholder="Bank"/>
                                </div>
                                <div class="form-group">
                                    <label for="mobile">Account Number <span class="requiredcls">*</span></label>
                                    <input type="text" name="account_number" class="form-control form-control-user"  id="account_number" placeholder="Account Number"/>
                                </div>
                                <div class="form-group">
                                    <label for="mobile">Re Account Number <span class="requiredcls">*</span></label>
                                    <input type="text" name="re_account_number" class="form-control form-control-user"  id="re_account_number" placeholder="Re Account Number"/>
                                </div>
                                <div class="form-group">
                                    <label for="mobile">IFSC Code <span class="requiredcls">*</span></label>
                                    <input type="text" name="ifsc_code" class="form-control form-control-user"  id="ifsc_code" placeholder="IFSC Code"/>
                                </div>
                                <div class="form-group">
                                    <label for="mobile">Account Holder Name <span class="requiredcls">*</span></label>
                                    <input type="text" name="account_holder_name" class="form-control form-control-user"  id="account_holder_name" placeholder="Account Holder Name"/>
                                </div>

                                <div class="form-group">
                                    <input type="checkbox" class="checkbox" id="agree_policy" name="agree_policy">
                                    <label for="agree">Privacy Policy <br/> whatever money you send to Totalcare, you send it to help people. You will also get some help in this, but it is not necessary that you will always get money. But you can help anyone at any time by giving some money. This is not an NGO, but through ordinary people you will be able to help someone in need, if you agree, then please agree to the privacy policy.</label>
                                </div>
                                
                                <button type="submit" class="btn btn-primary-black btn-user btn-block" id="registrationButton">Register</button>
                                <div style="color:green; display:none; text-align:center;" id="pleaseWaitMsg"><b>Please Wait...</b></div><br/><br/>
                                <button type="button" class="btn btn-warning btn-user btn-block" onclick="goBack();">Go To Payment Screen</button>
                            </form>

                            <hr>
                        </div>
                    </div>
                <!-- </div> -->
            </div>
        </div>
    </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script>
function skipQrcode()
{
    $(".userForm").show();
    $("#QrCodeDiv").hide();
    $("form[name='registrationForm']").validate({
    // Specify validation rules
    rules: {
        fullname: "required",
        mobile: {
            required: true,
            number: true,
            minlength: 10,
            maxlength: 10
        },
        sponsor_id: {
            number: true,
            minlength: 10,
            maxlength: 10
        },
        state: "required",
        city: "required",
        pin_code:"required",
        payment_mode:"required",
        bank:"required",
        account_number : {
            minlength : 5,
            required: true
        },
        re_account_number : {
        minlength : 5,
        required: true,
        equalTo : "#account_number"
        },
        ifsc_code:"required",
        account_holder_name:"required",
        agree_policy:"required",
        payment_schreenshot:"required"
    },
    // Specify validation error messages
    messages: {
        fullname: "Please enter your full name",
        mobile: {
            required: "Please enter mobile number",
            minlength: "Your number must be at least 10 characters long",
            maxlength: "Your number must be at least 10 characters long",
            number: "Please enter valid mobile number"
        },
        sponsor_id: {
                minlength: "Your sponsor id must be at least 10 characters long",
                maxlength: "Your sponsor id must be at least 10 characters long",
                number: "Please enter valid sponsor id"
        },
        state: "Please enter state name",
        city: "Please enter city name",
        pin_code:"Please enter pin code",
        payment_mode:"Enter your payment mode like paytm,g-pay and phone-pay",
        bank:"Enter your bank name",
        account_number: {
                minlength: "Your account number must be at least 5 characters long",
                required: "Please enter account number"
        },
        re_account_number: {
                minlength: "Your re account number must be at least 5 characters long",
                required: "Please enter re account number",
                equalTo: "re account number and account number not match"
        },
        ifsc_code:"Enter your bank ifsc code",
        account_holder_name:"Enter bank account holder name",
        agree_policy:"Please agree to the privacy policy",
        payment_schreenshot:"Please add your payment schreenshot"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
      $("#registrationButton").hide();
      $("#pleaseWaitMsg").show();
    }
  });
}

function goBack(){
    $(".userForm").hide();
    $("#QrCodeDiv").show();
}

function readURL(input) {
    $('#imagePre').show();
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#imagePre').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@stop