@extends('client.pages.user.tabs')

@section('title', 'Profile')

@section('tab-content')
    <div class="py-4 w-3/4 mx-auto">
        <h1 class="text-center text-5xl font-bold text-blue-700">
            {{ __('User Profile') }}
        </h1>
        <form method="POST" action="{{ route('update-profile') }}" enctype="multipart/form-data"
            class="flex flex-col lg:flex-row py-8 items-center">
            @csrf
            <div class="w-full lg:w-2/6 flex flex-col items-center">
                <div id="avatar"
                    class="relative border-4 border-gray w-[150px] h-[150px] lg:w-[210px] lg:h-[210px] rounded-full"
                    style="
                background-image: url('{{ asset('storage/' . Auth::user()->avatar) }}');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                ">

                    <input type="file" class="hidden" name="avatar" id="input_avatar" accept="image/*" />
                </div>

                <a type="button" id="btn_trigger_avatar"
                    class="hover:opacity-80 py-2 px-4 mt-3 bg-blue-500 rounded-lg text-white font-semibold">
                    {{ __('Upload Avatar') }}
                </a>

                @error('avatar')
                    <span class="invalid-feedback text-red-500" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="w-full lg:w-4/6 text-base space-y-10">
                <div class="flex items-center">
                    <span class="text-gray-600 w-2/5 lg:w-2/5">Your point:</span>
                    <input type="text" value="{{ old('point', $user->point) }}" disabled
                        class="px-4 py-2 font-bold transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200" />
                </div>

                <div>
                    <div class="flex items-center">
                        <span class="text-gray-600 w-2/5 lg:w-2/5">Your name:</span>
                        <input type="text" id="name" placeholder="Name" name="name"
                            value="{{ old('name', $user->name) }}" required autofocus
                            class="@error('name') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200" />
                    </div>

                    @error('name')
                        <div class="flex items-center">
                            <span class="text-gray-600 w-2/5 lg:w-2/5"></span>
                            <span class="invalid-feedback text-red-500 w-full" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        </div>
                    @enderror
                </div>
                <div>
                    <div class="flex items-center">
                        <span class="text-gray-600 w-2/5 lg:w-2/5">Your email:</span>
                        <input type="email" id="email" placeholder="Email" autofocus name="email" readonly disabled
                            value="{{ old('email', $user->email) }}" required autocomplete="email"
                            class="@error('email') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200" />
                    </div>
                    @error('email')
                        <div class="flex items-center">
                            <span class="text-gray-600 w-2/5 lg:w-2/5"></span>
                            <span class="invalid-feedback text-red-500 w-full" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        </div>
                    @enderror
                </div>
                <div>
                    <div class="flex items-center">
                        <span class="text-gray-600 w-2/5 lg:w-2/5">Your phone:</span>
                        <input type="text" id="phone" placeholder="Phone" autofocus name="phone"
                            value="{{ old('phone', $user->phone) }}" required autocomplete="phone"
                            class="@error('phone') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200" />
                    </div>
                    @error('phone')
                        <div class="flex items-center">
                            <span class="text-gray-600 w-2/5 lg:w-2/5"></span>
                            <span class="invalid-feedback text-red-500 w-full" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        </div>
                    @enderror
                </div>
                <div>
                    <div class="flex items-center">
                        <span class="text-gray-600 w-2/5 lg:w-2/5">Your company:</span>
                        <input type="text" id="company" placeholder="Company" autofocus name="company"
                            value="{{ old('company', $user->company) }}" required autocomplete="company"
                            class="@error('company') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200" />
                    </div>
                    <div>
                        @error('company')
                            <div class="flex items-center">
                                <span class="text-gray-600 w-2/5 lg:w-2/5"></span>
                                <span class="invalid-feedback text-red-500 w-full" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            </div>
                        @enderror
                    </div>
                </div>
                <div>
                    <div class="flex items-center">
                        <span class="text-gray-600 w-2/5 lg:w-2/5">Your country:</span>
                        <select id="country" name="country"
                                class="@error('country') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200">
                            <option value="" disabled selected>Select your country</option>
                            @foreach($countries as $country_code => $country_name)
                                <option value="{{ $country_code }}" {{ old('country', $user->country_code) == $country_code ? 'selected' : '' }}>
                                    {{ $country_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @error('country')
                        <div class="flex items-center">
                            <span class="text-gray-600 w-2/5 lg:w-2/5"></span>
                            <span class="invalid-feedback text-red-500 w-full" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        </div>
                    @enderror
                </div>
                <div class="w-full flex flex-col md:flex-row justify-end gap-y-4 gap-x-2">
                    <a href="{{ route('change-password') }}"
                        class="hover:opacity-80 py-2 px-4 bg-blue-500 text-white rounded-lg font-semibold text-center">Change
                        password</a>
                    <button {{-- href="#" --}} type="submit"
                        class="hover:opacity-80 py-2 px-4 bg-blue-500 text-white rounded-lg font-semibold text-center">Save
                        change</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        window.addEventListener("load", (event) => {
            function togglePasswordVisibility(passwordInput, label) {
                if (passwordInput.attr("type") === "password") {
                    passwordInput.attr("type", "text");
                    label.html('<i class="ri-eye-off-line"></i>');
                } else {
                    passwordInput.attr("type", "password");
                    label.html('<i class="ri-eye-line"></i>');
                }
            }
            $(".js-old-password-toggle").on("click", function() {
                const passwordInput = $(".js-old-password");
                const label = $(".js-old-password-label");
                togglePasswordVisibility(passwordInput, label);
            });

            $(".js-new-password-toggle").on("click", function() {
                const passwordInput = $(".js-new-password");
                const label = $(".js-new-password-label");
                togglePasswordVisibility(passwordInput, label);
            });

            $(".js-confirm-password-toggle").on("click", function() {
                const passwordInput = $(".js-confirm-password");
                const label = $(".js-confirm-password-label");
                togglePasswordVisibility(passwordInput, label);
            });

            $("#btn_trigger_avatar").click(() => {
                $("#input_avatar").click();
            });

            $("#input_avatar").change((e) => {
                const file = e.target.files[0];
                const reader = new FileReader();

                reader.onload = function(e) {
                    $("#avatar").css("background-image", "url(" + e.target.result + ")");
                };

                if (file) {
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
