@extends('front.layouts.app')
@section('content')

<div class="my-account-body">
    <div class="db-profile">
        <div class="container">
            <div class="DP"><img src="{!! $user->avatar_url !!}" class="img-fluid" alt="user-dp" /></div>
            <div class="dp-content">
                <h4>Welcome back, <strong>{!! $user->name !!}!</strong></h4>
                @if(@$user->email)
                <p>{!! $user->email !!}</p>
                @endif
            </div>
            <button class="btn btn-theme-blue" onclick="javascript:window.location.href='{!! route('myaccount') !!}'">My Account</button>
        </div>
    </div>
    <div class="container" style="margin-top:30px;">
        <div class="row">
            <div class="col-md-12" style="margin-bottom: 10px;">
                <div class="my-subscribe-list-row">
                    <a class="my-subscribe-list-item" href="{!! route('myevents') !!}">
                        <div class="icon"><img src="{!! asset('assets/frontend/images/my-events-white.png') !!}" class="img-fluid" alt="my-events-white" /></div>
                        <div class="content">
                            <h5>Events &nbsp;<span>Attended</span></h5>
                            <h4 id="eventCnt">0</h4>
                        </div>
                    </a>
                    <a class="my-subscribe-list-item" href="{!! route('myclasses') !!}">
                        <div class="icon"><img src="{!! asset('assets/frontend/images/my-classes-white.png') !!}" class="img-fluid" alt="my-classes-white" /></div>
                        <div class="content">
                            <h5>Classes &nbsp;<span>Attended</span></h5>
                            <h4 id="classCnt">0</h4>
                        </div>
                    </a>
                    <a class="my-subscribe-list-item" data-bs-toggle="tooltip" title="For security purposes, we require a second login to access giving information." href="https://mecklenburg.elexiochms.com/user/login" target="_blank">
                        <div class="icon"><img src="{!! asset('assets/frontend/images/my-giving.png') !!}" class="img-fluid" alt="my-giving" /></div>
                        <div class="content">
                            <h5>My Giving &nbsp;<span>Login</span></h5>
                            <!-- <h4 id="myGiving">0</h4> -->
                            <i class="fa fa-sign-in"></i>
                        </div>
                    </a>
                    <div class="my-subscribe-list-item">
                        <div class="icon"><img src="{!! asset('assets/frontend/images/my-loyalty-balance.png') !!}" class="img-fluid" alt="my-loyalty-balance" /></div>
                        <div class="content">
                            <h5>Loyalty Balance &nbsp;<span>Star</span></h5>
                            <h4>{!! $user->squareup_loyalty_balance !!}</h4>
                        </div>
                    </div>
                    <div class="my-subscribe-list-item">
                        <div class="icon"><img src="{!! asset('assets/frontend/images/my-loyalty-lt-points.png') !!}" class="img-fluid" alt="my-loyalty-lt-points" /></div>
                        <div class="content">
                            <h5>Loyalty Lifetime Points &nbsp;<span>Star</span></h5>
                            <h4>{!! $user->squareup_loyalty_lifetime_points !!}</h4>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xxl-6 col-xl-12 col-lg-6">
                <div class="card db-card">
                    <div class="card-header">
                        <h3>My Serve Areas</h3>
                        <button class="btn" onclick="javascript:window.location.href='{!! route('myservearea') !!}'">View All</button>
                    </div>
                    <div class="card-body" id="serveareaSection">
                        <div class="loader-image text-center">Loading ...<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-6 col-xl-12 col-lg-6 mt-xxl-0 mt-xl-4 mt-lg-0 mt-4">
                <div class="card db-card">
                    <div class="card-header">
                        <h3>Profiles</h3>
                        <button class="btn" onclick="javascript:window.location.href='{!! route('myprofiles') !!}'">View All</button>
                    </div>
                    <div class="card-body">
                        @if($user->profiles()->count())
                        @foreach($user->profiles as $k => $profiles)
                        <div class="users-list">
                            <div class="img"><img src="{!! $profiles->avatar_url !!}" class="img-fluid" alt="{!! $profiles->name !!}" /></div>
                            <div class="content">
                                <h4><a href="{!! route('myprofiles.view',$profiles->id) !!}">{!! $profiles->name !!}</a></h4>
                                @if($profiles->email)<p>{!! $profiles->email !!}</p>@endif
                                @if($profiles->phone)<strong>{!! $profiles->phone_code." ".$profiles->phone !!}</strong>@endif
                            </div>
                            <button class="btn btn-theme-blue" onclick="javascript:window.location.href='{!! route('myprofiles.edit',$profiles->id) !!}'">
                                <span class="d-none d-md-inline-block">Edit Profile</span>
                                <i class="fas fa-edit d-md-none"></i>
                            </button>
                        </div>
                        @if($k >= 2) @break; @endif
                        @endforeach
                        @else
                        <p class="no-data-text">No Profiles Added!</p>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-12" style="margin-top:30px">
                <div class="card db-card">
                    <div class="card-header">
                        <h3>My Orders</h3>
                        <button class="btn" onclick="javascript:window.location.href='{!! route('myorders') !!}'">View All</button>
                    </div>
                    <div class="card-body pb-0" id="ordersSection">
                        <div class="loader-image text-center mb-3">Loading ...<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i></div>
                    </div>
                </div>
            </div>
            <!-- <div class="col-md-12" style="margin-top:30px;">
                <div class="card db-card">
                    <div class="card-header">
                        <h3>Recommended Products</h3>
                        <button class="btn" onclick="javascript:window.location.href='{!! route('myrecommendedproducts') !!}'">View All</button>
                    </div>
                    <div class="card-body" id="recommendedProductsSection">
                        <div class="loader-image text-center">Loading ...<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i></div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</div>

<div class="modal fade delete-modal" id="elexio-login-modal" data-bs-backdrop="static" data-bs-keyboard="false"
    tabindex="-1" aria-labelledby="deleteProfileLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <p>For security purposes, we require a second login to access giving information.</p>
                <div class="btn-view">
                    <button class="btn btn-cancel" type="button" onclick="javascript:window.open('https://mecklenburg.elexiochms.com/user/login','_blank')" data-bs-dismiss="modal">Login</button>
                    <button class="btn btn-cancel" type="button" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

@section('js')
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
$(document).ready(function () {
    setTimeout(function () {
        retrieveSection();
    }, 5000);
})
function retrieveSection(section)
{
    $.ajax({
        type: "post",
        headers: {
            'X-CSRF-TOKEN': _token
        },
        url: baseUrl + 'dashboard_ajax',
        data : {section:section},
        success: function (data) {
            $("#eventCnt").html(data.eventCnt);
            $("#classCnt").html(data.classCnt);
            // $("#myGiving").html(data.myGiving);
            $("#serveareaSection").html(data.serveareaHtml);
            $("#ordersSection").html(data.ordersHtml);
            // $("#recommendedProductsSection").html(data.recommendedProductsHtml);
        },
        error: function (data, e) {
            // toastr.error("Note not saved. Please try again later!");
        }
    });
}
</script>
@stop
@endsection