@extends('layouts.app')

@section('content')

@if(session('success'))
    <p style="color:green">{{ session('success') }}</p>
@endif

<section class="my_account_sec">
    <div class="container">
        <div class="my_account_box">
        <div class="my_account_list_tab_h">
            <ul class="nav nav-pills mb-3" role="tablist">

                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('user.profile.edit') ? 'active' : '' }}"
                       href="{{ route('user.profile.edit') }}">
                        <i class="bi bi-person-fill"></i>&nbsp;My Profile
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('user.orders*') ? 'active' : '' }}"
                       href="{{ route('user.orders') }}">
                        <i class="bi bi-list-ul"></i>&nbsp;All Orders
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link {{ request()->routeIs('user.password.form') ? 'active' : '' }}"
                       href="{{ route('user.password.form') }}">
                        <i class="bi bi-lock-fill"></i>&nbsp;Change Password
                    </a>
                </li>

            </ul>
        </div>
        <div class="tab-content">
            <div class="tab-pane fade show active">
                <div class="innerWrapper profile">
                    <h3 class="my_accout_default_head">My Profile</h3>

                    <form method="POST"
                          action="{{ route('user.profile.update') }}"
                          enctype="multipart/form-data">
                        @csrf

                        <div class="row">

                            <!-- Profile Image -->
                            <div class="col-md-5 col-lg-3 col-xl-3 col-12">
                                <div class="avatar-upload">
                                   <!-- <div class="avatar-edit">
                                        <input type="file"
                                               name="profile_image"
                                               id="imageUpload"
                                               accept=".png,.jpg,.jpeg">
                                        <label for="imageUpload"></label>
                                    </div>-->

                                    <div class="avatar-preview">
                                        <!--<div id="imagePreview"
                                             style="background-image: url('{{ 
                                                $user->profile_image
                                                    ? asset('storage/'.$user->profile_image)
                                                    : asset('assets/images/profile-image.jpg')
                                             }}');">
                                        </div>-->
										@php $initials = collect(explode(' ', trim($user->name)))
    ->filter()
    ->take(2) // only first two words
    ->map(fn ($word) => strtoupper(substr($word, 0, 1)))
    ->implode('');
	@endphp
                                        <div class="user-avatar">{{ $initials }}</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Profile Fields -->
                            <div class="col-md-7 col-lg-9 col-xl-9 col-12">
								<h5 class="mb-3 mt-4">Personal Information</h5>

                                <div class="form-group row">
                                    <label class="col-md-3 control-label">Full Name</label>
                                    <div class="col-md-9">
                                        <input type="text"
                                               name="name"
                                               class="form-control"
                                               value="{{ old('name', $user->name) }}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-3 control-label">Phone Number</label>
                                    <div class="col-md-9">
                                        <input type="text"
                                               name="phone"
                                               class="form-control"
                                               value="{{ old('phone', $user->phone) }}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-3 control-label">Email</label>
                                    <div class="col-md-9">
                                        <input type="email"
                                               name="email"
                                               class="form-control"
                                               value="{{ old('email', $user->email) }}">
                                    </div>
                                </div>
							<h5 class="mb-3 mt-4">Address</h5>

                                <div class="form-group row">
                                    <label class="col-md-3 control-label">Address</label>
                                    <div class="col-md-9">
                                        <input type="text"
                                               name="address"
                                               class="form-control"
                                               value="{{ old('address', $address->address) }}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-3 control-label">Apartment</label>
                                    <div class="col-md-9">
                                        <input type="text"
                                               name="apartment"
                                               class="form-control"
                                               value="{{ old('apartment', $address->apartment) }}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-3 control-label">City</label>
                                    <div class="col-md-9">
                                        <input type="text"
                                               name="city"
                                               class="form-control"
                                               value="{{ old('city', $address->city) }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-3 control-label">State</label>
                                    <div class="col-md-9">
                                        <input type="text"
                                               name="state"
                                               class="form-control"
                                               value="{{ old('state', $address->state) }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-3 control-label">Country</label>
                                    <div class="col-md-9">
                                        <input type="text"
                                               name="country"
                                               class="form-control"
                                               value="{{ old('country', $address->country) }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-md-3 control-label">Zipcode</label>
                                    <div class="col-md-9">
                                        <input type="text"
                                               name="zipcode"
                                               class="form-control"
                                               value="{{ old('zipcode', $address->zipcode) }}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-12 text-end">
                                        <button type="submit" class="my_act_btn_btn">Save Info</button>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </form>

                </div>
            </div>
        </div>
        </div>
    </div>
</section>
@push('scripts')
<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function (e) {
            $('#imagePreview')
                .css('background-image', 'url(' + e.target.result + ')')
                .hide()
                .fadeIn(600);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

$(document).ready(function () {

    $('#imageUpload').on('change', function () {
        readURL(this);
    });

    $('.prod_stat span').each(function () {
        let status = $(this).text().trim().toLowerCase().replace(/\s+/g, '-');
        $(this).addClass(status);
    });

});
</script>
@endpush

@endsection