@extends($activeTemplate . 'layouts.master')
@section('content')
    @push('style')
        <style>
            .avatar-preview {
                max-width: 310px;
                width: 100%;
            }

            .profilePicPreview {
                width: 100%;
                height: 100%;
                display: block;
                border: 3px solid #f1f1f1;
                box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
                border-radius: 10px;
                background-size: cover;
                /* Ensures the image covers the entire div */
                background-position: center;
                /* Centers the image */
                background-repeat: no-repeat;
                position: relative;
                overflow: hidden;
            }

            .image-upload .thumb .profilePicPreview {
                width: 100%;
                height: 310px;
                display: block;
                border: 3px solid #f1f1f1;
                box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
                border-radius: 10px;
                background-size: cover !important;
                background-position: top;
                background-repeat: no-repeat;
                position: relative;
                overflow: hidden;
            }

            .image-upload .thumb .profilePicPreview.logoPicPrev {
                background-size: contain !important;
                background-position: center;
            }

            .image-upload .thumb .profilePicUpload {
                font-size: 0;
                opacity: 0;
            }

            .image-upload .thumb .avatar-edit label {
                text-align: center;
                line-height: 45px;
                font-size: 18px;
                cursor: pointer;
                padding: 2px 25px;
                width: 100%;
                border-radius: 5px;
                box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.16);
                transition: all 0.3s;
            }

            .image-upload .thumb .avatar-edit label:hover {
                transform: translateY(-3px);
            }

            .image-upload .thumb .profilePicPreview .remove-image {
                position: absolute;
                top: -9px;
                right: -9px;
                text-align: center;
                width: 55px;
                height: 55px;
                font-size: 24px;
                border-radius: 50%;
                background-color: #df1c1c;
                color: #fff;
                display: none;
                padding: 0;
            }

            .image-upload .thumb .profilePicPreview.has-image .remove-image {
                display: block;
            }
        </style>
    @endpush
    <div class="padding-top padding-bottom">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-4">
                    <div class="card b-radius--5 overflow-hidden">
                        <div class="card-body p-0">
                            <div class="d-flex p-3 primary-bg align-items-center">
                                <div class="avatar avatar--lg">
                                    <img src="{{ getImage(getFilePath('adminProfile') . '/' . $user->image, getFileSize('adminProfile')) }}"
                                        style="border-radius: 50%; height: 100px; width: 100px;">
                                </div>
                                <div class="ps-3">
                                    <h4 class="text--white">{{ __($user->username) }}</h4>
                                </div>
                            </div>
                            <ul class="list-group">
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    @lang('Name')
                                    <span class="fw-bold">{{ __($user->firstname) }} {{ __($user->lastname) }}</span>
                                </li>

                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    @lang('Username')
                                    <span class="fw-bold">{{ __($user->username) }}</span>
                                </li>

                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    @lang('Email')
                                    <span class="fw-bold">{{ $user->email }}</span>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="card custom--card primary-bg profile-wrapper">
                        <div class="card-body">
                            <form class="register" action="" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="contact-form-group col-sm-12 contact-form-group">
                                        <div class="image-upload">
                                            <div class="thumb">
                                                <div class="avatar-preview mx-auto">
                                                    <div class="profilePicPreview"
                                                        style="background-position: center; background-image: url({{ getImage(getFilePath('adminProfile') . '/' . $user->image, getFileSize('adminProfile')) }})">
                                                        <button type="button" class="remove-image"><i
                                                                class="fa fa-times"></i></button>
                                                    </div>
                                                </div>
                                                <div class="avatar-edit">
                                                    <input type="file" class="profilePicUpload" name="image"
                                                        id="profilePicUpload1" accept=".png, .jpg, .jpeg">
                                                    <label for="profilePicUpload1"
                                                        class="bg--success">@lang('Upload Image')</label>
                                                    <small class="mt-2  ">@lang('Supported files'): <b>@lang('jpeg'),
                                                            @lang('jpg').</b> @lang('Image will be resized into 400x400px') </small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

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


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

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

                                    <div class="contact-form-group contact-form-group col-sm-4">
                                        <label class="form-label">@lang('Country')</label>
                                        <input value="{{ @$user->address->country }}" disabled>
                                    </div>

                                </div>

                                <div class="contact-form-group contact-form-group">
                                    <button type="submit" class="btn btn--base w-100">@lang('Submit')</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const profilePicUpload = document.querySelector('.profilePicUpload');
            const profilePicPreview = document.querySelector('.profilePicPreview');
            const removeImageButton = document.querySelector('.remove-image');

            profilePicUpload.addEventListener('change', function(event) {
                const file = event.target.files[0];
                if (file && file.type.match('image.*')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        profilePicPreview.style.backgroundImage = `url(${e.target.result})`;
                        profilePicPreview.classList.add('has-image');
                        removeImageButton.style.display = 'block'; // Show the remove button
                    };
                    reader.readAsDataURL(file);
                }
            });

            // Remove the preview image and clear the input
            removeImageButton.addEventListener('click', function() {
                profilePicPreview.style.backgroundImage = '';
                profilePicPreview.classList.remove('has-image');
                profilePicUpload.value = ''; // Clear the input
                removeImageButton.style.display = 'none'; // Hide the remove button
            });
        });
    </script>
@endpush
