@extends('dashboard.dashboard_layouts.dashboard_master')

@section('admin_dashboard_title')
    Profile
@endsection

@section('admin_dashboard_css')
@endsection

@section('admin_dashboard_content')
<div class="content dashboard-content h-100">
    <h1 class="dashboard-content-h1">Profile</h1>
    <div class="content-wrap">
        <!-- breadcrumb -->
        <div class="breadcrumb-header justify-content-between">

            <nav class="breadcrumb-4">

                <ol class="breadcrumb breadcrumb-style1">

                    <li class="breadcrumb-item">

                        <a href="{{ route('dashboard') }}">Dashboard</a>

                    </li>

                    <li class="breadcrumb-item active">Profile</li>

                </ol>

            </nav>

        </div>

        <!-- breadcrumb -->

        <!-- row -->

        <div class="row row-sm">

            <div class="col-lg-4">

                <div class="card mg-b-20">

                    <div class="card-body">

                        <div class="ps-0">

                            <div class="main-profile-overview">

                                <div class="main-img-user profile-user">
                                    
                                        <img alt="" src="{{ $user->campaign_information->campaign_bg_image != null ? asset('processed_images/' . $user->campaign_information->campaign_bg_image) : asset('user.png') }}" style="object-position: top;">
                                </div>

                                <div class="d-flex justify-content-between mg-b-20">

                                    <div>

                                        <h5 class="main-profile-name">{{ $login_user->first_name }}
                                            {{ $login_user->last_name }}</h5>

                                        <p class="main-profile-name-text">{{ $login_user->roles[0]->name }}</p>

                                    </div>

                                </div>

                                <h6>Bio</h6>

                                <div class="main-profile-bio">
                                    
                                    {{str_replace('"',' ',$user_bio)}}

                                    {{-- {{ isset($login_user->bio) ? $login_user->bio : '' }} --}}

                                </div>
                                <!-- main-profile-bio -->

                                <hr class="mg-y-30">

                                <label class="main-content-label tx-13 mg-b-20">Social</label>

                                <div class="main-profile-social-list">

                                    <div class="media">

                                        <div class="media-icon bg-primary-transparent text-primary">

                                            <i class="icon ion-logo-facebook"></i>

                                        </div>

                                        <div class="media-body text-truncate">

                                            <span>Facebook</span> <a
                                                href="{{ $login_user->facebook }}">{{ $login_user->facebook }}</a>

                                        </div>

                                    </div>

                                    <div class="media">

                                        <div class="media-icon bg-info-transparent text-info">

                                            <i class="icon ion-logo-twitter"></i>

                                        </div>

                                        <div class="media-body">

                                            <span>Twitter</span> <a
                                                href="{{ $login_user->twitter }}">{{ $login_user->twitter }}</a>

                                        </div>

                                    </div>

                                    <div class="media">

                                        <div class="media-icon bg-danger-transparent text-danger">

                                            <i class="icon ion-logo-instagram"></i>

                                        </div>

                                        <div class="media-body">

                                            <span>Instagram</span> <a
                                                href="{{ $login_user->instagram }}">{{ $login_user->instagram }}</a>

                                        </div>

                                    </div>

                                    <div class="media">

                                        <div class="media-icon bg-primary-transparent text-primary">

                                            <i class="icon ion-logo-linkedin"></i>

                                        </div>

                                        <div class="media-body">

                                            <span>Linkedin</span> <a
                                                href="{{ $login_user->linkedin }}">{{ $login_user->linkedin }}</a>

                                        </div>

                                    </div>

                                    <div class="media">

                                        <div class="media-icon bg-danger-transparent text-danger">

                                            <i class="icon ion-logo-youtube"></i>

                                        </div>

                                        <div class="media-body">

                                            <span>Youtube</span> <a
                                                href="{{ $login_user->youtube }}">{{ $login_user->youtube }}</a>

                                        </div>

                                    </div>

                                    <div class="media">

                                        <div class="media-icon bg-info-transparent"
                                            style="color:#292BB8; background:#6C82CE;">

                                            <i class="fab fa-flickr"></i>

                                        </div>

                                        <div class="media-body">

                                            <span>Flicker</span> <a
                                                href="{{ $login_user->flicker }}">{{ $login_user->flicker }}</a>

                                        </div>

                                    </div>

                                </div>

                            </div><!-- main-profile-overview -->

                        </div>

                    </div>

                </div>

            </div>

            <div class="col-lg-8">

                <div class="row row-sm">

                    @if ($login_user->roles[0]->name == 'Admin')
                        <div class="col-sm-12 col-xl-4 col-lg-12 col-md-12">

                            <div class="card ">

                                <div class="card-body">

                                    <div class="counter-status d-flex md-mb-0">

                                        <div class="counter-icon bg-primary-transparent">

                                            <i class="icon-user text-primary"></i>

                                        </div>
                                        <div class="ms-auto">
                                            <h5 class="tx-13">Clients</h5>
                                            <h2 class="mb-0 tx-22 mb-1 mt-1">{{ $client_count }}</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12 col-xl-4 col-lg-12 col-md-12">
                            <div class="card ">
                                <div class="card-body">
                                    <div class="counter-status d-flex md-mb-0">
                                        <div class="counter-icon bg-danger-transparent">
                                            <i class="icon-paypal text-danger"></i>
                                        </div>
                                        <div class="ms-auto">

                                            <h5 class="tx-13">Donations</h5>
                                            <h2 class="mb-0 tx-22 mb-1 mt-1">${{ $donation_sum }}</h2>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

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

                            <div class="card ">

                                <div class="card-body">

                                    <div class="counter-status d-flex md-mb-0">

                                        <div class="counter-icon bg-success-transparent">

                                            <i class="fab fa-accusoft text-success"></i>

                                        </div>

                                        <div class="ms-auto">

                                            <h5 class="tx-13">Request pending</h5>

                                            <h2 class="mb-0 tx-22 mb-1 mt-1">
                                                {{ $total_active_clients }}
                                            </h2>
                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>
                    @elseif($login_user->roles[0]->name == 'Client')
                        <div class="col-sm-12 col-xl-4 col-lg-12 col-md-12">

                            <div class="card ">

                                <div class="card-body">

                                    <div class="counter-status d-flex md-mb-0">

                                        <div class="counter-icon bg-primary-transparent">

                                            <i class="icon-user text-primary"></i>

                                        </div>
                                        <div class="ms-auto">
                                            <h5 class="tx-13">Members</h5>
                                            <h2 class="mb-0 tx-22 mb-1 mt-1">{{ $members }}</h2>

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

                        <div class="col-sm-12 col-xl-4 col-lg-12 col-md-12">
                            <div class="card ">
                                <div class="card-body">
                                    <div class="counter-status d-flex md-mb-0">
                                        <div class="counter-icon bg-danger-transparent">
                                            <i class="icon-paypal text-danger"></i>
                                        </div>
                                        <div class="ms-auto">

                                            <h5 class="tx-13">Donations</h5>

                                            <h2 class="mb-0 tx-22 mb-1 mt-1">${{ $donate }}</h2>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

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

                            <div class="card ">

                                <div class="card-body">

                                    <div class="counter-status d-flex md-mb-0">

                                        <div class="counter-icon bg-success-transparent">

                                            <i class="fab fa-accusoft text-success"></i>

                                        </div>

                                        <div class="ms-auto">

                                            <h5 class="tx-13">Requests</h5>

                                            <h2 class="mb-0 tx-22 mb-1 mt-1">{{ $pending }}</h2>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>
                    @endif

                </div>

                <div class="card">

                    <div class="card-body">

                        <div class="tabs-menu ">

                            <!-- Tabs -->

                            <ul class="nav nav-tabs profile navtab-custom panel-tabs">

                                <li class="">

                                    <a href="#home" data-bs-toggle="#home" data-bs-toggle="collapse" class="active"
                                        aria-expanded="true"> <span class="visible-xs"><i
                                                class="las la-user-circle tx-16 me-1"></i></span> <span
                                            class="hidden-xs">ABOUT ME</span> </a>

                                </li>

                            </ul>

                        </div>

                        <div class="tab-content border-start border-bottom border-right border-top-0 p-4 br-dark">

                            <div class="tab-pane active" id="home">
                                <h4 class="tx-15 text-uppercase mb-3">BIOdata</h4>
                                <p class="m-b-5"> {{str_replace('"',' ',$user_bio)}}</p>
                                {{-- {{ isset($login_user->bio) ? $login_user->bio : '' }} --}}
                                <div class="m-t-30">
                                    <h4 class="tx-15 text-uppercase mt-3">Profile Title</h4>
                                    <div class=" p-t-10">
                                        <h5 class="text-primary m-b-5 tx-14">Candidate for Toronto</h5>
                                    </div>
                                </div>
                                <div class="m-t-30">
                                    <h4 class="tx-15 text-uppercase mt-3">Email</h4>
                                    <div class=" p-t-10">
                                        <h5 class="text-primary m-b-5 tx-14">{{ $login_user->email }}</h5>
                                    </div>
                                </div>
                                @if ($login_user->dob != null)
                                    <div class="m-t-30">
                                        <h4 class="tx-15 text-uppercase mt-3">Date of Birth</h4>
                                        <div class=" p-t-10">
                                            <h5 class="text-muted m-b-5 tx-14">{{ $login_user->dob }}</h5>
                                        </div>
                                    </div>
                                @endif
                                @if ($login_user->address != null)
                                    <div class="m-t-30">
                                        <h4 class="tx-15 text-uppercase mt-3">Address</h4>
                                        <div class=" p-t-10">
                                            <h5 class="text-muted m-b-5 tx-14">{{ $login_user->address }}</h5>
                                        </div>
                                    </div>
                                @endif
                                @if ($login_user->city != null)
                                    <div class="m-t-30">
                                        <h4 class="tx-15 text-uppercase mt-3">City</h4>
                                        <div class=" p-t-10">
                                            <h5 class="text-muted m-b-5 tx-14">{{ $login_user->city }}</h5>
                                        </div>
                                    </div>
                                @endif
                                @can('profile edit')
                                    <a href="/profile/edit" class="btn btn-primary btn-sm " style="float: right">Edit
                                        Profile</a>
                                @endcan
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- row closed -->
    </div>
</div>
@endsection