@extends($activeTemplate . 'layouts.master')
@section('panel')
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card ">
                    <div class="card-header">
                        <h5 class="card-title">@lang('Profile')</h5>
                    </div>
                    <div class="card-body">
                        <form class="register" method="post" enctype="multipart/form-data">
                            @csrf

                            <div class="profile-image-group mb-4">
                                <img src="{{ getImage(getFilePath('userProfile') . '/' . $user->image, getFileSize('userProfile'), isAvatar: true) }}"
                                    class="profile-image-thumb" alt="Profile Image">

                                <input class="d-none" type="file" name="image" id="auth-user-pic"
                                    accept=".png,.jpg,.jpeg">
                                <label for="auth-user-pic" class="btn btn--primary btn-sm">
                                    <i class="fa fa-pencil"></i>
                                </label>
                            </div>

                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label class="form-label">@lang('First Name')</label>
                                    <input type="text" class="form-control form--control" name="firstname"
                                        value="{{ $user->firstname }}" required>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label class="form-label">@lang('Last Name')</label>
                                    <input type="text" class="form-control form--control" name="lastname"
                                        value="{{ $user->lastname }}" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label class="form-label">@lang('E-mail Address')</label>
                                    <input class="form-control form--control" value="{{ $user->email }}" readonly>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label class="form-label">@lang('Mobile Number')</label>
                                    <input class="form-control form--control" value="{{ $user->mobile }}" readonly>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label class="form-label">@lang('Address')</label>
                                    <input type="text" class="form-control form--control" name="address"
                                        value="{{ @$user->address }}">
                                </div>
                                <div class="form-group col-sm-6">
                                    <label class="form-label">@lang('State')</label>
                                    <input type="text" class="form-control form--control" name="state"
                                        value="{{ @$user->state }}">
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label class="form-label">@lang('Zip Code')</label>
                                    <input type="text" class="form-control form--control" name="zip"
                                        value="{{ @$user->zip }}">
                                </div>

                                <div class="form-group col-sm-6">
                                    <label class="form-label">@lang('City')</label>
                                    <input type="text" class="form-control form--control" name="city"
                                        value="{{ @$user->city }}">
                                </div>

                                <div class="form-group col-sm-12">
                                    <label class="form-label">@lang('Country')</label>
                                    <input class="form-control form--control" value="{{ @$user->country_name }}" disabled>
                                </div>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn--primary btn-large w-100">@lang('Submit')</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('style')
    <style>
        .profile-image-group {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .profile-image-thumb {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #ddd;
        }

        .profile-image-btn {
            height: 35px;
            display: flex;
            align-items: center;
        }
    </style>
@endpush

@push('script')
    <script>
        (function($) {
            "use strict";
            $(document).on("change", "input[name='image']", function(e) {
                let reader = new FileReader();
                reader.onload = (e) => {
                    $(this).closest(".profile-image-group")
                        .find(".profile-image-thumb")
                        .attr("src", e.target.result);
                };
                reader.readAsDataURL(this.files[0]);
            });

        })(jQuery);
    </script>
@endpush