@extends('admin.users.user')

@section('content')
<!--begin::details View-->
<div class="card mb-5 mb-xl-12">
    <!--begin::Card header-->
    <div class="card-header cursor-pointer">
        <!--begin::Card title-->
        <div class="card-title m-0">
            <h3 class="fw-bolder m-0">Profile Details</h3>
        </div>
        <!--end::Card title-->
    </div>
    <!--begin::Card header-->
    <!--begin::Card body-->
    <div class="card-body p-9">
        <!--begin::Row-->
        <div class="row mb-7">
            <!--begin::Label-->
            <label class="col-lg-4 fw-bold text-muted">Full Name</label>
            <!--end::Label-->
            <!--begin::Col-->
            <div class="col-lg-8">
                <span class="fw-bolder fs-6 text-gray-800">{{ucfirst($user->profile->fullname)}}</span>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
        <!--begin::Input group-->
        <div class="row mb-7">
            <!--begin::Label-->
            <label class="col-lg-4 fw-bold text-muted">Phone</label>
            <!--end::Label-->
            <!--begin::Col-->
            <div class="col-lg-8 fv-row">
                <span class="fw-bold text-gray-800 fs-6">{{$user->profile->phone ?? 'Not Provided'}}</span>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Input group-->
        <!--begin::Input group-->
        <div class="row mb-7">
            <!--begin::Label-->
            <label class="col-lg-4 fw-bold text-muted">Gender</label>
            <!--end::Label-->
            <!--begin::Col-->
            <div class="col-lg-8 fv-row">
                <span class="fw-bold text-gray-800 fs-6">{{$user->profile->gender ?? 'Not Specified'}}</span>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Input group-->
        <!--begin::Input group-->
        <div class="row mb-7">
            <!--begin::Label-->
            <label class="col-lg-4 fw-bold text-muted">Age</label>
            <!--end::Label-->
            <!--begin::Col-->
            <div class="col-lg-8 fv-row">
                <span class="fw-bold text-gray-800 fs-6">{{$user->profile->age ?? 'Not Specified'}}</span>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Input group-->
        <!--begin::Input group-->
        <div class="row mb-7">
            <!--begin::Label-->
            <label class="col-lg-4 fw-bold text-muted">Contact Phone</label>
            <!--end::Label-->
            <!--begin::Col-->
            <div class="col-lg-8 d-flex align-items-center">
                <span class="fw-bolder fs-6 text-gray-800 me-2">{{$user->profile->phone ?? 'Not Provided'}}</span>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Input group-->
        <!--begin::Input group-->
        <div class="row mb-7">
            <!--begin::Label-->
            <label class="col-lg-4 fw-bold text-muted">Email Address</label>
            <!--end::Label-->
            <!--begin::Col-->
            <div class="col-lg-8">
                <a href="#" class="fw-bold fs-6 text-gray-800 text-hover-primary">{{$user->email}}</a>
            </div>
            <!--end::Col-->
        </div>
        <!--end::Input group-->
        {{-- <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed p-6">
            <span class="svg-icon svg-icon-2tx svg-icon-warning me-4">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor" />
                    <rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)" fill="currentColor" />
                    <rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)" fill="currentColor" />
                </svg>
            </span>
            <div class="d-flex flex-stack flex-grow-1">
                <div class="fw-bold">
                    <h4 class="text-gray-900 fw-bolder">Attention!</h4>
                    <div class="fs-6 text-gray-700">Payment method not setup yet.
                    <a class="fw-bolder" href="#">Add Payment Method</a>.</div>
                </div>
            </div>
        </div> --}}
    </div>
</div>
<div class="card mb-5 mb-xl-12">
    <!--begin::Card header-->
    <div class="card-header cursor-pointer">
        <!--begin::Card title-->
        <div class="card-title m-0">
            <h3 class="fw-bolder m-0">User Gallery</h3>
        </div>
        <!--end::Card title-->
    </div>
    <!--begin::Card header-->
    <div class="card-body pt-7">
        <!--begin::Row-->
        <div class="row align-items-end h-100 gx-5 gx-xl-10">
            @foreach ($user->gallery as $value)
                <div class="col-md-3 mb-5 mt-5 mb-md-0">
                    <!--begin::Overlay-->
                    <a class="d-block overlay" data-fslightbox="lightbox-hot-sales" href="{{asset($value->photo)}}">
                        <!--begin::Image-->
                        <div class="overlay-wrapper bgi-position-center bgi-no-repeat bgi-size-cover h-200px card-rounded mb-3" style="height: 266px;background-image:url('{{asset($value->photo)}}"></div>
                        <!--end::Image-->
                        <!--begin::Action-->
                        <div class="overlay-layer card-rounded bg-dark bg-opacity-25">
                            <i class="bi bi-eye-fill fs-2x text-white"></i>
                        </div>
                        <!--end::Action-->
                    </a>
                    <!--end::Overlay-->
                    <!--begin::Info-->
                    <div class="m-0">
                        <!--begin::Title-->
                        <a href="#" class="text-gray-800 text-hover-primary fs-3 fw-bolder d-block mb-2">{{$value->description}}</a>
                        <!--end::Title-->
                        <!--begin::Time-->
                        <span class="fw-bolder fs-6 text-gray-400 d-block lh-1">{{$value->created_at->diffForHumans()}}</span>
                        <!--end::Time-->
                    </div>
                    <!--end::Info-->
                </div>
            @endforeach
        </div>
        <!--end::Row-->
    </div>
