@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')
    <div class="card custom-card">
        <div class="card-body">
            <div class="row">
                <div class="col-xl-2 col-lg-3">
                    <nav class="nav nav-tabs flex-column nav-style-5" role="tablist">

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

                        {{-- Personal Information --}}
                        <a class="nav-link" href="#personal-info">Personal Info</a>

                        <a class="nav-link mt-1" href="{{ route('user.web.editUser') }}">Edit Profile</a>


                        <a class="nav-link mt-1" href="{{ route('user.web.portfolio') }}">Active
                            Portfolio</a>


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

                        <a class="nav-link mt-1" href="{{ route('user.web.forgotpassword') }}">Reset
                            Password</a>

                        <a class="nav-link mt-1" target="_blank" tabindex="-1" href="{{ route('terms') }}">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') }}">Follow
                            Us On Instagram
                        </a>

                        <a class="nav-link mt-1" href="mailto:{{ config('app.supportMail') }}" target="_blank"
                            tabindex="-1">Email Support
                        </a>

                        <a class="nav-link mt-1" href="{{ config('app.domain') }}#faq"> FAQ
                        </a>

                    </nav>
                </div>
                <div class="col-xl-10 col-lg-9">
                    <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">
                                        <div class="card-title">
                                            User Edit
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <form class="row g-3 mt-0" method="POST" action="{{ route('user.web.editUser') }}"
                                            enctype="multipart/form-data">
                                            @csrf
                                            <div class="col-md-4">
                                                <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-4">
                                                <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-4">
                                                <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-12">
                                                <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-12">
                                                <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-3">
                                                <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-3">
                                                <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-4">
                                                <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-2">
                                                <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-xl-4 col-lg-6 col-md-6 col-sm-12">
                                                <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">
                                                <button type="submit" class="btn btn-primary m-auto">Save</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection