@extends('backend.layouts.app')
{{-- @bukStyles(true)
@bukScripts(true) --}}
@section('content')
    <!-- Content wrapper -->
    <div class="content-wrapper">

        <!-- Content -->

        <div class="container-xxl flex-grow-1 container-p-y">


            <div class="row">
                <!-- User Sidebar -->
                <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
                    <!-- User Card -->
                    <div class="card mb-6">
                        <div class="card-body pt-12">
                            <div class="user-avatar-section">
                                <div class=" d-flex align-items-center flex-column">
                                    <img class="img-fluid rounded mb-4" src="../../assets/img/avatars/10.png" height="120"
                                        width="120" alt="User avatar" />
                                    <div class="user-info text-center">
                                        <h5>{{$user->fullname}}</h5>
                                        @foreach($user->roles as $role)
                                        <span class="badge bg-label-danger rounded-pill">{{ $role->name }}</span>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-around flex-wrap my-6 gap-0 gap-md-3 gap-lg-4">
                                <div class="d-flex align-items-center me-5 gap-4">
                                    <div class="avatar">
                                        <div class="avatar-initial bg-label-primary rounded">
                                            <i class='ri-check-line ri-24px'></i>
                                        </div>
                                    </div>
                                    <div>
                                        <h5 class="mb-0">1.23k</h5>
                                        <span>Task Done</span>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center gap-4">
                                    <div class="avatar">
                                        <div class="avatar-initial bg-label-primary rounded">
                                            <i class='ri-briefcase-line ri-24px'></i>
                                        </div>
                                    </div>
                                    <div>
                                        <h5 class="mb-0">568</h5>
                                        <span>Project Done</span>
                                    </div>
                                </div>
                            </div>
                            <h5 class="pb-4 border-bottom mb-4">Details</h5>
                            <div class="info-container">
                                <ul class="list-unstyled mb-6">
                                    <li class="mb-2">
                                        <span class="h6">Username:</span>
                                        <span>{{$user->username}}</span>
                                    </li>
                                    <li class="mb-2">
                                        <span class="h6">Email:</span>
                                        <span>{{$user->email}}</span>
                                    </li>
                                    <li class="mb-2">
                                        <span class="h6">Status:</span>
                                        @if($user->status === 'Active')
                                            <span class="badge bg-label-success rounded-pill">{{ $user->status }}</span>
                                        @elseif($user->status === 'Inactive')
                                            <span class="badge bg-label-secondary rounded-pill">{{ $user->status }}</span>
                                        @else
                                            <span class="badge bg-label-primary rounded-pill">{{ $user->status }}</span>
                                        @endif

                                    </li>
                                    <li class="mb-2">
                                        <span class="h6">Role:</span>
                                        @foreach($user->roles as $role)
                                        <span>{{ $role->name }}</span>
                                        @endforeach
                                    </li>
                                    
                                </ul>
                                <div class="d-flex justify-content-center">
                                    <a href="javascript:;" class="btn btn-primary me-4" data-bs-target="#editUser"
                                        data-bs-toggle="modal">Edit</a>
                                    <a href="javascript:;" class="btn btn-outline-danger suspend-user">Suspend</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /User Card -->

                </div>
                <!--/ User Sidebar -->


                <!-- User Content -->
                <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
                    <!-- User Tabs -->
                    <div class="nav-align-top">
                        <ul class="nav nav-pills flex-column flex-md-row flex-wrap mb-6 row-gap-2">
                            <li class="nav-item"><a class="nav-link active" href="{{url('users-insights')}}"><i
                                        class="ri-group-line me-1_5"></i>Account</a></li>
                            <li class="nav-item"><a class="nav-link" href="#"><i
                                        class="ri-lock-2-line me-1_5"></i>Security</a></li>
                            <li class="nav-item"><a class="nav-link" href="#"><i
                                        class="ri-bookmark-line me-1_5"></i>Billing & Plans</a></li>
                            <li class="nav-item"><a class="nav-link" href="#"><i
                                        class="ri-notification-4-line me-1_5"></i>Notifications</a></li>
                            <li class="nav-item"><a class="nav-link " href="#"><i
                                        class="ri-link-m me-1_5"></i>Connections</a></li>
                        </ul>
                    </div>
                    <!--/ User Tabs -->


                    <!-- Social Accounts -->
                    <div class="card mb-6">
                        <div class="card-header">
                            <h5 class="mb-0">Social Accounts</h5>
                            <p class="mb-0 card-subtitle mt-0">Display content from social accounts on your site</p>
                        </div>
                        <div class="card-body">
                            <!-- Social Accounts -->
                            <div class="d-flex mb-4 align-items-center">
                                <div class="flex-shrink-0">
                                    <img src="../../assets/img/icons/brands/facebook.png" alt="facebook" class="me-3"
                                        height="36">
                                </div>
                                <div class="flex-grow-1 row align-items-center">
                                    <div class="col-7">
                                        <h6 class="mb-0">Facebook</h6>
                                        <span>Not Connected</span>
                                    </div>
                                    <div class="col-5 text-end">
                                        <button class="btn btn-outline-secondary btn-icon"><i
                                                class="ri-link ri-22px"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex mb-4 align-items-center">
                                <div class="flex-shrink-0">
                                    <img src="../../assets/img/icons/brands/twitter.png" alt="twitter" class="me-3"
                                        height="36">
                                </div>
                                <div class="flex-grow-1 row align-items-center">
                                    <div class="col-7">
                                        <h6 class="mb-0">Twitter</h6>
                                        <a href="https://twitter.com/Theme_Selection" target="_blank">@ThemeSelection</a>
                                    </div>
                                    <div class="col-5 text-end">
                                        <button class="btn btn-outline-danger btn-icon"><i
                                                class="ri-delete-bin-7-line ri-22px"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex mb-4 align-items-center">
                                <div class="flex-shrink-0">
                                    <img src="../../assets/img/icons/brands/instagram.png" alt="instagram" class="me-3"
                                        height="36">
                                </div>
                                <div class="flex-grow-1 row align-items-center">
                                    <div class="col-7">
                                        <h6 class="mb-0">instagram</h6>
                                        <a href="https://www.instagram.com/themeselection/"
                                            target="_blank">@ThemeSelection</a>
                                    </div>
                                    <div class="col-5 text-end">
                                        <button class="btn btn-outline-danger btn-icon"><i
                                                class="ri-delete-bin-7-line ri-22px"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex mb-4 align-items-center">
                                <div class="flex-shrink-0">
                                    <img src="../../assets/img/icons/brands/dribbble.png" alt="dribbble" class="me-3"
                                        height="36">
                                </div>
                                <div class="flex-grow-1 row align-items-center">
                                    <div class="col-7">
                                        <h6 class="mb-0">Dribbble</h6>
                                        <span>Not Connected</span>
                                    </div>
                                    <div class="col-5 text-end">
                                        <button class="btn btn-outline-secondary btn-icon"><i
                                                class="ri-link ri-22px"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <img src="../../assets/img/icons/brands/behance.png" alt="behance" class="me-3"
                                        height="36">
                                </div>
                                <div class="flex-grow-1 row align-items-center">
                                    <div class="col-7">
                                        <h6 class="mb-0">Behance</h6>
                                        <span>Not Connected</span>
                                    </div>
                                    <div class="col-5 text-end">
                                        <button class="btn btn-outline-secondary btn-icon"><i
                                                class="ri-link ri-22px"></i></button>
                                    </div>
                                </div>
                            </div>
                            <!-- /Social Accounts -->
                        </div>
                    </div>
                </div>
                <!-- /Social Accounts -->
            </div>

            <!-- Modals -->
            <!-- Edit User Modal -->
            <div class="modal fade" id="editUser" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-simple modal-edit-user">
                    <div class="modal-content">
                        <div class="modal-body p-0">
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                            <div class="text-center mb-6">
                                <h4 class="mb-2">Edit User Information</h4>
                                <p class="mb-6">Updating user details will receive a privacy audit.</p>
                            </div>
                            <form id="editUserForm" class="row g-5" onsubmit="return false">
                                <div class="col-12 col-md-6">
                                    <div class="form-floating form-floating-outline">
                                        <input type="text" id="modalEditUserFirstName" name="modalEditUserFirstName"
                                            class="form-control" value="Oliver" placeholder="Oliver" />
                                        <label for="modalEditUserFirstName">First Name</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="form-floating form-floating-outline">
                                        <input type="text" id="modalEditUserLastName" name="modalEditUserLastName"
                                            class="form-control" value="Queen" placeholder="Queen" />
                                        <label for="modalEditUserLastName">Last Name</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating form-floating-outline">
                                        <input type="text" id="modalEditUserName" name="modalEditUserName"
                                            class="form-control" value="oliver.queen" placeholder="oliver.queen" />
                                        <label for="modalEditUserName">Username</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="form-floating form-floating-outline">
                                        <input type="text" id="modalEditUserEmail" name="modalEditUserEmail"
                                            class="form-control" value="oliverqueen@gmail.com"
                                            placeholder="oliverqueen@gmail.com" />
                                        <label for="modalEditUserEmail">Email</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="form-floating form-floating-outline">
                                        <select id="modalEditUserStatus" name="modalEditUserStatus" class="form-select"
                                            aria-label="Default select example">
                                            <option value="1" selected>Active</option>
                                            <option value="2">Inactive</option>
                                            <option value="3">Suspended</option>
                                        </select>
                                        <label for="modalEditUserStatus">Status</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="form-floating form-floating-outline">
                                        <input type="text" id="modalEditTaxID" name="modalEditTaxID"
                                            class="form-control modal-edit-tax-id" placeholder="123 456 7890" />
                                        <label for="modalEditTaxID">Tax ID</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="input-group input-group-merge">
                                        <span class="input-group-text">US (+1)</span>
                                        <div class="form-floating form-floating-outline">
                                            <input type="text" id="modalEditUserPhone" name="modalEditUserPhone"
                                                class="form-control phone-number-mask" value="+1 609 933 4422"
                                                placeholder="+1 609 933 4422" />
                                            <label for="modalEditUserPhone">Phone Number</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="form-floating form-floating-outline">
                                        <select id="modalEditUserLanguage" name="modalEditUserLanguage"
                                            class="select2 form-select" multiple>
                                            <option value="">Select</option>
                                            <option value="english" selected>English</option>
                                            <option value="spanish">Spanish</option>
                                            <option value="french">French</option>
                                            <option value="german">German</option>
                                            <option value="dutch">Dutch</option>
                                            <option value="hebrew">Hebrew</option>
                                            <option value="sanskrit">Sanskrit</option>
                                            <option value="hindi">Hindi</option>
                                        </select>
                                        <label for="modalEditUserLanguage">Language</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="form-floating form-floating-outline">
                                        <select id="modalEditUserCountry" name="modalEditUserCountry"
                                            class="select2 form-select" data-allow-clear="true">
                                            <option value="">Select</option>
                                            <option value="Australia">Australia</option>
                                            <option value="Bangladesh">Bangladesh</option>
                                            <option value="Belarus">Belarus</option>
                                            <option value="Brazil">Brazil</option>
                                            <option value="Canada">Canada</option>
                                            <option value="China">China</option>
                                            <option value="France">France</option>
                                            <option value="Germany">Germany</option>
                                            <option value="India" selected>India</option>
                                            <option value="Indonesia">Indonesia</option>
                                            <option value="Israel">Israel</option>
                                            <option value="Italy">Italy</option>
                                            <option value="Japan">Japan</option>
                                            <option value="Korea">Korea, Republic of</option>
                                            <option value="Mexico">Mexico</option>
                                            <option value="Philippines">Philippines</option>
                                            <option value="Russia">Russian Federation</option>
                                            <option value="South Africa">South Africa</option>
                                            <option value="Thailand">Thailand</option>
                                            <option value="Turkey">Turkey</option>
                                            <option value="Ukraine">Ukraine</option>
                                            <option value="United Arab Emirates">United Arab Emirates</option>
                                            <option value="United Kingdom">United Kingdom</option>
                                            <option value="United States">United States</option>
                                        </select>
                                        <label for="modalEditUserCountry">Country</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-check form-switch">
                                        <input type="checkbox" class="form-check-input" id="editBillingAddress" />
                                        <label for="editBillingAddress" class="text-heading">Use as a billing
                                            address?</label>
                                    </div>
                                </div>
                                <div class="col-12 text-center">
                                    <button type="submit" class="btn btn-primary me-3">Submit</button>
                                    <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal"
                                        aria-label="Close">Cancel</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Edit User Modal -->

            <!-- Add New Credit Card Modal -->
            <div class="modal fade" id="upgradePlanModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-simple modal-upgrade-plan">
                    <div class="modal-content">
                        <div class="modal-body pt-md-0 px-0">
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                            <div class="text-center mb-6">
                                <h4 class="mb-2">Upgrade Plan</h4>
                                <p>Choose the best plan for user.</p>
                            </div>
                            <form id="upgradePlanForm" class="row g-5 d-flex align-items-center" onsubmit="return false">
                                <div class="col-sm-9">
                                    <select id="choosePlan" name="choosePlan" class="form-select form-select-sm"
                                        aria-label="Choose Plan">
                                        <option selected>Choose Plan</option>
                                        <option value="standard">Standard - $99/month</option>
                                        <option value="exclusive">Exclusive - $249/month</option>
                                        <option value="Enterprise">Enterprise - $499/month</option>
                                    </select>
                                </div>
                                <div class="col-sm-3 d-flex align-items-end">
                                    <button type="submit" class="btn btn-primary">Upgrade</button>
                                </div>
                            </form>
                        </div>
                        <hr class="mx-md-n5 mx-n3">
                        <div class="modal-body pb-md-0 px-0">
                            <p class="mb-0">User current plan is standard plan</p>
                            <div class="d-flex justify-content-between align-items-center flex-wrap">
                                <div class="d-flex justify-content-center me-2 mt-3">
                                    <sup class="h5 pricing-currency pt-1 mt-2 mb-0 me-1 text-primary">$</sup>
                                    <h1 class="display-3 mb-0 text-primary">99</h1>
                                    <sub class="h6 pricing-duration mt-auto mb-2 pb-1 text-body">/month</sub>
                                </div>
                                <button class="btn btn-outline-danger cancel-subscription mt-4">Cancel
                                    Subscription</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Add New Credit Card Modal -->

            <!-- /Modals -->
        </div>
        <!-- / Content -->
    @endsection

    @section('footer_scripts')
    @endsection