@extends('frontend.app')
<!-- Main Container  -->
@section('content')
<div class="position-relative">
    <div id="carouselExampleIndicators" class="carousel slide" data-pause="false" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active innerHeaderimg">
                <img src="/assets/frontend/images/inner-about.jpg" />
                <div class="carousel-caption innertopHEadcaption">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="capbg">
                                    <p>Home <i class="fa fa-angle-right mx-2"></i> Customer Zone <i class="fa fa-angle-right mx-2"></i></p>
                                    <div class="heading-seperator innerseperatorspace"><span></span></div>
                                    <h4>Pay for New Connection</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<section>
    <div class="container">

        <h5 class="py-3 fw-bold" style="color: red">{{$message}}</h5>
        <form action="/online-connection/new-connection-payment2" method="post" onsubmit="return paymentCheck()">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <div class="row">
                <div class="col-md-8 borderinner-right">
                    <div class="innerabout-content">
                        <h4 class="text-muted fw-black mb-3 f-36">Pay for New Connection</h4>
                        {{-- <p class="f-14 mb-4">
                            <span class="text-danger">*</span> Kindly enter your BP number as appearing on your bill.
                        </p> --}}
                        <div class="row">
                            <div class="col-md-6" id="getdetails">
                                @if(isset($errorMessage) && $errorMessage)
                                <p style="color: red;">{{$errorMessage}}</p>
                                @endif
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="fw-bold">Application No<span class="text-danger">*</span></label>
                                            <div class="login-form">
                                                <input type="text" class="form-control" id="bp_number"  maxlength="30" placeholder="Enter Application No">
                                                <i class="fa fa-file-text-o"></i>
                                            </div>
                                        </div>
                                        <label style="color: red" id="bp_number_error_message" for="bp_number"></label>
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <button type="button" class="btn btn-primary px-4 px-sm-5" id="getBillDetails">Get Details</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="row" id="payyourbill">
                                    <div class="col-md-6">
                                        <input type="hidden" name="online_connection_table_id" id="biling_master_id">
                                        <div class="form-group">
                                            <label class="fw-bold">Application Number <span class="text-danger">*</span></label>
                                            <div class="login-form">
                                                <input type="text" class="form-control" name="bp_number" id="bp_number_1" readonly>
                                                <i class="fa fa-file-text-o"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-bold">Name <span class="text-danger">*</span></label>
                                            <div class="login-form">
                                                <input type="text" class="form-control" name="name" id="name" readonly>
                                                <i class="fa fa-user-circle-o"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-bold">Email <span class="text-danger">*</span></label>
                                            <div class="login-form">
                                                <input type="text" class="form-control" onkeypress="emailOnly(event)" name="email" id="email" maxlength="180" readonly>
                                                <i class="fa fa-user-circle-o"></i>
                                            </div>
                                        </div>
                                        <label class="control-label" id="emailError" style="color:red;"></label>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-bold">Mobile Number <span class="text-danger">*</span></label>
                                            <div class="login-form">
                                                <input type="text" class="form-control" onkeypress="NumOnly(event)" maxlength="10" name="mobile" id="mobile" readonly>
                                                <i class="fa fa-user-circle-o"></i>
                                            </div>
                                        </div>
                                        <label class="control-label" id="mobileError" style="color:red;"></label>
                                    </div>
                                </div>
                                <div class="row" id="send-otp-section">
                                    <div class="col-md-12 mb-3 mt-4">
                                        <button class="btn btn-primary px-4 px-sm-5" id="send-otp-btn">Send OTP</button>
                                    </div>
                                </div>
                                <div class="row" id="verify-otp-section">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="login-form">
                                                <input type="text" id="entered-otp" onkeypress="NumOnly(event)" maxlength="5" class="form-control" placeholder="Enter OTP">
                                                <i class="fa fa-lock"></i>
                                            </div>
                                            <label id="otp-status" for="entered-otp"></label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="login-form">
                                                <button class="btn btn-primary px-4 px-sm-5" id="verify-otp-btn">Verify OTP</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" id="payment-section">
                                    {{-- <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-bold">Due Date <span class="text-danger">*</span></label>
                                            <div class="login-form">
                                                <input type="text" class="form-control" id="due_date" name="due_date" readonly>
                                                <i class="fa fa-calendar-o"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-bold">Bill Amount <span class="text-danger">*</span></label>
                                            <div class="login-form">
                                                <input type="text" class="form-control" id="amount_to_be_paid_1" readonly>
                                                <i class="fa fa-rupee"></i>
                                            </div>
                                        </div>
                                    </div> --}}
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-bold">Amount to be Paid <span class="text-danger">*</span></label>
                                            <div class="login-form">
                                                <input type="number" min="1" max="999999" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="9" class="form-control" id="amount_to_be_paid" name="amount_to_be_paid" readonly>
                                                <i class="fa fa-rupee"></i>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div class="col-md-6">
                                        <div class="form-group mt-4 pt-3">
                                            <a href="#" id="bill" target="_new"><label class="fw-bold"><i class="fa fa-file-pdf-o text-theme f-22 mr-2"></i> Download Bill</label></a>
                                        </div>
                                    </div> --}}
                                    <div class="col-md-12">
                                        @foreach ($paymentChannels as $paymentChannel)
                                        <p>
                                            <input type="radio" name="payment_channel_id" id="payment_channel_id" value="{{$paymentChannel->id}}" class="mr-2" />{!! $paymentChannel->image ? $paymentChannel->name.'<img class="ml-3" src="'.$paymentChannel->image.'">' :$paymentChannel->name !!}
                                        </p>
                                        @endforeach
                                        <label class="control-label" id="paymentChannelErr" for="name">Please select Payment Method!</label>
                                    </div>
                                    {{-- <div class="col-md-12 mb-3">
                                        <label id="successMessage" class="text-success fw-bold"></label>
                                        <label id="errorMessage" class="text-danger fw-bold"></label>
                                        <div id="optForEbill">
                                            <label id="checkbox-label"><input type="checkbox" class="eBill"> Opt for E-Bills instead of Physical Bills</label><br>
                                        </div>
                                    </div> --}}
                                    <div class="col-md-12 mb-3 ">
                                        <button class="btn btn-outline-secondary px-4 px-sm-5" id="resetbpnumber" onclick="return false;">Reset</button>
                                        <button class="btn btn-primary px-4 px-sm-5 ml-3">Pay Here</button>
                                    </div>
                                </div>
                                <button class="btn btn-outline-secondary px-4 px-sm-5" id="resetbpnumber1" onclick="return false;">Reset</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 py-3 py-sm-5">
                    {{-- @include('frontend.layouts.partials.right-menu') --}}
                    @include('frontend.layouts.partials.our_services')
                </div>
            </div>
        </form>
    </div>
