@extends($activeTemplate . 'layouts.master')
@section('content')
    <div class="flex flex-col lg:flex-row gap-6 justify-center">

        {{-- ======================== --}}
        {{-- LEFT — Profile Info Card --}}
        {{-- ======================== --}}
        <div class="w-full lg:w-72 xl:w-80 shrink-0">
            <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">

                {{-- Avatar --}}
                <div class="bg-gradient-to-br from-primary-900 via-primary-800 to-primary-700 px-6 pt-8 pb-6 flex flex-col items-center">
                    <div class="relative proifle-image-preview">
                        <img src="{{ getImage(getFilePath('userProfile') . '/' . $user->image, null, true) }}"
                             alt="@lang('image')"
                             class="w-24 h-24 rounded-full object-cover ring-4 ring-white/20 shadow-lg">
                        <label for="imageUpload"
                               class="absolute bottom-0 right-0 bg-secondary-500 hover:bg-secondary-600 text-white rounded-full p-1.5 cursor-pointer shadow transition-colors duration-150"
                               title="Change photo">
                            <i data-lucide="camera" class="w-3.5 h-3.5"></i>
                        </label>
                    </div>
                    <h2 class="mt-3 text-white font-semibold text-base">{{ $user->firstname }} {{ $user->lastname }}</h2>
                    <p class="text-primary-300 text-xs mt-0.5">{{ $user->email }}</p>
                </div>

                {{-- Info List --}}
                <ul class="divide-y divide-primary-100">
                    <li class="flex items-center justify-between px-5 py-3">
                        <span class="text-xs font-semibold text-primary-400 uppercase tracking-wide">@lang('Account No.')</span>
                        <span class="text-sm font-bold text-primary-900">{{ $user->account_number }}</span>
                    </li>
                    @if ($user->branch)
                        <li class="flex items-center justify-between px-5 py-3">
                            <span class="text-xs font-semibold text-primary-400 uppercase tracking-wide">@lang('Branch')</span>
                            <span class="text-sm font-medium text-primary-800">{{ @$user->branch->name }}</span>
                        </li>
                    @endif
                    <li class="flex items-center justify-between px-5 py-3">
                        <span class="text-xs font-semibold text-primary-400 uppercase tracking-wide">@lang('Username')</span>
                        <span class="text-sm font-medium text-primary-800">{{ $user->username }}</span>
                    </li>
                    <li class="flex items-center justify-between px-5 py-3">
                        <span class="text-xs font-semibold text-primary-400 uppercase tracking-wide">@lang('Mobile')</span>
                        <span class="text-sm font-medium text-primary-800">{{ $user->mobile }}</span>
                    </li>
                    <li class="flex items-center justify-between px-5 py-3">
                        <span class="text-xs font-semibold text-primary-400 uppercase tracking-wide">@lang('Country')</span>
                        <span class="text-sm font-medium text-primary-800">{{ $user->address->country }}</span>
                    </li>
                </ul>
            </div>
        </div>

        {{-- ========================== --}}
        {{-- RIGHT — Edit Profile Form  --}}
        {{-- ========================== --}}
        <div class="flex-1 min-w-0">
            <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">

                {{-- Form Header --}}
                <div class="px-6 py-4 border-b border-primary-100 bg-gradient-to-r from-primary-50 to-white flex items-center gap-2">
                    <i data-lucide="user-pen" class="h-5 w-5 text-primary-600"></i>
                    <h3 class="text-base font-semibold text-primary-900">@lang('Edit Profile')</h3>
                </div>

                <form class="p-6" action="" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">

                        {{-- First Name --}}
                        <div class="flex flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('First Name')</label>
                            <input type="text"
                                   name="firstname"
                                   value="{{ $user->firstname }}"
                                   required
                                   class="w-full px-4 py-2.5 rounded-xl border border-primary-200 bg-primary-50/40 text-primary-900 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300">
                        </div>

                        {{-- Last Name --}}
                        <div class="flex flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('Last Name')</label>
                            <input type="text"
                                   name="lastname"
                                   value="{{ $user->lastname }}"
                                   required
                                   class="w-full px-4 py-2.5 rounded-xl border border-primary-200 bg-primary-50/40 text-primary-900 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300">
                        </div>

                        {{-- State --}}
                        <div class="flex flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('State')</label>
                            <input type="text"
                                   name="state"
                                   value="{{ $user->address->state }}"
                                   class="w-full px-4 py-2.5 rounded-xl border border-primary-200 bg-primary-50/40 text-primary-900 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300">
                        </div>

                        {{-- City --}}
                        <div class="flex flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('City')</label>
                            <input type="text"
                                   name="city"
                                   value="{{ $user->address->city }}"
                                   class="w-full px-4 py-2.5 rounded-xl border border-primary-200 bg-primary-50/40 text-primary-900 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300">
                        </div>

                        {{-- Zip Code --}}
                        <div class="flex flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('Zip Code')</label>
                            <input type="text"
                                   name="zip"
                                   value="{{ $user->address->zip }}"
                                   class="w-full px-4 py-2.5 rounded-xl border border-primary-200 bg-primary-50/40 text-primary-900 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300">
                        </div>

                        {{-- Address --}}
                        <div class="flex flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('Address')</label>
                            <input type="text"
                                   name="address"
                                   value="{{ $user->address->address }}"
                                   class="w-full px-4 py-2.5 rounded-xl border border-primary-200 bg-primary-50/40 text-primary-900 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300">
                        </div>

                        {{-- Profile Photo Upload --}}
                        <div class="sm:col-span-2 flex flex-col gap-1">
                            <label class="text-sm font-semibold text-primary-800">@lang('Profile Photo')</label>
                            <label for="imageUpload"
                                   class="flex items-center gap-3 w-full px-4 py-3 rounded-xl border-2 border-dashed border-primary-300 bg-primary-50/40 hover:bg-primary-50 hover:border-primary-400 cursor-pointer transition group">
                                <i data-lucide="upload-cloud" class="h-5 w-5 text-primary-400 group-hover:text-primary-600 transition-colors shrink-0"></i>
                                <span class="text-sm text-primary-500 group-hover:text-primary-700 transition-colors">
                                    Click to upload — <span class="font-medium">PNG, JPG, JPEG</span>
                                </span>
                            </label>
                            <input id="imageUpload"
                                   name="image"
                                   type="file"
                                   accept=".png,.jpg,.jpeg"
                                   class="hidden">
                        </div>

                        {{-- Submit --}}
                        <div class="sm:col-span-2">
                            <button type="submit"
                                    class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary-800 hover:bg-primary-700 active:bg-primary-900 text-white font-semibold text-sm rounded-xl shadow-soft transition-colors duration-200">
                                <i data-lucide="save" class="h-4 w-4"></i>
                                @lang('Submit')
                            </button>
                        </div>

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

    </div>
