@extends('layouts.front.'.$namespaceName.'.master')
@section('title')
    {{$title}}
@endsection
@section('content')
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-2 mt-5">
        <div class="col mx-auto mt-5">
            <div id="alert-container">

            </div>
            @include('message')
            <div id="email-validation">
                <div class="my-2 col-12">
                   {{-- <label for="email" class="form-label">{{__('labels.Email Address')}}</label> --}}
                    <input type="email" id="email" name="email" value="{{old('email')}}" class="form-control" placeholder="{{__('guest/public_events.enter your email')}}" required oninput="InvalidMsg(this);">
                </div>

                <div id="user-actions" style="display: none">
                    <div id="login_div" style="display: none;">
                        <div class="my-2 col-md-12">
{{--                            <label class="form-label mb-2">{{trans('guest/auth.password')}}</label>--}}
                            <div class="input-group" id="show_hide_password1">
                                <input type="password" name="password" id="user-password" class="form-control @error('password') is-invalid @enderror" value="{{old('password')}}" required placeholder="{{__('guest/public_events.enter your password')}}"> <a href="javascript:;" class="input-group-text bg-transparent"><i class='bx bx-hide'></i></a>
                            </div>
                            @error('password')
                            <div class="alert alert-danger">{{$message}}</div>
                            @enderror
                        </div>
                    </div>
                    <div id="register_div" style="display: none;">
                        <div class="row">
                        <div class="my-2 col-12">
                           {{-- <label for="email" class="form-label">{{__('labels.Name')}}</label> --}}
                            <input type="name" id="name" name="name" value="{{old('name')}}" class="form-control" placeholder="{{__('guest/public_events.enter your name')}}" required oninput="InvalidMsg(this);">
                        </div>
                        <div class="my-2 col-12">
                           {{-- <label for="email" class="form-label">{{__('labels.national_id')}}</label> --}}
                            <input type="text" id="national_id" name="national_id" value="{{old('national_id')}}" class="form-control" placeholder="{{__('guest/public_events.enter your national_id')}}" required oninput="InvalidMsg(this);">
                        </div>
                        <div class="my-2 col-md-6">
                            <label class="form-label mb-2">{{trans('guest/auth.password')}}</label>
                            <div class="input-group" id="show_hide_password1">
                                <input type="password" name="password" id="register-password" class="form-control @error('password') is-invalid @enderror" value="{{old('password')}}" required> <a href="javascript:;" class="input-group-text bg-transparent"><i class='bx bx-hide'></i></a>
                            </div>
                            @error('password')
                            <div class="alert alert-danger">{{$message}}</div>
                            @enderror
                        </div>
                        <div class="my-2 col-md-6" id="password_confirmation_dev">
                            <label class="form-label mb-2">{{trans('guest/auth.password_confirmation')}}</label>
                            <div class="input-group" id="show_hide_password">
                                <input type="password" name="password_confirmation" id="confirm-password" class="form-control  @error('password_confirmation') is-invalid @enderror" required value="{{old('password_confirmation')}}"><a href="javascript:;" class="input-group-text bg-transparent"><i class='bx bx-hide'></i></a>
                            </div>
                            @error('password_confirmation')
                            <div class="alert alert-danger">{{$message}}</div>
                            @enderror
                        </div>
                        <div class="my-2 col-md-6">
                            <div class="mb-3">
                                <label class="mb-2">{{trans('guest/auth.language')}}</label>
                                <select class="form-control" name="language" >
                                    <option value="ar" selected>{{trans('guest/auth.arabic')}}</option>
                                    <option value="en">{{trans('guest/auth.english')}}</option>
                                </select>
                            </div>
                        </div>
{{--                        <div class="mb-3 col-md-6">--}}
{{--                            <label class="form-label mb-2">{{trans('guest/auth.photo')}}</label>--}}
{{--                            <input id="image-profile" class="form-control" name="image" type="file" accept="image/*">--}}
{{--                            @error('image')--}}
{{--                            <div class="alert alert-danger">{{$message}}</div>--}}
{{--                            @enderror--}}
{{--                        </div>--}}
                        </div>
                    </div>
                </div>

                <div class="my-2 col-12 my-2" id="check_button">
                    <div class="d-grid">
                        <button onclick="performUserAction()" class="btn btn-primary"><i class="bx bxs-right-arrow"></i>{{__('guest/public_events.continue')}}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('js')
    <script>
        var current_action = 'check_email';

        function performUserAction() {
            const email = document.getElementById('email').value;
            const password = document.getElementById('user-password').value;
            const register_password = document.getElementById('register-password').value;
            const confirmPassword = document.getElementById('confirm-password').value;
            const name = document.getElementById('name').value;
            const national_id = document.getElementById('national_id').value;
            const language = document.querySelector('select[name="language"]').value;
            // const profilePhoto = document.getElementById('image-uploadify');
            // let profilePhoto = $('#image-profile').prop('files')[0]
            // console.log(profilePhoto)
            if (current_action ==='check_email'){
                checkEmail()
            }
            if (current_action === 'login') {
                $.ajax({
                    url: "{{ route('public-events.joinToEvent') }}", // Replace with your login route
                    method: "POST",
                    data: {
                        email: email,
                        password: password,
                        action: current_action,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    cache: false,
                    success: function (response) {
                        const alertContainer = $('#alert-container'); // Replace with the ID of your alert container element

                        if (response.success) {
                            // Create a success alert
                            const successAlert = `
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    ${response.message}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            `;

                            alertContainer.empty(); // Clear existing alerts
                            alertContainer.append(successAlert); // Append the success alert
                            setTimeout(function () {
                                window.location.href = response.redirect; // Redirect to the specified route
                            }, 2000);
                        } else {
                            // Create an error alert
                            const errorAlert = `
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    ${response.message}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            `;

                            alertContainer.empty(); // Clear existing alerts
                            alertContainer.append(errorAlert); // Append the error alert
                        }
                    },
                    error: function () {
                        alert('An error occurred during the login process.'); // Handle unexpected errors
                    }
                });
            } else if (current_action === 'register') {
                $.ajax({
                    url: "{{ route('public-events.joinToEvent') }}", // Replace with your login route
                    method: "POST",
                    data: {
                        email: email,
                        name: name,
                        password: register_password,
                        password_confirmation: confirmPassword,
                        language: language,
                        national_id: national_id,
                        // image: profilePhoto,
                        action: current_action,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    cache: false,
                    success: function (response) {
                        const alertContainer = $('#alert-container'); // Replace with the ID of your alert container element

                        if (response.success) {
                            // Create a success alert
                            const successAlert = `
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    ${response.message}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            `;

                            alertContainer.empty(); // Clear existing alerts
                            alertContainer.append(successAlert); // Append the success alert
                            setTimeout(function () {
                                window.location.href = response.redirect; // Redirect to the specified route
                            }, 2000);
                        } else {
                            // // Create an error alert
                            // const errorAlert = `
                            //     <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            //         ${response.message}
                            //         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            //     </div>
                            // `;
                            //
                            // alertContainer.empty(); // Clear existing alerts
                            // alertContainer.append(errorAlert); // Append the error alert

                                // Handle validation errors
                                const errors = response.errors;
                                const errorMessages = Object.values(errors).flat(); // Flatten the error messages

                                // Clear any previous success messages
                                $('#success-messages').empty();
                                // Display validation error messages
                                $('#error-messages').html('<div class="alert alert-danger">' + errorMessages.join('<br>') + '</div>');

                                alertContainer.empty(); // Clear existing alerts
                                alertContainer.append('<div class="alert alert-danger">' + errorMessages.join('<br>') + '</div>'); // Append the error alert
                        }
                    },
                    error: function (xhr, status, error) {
                        const errors = xhr.errors;
                        const errorMessages = Object.values(errors).flat(); // Flatten the error messages

                        // Clear any previous success messages
                        $('#success-messages').empty();
                        // Display validation error messages
                        $('#error-messages').html('<div class="alert alert-danger">' + errorMessages.join('<br>') + '</div>');
                    }
                });

            }
        }


        function renderInputs(type){
            current_action = 'check_email';
            document.getElementById('user-actions').style.display = 'none';
            document.getElementById('register_div').style.display = 'none';
            document.getElementById('login_div').style.display = 'none';
            document.getElementById('login_div').style.display = 'none';
            if(type === 'login'){
                current_action = 'login';
                document.getElementById('login_div').style.display = 'block';
                document.getElementById('user-actions').style.display = 'block';
            }else if(type === 'register') {
                current_action = 'register';
                document.getElementById('register_div').style.display = 'block';
                document.getElementById('user-actions').style.display = 'block';
            }
        }


        function checkEmail() {
            const emailInput = document.getElementById('email');
            const email = emailInput.value;

            emailInput.addEventListener('input', function () {
                if(current_action != 'check_email'){
                    renderInputs('check_email')
                }
            });
            // Simple email format validation using regex
            const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

            if (!email.match(emailRegex)) {
                alert('Email format is not correct.');
                return;
            }

            $.ajax({
                url: "{{ route('guest.check.email.exists') }}",
                method: "POST",
                data: {
                    email: email,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    if (response.exists) {
                        // document.getElementById('email-validation').style.display = 'none';
                        renderInputs('login')
                    } else {
                        renderInputs('register')
                    }
                },
                error: function () {
                    alert('An error occurred while checking email existence.');
                    renderInputs('check_email')
                }
            });
        }



        function InvalidMsg(textbox) {
            if (textbox.value == '') {
                textbox.setCustomValidity("{{ trans('messages.this field is required') }}");
            }else if (textbox.validity.typeMismatch){
                textbox.setCustomValidity("{{ trans('messages.format not valid') }}");
            }
            else {
                textbox.setCustomValidity('');
            }
            return true;
        }
        $(document).ready(function () {
            $("#show_hide_password a").on('click', function (event) {
                event.preventDefault();
                if ($('#show_hide_password input').attr("type") == "text") {
                    $('#show_hide_password input').attr('type', 'password');
                    $('#show_hide_password i').addClass("bx-hide");
                    $('#show_hide_password i').removeClass("bx-show");
                } else if ($('#show_hide_password input').attr("type") == "password") {
                    $('#show_hide_password input').attr('type', 'text');
                    $('#show_hide_password i').removeClass("bx-hide");
                    $('#show_hide_password i').addClass("bx-show");
                }
            });
        });
    </script>
@endpush