</div>
<div class="row gy-5 g-xl-12">
    <!--begin::Col-->
    <div class="col-xl-6">
        <!--begin::List widget 5-->
        <div class="card card-flush h-xl-100">
            <!--begin::Header-->
            <div class="card-header pt-7">
                <!--begin::Title-->
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bolder text-dark">Followers</span>
                </h3>
                <!--end::Title-->
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body">
                <table class="bloodlines_table table table-striped table-row-bordered gy-5 gs-7 border rounded">
                    <thead>
                        <tr class="fw-bold fs-6 text-gray-800 px-7">
                            <th>Profile</th>
                            <th>Sigup with</th>
                            <th>View</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($user->followers as $follower)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <a href="{{route('admin.user' , ['id' => $follower->users->id, 'page' => 'overview'])}}" class="symbol symbol-50px">
                                        <span class="symbol-label" style="background-image:url({{$follower->users->profile->profile_image}});"></span>
                                    </a>
                                    <div class="ms-5">
                                        <a href="{{route('admin.user' , ['id' => $follower->users->id, 'page' => 'overview'])}}" class="text-gray-800 text-hover-primary fs-5 fw-bolder" data-kt-ecommerce-product-filter="product_name">{{ucfirst($follower->users->username)}}</a>
                                        <div class="text-muted fs-7 fw-bolder">{{$follower->users->email}}</div>
                                    </div>
                                </div>
                            </td>
                            <td>{{ isset($follower->platform) ? ucfirst(preg_replace('/(?<!\s)([A-Z])/', ' $1', $follower->platform)) : 'Bloodlines App' }}</td>
                            <td>
                                <a href="{{route('admin.user' , ['id' => $follower->users->id, 'page' => 'overview'])}}" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary w-30px h-30px">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!--end::Body-->
        </div>
        <!--end::List widget 5-->
    </div>
    <!--end::Col-->
    <!--begin::Col-->
    <div class="col-xl-6">
        <!--begin::Table Widget 5-->
        <div class="card card-flush h-xl-100">
            <!--begin::Card header-->
            <div class="card-header pt-7">
                <!--begin::Title-->
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bolder text-dark">Following</span>
                </h3>
                <!--end::Title-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body">
                <table class="bloodlines_table table table-striped table-row-bordered gy-5 gs-7 border rounded">
                    <thead>
                        <tr class="fw-bold fs-6 text-gray-800 px-7">
                            <th>Profile</th>
                            <th>Sigup with</th>
                            <th>View</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($user->following as $following)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <a href="{{route('admin.user' , ['id' => $following->users->id, 'page' => 'overview'])}}" class="symbol symbol-50px">
                                        <span class="symbol-label" style="background-image:url({{$following->users->profile->profile_image}});"></span>
                                    </a>
                                    <div class="ms-5">
                                        <a href="{{route('admin.user' , ['id' => $following->users->id, 'page' => 'overview'])}}" class="text-gray-800 text-hover-primary fs-5 fw-bolder" data-kt-ecommerce-product-filter="product_name">{{ucfirst($following->users->username)}}</a>
                                        <div class="text-muted fs-7 fw-bolder">{{$following->users->email}}</div>
                                    </div>
                                </div>
                            </td>
                            <td>{{ isset($following->platform) ? ucfirst(preg_replace('/(?<!\s)([A-Z])/', ' $1', $following->platform)) : 'Bloodlines App' }}</td>
                            <td>
                                <a href="{{route('admin.user' , ['id' => $following->users->id, 'page' => 'overview'])}}" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary w-30px h-30px">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Table Widget 5-->
    </div>
    <!--end::Col-->
</div>
<!--end::details View-->
@endsection