@extends('web.layouts.layout')

@section('content')

    <main class="mt-100">
        <section class="profile-section section_padding">
            <div class="container">
                <div class="row">
                    <div class="col-lg-10 mx-auto">
                        <div class="card bg-white box-shadow no-border profile-wrapepr raddius-15 view-profile">
                            <!-- View Profile Section -->
                            <div class="text-center mb-5">
                                <img data-src="{{ $user->photo_url }}"
                                     src="{{ $user->photo_url }}"
                                     alt="{{ $user->name }}"
                                     class="lazyload img_cover profile-img"/>
                            </div>
                            <div class="row contact-section">
                                @if(in_array('name', $moduleFields))
                                    <div class="col-md-12">
                                        <div class="input-group mb-3">
                                            <input type="text"
                                                   class="form-control"
                                                   disabled
                                                   placeholder="{{ __('users::users.name') }}"
                                                   aria-label="{{ __('users::users.name') }}"
                                                   value="{{ $user->name }}"/>
                                            <span class="input-group-text orange-color">
                                            <i class="fa-light fa-user"></i>
                                        </span>
                                        </div>
                                    </div>
                                @endif
                                <div class="col-md-6">
                                    <div class="input-group mb-3">
                                        <input type="email"
                                               class="form-control"
                                               disabled
                                               placeholder="{{ __('users::users.email') }}"
                                               aria-label="{{ __('users::users.email') }}"
                                               value="{{ $user->email }}"/>
                                        <span class="input-group-text orange-color">
                                            <i class="fa-light fa-envelope"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-group phone-input">
                                        <input type="text"
                                               class="form-control w-60"
                                               disabled
                                               placeholder="{{ __('users::users.phone') }}"
                                               aria-label="{{ __('users::users.phone') }}"
                                               value="{{ $user->phone_formats['national_number'] ?? "" }}"/>
                                        <select name="country_code"
                                            class="form-control phone"
                                            dir="ltr"
                                            style="text-align: center;">
                                            @if(isset($countries))
                                                @foreach($countries as $country)
                                                    <option
                                                        value="{{ $country->iso2 }}" @selected(old('country_code') == $country->iso2)>
                                                        {{ $country->country_code }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                        <!--<select name="country_code" class="form-select" disabled>-->
                                        <!--    @if(isset($countries))-->
                                        <!--        @foreach($countries as $country)-->
                                        <!--            <option-->
                                        <!--                value="{{ $country->iso2 }}" @selected(old('country_code', $user->country_code ?? "") == $country->iso2)>-->
                                        <!--                {{ $country->country_code }}-->
                                        <!--            </option>-->
                                        <!--        @endforeach-->
                                        <!--    @endif-->
                                        <!--</select>-->
                                        <span class="input-group-text orange-color">
                                            <i class="fa-light fa-mobile"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-12 text-center mt-4">
                                    <button class="btn btn-outline-primary mainColor fs-5 edit-btn">
                                        <i class="fa-solid fa-pen-to-square me-1"></i>
                                        {{ __('general.edit') }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="card bg-white box-shadow no-border profile-wrapepr raddius-15 edit-profile-wrapper">
                            <form action="{{ route('web.users.update_profile', $user->id) }}"
                                  method="post" enctype="multipart/form-data"
                                  class="edit-profile add-asterisk ajax-form">
                                @method('PUT')
                                @csrf
                                <!-- Edit Profile Section -->
                                <div class="text-center mb-5">
                                    <div class="image-container">
                                        <img id="profile-img"
                                             src="{{ $user->photo_url }}"
                                             alt="{{ __('users::users.profile_picture') }}"
                                             class="lazyload img_cover profile-img"/>
                                        <!-- Edit Icon -->
                                        <div class="edit-icon" onclick="triggerFileInput()">
                                            <i class="fa fa-pencil"></i>
                                            <!-- You can use any icon library like FontAwesome -->
                                        </div>
                                        <!-- Remove Icon -->
                                        <div class="remove-icon" onclick="removeImage()">
                                            <i class="fa fa-times"></i>
                                            <!-- You can use any icon library like FontAwesome -->
                                        </div>
                                        <!-- File input for image upload -->
                                        <input type="file"
                                               name="photo"
                                               id="image-upload"
                                               style="display: none"
                                               accept="image/*"
                                               onchange="previewImage(event)"/>
                                        <input type="hidden" name="remove_photo" id="remove-photo-flag" value="0">
                                    </div>
                                </div>

                                <div class="row contact-section">
                                    @if(in_array('name', $moduleFields))
                                        <div class="col-md-12 col-lg-12 col-sm-12 col-x-12">
                                            <div class="input-group mb-3">
                                                <input type="text"
                                                       name="name"
                                                       value='{{ old("name", $user->name ?? "") }}'
                                                       class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                                                       required
                                                       placeholder="{{ __('users::users.name') }}"
                                                       aria-label="{{ __('users::users.name') }}"/>
                                                <span class="input-group-text orange-color" id="basic-addon1">
                                                    <i class="fa-light fa-user"></i>
                                                </span>
                                            </div>
                                        </div>
                                    @endif
                                    {{-- @if(in_array('username', $moduleFields))
                                        <div class="col-lg-6">
                                            <div class="form-group mb-4">
                                                <input type="text"
                                                       name="username"
                                                       value='{{ old("username", $user->username ?? "") }}'
                                                       class="form-control real-time-validation {{ $errors->has('username') ? 'is-invalid' : '' }}"
                                                       data-role="{{ $userRole ?? '' }}"
                                                       data-user-id="{{ $user->id ?? '' }}"
                                                       placeholder="{{ __('users::users.username') }}"
                                                       required/>
                                                <span class="icon"> <i class="fa-light fa-user"></i> </span>
                                            </div>
                                        </div>
                                    @endif --}}
                                    <div class="col-md-6 col-lg-6 col-sm-12 col-x-12">
                                        <div class="input-group mb-3">
                                            <input type="email"
                                                name="email"
                                                required
                                                value="{{ old('email', $user->email ?? "") }}"
                                                class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                                                placeholder="{{ __('users::users.email') }}"
                                                aria-label="{{ __('users::users.email') }}"/>
                                            <span class="input-group-text orange-color" id="basic-addon1">
                                                <i class="fa-light fa-envelope"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-sm-12 col-x-12">
                                        <div class="input-group mb-3">
                                            <input type="number"
                                                   name="phone"
                                                   required
                                                   value="{{ old('phone', $user->phone) }}"
                                                   class="form-control {{ $errors->has('phone') ? 'is-invalid' : '' }}"
                                                   placeholder="{{ __('users::users.phone') }}"
                                                   aria-label="{{ __('users::users.phone') }}"/>
                                            <span class="input-group-text orange-color" id="basic-addon1">
                                                <i class="fa-light fa-mobile"></i>
                                            </span>
                                            {{-- <select name="country_code" class="code_select">
                                                @if(isset($countries))
                                                    @foreach($countries as $country)
                                                        <option
                                                            value="{{ $country->iso2 }}" @selected(old('country_code', $user->country_code ?? "") == $country->iso2)>
                                                            {{ $country->country_code }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select> --}}
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-sm-12 col-x-12">
                                        <div class="input-group mb-3">
                                            <input type="password"
                                                   name="password"
                                                   class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}"
                                                   id="newPassword"
                                                   placeholder="{{ __('users::users.password') }}"
                                                   aria-label=""/>
                                            <span class="input-group-text orange-color"
                                                  id="toggleNewPassword"
                                                  style="cursor: pointer">
                                            <i class="fa-light fa-eye-slash" id="newPasswordIcon"></i>
                                        </span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-6 col-sm-12 col-x-12">
                                        <div class="input-group mb-3">
                                            <input type="password"
                                                   name="password_confirmation"
                                                   class="form-control {{ $errors->has('password_confirmation') ? 'is-invalid' : '' }}"
                                                   id="confirmPassword"
                                                   placeholder="{{ __('users::users.password_confirmation') }}"
                                                   aria-label="{{ __('users::users.password_confirmation') }}"/>
                                            <span class="input-group-text orange-color"
                                                  id="toggleConfirmPassword"
                                                  style="cursor: pointer">
                                                <i class="fa-light fa-eye-slash" id="confirmPasswordIcon"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-12 text-center mt-4">
                                        <button type="submit" class="btn btn-outline-primary mainColor fs-5 save-btn">
                                            <i class="fa-solid fa-save me-1"></i>
                                            {{ __('main.save') }}
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

@push('stack_scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const editButton = document.querySelector(".edit-btn");
            const saveButton = document.querySelector(".save-btn");
            const viewProfile = document.querySelector(".view-profile");
            const editProfile = document.querySelector(".edit-profile-wrapper");

            // Hide edit profile section by default
            editProfile.style.display = "none";

            // When Edit button is clicked
            editButton.addEventListener("click", function () {
                viewProfile.style.display = "none";
                editProfile.style.display = "block";
            });

            // When Save button is clicked
            /*saveButton.addEventListener("click", function () {
                editProfile.style.display = "none";
                viewProfile.style.display = "block";
            });*/
        });
    </script>

    <script>
        // Trigger file input click when the edit icon is clicked
        function triggerFileInput() {
            document.getElementById("image-upload").click();
        }

        // Preview the selected image
        function previewImage(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function () {
                    const imgElement = document.getElementById("profile-img");
                    imgElement.src = reader.result; // Set the new image source
                };
                reader.readAsDataURL(file); // Read the uploaded file as a data URL
            }
        }

        // Remove the current image and reset to a default
        function removeImage() {
            const imgElement = document.getElementById("profile-img");
            imgElement.src = "{{ asset("storage/uploads/images/site/img/user_default_photo.png") }}"; // Set the image to a default image
            document.getElementById("remove-photo-flag").value = "1"; // tell backend to remove photo
        }
    </script>
@endpush