@extends('Template::layouts.master')
@section('content')
    <div class="dashboard-body">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-10 col-xxl-8">
                    <div class="card custom--card">
                        <div class="card-body">
                            <form class="register" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="row gy-4 justify-content-center">
                                    <div class="col-sm-12">
                                        <div class="user-profile">
                                            <label class="form--label">@lang('Image')</label>
                                            <x-image-uploader name="image" :imagePath="getImage(
                                                getFilePath('userProfile') . '/' . $user->image,
                                                getFileSize('userProfile'),
                                            )" :size="getFileSize('userProfile')"
                                                :required="false" type="userProfile" />
                                        </div>
                                    </div>
                                    <div class="col-sm-6 form-group">
                                        <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="col-sm-6 form-group">
                                        <label class="form--label">@lang('Last Name')</label>
                                        <input type="text" class="form-control form--control" name="lastname"
                                            value="{{ __($user->lastname) }}" required>
                                    </div>
                                    <div class="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="col-sm-6">
                                        <label class="form--label">@lang('Mobile Number')</label>
                                        <input class="form-control form--control" value="{{ $user->mobile }}" readonly>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="form--label">@lang('Address')</label>
                                        <input class="form-control form--control" type="text" name="address"
                                            value="{{ __($user->address) }}">
                                    </div>
                                    <div class="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 class="col-sm-4">
                                        <label class="form--label">@lang('Zip Code')</label>
                                        <input type="text" class="form-control form--control" name="zip"
                                            value="{{ $user->zip }}">
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="form--label">@lang('City')</label>
                                        <input type="text" class="form-control form--control" name="city"
                                            value="{{ __($user->city) }}">
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="form--label">@lang('Country')</label>
                                        <input class="form-control form--control" value="{{ __($user->country_name) }}"
                                            disabled>
                                    </div>
                                    <div class="col-sm-12">
                                        <button type="submit" class="btn btn--base-two w-100">
                                            @lang('Submit')
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('style')
    <style>
        .image--uploader {
            width: 280px;
            border-radius: 10px;
            margin-inline: auto;
        }

        .image-upload-input-wrapper label.bg--primary {
            color: hsl(var(--dark));
            background-color: hsl(var(--base-two)) !important;
        }
    </style>
@endpush
