@extends('themes.frontend.layouts.app-popup')
@section('validate') @stop
@section('content')
    <div class="fancybox-popup login-and-register-form modal">
        <div class="main-register fl-wrap">
            <div id="tabs-container">
                <div class="tab">
                    <div id="tab-1" class="tab-contents">
                        <div class="text-center">
                            <h3 class="text-center mb-0">{!! $model->title !!}</h3>
                            {!! $model->description !!}
                        </div>

                        <div class="custom-form">

                            <form action="{{ module_url('web.login.submit') }}" method="POST" name="login_form"
                                id="login_form">
                                {{ csrf_field() }}
                                <x-form.field.hidden name="recaptcha_v3" id="recaptcha_v3" />

                                <div class="form-group">
                                <label for="email">E-mail </label>
                                <x-form.field.web.text type="email" name="email" />
                                <div class="invalid-feedback" data-error="email"></div>
                                </div>

                                <div class="form-group password-wrapper">
                                <label for="password">Password * </label>
                                <x-form.field.web.text type="password" name="password" class="js-password" />
                                <span class="cursor-pointer js-toggle-password">
                                    <i class="fa fa-eye"></i>
                                </span>
                                <div class="invalid-feedback" data-error="password"></div>
                                </div>

                                <div class="clearfix"></div>

                                <div class="filter-tags mt-0">
                                    <input type="checkbox" name="remember" id="remember" value="1">
                                    <label for="remember">Remember me</label>
                                </div>

                                <div class="lost_password mt-0">
                                    <a href="{{ module_url('web.forgot-password') }}">{{ __('auth.web.forgot_password_txt') }}?</a>
                                </div>

                                <div class="clearfix"></div>

                                <x-form.field.web.button type="button" id="submit_login_form" name="submit_login_form"
                                    text="{{ __('auth.web.login.submit_btn_txt') }}" showIcon="true" />
                                
                                <div class="clearfix"></div>

                                <div id="msg_id" class="error-msg"></div>
                                @if (session()->has('auth_popup_alert'))
                                    <x-form.web.alert
                                        :type="session('auth_popup_alert.type')"
                                        :title="session('auth_popup_alert.title')"
                                        :message="session('auth_popup_alert.msg')"
                                    />
                                @endif
                                @php
                                    session()->forget('auth_popup_alert');
                                @endphp

                            </form>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        // View Password
        document.addEventListener('click', function (e) {

            const toggle = e.target.closest('.js-toggle-password');
            if (!toggle) return;

            const wrapper = toggle.closest('.password-wrapper');
            const input = wrapper.querySelector('.js-password');
            const icon = toggle.querySelector('i');

            const isPassword = input.type === 'password';

            input.type = isPassword ? 'text' : 'password';

            icon.classList.toggle('fa-eye', !isPassword);
            icon.classList.toggle('fa-eye-slash', isPassword);
        });

        // Form work.
        $(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $("#login_form").validate({
                    rules: {
                        email: {
                            required: true,
                            email: true
                        },
                        password: {
                            required: true
                        }
                    },
                    messages: {
                        email: {
                            required: "Please enter an email address",
                            email: "Please enter a valid email address"
                        },
                        password: {
                            required: "Please enter a password"
                        }
                    },
                    errorPlacement: function(error, element) {
                        if (element.is(":radio")) {
                            error.appendTo(element.parents('.error-container'));
                        } else {
                            error.insertAfter(element);
                        }
                    }
                }),
                $("#submit_login_form").click(function(e) {
                    e.preventDefault();

                    // Clear old errors
                    $('.is-invalid').removeClass('is-invalid');
                    $('.invalid-feedback').text('').hide();
                    $('.alert-success').text('').hide();

                    grecaptcha.ready(function() {
                        grecaptcha.execute("{{ config('commonconstants.recaptcha.site_key') }}", {
                            action: 'login_form'
                        }).then(function(token) {
                            var a = $("#login_form");
                            if (1 == a.valid()) {
                                // alert(token);
                                if (token) {
                                    $("#recaptcha_v3").val(token);
                                    // alert($("#service").val());exit();
                                    var formData = new FormData();
                                    formData.append('recaptcha_v3', $("#recaptcha_v3").val());
                                    formData.append('email', $("#email").val());
                                    formData.append('password', $("#password").val());
                                    formData.append('remember', $('input[name="remember"]:checked')
                                    .val());
                                    $.ajax({
                                        url: "{{ module_url('web.login.submit') }}",
                                        type: "post",
                                        data: formData,
                                        contentType: false,
                                        processData: false,
                                        dataType: 'json',
                                        beforeSend: function() {
                                            $('#submit_login_form').prop(
                                                'disabled', true);
                                            $("#submit_login_form").text(
                                                "{{ __('enquiries.button.processing_txt') }}"
                                            );
                                        },
                                        success: function(data) {
                                            // console.log(data);
                                            // alert(data['msg']);
                                            $('#submit_login_form').prop(
                                                'disabled', false);
                                            $("#submit_login_form").text(
                                                "{{ __('auth.web.login.submit_btn_txt') }}"
                                            );
                                            $("#msg_id").html(data['msg']);
                                            // Reset form fields
                                            $('#login_form')[0].reset();
                                            // Optional: clear validation errors
                                            $('.invalid-feedback').text('');
                                            $('.is-invalid').removeClass('is-invalid');
                                            if (typeof data.url !== 'undefined' && data.url !== '') {
                                                // window.location.href = data['url'];
                                                if (window.parent) {
                                                    // Close Fancybox
                                                    if (window.parent.Fancybox) {
                                                        window.parent.Fancybox
                                                            .getInstance().close();
                                                    }
                                                    // Reload parent
                                                    window.parent.location.href =
                                                        data['url'];
                                                }
                                            }
                                        },
                                        error: function(xhr) {
                                            // console.log(xhr);
                                            if (xhr.status === 422) {
                                                $('.is-invalid').removeClass(
                                                    'is-invalid');
                                                $('.invalid-feedback').text('')
                                                    .hide();

                                                $.each(xhr.responseJSON.errors,
                                                    function(field, messages) {
                                                        if (field === 'type') {
                                                            $('[data-error="type"]')
                                                                .text(messages[
                                                                    0]).show();
                                                        } else {
                                                            let input = $(
                                                                '[name="' +
                                                                field + '"]'
                                                                );

                                                            input.addClass(
                                                                'is-invalid'
                                                                );

                                                            $('[data-error="' +
                                                                    field + '"]'
                                                                    ).text(
                                                                    messages[0])
                                                                .show();
                                                        }
                                                    });

                                                $('#submit_login_form').prop(
                                                    'disabled', false);
                                                $("#submit_login_form").text(
                                                    "{{ __('auth.web.login.submit_btn_txt') }}"
                                                );
                                            } else {
                                                $("#msg_id").html(
                                                    "<p>{{ __('enquiries.error.form_submit') }}</p>"
                                                );
                                            }
                                        }
                                    });
                                }
                            }
                        });
                    });
                });
        });
    </script>
@endpush