@extends($activeTemplate . 'layouts.master')
@section('content')
    <div class="row dashboard-widget-wrapper justify-content-center">
        <div class="col-md-12">
            <form class="register" method="post" enctype="multipart/form-data">
                @csrf
                <div class="mb-4">
                    <div class="profile-container">
                        <div class="profile-container__content">
                            <ul class="text-list">
                                <li class="text-list__item">
                                    <span class="text-list__name fw-bold"> @lang('Fullname') </span>
                                    <span class="text-list__name"> : {{ $user->fullname }} </span>
                                </li>
                                <li class="text-list__item">
                                    <span class="text-list__name fw-bold"> @lang('Email') </span>
                                    <span class="text-list__name"> : {{ $user->email }} </span>
                                </li>
                                <li class="text-list__item">
                                    <span class="text-list__name fw-bold"> @lang('Username') </span>
                                    <span class="text-list__name"> : {{ $user->username }} </span>
                                </li>
                                <li class="text-list__item">
                                    <span class="text-list__name fw-bold"> @lang('Phone') </span>
                                    <span class="text-list__name"> : +{{ $user->dial_code }}{{ $user->mobile }} </span>
                                </li>
                            </ul>
                        </div>
                        <div class="profile-container__inner">
                            <div class="profile-item">
                                <div class="d-flex profile__image_content">
                                    <div class="profile_image profile-thumb-show" style="background-image: url({{ getImage(getFilePath('userProfile') . '/' . $user->avatar, getFileSize('userProfile')) }})">
                                    </div>
                                    <label for="profileImage" class="profile-edit-icon"><i class="las la-pen"></i></label>
                                    <input id="profileImage" type="file" class="form--control d-none" name="avatar" accept="image/png,jpeg,jpg">
                                </div>
                                <div class="form-group pt-2">
                                    <label class="form--label">@lang('Upload Profile')
                                        <i class="la la-info-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="@lang('Supported Files: .png, .jpeg, .jpg | Image will be resized into') {{ getFileSize('userProfile') }} @lang('px')"></i>
                                    </label>
                                </div>
                            </div>
                            <div class="profile-item">
                                <div class="d-flex profile__image_content">
                                    <div class="profile_image profile-thumb-show" style="background-image: url({{ getImage(getFilePath('userSignature') . '/' . $user->signature, getFileSize('userSignature')) }})">
                                    </div>
                                    <label for="signImage" class="profile-edit-icon"><i class="las la-pen"></i></label>
                                    <input id="signImage" type="file" class="form--control d-none" name="signature" accept="image/png,jpeg,jpg">
                                </div>
                                <div class="form-group pt-2">
                                    <label class="form--label">@lang('Upload Signature') 
                                        <i class="la la-info-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="@lang('Supported Files: .png, .jpeg, .jpg | Image will be resized into') {{ getFileSize('userSignature') }} @lang('px')"></i>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </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" 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" name="lastname" value="{{ $user->lastname }}" required>
                    </div>

                    <div class="form-group col-sm-6">
                        <label class="form--label">@lang('Address')</label>
                        <input type="text" class="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" name="state" value="{{ @$user->state }}">
                    </div>

                    <div class="form-group col-sm-4">
                        <label class="form--label">@lang('Zip Code')</label>
                        <input type="text" class="form--control" name="zip" value="{{ @$user->zip }}">
                    </div>
                    <div class="form-group col-sm-4">
                        <label class="form--label">@lang('City')</label>
                        <input type="text" class="form--control" name="city" value="{{ @$user->city }}">
                    </div>
                    <div class="form-group col-sm-4">
                        <label class="form--label">@lang('Country')</label>
                        <input class="form--control" value="{{ @$user->country_name }}" readonly>
                    </div>
                </div>
                <button type="submit" class="btn btn--base w-100 mt-2">@lang('Submit')</button>
            </form>
        </div>
    </div>
@endsection

@push('script')
    <script>
        (function($) {
            "use strict";

            function readURL(input) {
                if (!input.files && !input.files[0]) return;
                const imageUrl = URL.createObjectURL(input.files[0]);
                $(input).parent().find('.profile-thumb-show').css('background-image', 'url(' + imageUrl + ')').hide().fadeIn(550);
            }

            $("#profileImage, #signImage").change(function() {
                readURL(this);
            });
        })(jQuery);
    </script>
@endpush

@push('style')
    <style>
        .sign__image_content {
            height: 100px;
            width: 200px;
            position: relative;
        }

        .sign_image {
            width: 100%;
            height: 100%;
            border: 1px solid hsl(var(--base));
            border-radius: 5%;
            overflow: hidden;
            background-size: cover;
            background-position: center;
        }

        .sign-edit-icon {
            position: absolute;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;
            border: 1px solid hsl(var(--white) / .5);
            display: inline-block;
            border-radius: 50%;
            position: absolute;
            z-index: 1;
            bottom: -2px;
            background: hsl(var(--black));
            color: hsl(var(--white));
            cursor: pointer;
            right: -2px;
        }

        .profile-container__inner {
            display: flex;
            align-items: center;
            gap: 30px;
            justify-content: flex-end
        }

        .profile-item {
            background: hsl(var(--black)/.05);
            padding: 20px;
            border: 1px dashed hsl(var(--black)/.2);
            border-radius: 8px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .profile-item .form-group {
            margin-top: auto;
            margin-bottom: 0;
            padding-top: 10px;
        }

        .profile-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .text-list {
            line-height: 36px;
        }

        .text-list__item {
            border-bottom: 1px dashed #e3e3e3;
        }

        .text-list__item:last-child {
            border-bottom: none;
        }

        .text-list__name:first-child {
            width: 120px;
            font-weight: 500;
        }

        .text-list__item {
            display: flex;
            gap: 10px
        }

        @media (max-width: 1199px) {
            .profile-container__content {
                display: none
            }

            .profile-container {
                justify-content: center;
            }
        }

        @media (max-width: 575px) {
            .profile-container {
                gap: 10px
            }

            .profile-item {
                padding: 12px;
            }
        }


        @media (max-width: 424px) {
            .profile-container__inner {
                flex-direction: column;
                gap: 15px;
                width: 100%;
            }

            .profile-item {
                width: 100%;
            }

            .profile-item .form-group {
                text-align: center !important
            }
        }
    </style>
@endpush
