@extends('user::layouts.guest')

@section('breadcrumb_title', 'Author Register')

@section('content')
    <div class="min-h-screen overflow-y-auto max-w-3xl mx-auto my-10">
        <div class="card">

            <h2 class="mb-6 text-28">{{ __('backend::translate.Register Author account') }}</h2>

            <form method="POST" action="{{ route('author.store') }}" enctype="multipart/form-data">
                @csrf

                <!-- Display Errors -->
                @if ($errors->any())
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-5">
                        <ul class="mb-0 list-none">
                            @foreach ($errors->all() as $error)
                                <li class="mb-1.5">{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="mb-10">

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">

                        <div class="col-span-full">
                            @include('backend::components.featured-image', [
                                'name' => 'avatar',
                                'label' => 'Profile Image',
                            ])
                        </div>

                        <!-- Full Name -->
                        <div class="input-with-label">
                            <label>Full Name <span class="text-red-500">*</span></label>
                            <input id="name" type="text" name="name" value="{{ old('name', $user?->name) }}"
                                class="@error('name') border-red-500 @enderror" required>
                            @error('name')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Username -->
                        <div class="input-with-label">
                            <label>Username <span class="text-red-500">*</span></label>
                            <input id="username" type="text" name="username" value="{{ old('username', $user?->username) }}"
                                class="@error('username') border-red-500 @enderror" required>
                            @error('username')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div class="input-with-label col-span-full">
                            <label class="!text-16" for="email">{{ __('backend::translate.Email') }} <span
                                    class="text-red-500">*</span></label>
                            <div class="flex relative items-center">
                                <svg class="absolute left-4" width="20" height="20" viewBox="0 0 20 20"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect x="1.6665" y="2.5" width="16.6667" height="15" rx="4" stroke="#667085"
                                        stroke-width="1.5" />
                                    <path
                                        d="M1.6665 5.83301L7.50106 10.5007C8.96193 11.6693 11.0377 11.6694 12.4986 10.5007L18.3332 5.83301"
                                        stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>

                                <input name="email" id="email" type="email" class="!pl-12"
                                    placeholder="{{ __('backend::translate.Enter your email') }}"
                                    value="{{ old('email') }}" required />
                            </div>
                            @error('email')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Phone -->
                        <div class="input-with-label">
                            <label>Phone <span class="text-red-500">*</span></label>
                            <input type="text" name="phone" value="{{ old('phone', $user?->getMeta('phone')) }}"
                                class="@error('phone') border-red-500 @enderror" required>
                            @error('phone')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Designation -->
                        <div class="input-with-label">
                            <label>Designation <span class="text-red-500">*</span></label>
                            <input type="text" name="designation"
                                value="{{ old('designation', $user?->getMeta('designation')) }}"
                                class="@error('designation') border-red-500 @enderror" required>
                            @error('designation')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Skill -->
                    <div class="mb-4 input-with-label">
                        <label>Skill <span class="text-red-500">*</span></label>
                        <input type="text" name="skill" value="{{ old('skill', $user?->getMeta('skill')) }}"
                            class="@error('skill') border-red-500 @enderror" required>
                        @error('skill')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Bio -->
                    <div class="mb-4 input-with-label">
                        <label>Biography <span class="text-red-500">*</span></label>
                        <textarea name="bio" rows="5" class="rich-editor @error('bio') border-red-500 @enderror" required>{{ old('bio', $user?->getMeta('bio')) }}</textarea>
                        @error('bio')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Password -->
                    <div class="mb-4 input-with-label">
                        <label>Password <span class="text-red-500">*</span></label>
                        <div class="flex relative items-center">
                            <svg class="absolute left-4" width="20" height="20" viewBox="0 0 20 20" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <rect x="1.66669" y="5" width="16.6667" height="13.3333" rx="4" stroke="#667085"
                                    stroke-width="1.5"></rect>
                                <ellipse cx="9.99998" cy="11.6667" rx="1.66667" ry="1.66667" stroke="#667085"
                                    stroke-width="1.5"></ellipse>
                                <path
                                    d="M13.3334 5.00033C13.3334 3.15938 11.841 1.66699 10 1.66699C8.15907 1.66699 6.66669 3.15938 6.66669 5.00033"
                                    stroke="#667085" stroke-width="1.5"></path>
                            </svg>

                            <input type="password" id="password" name="password"
                                class="!pl-12 w-full border rounded py-2 px-3" placeholder="Password" required>

                            <button type="button" class="absolute right-4 text-headline text-14 toggle-password"
                                data-target="#password">
                                <svg class="eye-show hidden" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M3 3L21 21" stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round"></path>
                                    <path
                                        d="M10.584 10.5869C10.2087 10.9619 9.99775 11.4707 9.99756 12.0012C9.99737 12.5317 10.2079 13.0406 10.583 13.4159C10.958 13.7912 11.4667 14.0021 11.9973 14.0023C12.5278 14.0025 13.0367 13.7919 13.412 13.4169"
                                        stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round"></path>
                                    <path
                                        d="M9.363 5.36506C10.2204 5.11978 11.1082 4.9969 12 5.00006C16 5.00006 19.333 7.33306 22 12.0001C21.222 13.3611 20.388 14.5241 19.497 15.4881M17.357 17.3491C15.726 18.4491 13.942 19.0001 12 19.0001C8 19.0001 4.667 16.6671 2 12.0001C3.369 9.60506 4.913 7.82506 6.632 6.65906"
                                        stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round"></path>
                                </svg>
                                <svg class="eye-hide" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M1 12C3.5 7 7.5 4 12 4C16.5 4 20.5 7 23 12C20.5 17 16.5 20 12 20C7.5 20 3.5 17 1 12Z"
                                        stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round"></path>
                                    <circle cx="12" cy="12" r="3" stroke="#667085" stroke-width="1.5"
                                        stroke-linecap="round" stroke-linejoin="round"></circle>
                                </svg>
                            </button>
                        </div>
                        @error('password')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Confirm Password -->
                    <div class="mb-4 input-with-label">
                        <label>Confirm Password <span class="text-red-500">*</span></label>
                        <div class="flex relative items-center">
                            <svg class="absolute left-4" width="20" height="20" viewBox="0 0 20 20"
                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="1.66669" y="5" width="16.6667" height="13.3333" rx="4" stroke="#667085"
                                    stroke-width="1.5"></rect>
                                <ellipse cx="9.99998" cy="11.6667" rx="1.66667" ry="1.66667" stroke="#667085"
                                    stroke-width="1.5"></ellipse>
                                <path
                                    d="M13.3334 5.00033C13.3334 3.15938 11.841 1.66699 10 1.66699C8.15907 1.66699 6.66669 3.15938 6.66669 5.00033"
                                    stroke="#667085" stroke-width="1.5"></path>
                            </svg>

                            <input type="password" id="password_confirmation" name="password_confirmation"
                                class="!pl-12 w-full border rounded py-2 px-3" placeholder="Confirm Password" required>

                            <button type="button" class="absolute right-4 text-headline text-14 toggle-password"
                                data-target="#password_confirmation">
                                <svg class="eye-show hidden" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M3 3L21 21" stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round"></path>
                                    <path
                                        d="M10.584 10.5869C10.2087 10.9619 9.99775 11.4707 9.99756 12.0012C9.99737 12.5317 10.2079 13.0406 10.583 13.4159C10.958 13.7912 11.4667 14.0021 11.9973 14.0023C12.5278 14.0025 13.0367 13.7919 13.412 13.4169"
                                        stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round"></path>
                                    <path
                                        d="M9.363 5.36506C10.2204 5.11978 11.1082 4.9969 12 5.00006C16 5.00006 19.333 7.33306 22 12.0001C21.222 13.3611 20.388 14.5241 19.497 15.4881M17.357 17.3491C15.726 18.4491 13.942 19.0001 12 19.0001C8 19.0001 4.667 16.6671 2 12.0001C3.369 9.60506 4.913 7.82506 6.632 6.65906"
                                        stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round"></path>
                                </svg>
                                <svg class="eye-hide" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M1 12C3.5 7 7.5 4 12 4C16.5 4 20.5 7 23 12C20.5 17 16.5 20 12 20C7.5 20 3.5 17 1 12Z"
                                        stroke="#667085" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round"></path>
                                    <circle cx="12" cy="12" r="3" stroke="#667085" stroke-width="1.5"
                                        stroke-linecap="round" stroke-linejoin="round"></circle>
                                </svg>
                            </button>
                        </div>
                        @error('password_confirmation')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                </div>

                <button type="submit" class="btn-primary w-full mt-6">
                    {{ __('backend::translate.Register') }}
                </button>
            </form>

            <p class="pt-4 pb-6 text-center text-16 text-headline">
                {{ __('backend::translate.Already have an account?') }}
                <a href="{{ route('author.login') }}" class="text-main font-medium">
                    {{ __('backend::translate.Login') }}
                </a>
            </p>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {


            $(document).ready(function() {

                $('.toggle-password').on('click', function() {
                    const input = $($(this).data('target'));
                    const type = input.attr('type') === 'password' ? 'text' : 'password';
                    input.attr('type', type);

                    // toggle icons
                    $(this).find('.eye-show').toggleClass('hidden');
                    $(this).find('.eye-hide').toggleClass('hidden');
                });

                $('#name').on('input', function() {
                    let name = $(this).val().trim();

                    let username = name.toLowerCase()
                        .replace(/[^a-z0-9\s]/g, '')
                        .replace(/\s+/g, '-');

                    $('#username').val(username);
                });
            });

        });
    </script>
@endpush