@extends('frontend.layouts.app')



@section('content')

<style>
    body {
        background-color: #f1f5fd;
    }

    .account-settings .user-profile {
        margin: 0 0 1rem 0;
        padding-bottom: 1rem;
        text-align: center;
    }

    .account-settings .user-profile .user-avatar {
        margin: 0 0 1rem 0;
    }

    .account-settings .user-profile .user-avatar img {
        width: 100px;
        height: 100px;
        border-radius: 100px;
    }

    .account-settings .user-profile h5.user-name {
        margin: 0 0 0.5rem 0;
    }

    .account-settings .user-profile h6.user-email {
        margin: 0;
        font-size: 0.8rem;
        font-weight: 400;
        color: gray;
    }

    .account-settings .about {
        margin: 2rem 0 0 0;
        text-align: center;
    }

    .account-settings .about h5 {
        margin: 0 0 15px 0;
        color: #007ae1;
    }

    .account-settings .about p {
        font-size: 0.825rem;
    }

    .form-control {
        border: 1px solid #cfd1d8;
        border-radius: 5px;
        font-size: 0.825rem;
        background: #ffffff;
        color: #2e323c;
    }

    .card {
        background: #ffffff;
        border-radius: 5px;
        border: 0;
        margin-bottom: 1rem;

    }
</style>



<section class="space-top space-extra2-bottom profile-back">
    <div style="margin-top:-5px" class="container">
        <div class="row gutters">
            <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12 mb-3">
                <div style="height:480px" class="card">
                    <div class="card-body">
                        <div class="account-settings">
                            @php
                            $user = Auth::user();
                            @endphp
                            <div class="user-profile">
                                <div class="user-avatar mt-2">
                                    <img src="{{ $user->image ? asset('frontend/assets/images/user/').'/'.$user->image : asset('/frontend/assets/images/profile.png') }}"
                                        alt="User Image">
                                </div>
                                <h5 class="user-name">{{ $user->name }}</h5>
                                <h6 class="user-email" style="font-size:16px">{{ $user->email }}</h6>
                            </div>

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

            <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
                <div style="height:480px" class="card">
                    <div class="card-body">
                        <div class="row gutters">
                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 p-2">
                                <h5 class="mb-3 ms-3">Account Information</h5>
                            </div>
                            <form action="{{route('frontend.user.update')}}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-xl-6 col-lg-6 col-md-6">
                                        <input style="border:1px solid rgb(180, 180, 180); backgound:white; height:50px"
                                            class="mb-4" type="text" placeholder="Your Name" label="First Name"
                                            name="name" value="{{ $user->name ?? '' }}" />
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6">
                                        <input style="border:1px solid rgb(180, 180, 180); backgound:white; height:50px"
                                            class="mb-4" type="text" placeholder="Last Name" label="Last Name"
                                            name="lname" value="{{ $user->lname ?? '' }}" />
                                    </div>
                                </div>

                                <div class="row">

                                    <div class="col-xl-6 col-lg-6 col-md-6">
                                        <input style="border:1px solid rgb(180, 180, 180); backgound:white; height:50px"
                                            class="mb-4" type="email" placeholder="Email" label="Email address"
                                            name="email" value="{{ $user->email ?? '' }}" />
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6">
                                        <input style="border:1px solid rgb(180, 180, 180); backgound:white; height:50px"
                                            class="mb-4" type="tel" placeholder="Cell Number" label="Cell Number"
                                            name="phone" data="telephoneInput" value="{{ $user->phone ?? '' }}" />
                                    </div>
                                </div>

                                <div class="row">

                                    <div class="col-xl-6 col-lg-6 col-md-6">
                                        <input style="border:1px solid rgb(180, 180, 180); backgound:white; height:50px"
                                            class="mb-4" type="text" placeholder="Address" label="Address"
                                            name="address" value="{{ $user->address ?? '' }}" />
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6">
                                        <input style="border:1px solid rgb(180, 180, 180); backgound:white; height:50px"
                                            class="mb-4" type="text" placeholder="City" label="City" name="city"
                                            value="{{ $user->city ?? '' }}" />
                                    </div>
                                </div>

                                <div class="row">

                                    <div class="col-xl-6 col-lg-6 col-md-6">
                                        <input style="border:1px solid rgb(180, 180, 180); backgound:white; height:50px"
                                            class="mb-4" type="text" placeholder="Country" label="country"
                                            name="country" value="{{ $user->zip ?? '' }}" />
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6">
                                        <input type="file" style="width:100% !important; height:50px; margin-left:-19px"
                                            label="Upload Image" name="image" class="" />
                                    </div>

                                </div>



                                <div class="row gutters">
                                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                        <button class="ms-3"
                                            style="float:right; background:darkcyan; margin-top:20px; margin-bottom:0px; padding:8px 35px; color:white; font-size:18px; border:1px solid darkcyan; border-radius:7px">
                                            Profile Update
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>


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


@endsection

@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function () {
    const tabLinks = document.querySelectorAll('.tab-link');
    const tabContentItems = document.querySelectorAll('.tab-content-item');

    tabLinks.forEach(link => {
        link.addEventListener('click', function (e) {
            e.preventDefault();

            // Remove active class from all links and content items
            tabLinks.forEach(link => link.classList.remove('active'));
            tabContentItems.forEach(item => item.classList.remove('active'));

            // Add active class to the clicked link and corresponding content
            this.classList.add('active');
            const target = document.getElementById(this.dataset.target);
            if (target) {
                target.classList.add('active');
            }
        });
    });
});

</script>
@endpush