@extends('components.customer-layout')

@section('header')
<div class="page-header-breadcrumb d-md-flex d-block align-items-center justify-content-between ">
    <h4 class="fw-medium mb-0">Profile Settings</h4>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);" class="text-white-50">Dashboards</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">Profile</li>
    </ol>
</div>
@endsection

@section('content')

<style>
    .color-white{
        color : #fff !important;
    }
</style>

{{-- Top Performers --}}
<!-- Start::row-1 -->
<div class="card custom-card">
    <div class="card-body">
        <div class="row">
            <div class="col-xl-3 col-lg-3">
                <nav class="nav nav-tabs flex-column nav-style-5" role="tablist">

                    <a class="nav-link mt-2 ml-2 text-md" href="#">Account</a>

                    <a class="nav-link active pl-3 mt-2" data-bs-toggle="tab" role="tab" aria-current="page"
                        href="#personal-info" aria-selected="true">
                        {{-- <i class="fa-regular fa-user me-2 fs-12 align-middle"></i> --}}
                        - Personal Info
                    </a>

                    <a class="nav-link mt-1  pl-3 mt-2" data-bs-toggle="tab" role="tab" aria-current="page"
                        href="#change-password" aria-selected="false" tabindex="-1">
                        {{-- <i class="fa-solid fa-lock me-2 fs-18 align-middle"></i> --}}
                        - Reset Password</a>

                    <a class="nav-link mt-1  ml-3" data-bs-toggle="tab" role="tab" aria-current="page"
                        href="#account-settings" aria-selected="false" tabindex="-1">
                        {{-- <i class="fa-regular fa-pen-to-square me-2 fs-18 align-middle ml-2"></i> --}}
                        - Edit Profile</a>

                    <hr>
                    <a class="nav-link mt-1" href="{{ route('user.web.portfolio') }}">
                        {{-- <i class="fa-solid fa-chart-line me-2 fs-18 align-middle"></i> --}}
                        - Active Portfolio</a>


                    {{-- <a class="nav-link mt-2 text-md" href="#">Security</a> --}}




                    <a class="nav-link mt-1" target="_blank" tabindex="-1" href="{{ route('terms') }}">
                        {{-- <i class="fa-solid fa-scale-unbalanced me-2 fs-18 align-middle"></i> --}}
                        - Legal Agreements
                    </a>

                    {{-- <a class="nav-link mt-2  text-md" href="#">About Us</a> --}}

                    <a class="nav-link mt-1 " target="_blank" tabindex="-1" href="{{ config('app.instagram') }}">
                        {{-- <i class="fa-brands fa-instagram me-2 fs-18 align-middle"></i> --}}
                        - Follow Us On Instagram
                    </a>

                    <a class="nav-link mt-1" href="mailto:{{ config('app.supportMail') }}" target="_blank"
                        tabindex="-1">
                        {{-- <i class="bx bx-envelope me-2 fs-18 align-middle"></i> --}}
                        - Email Support
                    </a>

                    <a class="nav-link mt-1 mr-1" href="{{ route("home") }}#faq">
                        {{-- <i class="fa-sharp fa-question me-3 fs-18 align-middle"></i> --}}
                        - FAQ
                    </a>
                </nav>
            </div>
            <div class="col-xl-9 col-lg-9">
                <div class="tab-content mt-4 mt-lg-0">

                    <div class="tab-pane text-muted active show" id="personal-info" role="tabpanel">
                        <div class="p-sm-3">
                            <div class="row gy-4 mb-4">
                                <div class="col-xl-6">
                                    <div class="mb-4 d-sm-flex align-items-center">
                                        <div class="mb-0 me-sm-5 d-flex align-items-center">


                                        </div>
                                    </div>

                                </div>
                                <div class="col-xl-12 ">

                                    @if(!empty($editSuccess))
                                        <div class="col-12 text-center text-success p-1 resendEmailTextMessage">
                                                {{ $editSuccess }}
                                        </div>
                                    @endif

                                    <div class="mb-4  align-items-center">
                                        <div class="mx-auto align-items-center">
                                            <span class="avatar avatar-lg ">
                                                @if (isset($user->image))
                                                <img src={{ $user->image }} alt="profile" id="profile-img">
                                                @else
                                                <img src="https://fortlink.ai/assets/images/user.png" alt="image"
                                                    id="profile-png">
                                                @endif
                                            </span>

                                        </div>

                                        <div class="mx-auto pt-2">
                                            @if (!empty($user))
                                            @if (isset($user->firstname, $user->lastname))
                                            <h5 class="text-dark mb-1 pl-2">
                                                {{ ucfirst($user->firstname) }}
                                                {{ ucfirst($user->lastname) }}
                                            </h5>
                                            @endif
                                            @endif
                                        </div>
                                    </div>

                                </div>

                            </div>

                            <div class="row gy-4 mb-4 text-xl">

                                <div class="col-xl-4">
                                    <label for="first-name" class="form-label color-white">Email:</label>
                                    @if (isset($user, $user->email))
                                    <label for="first-name" class="form-label">{{ ucfirst($user->email) }}</label>
                                    @endif
                                </div>

                                <div class="col-xl-4">
                                    <label for="first-name" class="form-label color-white">Phone:</label>
                               
                                    <label for="first-name" class="form-label">{{ !empty($user->phone) ? ucfirst($user->phone) : 'Nil' }}</label>
                                    
                                </div>

                                <div class="col-xl-4">
                                    <label for="first-name" class="form-label color-white">Country:</label>
                                    
                                    <label for="first-name" class="form-label">{{ !empty($user->country) ? ucfirst($user->country) : 'Nil' }}</label>
                                   
                                </div>

                                <div class="col-xl-4">
                                    <label for="first-name" class="form-label color-white">State:</label>
                                    
                                    <label for="first-name" class="form-label">{{ !empty($user->state) ? ucfirst($user->state) : 'Nil' }}</label>
                       
                                </div>

                                <div class="col-xl-4">
                                    <label for="first-name" class="form-label color-white">City:</label>
                          
                                    <label for="first-name" class="form-label">{{ !empty($user->city) ? ucfirst($user->city) : 'Nil' }}</label>
                           
                                </div>
                                <div class="col-xl-12 text-xxl">
                                    <label class="form-label color-white">Address:</label>
                              
                                    <label class="form-label">{{ !empty($user->address1) ? ucfirst($user->address1) : 'Nil' }}</label>
                         
                                </div>
                            </div>
                            <div class="row gy-4 mb-4">

                                <div class="col-md-6  ">
                                    <div class=" d-flex">
                                        @if (!empty($user))
                                        @if (isset($user->username))
                                        <p class="text-dark text-left text-xs">
                                            <samp class=""> <span class="color-white">Username :</span> {{
                                                ucfirst($user->username) }} <i id="copyButton"
                                                    data-clipboard-text="{{ $user->username }}"
                                                    class="fa fa-copy  mr-3 text-primary"></i>
                                        </p>
                                        @endif
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-6 ">
                                    <div class="ms-sm-3 d-flex">
                                        @if (!empty($user))


                                        <p class="text-dark text-left text-xs">
                                            <samp class=""> <span class="color-white">Transaction History :</span>
                                                <a data-url={{ route('web.user.downloadTx', [$user->id]) }} class="downloadTxReciept">
                                                    <i class="fa fa-download  mr-3 text-primary "></i> <span class="receiptProcessingBox"> </span>
                                                </a>
                                        </p>



                                        @endif

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

                        </div>
                    </div>



                    <div class="tab-pane text-muted" id="account-settings" role="tabpanel">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card custom-card">
                                    <div class="card-header">
                                        <div class="card-title">
                                            User Record
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <form class="row g-3 mt-0 _processDepositForm" method="POST"
                                            action="{{ route('user.web.editUser') }}" enctype="multipart/form-data">
                                            @csrf
                                            <div class="col-md-6">
                                                <label class="form-label">First Name</label>

                                                <input type="text" class="form-control" placeholder="First name"
                                                    value={{ $user->firstname }}
                                                name="firstname" aria-label="First name">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Middlename</label>
                                                <input type="text" class="form-control" placeholder="Middle name"
                                                    name="middlename" value="{{ $user->middlename }}"
                                                    aria-label="Last name">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Last Name</label>
                                                <input type="text" class="form-control" placeholder="Last name"
                                                    value="{{ $user->lastname }}" name="lastname"
                                                    aria-label="Last name">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="inputEmail4" class="form-label">Email</label>
                                                <input type="email" name="email" class="form-control"
                                                    value="{{ $user->email }}" id="inputEmail4">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="inputPassword4" class="form-label">Phone</label>
                                                <input type="text" class="form-control" value="{{ $user->phone  }}"
                                                    name="phone" id="inputPassword4">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="inputAddress" class="form-label">Address
                                                    1</label>
                                                <input type="text" class="form-control" id="inputAddress"
                                                    name="address1" value="{{ $user->address1 }}"
                                                    placeholder="1234 Main St">
                                            </div>

                                            <div class="col-md-6">
                                                <label for="inputAddress2" class="form-label">Address
                                                    2</label>
                                                <input type="text" class="form-control" id="inputAddress2"
                                                    value="{{ $user->address2 }}" name="address2"
                                                    placeholder="Apartment, studio, or floor">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="inputCity" class="form-label">City</label>
                                                <input type="text" class="form-control" name="city"
                                                    value="{{ $user->city }}" id="inputCity">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="inputState" class="form-label">State</label>
                                                <input type="text" class="form-control" name="state"
                                                    value="{{ $user->state }}" id="inputCity">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="inputCountry" class="form-label">Country</label>
                                                <input type="text" name="country" class="form-control"
                                                    value="{{ $user->country }}" id="inputCountry">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="inputZip" class="form-label">Zip</label>
                                                <input type="text" class="form-control" name="zip"
                                                    value="{{ $user->zip }}" id="inputZip">
                                            </div>

                                            <div class="col-md-6">
                                                <label for="input-file" class="form-label">Upload
                                                    Image</label>
                                                <input class="form-control" name="image" type="file" id="input-file">
                                            </div>


                                            <div class="col-12 text-end mt-4 ">
                                                <button type="submit" class="btn btn-primary px-5 m-auto _processDeposit"> <i class="bi bi-arrow-right-circle-fill"></i> SAVE</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>







                    <div class="tab-pane text-muted" id="change-password" role="tabpanel">
                        <div class="row">
                            <div class="col-xl-12">

                                <div class="tab-content mt-4 mt-lg-0">

                                    <div class="row">
                                        <div class="col-xl-12">
                                            <div class="card custom-card">
                                                <div class="card-header text-center">
                                                    <div class="card-title">
                                                        Reset Password
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <form class="row g-3 mt-0" method="POST" id="changePassword"
                                                        action="{{ route('user.web.changePassword') }}"
                                                        enctype="multipart/form-data">
                                                        @csrf

                                                        <div class="row mb-2">
                                                            <label for="inputEmail3" class="col-12 col-form-label">Old
                                                                Password</label>
                                                            <div class="col-12">
                                                                <input required type="password" name="oldPassword"
                                                                    class="form-control" id="inputEmail3"
                                                                    placeholder="Enter Old Password">
                                                            </div>
                                                        </div>
                                                        <div class="row mb-2">
                                                            <label for="inputPassword3"
                                                                class="col-12 col-form-label">New Password</label>
                                                            <div class="col-12">
                                                                <input required type="password" name="password"
                                                                    class="form-control" id="inputPassword3"
                                                                    placeholder="Enter New Password">
                                                            </div>
                                                        </div>
                                                        <div class="row mb-2">
                                                            <label for="inputPassword3"
                                                                class="col-12 col-form-label">Confirm Password</label>
                                                            <div class="col-12">
                                                                <input required type="password" name="password_confirmation"
                                                                    class="form-control" id="inputPassword3"
                                                                    placeholder="Confirm Password">
                                                            </div>
                                                        </div>

                                                        <div>
                                                            <div class="col-12 text-end mt-4 ">
                                                                <button type="submit"
                                                                    class="btn btn-primary px-5 m-auto _processDeposit"> <i class="bi bi-arrow-right-circle-fill"></i> SUBMIT</button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>



                </div>

            </div>
        </div>
    </div>
</div>
@endsection