</section>
@endsection

@section('styles')
@endsection

@section('scripts')
@parent
<script src="/assets/frontend/js/validation.js"></script>
<script>
    var mobile = '';
    var email = '';
    var veriStatus = 0;
    $(document).ready(function() {
        $("#payyourbill").hide();
        $("#send-otp-section").hide();
        $("#verify-otp-section").hide();
        $("#payment-section").hide();
        $('#emailError').hide();
        $('#mobileError').hide();
        $('#paymentChannelErr').hide();

        $("#getBillDetails").click(function() {
            $('#bp_number_error_message').html('');
            var bp_number = $('#bp_number').val();
            var data = {
                application_no : bp_number
                , '_token': '{{{csrf_token()}}}'
            }
            $.ajax({
                url: '/ajax/get-new-connection-details'
                , type: 'POST'
                , data: data
                , success: function(data) {
                    var data = JSON.parse(data);
                    if (data.status == 200) {
                        $("#getdetails").hide();
                        $("#payyourbill").show();
                        $('#bp_number_1').val(data.response.application_no);
                        $('#biling_master_id').val(data.response.id);
                        $('#name').val(data.response.first_name+" "+data.response.last_name);
                        $('#email').val(data.response.email);
                        $('#mobile').val(data.response.mobile);
                        $('#amount_to_be_paid').val(data.response.paid_amount);
                        // $('#bill').attr('href', '/bill-format/pdf?&id=' + btoa(data.response.id) + '&bill_number='+ data.response.bill_number +'&meter_number='+ data.response.meter_reading_number');
                        $("#payment-section").show();
                        $("#resetbpnumber1").hide();
                            $("#send-otp-section").show();
                            $("#verify-otp-section").hide();
                            $("#payment-section").hide();
                            $('#resetbpnumber1').show();
                    } else {
                        $('#bp_number_1').val('');
                        $('#name').val('');
                        $('#email').val('');
                        $('#mobile').val('');
                        $('#due_date').val('');
                        $('#amount_to_be_paid').val('');
                        $('#amount_to_be_paid_1').val('');
                        $('#bp_number_error_message').html(data.message);
                    }
                }
            });
            // $.ajax({
            //     url: '/ajax/is-opted-ebill'
            //     , type: 'POST'
            //     , data: data
            //     , success: function(data) {
            //         var data = JSON.parse(data);
            //         if (data.result) {
            //             $("#optForEbill").hide();
            //         }
            //     }
            // });
        });
    });
    $("#resetbpnumber").click(function(e) {
        e.preventDefault();
        $('#bp_number').val('');
        $('#bp_number_1').val('');
        $('#name').val('');
        $('#email').val('');
        $('#mobile').val('');
        $('#due_date').val('');
        $('#amount_to_be_paid').val('');
        $('#amount_to_be_paid_1').val('');
        $('#bp_number_error_message').html('');
        $("#getdetails").show();
        $("#payyourbill").hide();
        $("#send-otp-section").hide();
        $("#verify-otp-section").hide();
        $("#payment-section").hide();
        $("#resetbpnumber1").show();
    });
    $("#resetbpnumber1").click(function(e) {
        e.preventDefault();
        $('#bp_number').val('');
        $('#bp_number_1').val('');
        $('#name').val('');
        $('#email').val('');
        $('#mobile').val('');
        $('#due_date').val('');
        $('#amount_to_be_paid').val('');
        $('#amount_to_be_paid_1').val('');
        $('#bp_number_error_message').html('');
        $("#getdetails").show();
        $("#payyourbill").hide();
        $("#send-otp-section").hide();
        $("#verify-otp-section").hide();
        $("#payment-section").hide();
    });

    // $('#mobile').change(function() {
    //     if (mobile == $('#mobile').val() && mobile != '') {
    //         $("#send-otp-section").hide();
    //         $("#verify-otp-section").hide();
    //         $("#payment-section").show();
    //         $('#resetbpnumber1').hide();
    //     } else {
    //         $("#send-otp-section").show();
    //         $("#verify-otp-section").hide();
    //         $("#payment-section").hide();
    //         $('#resetbpnumber1').show();
    //     }
    // });

    // $('#email').change(function() {
    //     if (email == $('#email').val() && email != '') {
    //         $("#send-otp-section").hide();
    //         $("#verify-otp-section").hide();
    //         $("#payment-section").show();
    //         $('#resetbpnumber1').hide();
    //     } else {
    //         $("#send-otp-section").show();
    //         $("#verify-otp-section").hide();
    //         $("#payment-section").hide();
    //         $('#resetbpnumber1').show();
    //     }
    // });

    $('#send-otp-btn').click(function(e) {
        e.preventDefault();
        $('#emailError').hide();
        $('#mobileError').hide();
        var email_id = $('#email').val();
        var bp_number = $('#bp_number_1').val();
        var mobile_number = $('#mobile').val();
        var sms_type = "Paying your Bill";
        var data = {
            email_id: email_id
            , bp_number: bp_number
            , sms_type: sms_type
            , mobile_number: mobile_number
            , type: 'pay-bill'
            , '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/ajax/generate-otp'
            , type: 'POST'
            , data: data
            , success: function(data) {
                var data = JSON.parse(data);
                if (data.status == 200) {
                    $("#send-otp-section").hide();
                    $("#verify-otp-section").show();
                    $("#otp-status").css("color", "green");
                    $("#otp-status").html(data.message);
                } else {
                    $("#otp-status").css("color", "red");
                    $('#otp-status').html(data.message);
                }
            }
            , error: function(errors) {
                var data = errors.responseJSON;
                if (data.errors.detail.email_id) {
                    $('#emailError').show();
                    $('#emailError').text(data.errors.detail.email_id[0]);
                }
                if (data.errors.detail.mobile_number) {
                    $('#mobileError').show();
                    $('#mobileError').text(data.errors.detail.mobile_number[0]);
                }
            }
        });
    });
    $('#verify-otp-btn').click(function(e) {
        e.preventDefault();
        var otp = $('#entered-otp').val();
        var bp_number = $('#bp_number').val();
        var email_id = $('#email').val();
        var mobile_number = $('#mobile').val();
        var data = {
            'otp': otp
            , 'bp_number': bp_number
            , 'email_id': email_id
            , 'mobile_number': mobile_number
            , 'data_type': "new_connection"
            , '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/ajax/verify-otp'
            , type: 'POST'
            , data: data
            , success: function(data) {
                var data = JSON.parse(data);
                if (data.status == 200) {
                    $("#verify-otp-section").hide();
                    $("#payment-section").show();
                    $('#resetbpnumber1').hide();
                } else {
                    $("#otp-status").css("color", "red");
                    $('#otp-status').html(data.message);
                }
            }
        });
    });

    // function reset(){
    //     $('#bp_number').val('');
    //     $('#bp_number_1').val('');
    //     $('#name').val('');
    //     $('#email').val('');
    //     $('#mobile').val('');
    //     $('#due_date').val('');
    //     $('#amount_to_be_paid').val('');
    //     $('#amount_to_be_paid_1').val('');
    //     $('#bp_number_error_message').html('');
    //     $("#getdetails").show();
    //     $("#payyourbill").hide();
    //     $("#send-otp-section").hide();
    //     $("#verify-otp-section").hide();
    //     $("#payment-section").hide();
    // }

