@extends('frontend.app')

@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>
                                        <a href="/">Home </a><i class="fa fa-angle-right mx-2"></i> 
                                        <a href="/user">Customer Zone</a> <i class="fa fa-angle-right mx-2"></i> 
                                        Payment Dashboard
                                    </p>
                                    <div class="heading-seperator innerseperatorspace">
                                        <span></span>
                                    </div>
                                    <h4>Customer Dashboard</h4>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</div>
   
 <section>
    <div class="container">
        <div class="row">
            <div class="col-md-8 py-3 py-sm-5 borderinner-right">
                <div class="innerabout-content">
                    <h4 class="text-muted fw-black mb-3 f-36 custname">Hi, <span class="text-theme">{{ \Auth::user()->name }}</span></h4>
                    <p class="f-14">Click on the below tab to go to the respective page or avail the service.</p> 
                    {{-- @if (!($user->eBill && $user->eBill->is_opted_ebill == 1))
                    <input type="text" id="email" value="{{$user->bpMaster->email_id}}" hidden />
                    <input type="text" id="bp_number" value="{{$user->bpMaster->bp_number}}" hidden />
                    <label id="successMessage" class="text-success fw-bold"></label>
                    <label id="errorMessage" class="text-danger fw-bold"></label>
                    <label id="checkbox-label"><input type="checkbox" class="eBill"> Opt for E-Bills instead of Physical Bills</label><br>
                    @endif --}}
                    <div class="row mt-2">
                        <div class="col-md-4 col-6">
                            <a href="/user/my-profile">
                                <div class="dashsection dash7">
                                    <i class="fa fa-user"></i>
                                    <p>My Profile </p>
                                </div>
                            </a>
                        </div> 
                        <div class="col-md-4 col-6">
                            <a href="/user/pay-bill">
                                <div class="dashsection">
                                    <i class="fa fa-rupee"></i>
                                    <p>Pay Your Bill</p>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4 col-6">
                            <a href="/user/current-bill">
                                <div class="dashsection dash1">
                                    <i class="fa fa-file-pdf-o"></i>
                                    <p>Current Bill</p>
                                </div>
                            </a>
                        </div> 
                        <div class="col-md-4 col-6">
                            <a href="/user/log-meter">
                                <div class="dashsection dash2">
                                    <i class="fa fa-file-text-o"></i>
                                    <p>Log your Meter Reading </p>
                                </div>
                            </a>
                        </div> 
                        {{-- <div class="col-md-4 col-6">
                            <a href="#">
                                <div class="dashsection dash3">
                                    <i class="fa fa-calendar"></i>
                                    <p>Billing Cycle </p>
                                </div>
                            </a>
                        </div>  --}}
                        <div class="col-md-4 col-6">
                            <a href="/user/billing-history">
                                <div class="dashsection dash4">
                                    <i class="fa fa-file-archive-o"></i>
                                    <p>Billing History</p>
                                </div>
                            </a>
                        </div> 
                        <div class="col-md-4 col-6">
                            <a href="/user/payment-history">
                                <div class="dashsection dash5">
                                    <i class="fa fa-files-o"></i>
                                    <p>Payment History </p>
                                </div>
                            </a>
                        </div> 
                        <div class="col-md-4 col-6">
                            <a href="/user/log-complaint">
                                <div class="dashsection dash6">
                                    <i class="fa fa-commenting"></i>
                                    <p>Log a Complaint </p>
                                </div>
                            </a>
                        </div> 
                        
                        {{-- <div class="col-md-4 col-6">
                            <a href="#">
                                <div class="dashsection dash7">
                                    <i class="fa fa-lock"></i>
                                    <p>Change Password </p>
                                </div>
                            </a>
                        </div>  --}}
                        <div class="col-md-4 col-6">
                            <a href="/user/track-ticket">
                                <div class="dashsection dash8">
                                    <i class="fa fa-address-card-o"></i>
                                    <p>Status of Open Requests </p>
                                </div>
                            </a>
                        </div>

                        <div class="col-md-4 col-6">
                            <a href="{{ url('/logout') }}" onclick="event.preventDefault();
                                    document.getElementById('logout-form').submit();">
                                <div class="dashsection dash3">
                                    <i class="fa fa-sign-out"></i>
                                    <p>Logout</p>
                                </div>
                            </a>
                            <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
                                        {{ csrf_field() }}
                            </form>
                        </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('scripts')
<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]')) {
                // console.log('yes');
                var email = $('#email').val();
                var bp_number = $('#bp_number').val()
                var data = {
                    'email': email
                    , 'bp_number': bp_number
                    , '_token': '{{{csrf_token()}}}'
                }
                // console.log(data);
                $.ajax({
                    url: '/ajax/opt-for-ebill'
                    , type: 'POST'
                    , data: data
                    , success: function(data) {
                        var data = JSON.parse(data);
                        if (data.result) {
                            $("#checkbox-label").hide();
                            $('#successMessage').show();
                            $('#successMessage').html(data.message);
                        } else {
                            $("#checkbox-label").hide();
                            $('#errorMessage').show();
                            $('#errorMessage').html(data.message);
                        }
                    }
                });

            } else {
                // console.log('no');
                $('.eBill').prop('checked', false);
            }
        }
    });

</script>
@endsection