@extends('admin.layouts.master')
@section('content')
  <!-- Page Header -->
  <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
    <h1 class="page-title fw-semibold fs-18 mb-0">Mail Settings</h1>
    <div class="ms-md-1 ms-0">
        <nav>
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Mail</a></li>
                <li class="breadcrumb-item active" aria-current="page">Mail Settings</li>
            </ol>
        </nav>
    </div>
</div>
<!-- Page Header Close -->

<!-- Start::row-1 -->
<div class="row mb-5">
    <div class="col-xl-12">
        <div class="card custom-card">
            <div class="card-header d-sm-flex d-block">
                <ul class="nav nav-tabs nav-tabs-header mb-0 d-sm-flex d-block" role="tablist">
                    <li class="nav-item m-1">
                        <a class="nav-link active" data-bs-toggle="tab" role="tab" aria-current="page"
                        href="#personal-info" aria-selected="true">Personal Information</a>
                    </li>
                    <li class="nav-item m-1">
                        <a class="nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                        href="#account-settings" aria-selected="true">Account Settings</a>
                    </li>
                    <li class="nav-item m-1">
                        <a class="nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                        href="#email-settings" aria-selected="true">Email</a>
                    </li>
                    <li class="nav-item m-1">
                        <a class="nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                        href="#labels" aria-selected="true">Labels</a>
                    </li>
                    <li class="nav-item m-1">
                        <a class="nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                        href="#notification-settings" aria-selected="true">Notifications</a>
                    </li>
                    <li class="nav-item m-1">
                        <a class="nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                        href="#security" aria-selected="true">Security</a>
                    </li>
                </ul>
            </div>
            <form class="ajax-form-img needs-validation" enctype="multipart/form-data" method="POST" action="{{route('admin.profile.update')}}">
                @csrf
            <div class="card-body">
                    <div class="tab-content">
                    <div class="tab-pane show active" id="personal-info"
                        role="tabpanel">
                        <div class="row gap-3 justify-content-between">
                            <div class="col-xl-7">
                                <div class="p-sm-3 p-0">
                                    <h6 class="fw-semibold mb-3">
                                        Photo :
                                    </h6>
                                    <div class="mb-4 d-sm-flex align-items-center">
                                        <div class="mb-0 me-5 main_img">
                                            <span class="avatar avatar-xxl avatar-rounded">
                                                <img class="image-preview" src="{{asset('admin_assets/assets/images/faces/').'/'.$user->profile_img}}" alt="" id="profile-img">
                                                <a href="javascript:void(0);" class="badge rounded-pill bg-primary avatar-badge">
                                                    <input type="file" name="profile_img" class="image-input position-absolute w-100 h-100 op-0" id="profile-change">
                                                    <i class='bx bx-camera'></i>
                                                </a>
                                            </span>
                                        </div>
                                        <div class="btn-group">
                                            <button class="btn btn-primary">Profile</button>
                                            <button class="btn btn-light">Image</button>
                                        </div>
                                    </div>

                                    <h6 class="fw-semibold mb-3">
                                        Personal information :
                                    </h6>
                                    <div class="row gy-4 mb-4">

                                        <div class="col-xl-6">
                                            <label for="email-address" class="form-label">Name :</label>
                                            <input name="name" type="text" value="{{$user->name}}" class="form-control" id="email-address" placeholder="Enter name">
                                        </div>
                                        <div class="col-xl-6">
                                            <label for="email-address" class="form-label">Email Address :</label>
                                            <input name="email" type="text" value="{{$user->email}}" class="form-control" id="email-address" placeholder="xyz@gmail.com">
                                        </div>
                                        <div class="col-xl-6">
                                            <label for="Contact-Details" class="form-label">New-Password :</label>
                                            <input name="password" type="text" class="form-control" id="" placeholder="Enter new password">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4">
                                <div class="card custom-card shadow-none mb-0 border">
                                    <div class="card-header justify-content-between d-sm-flex d-block">
                                        <div class="card-title">Login Activity </div>
                                        <div class="mt-sm-0 mt-2">
                                            <button class="btn btn-sm btn-primary">Signout from all devices</button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <ul class="list-group">
                                            @foreach ($loginActivities as $loginActivitiy)
                                                <li class="list-group-item">
                                                    <div class="d-sm-flex d-block align-items-top">
                                                        <div class="lh-1 mb-sm-0 mb-2"><i class="bi bi-phone me-2 fs-16 align-middle text-muted"></i></div>
                                                        <div class="lh-1 flex-fill">
                                                            <p class="mb-1">
                                                                <span class="fw-semibold">{{$loginActivitiy->user_device}}</span>
                                                            </p>
                                                            <p class="mb-0">
                                                                <span class="text-muted fs-11">{{@$loginActivitiy->user_browser}},Pakistan {{ \Carbon\Carbon::parse($loginActivitiy->created_at)->setTimezone('Asia/Karachi')->format('d F Y h:i a')}} </span>
                                                                {{-- <span class="text-muted fs-11">Manchester, UK-Nov 30, 04:45PM</span> --}}
                                                            </p>
                                                        </div>
                                                        <div class="dropdown mt-sm-0 mt-2">
                                                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light" data-bs-toggle="dropdown" aria-expanded="false">
                                                                <i class="fe fe-more-vertical"></i>
                                                            </a>
                                                            <ul class="dropdown-menu">
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
                                                                <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                            @endforeach

                                            {{-- <li class="list-group-item">
                                                <div class="d-sm-flex d-block align-items-top">
                                                    <div class="lh-1 mb-sm-0 mb-2"><i class="bi bi-laptop me-2 fs-16 align-middle text-muted"></i></div>
                                                    <div class="lh-1 flex-fill">
                                                        <p class="mb-1">
                                                            <span class="fw-semibold">Lenovo-1291203</span>
                                                        </p>
                                                        <p class="mb-0">
                                                            <span class="text-muted fs-11">England, UK-Aug 12, 12:25PM</span>
                                                        </p>
                                                    </div>
                                                    <div class="dropdown mt-sm-0 mt-2">
                                                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="fe fe-more-vertical"></i>
                                                        </a>
                                                        <ul class="dropdown-menu">
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <div class="d-sm-flex d-block align-items-top">
                                                    <div class="lh-1 mb-sm-0 mb-2"><i class="bi bi-laptop me-2 fs-16 align-middle text-muted"></i></div>
                                                    <div class="lh-1 flex-fill">
                                                        <p class="mb-1">
                                                            <span class="fw-semibold">Macbook-Suzika</span>
                                                        </p>
                                                        <p class="mb-0">
                                                            <span class="text-muted fs-11">Brightoon, UK-Jul 18, 8:34AM</span>
                                                        </p>
                                                    </div>
                                                    <div class="dropdown mt-sm-0 mt-2">
                                                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="fe fe-more-vertical"></i>
                                                        </a>
                                                        <ul class="dropdown-menu">
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <div class="d-sm-flex d-block align-items-top">
                                                    <div class="lh-1 mb-sm-0 mb-2"><i class="bi bi-pc-display-horizontal me-2 fs-16 align-middle text-muted"></i></div>
                                                    <div class="lh-1 flex-fill">
                                                        <p class="mb-1">
                                                            <span class="fw-semibold">Apple-Desktop</span>
                                                        </p>
                                                        <p class="mb-0">
                                                            <span class="text-muted fs-11">Darlington, UK-Jan 14, 11:14AM</span>
                                                        </p>
                                                    </div>
                                                    <div class="dropdown mt-sm-0 mt-2">
                                                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-light" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <i class="fe fe-more-vertical"></i>
                                                        </a>
                                                        <ul class="dropdown-menu">
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
                                                            <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </li> --}}
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="float-end">
                    <button class="btn btn-light m-1">
                        Restore Defaults
                    </button>
                      <button type="submit" class="submitButton btn btn-primary">
                          Save Changes
                          <span class="d-none spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                      </button>
                    </div>
                </div>
            </div>
        </form>
        </div>
    </div>
@endsection