</script>
<script>
    $(document).ready(function() {
        $('#successMessage').hide();
        $('#errorMessage').hide();
    });
    $(".eBill").change(function() {
        if (this.checked) {
            if (confirm('You declare that you would like to opt for an e-Bill instead of a Physical Bill [Please note that Physical Bill will be discontinued if you opt for this]')) {
                var email = $('#email').val();
                var bp_number = $('#bp_number').val()
                var data = {
                    'email': email
                    , 'bp_number': bp_number
                    , '_token': '{{{csrf_token()}}}'
                }
                $.ajax({
                    url: '/ajax/opt-for-ebill'
                    , type: 'POST'
                    , data: data
                    , success: function(data) {
                        var data = JSON.parse(data);
                        if (data.result) {
                            $("#checkbox-label").hide();
                            $('#errorMessage').hide();
                            $('#successMessage').show();
                            $('#successMessage').html(data.message);
                        } else {
                            $("#checkbox-label").show();
                            $('.eBill').prop('checked', false);
                            $('#errorMessage').show();
                            $('#errorMessage').html(data.message);
                        }
                    }
                });

            } else {
                $('.eBill').prop('checked', false);
            }
        }
    });

    function paymentCheck() {
        var payment_channel_id = $("input[name='payment_channel_id']:checked").val();
        var email_id = $('#email').val();
        var mobile_number = $('#mobile').val();
        $('#emailError').hide();
        $('#mobileError').hide();
        $('#paymentChannelErr').hide();
        // if (payment_channel_id == undefined || email_id == '' || mobile_number == '') {
        if (payment_channel_id == undefined) {
            if (payment_channel_id == undefined)
                $('#paymentChannelErr').show();
            // if (email_id == '') {
            //     $('#emailError').show();
            //     $('#emailError').text('This field is required');
            // }
            // if (mobile_number == '') {
            //     $('#mobileError').show();
            //     $('#mobileError').text('This field is required');
            // }
            return false;
        }
        return true;
    }

</script>
@endsection