@endsection

@push('script')
    <script>
        $("#imageUpload").on('change', function () {
            if (this.files && this.files[0]) {
                let reader = new FileReader();
                reader.onload = function (e) {
                    $('.proifle-image-preview img').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            }
        });
    </script>
@endpush

@push('bottom-menu')
    <div class="col-12 order-lg-3 order-4">
        <div class="flex flex-wrap items-center gap-2 md:gap-3">
            <a href="{{ route('user.profile.setting') }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-primary-800 text-white text-sm font-semibold rounded-xl shadow-soft hover:bg-primary-700 transition-colors duration-150">
                <i data-lucide="user" class="h-4 w-4"></i> @lang('Profile Setting')
            </a>
            <a href="{{ route('user.change.password') }}"
               class="inline-flex items-center gap-2 px-4 py-2 border border-primary-700 text-primary-800 text-sm font-semibold rounded-xl hover:bg-primary-50 transition-colors duration-150">
                <i data-lucide="lock" class="h-4 w-4"></i> @lang('Change Password')
            </a>
            <a href="{{ route('user.twofactor') }}"
               class="inline-flex items-center gap-2 px-4 py-2 border border-primary-700 text-primary-800 text-sm font-semibold rounded-xl hover:bg-primary-50 transition-colors duration-150">
                <i data-lucide="shield-check" class="h-4 w-4"></i> @lang('2FA Security')
            </a>
        </div>
    </div>
@endpush