@extends('frontend::layouts.user')
@section('title')
    {{ __('Settings') }}
@endsection
@section('content')
    <div class="td-dashboard-content-box-profile">
        <div class="td-dashboard-content-box-profile-title">
            <h3>{{ __('Edit Profile') }}</h3>
        </div>
        <form action="{{ route('user.setting.profile-update') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="td-dashboard-content-box-profile-img">
                <p>{{ __('Avatar') }}<sup>*</sup></p>
                <div class="upload-single-input">
                    <div class="upload-custom-file without-image">
                        <input type="file" name="avatar" id="avatar" accept=".gif, .jpg, .png"
                            onchange="showAvatarCloseButton(event)" />
                        <label for="avatar" class="file-ok" style="background-image: url({{ asset($user->avatar) }})">
                            <span> {{ __('Upload Avatar') }}<b> {{ __('Or Drag and Drop') }}
                                </b></span>
                        </label>
                    </div>
                    <button type="button" class="upload-thumb-close" onclick="removeUploadedFile(this)"><i
                            class="flaticon-cancel"></i></button>
                </div>
            </div>

            <div class="td-dashboard-content-box-profile-inputs common-form">
                <div class="row g-4">
                    <div class="col-lg-6">
                        <div class="form-floating common-form-item">
                            <input type="text" class="form-control" id="floatingInput" placeholder="First Name"
                                name="first_name" value="{{ $user->first_name }}">
                            <label for="floatingInput">{{ __('First Name') }}</label>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-floating common-form-item">
                            <input type="text" class="form-control" id="floatingInput2" placeholder="Last Name"
                                name="last_name" value="{{ $user->last_name }}">
                            <label for="floatingInput2">{{ __('Last Name') }}</label>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-floating common-form-item">
                            <input type="text" class="form-control" id="floatingInput2" placeholder="{{ __('Username') }}"
                                value="{{ $user->username }}" disabled>
                            <label for="floatingInput2">{{ __('Username') }}</label>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-floating common-form-item">
                            <input type="email" class="form-control" id="floatingInput3" placeholder="Email"
                                name="email" value="{{ $user->email }}" readonly="">
                            <label for="floatingInput3">{{ __('Email') }}</label>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-floating common-form-item">
                            <input type="text" class="form-control" id="floatingInput4" placeholder="Phone"
                                name="phone" value="{{ $user->phone }}">
                            <label for="floatingInput4">{{ __('Phone') }}</label>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="form-floating common-form-item">
                            <input type="text" class="form-control" id="floatingInput5" placeholder="Country"
                                name="country" value="{{ $user->country }}">
                            <label for="floatingInput5">{{ __('Country') }}</label>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-floating common-form-item">
                            <input type="text" class="form-control" id="floatingInput6" placeholder="City" name="city"
                                value="{{ $user->city }}">
                            <label for="floatingInput6">{{ __('City') }}</label>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-floating common-form-item">
                            <select class="form-select" name="gender" id="floatingSelect">
                                @foreach (['male', 'female', 'others'] as $gender)
                                    <option value="{{ $gender }}" @selected($user->gender == $gender)>
                                        {{ ucfirst($gender) }}</option>
                                @endforeach
                            </select>
                            <label for="floatingSelect">{{ __('Gender') }}</label>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-floating common-form-item">
                            <input type="text" class="form-control" placeholder="YYYY-MM-DD" id="flatpickr-date"
                                name="created_at" value="{{ $user->created_at }}" disabled>
                            <label for="flatpickr-date">{{ __('Joining Date') }}</label>
                        </div>
                    </div>
                </div>
                <div class="td-dashboard-content-box-profile-inputs-btn">
                    <button class="td-btn">
                        <span class="td-btn-wrap">
                            <span class="td-btn-y-1">{{ __('Save Changes') }}</span>
                            <span class="td-btn-y-2">{{ __('Save Changes') }}</span>
                        </span>
                        <i></i>
                    </button>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('js')
    <script>
        // Image Preview
        $(document).on('change', 'input[type="file"]', function(event) {
            var $file = $(this),
                $label = $file.next('label'),
                $labelText = $label.find('span'),
                labelDefault = $labelText.text();

            var fileName = $file.val().split('\\').pop(),
                tmppath = URL.createObjectURL(event.target.files[0]);

            //Check successfully selection
            if (fileName) {
                $label.addClass('file-ok').css('background-image', 'url(' + tmppath + ')');
                $labelText.text(fileName);
            } else {
                $label.removeClass('file-ok');
                $labelText.text(labelDefault);
            }
        });

        function dragNdrop(event) {
            var fileName = URL.createObjectURL(event.target.files[0]);
            var preview = document.getElementById("preview");
            var previewImg = document.createElement("img");
            previewImg.setAttribute("src", fileName);
            preview.innerHTML = "";
            preview.appendChild(previewImg);
        }

        function drag() {
            document.getElementById('uploadFile').parentNode.className = 'draging dragBox';
        }

        function drop() {
            document.getElementById('uploadFile').parentNode.className = 'dragBox';
        }

        function removeUploadedFile(button) {
            var label = button.previousElementSibling.querySelector('label.file-ok');
            var input = button.previousElementSibling.querySelector('input[type="file"]');
            label.classList.remove('file-ok');
            label.removeAttribute('style');
            label.innerHTML = '<span> {{ __('Upload Attachment') }} <b> {{ __('Or Drag and Drop') }} </b></span>';
            input.value = ''; // Reset the input value
            button.style.display = 'none'; // Hide the close button
        }

        function showAvatarCloseButton(event) {
            var button = event.target.parentElement.nextElementSibling; // Get the close button
            button.style.display = 'block'; // Show the close button
        }
    </script>
@endpush
