@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> Customer Dashboard </p>
                                    <div class="heading-seperator innerseperatorspace"><span></span></div>
                                    <h4>My Profile</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-8 py-3">
                <div class="innerabout-content">
                    <a href="/user" class="mb-4 text-theme d-block fw-bold"><i class="fa fa-angle-double-left"></i> Back to Dashboard</a>
                    <ul class="nav nav-tabs bg-light">
                        <li class="nav-item">
                            <a class="nav-link @if($tab_type == 'profile' || $tab_type == '' ) active @endif" data-toggle="tab" href="#profile"> <span class="f-16">My Profile</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link @if($tab_type == 'alla') active @endif" data-toggle="tab" href="#alla"> <span class="f-16">Edit Profile</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link @if($tab_type == 'high') active @endif" data-toggle="tab" href="#high"> <span class="f-16">Change Password</span></a>
                        </li>
                    </ul>
                    <div class="tab-content mb-5">
                        <div class="tab-pane @if($tab_type == 'profile' || $tab_type == '' ) active show @endif" id="profile">

                            <div class="innerabout-content">
                                <h4 class="text-muted fw-black mt-4 mb-1 f-30">Your Profile with <span class="text-theme">MNGL</span></h4>
                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-bold">BP Number <span class="text-danger">*</span></label>
                                            <div class="login-form">
                                                <p>{{ $user->bp_number }}</p>
                                            </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">
                                                <p>{{ $user->name }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-bold">Email-ID <span class="text-danger">*</span></label>
                                            <div class="login-form">
                                                <p>{{ $user->email }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="fw-bold">Mobile No. <span class="text-danger">*</span></label>
                                            <div class="login-form">
                                                <p>{{ $user->mobile }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="fw-bold">Address <span class="text-danger">*</span></label>
                                            <div class="login-form">
                                                <p>{{ $user->address->line_1.", ".$user->address->landmark.", ".$user->address->district }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <style>
                                .login-form p{
                                    background-color: rgb(246, 246, 246); 
                                    padding: 8px 5px; 
                                }
                            </style>


                        </div>
                        <div class="tab-pane @if($tab_type == 'alla') active show @endif" id="alla">

                            <div class="innerabout-content">
                                <h4 class="text-muted fw-black mt-4 mb-1 f-30">Update your Profile with <span class="text-theme">MNGL</span></h4>
                                <p class="f-14 mb-4"><strong>Note:</strong> Kindly enter BP to update your Basic Information or other details as appearing on your bill.</p>
                                @if(isset($profile_message) && $profile_message)
                                <p class="pl-3" style="background: rgb(112, 221, 112)"><strong>{{ $profile_message }}</strong></p>
                                @endif
                                <form action="/user/update-account" method="post" onsubmit="return validation()">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input type="hidden" name="tab_type" value="alla">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="fw-bold">BP Number <span class="text-danger">*</span></label>
                                                <div class="login-form">
                                                    <input type="text" class="form-control" id="bp_number" name="bp_number" maxlength="10" value="{{ $user->bp_number }}" placeholder="eg. 86657565" 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" value="{{ $user->name }}" maxlength="180" placeholder="Enter your 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-ID <span class="text-danger">*</span></label>
                                                <div class="login-form">
                                                    <input type="text" class="form-control" id="email_id" name="email" value="{{ $user->email }}" maxlength="180" onkeypress="emailOnly(event)" maxlength="180" placeholder="Enter your Email-ID">
                                                    <i class="fa fa-envelope-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 No. <span class="text-danger">*</span></label>
                                                <div class="login-form">
                                                    <input type="text" class="form-control" id="mobile" name="mobile" value="{{ $user->mobile }}"  onkeypress="NumOnly(event)" maxlength="10" placeholder="Enter your Mobile No">
                                                    <i class="fa fa-phone"></i>
                                                </div>
                                            </div>
                                            <label class="control-label" id="mobileError" style="color:red;"></label>
                                        </div>


                                        <div class="col-md-6" id="otp-section">
                                            <div class="form-group">
                                                <label class="fw-bold">Enter OTP <span class="text-danger">*</span></label>
                                                <div class="login-form">
                                                    <input type="text" class="form-control" id="otp" name="otp" placeholder="Enter OTP here" maxlength="5" required>
                                                    <i class="fa fa-text-width"></i>
                                                </div>
                                                <div id="some_div"></div>
                                                <p class="text-right" id="resend-otp"><a href="" class="text-primary fw-bold f-13">Resend OTP</a></p>
                                                <p class="text-right mt-1" id="spinner"><i class="fa fa-circle-o-notch fa-spin" style="font-size:20px"></i></p>
                                            </div>
                                            <label class="control-label" for="otp" id="otp-status" style="color:red;"></label>
                                        </div>


                                        <div class="col-md-12 mt-3">
                                            <button type="submit" class="btn btn-primary px-4 px-sm-5" id="verify-otp-btn">Update</button>
                                            <button class="btn btn-primary px-4 px-sm-5" id="otp-btn">Send OTP</button>
                                        </div>
                                    </div>
                                </form>
                            </div>


                        </div>

                        <div class="tab-pane @if($tab_type == 'high') active show @endif" id="high">
                            <div class="innerabout-content">
                                <h4 class="text-muted fw-black mt-4 mb-1 f-30">Change your Password</h4>
                                <p class="f-14 mb-4"><span class="text-danger">*</span>You can change your password with fill the below details</p>
                                @if(isset($message) && $message)
                                <p class="pl-3" style="background: rgb(112, 221, 112)"><strong>{{ $message }}</strong></p>
                                @endif  
                                <form method="POST" action="/user/update-password">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input type="hidden" name="tab_type" value="high">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="fw-bold">BP Number <span class="text-danger">*</span></label>
                                                <div class="login-form">
                                                    <input type="text" class="form-control" value="{{ $user->bp_number }}" maxlength="10" placeholder="eg. 57657656" 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">Old Password <span class="text-danger">*</span></label>
                                                <div class="login-form">
                                                    <input type="password" class="form-control" name="old_password" maxlength="20" placeholder="Enter your Old Password">
                                                    <i class="fa fa-sign-out"></i>
                                                </div>
                                                {!! $errors->first('old_password', '<label class="control-label" for="old_password" style="color:red;">:message</label>')!!}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="fw-bold">New Password <span class="text-danger">*</span></label>
                                                <div class="login-form">
                                                    <input type="password" class="form-control" name="new_password" maxlength="20" placeholder="Enter your New Password">
                                                    <i class="fa fa-lock"></i>
                                                </div>
                                                {!! $errors->first('new_password', '<label class="control-label" for="new_password" style="color:red;">:message</label>')!!}
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="fw-bold">Confirm Password <span class="text-danger">*</span></label>
                                                <div class="login-form">
                                                    <input type="password" class="form-control" name="confirm_password" maxlength="20" placeholder="Enter your Confirm Password">
                                                    <i class="fa fa-lock"></i>
                                                </div>
                                                {!! $errors->first('confirm_password', '<label class="control-label" for="confirm_password" style="color:red;">:message</label>')!!}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mt-3">
                                            <button type="submit" class="btn btn-primary px-5">Change Password</button>
                                        </div>
                                    </div>
                                </form>


                            </div>
                        </div>


                    </div>
                </div>
            </div>

            <div class="col-md-4 py-3 py-sm-5">
                @include('frontend.layouts.partials.our_services')
            </div>
        </div>
    </div>
</section>
@endsection

@section('styles')

@stop
@section('scripts')
@parent
<script src="/assets/frontend/js/validation.js"></script>

<script>
    
    var timeLeft = 30;
    var timerId = null;

    $(document).ready(function() {
        $('#otp-section').hide();
        $('#verify-otp-btn').hide();
        $('#emailError').hide();
        $('#mobileError').hide();
        $('#resend-otp').hide();
        $('#spinner').hide();
    });

    $('#otp-btn').click(function(e) {
        e.preventDefault();
        $('#emailError').hide();
        $('#mobileError').hide();
        var email_id = $('#email_id').val();
        var bp_number = $('#bp_number').val();
        var mobile_number = $('#mobile').val();
        var sms_type = "Profile Updation";
        var data = {
            email_id: email_id
            , bp_number: bp_number
            , type: 'profile'
            , sms_type: sms_type
            , mobile_number: mobile_number
            , '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/ajax/generate-otp'
            , type: 'POST'
            , data: data
            , success: function(data) {
                var data = JSON.parse(data);
                if (data.status == 200) {
                    $('#otp-section').show();
                    $('#verify-otp-btn').show();
                    $('#otp-btn').hide();
                    $("#otp-status").css("color", "green");
                    $("#otp-status").html(data.message);
                    $("#otp-status").hide();
                    timeLeft = 30;
                    customtimer();
                } 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]);
                }
            }
        });
    });

    function customtimer(){
        timerId = setInterval(countdown, 1000);
    }

    function countdown() {
        var elem = document.getElementById('some_div');
        if (timeLeft == -1) {
            $('#some_div').hide();
            $('#resend-otp').show();
            clearTimeout(timerId);
        } else {
            elem.innerHTML = 'Resend OTP in ' + timeLeft + ' seconds';
            timeLeft--;
        }
    }

    $('#resend-otp').on('click',function(e) {
        e.preventDefault();
        $('#emailError').hide();
        $('#mobileError').hide();
        $('#resend-otp').hide();
        $('#spinner').show();
        var email_id = $('#email_id').val();
        var bp_number = $('#bp_number').val();
        var mobile_number = $('#mobile').val();
        var sms_type = "Profile Updation";
        var data = {
            email_id: email_id
            , bp_number: bp_number
            , type: 'profile'
            , sms_type: sms_type
            , mobile_number: mobile_number
            , '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/ajax/generate-otp'
            , type: 'POST'
            , data: data
            , success: function(data) {
                var data = JSON.parse(data);
                if (data.status == 200) {
                    $('#otp-section').show();
                    $('#verify-otp-btn').show();
                    $('#otp-btn').hide();
                    $("#otp-status").css("color", "green");
                    $("#otp-status").html(data.message);
                    $('#resend-otp').hide();
                    $('#spinner').hide();
                    $('#some_div').show();
                    timeLeft = 30;
                    customtimer();
                } 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]);
                }
            }
        });
    });

    function validation() {
        var otp = $('#otp').val();
        var email_id = $('#email_id').val();
        var mobile_number = $('#mobile').val();
        var data = {
            'otp': otp, 
            'email_id': email_id,
            'mobile_number': mobile_number,
            'data_type': "profile_update",
            '_token': '{{{csrf_token()}}}'
        }
        var status = false;
        $('#otp-status').hide();
        $.ajax({
            async:false,
            url: '/ajax/verify-otp'
            , type: 'POST'
            , data: data
            , success: function(data) {
                var data = JSON.parse(data);
                if (data.status == 200) {
                    status = true;
                } else {
                    $('#otp-status').show();
                    $('#otp-status').css("color", "red");
                    $('#otp-status').text(data.message);
                    status = false;
                }
            }
        });
        return status;
    }

    $('#mobile').change(function() {
        $("#otp-section").hide();
        $("#otp-btn").show();
        $("#verify-otp-btn").hide();
        $('#some_div').show();
        $('#resend-otp').hide();
        $('#spinner').hide();
    });

    $('#email_id').change(function() {
        $("#otp-section").hide();
        $("#otp-btn").show();
        $("#verify-otp-btn").hide();
        $('#some_div').show();
        $('#resend-otp').hide();
        $('#spinner').hide();
    });
</script>
@endsection