@extends('layouts.website_layout')

@section('content')

<main>
    <!-- Hero Section -->
    <div class="position-relative page-header text-white overflow-hidden">
        <div class="container position-relative">
            <div>
                @if($parentPageTitle)
                <span class="badge bg-white text-primary mb-2">{{ $parentPageTitle }}</span>
                @endif
                <h3 class="display-6 fw-bold mb-1">
                    {{ $pageTitle }}
                </h3>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <main class="auth-main">
        <div class="container">
            <div class="auth-container">
                <div class="auth-card">
                    <div class="auth-header">
                        <h1 class="auth-title">Welcome Back</h1>
                        <p class="auth-subtitle">Sign in to your NISD account</p>
                    </div>
                    <!-- Login Form -->
                    <div class="card border-0 rounded-3 overflow-hidden" id="loginCard">
                        <div class="card-body px-0">
                            <form action="" id="loginForm" autocomplete="off">
                                @csrf

                                <div class="form-group mb-3">
                                    <label class="form-label">{{ __('title.email_or_mobile') }}</label>
                                    <input type="text" name="login_field" class="form-control" placeholder="{{ __('title.email_or_mobile_placeholder') }}">
                                </div>
                                <div class="form-group mb-3">
                                    <label class="form-label">{{ __('title.password') }}</label>
                                    <input type="password" name="password" class="form-control" placeholder="{{ __('title.password_placeholder') }}">
                                </div>
                                <div class="form-group mb-3">
                                    <div>
                                        <div class="captcha mb-2" id="captcha">
                                            <span>{!! captcha_img() !!}</span>
                                            <button type="button" class="btn btn-outline btn-refresh"><i class="fa fa-sync"></i></button>
                                        </div>
                                    </div>
                                    <label class="form-label">{{ __('title.captcha') }}</label>
                                    <input type="text" class="form-control" name="captcha" placeholder="{{ __('title.captcha_placeholder') }}">
                                </div>
                                <div class="mb-3">
                                    <a href="{{ route('employee-forget-password.index') }}" class="text-primary text-decoration-none">
                                        <i class="fa fa-lock"></i> {{ __('title.forget_password') }}
                                    </a>
                                </div>
                                <div class="d-grid mt-4">
                                    <button type="submit" class="btn btn-primary py-3 fw-semibold">
                                        <i class="fa fa-paper-plane"></i> {{ __('title.login_button') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Sign Up Link -->
                    <div class="auth-footer">
                        <p>Don't have an account? <a href="{{ route('public.register') }}" class="signup-link">Click here</a></p>
                        <p>Need help? <a href="{{ route('contact') }}" class="help-link">Contact Support</a></p>
                    </div>
                </div>

                <!-- Login Benefits -->
                <div class="login-benefits">
                    <h3 class="benefits-title">Why Login?</h3>
                    <div class="benefits-list">
                        <div class="benefit-item">
                            <div class="benefit-icon">
                                <i class="fas fa-graduation-cap"></i>
                            </div>
                            <div class="benefit-content">
                                <h4 class="benefit-title">Access Training Materials</h4>
                                <p class="text-dark mb-0">Get access to exclusive training resources and materials</p>
                            </div>
                        </div>

                        <div class="benefit-item">
                            <div class="benefit-icon">
                                <i class="fas fa-certificate"></i>
                            </div>
                            <div class="benefit-content">
                                <h4 class="benefit-title">Track Progress</h4>
                                <p class="text-dark mb-0">Monitor your learning progress and achievements</p>
                            </div>
                        </div>

                        <div class="benefit-item">
                            <div class="benefit-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="benefit-content">
                                <h4 class="benefit-title">Connect with Community</h4>
                                <p class="text-dark mb-0">Join a network of healthcare professionals</p>
                            </div>
                        </div>

                        <div class="benefit-item">
                            <div class="benefit-icon">
                                <i class="fas fa-briefcase"></i>
                            </div>
                            <div class="benefit-content">
                                <h4 class="benefit-title">Job Opportunities</h4>
                                <p class="text-dark mb-0">Access exclusive job postings and career opportunities</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</main>

@endsection

@section('pages-scripts')
<script>
    $(document).ready(function() {
        // Validate the login form
        $("#loginForm").validate({
            rules: {
                login_field: {
                    required: true,
                    minlength: 3
                },
                password: {
                    required: true,
                },
                captcha: {
                    required: true,
                }
            },
            messages: {
                login_field: {
                    required: "Please enter your email address or mobile number",
                    minlength: "Please enter at least 3 characters"
                },
                password: {
                    required: "Please enter your password"
                },
                captcha: {
                    required: "Please enter the captcha code"
                }
            },
            submitHandler: function(form, event) {
                event.preventDefault();
                performLogin();
            }
        });

        // Refresh captcha on button click
        $('.btn-refresh').click(function() {
            refreshCaptcha();
        });

        // Dynamic placeholder for login field
        $('input[name="login_field"]').on('input', function() {
            var value = $(this).val();
            var isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
            var isMobile = /^[0-9]+$/.test(value);

            if (isEmail) {
                $(this).attr('placeholder', 'Enter Email Address');
            } else if (isMobile && value.length > 0) {
                $(this).attr('placeholder', 'Enter Mobile Number');
            } else {
                $(this).attr('placeholder', 'Enter Email or Mobile Number');
            }
        });
    });

    var encryptionKey = "{{ session()->get('encryption_key') }}";

    function performLogin() {
        const formData = new FormData(document.getElementById('loginForm'));
        const password = encryptPassword(formData.get('password'), encryptionKey);
        formData.set('password', password);

        $.ajax({
            url: "{{ route('public.login.check') }}",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            beforeSend: function() {
                $('.site-loader').show();
            },
            success: function(response) {
                $('.site-loader').hide();

                let key = response.key;
                encryptionKey = key;

                if (response.status === "success") {
                    Swal.fire({
                        icon: "success",
                        title: "Login Successful",
                        text: response.message,
                        timer: 2000
                    }).then(() => {
                        window.location.href = response.redirect;
                    });
                } else if (response.status === "concurrent_login") {
                    handleConcurrentLogin(response);
                } else {
                    refreshCaptcha();
                    Swal.fire({
                        icon: "error",
                        title: "Login Failed",
                        text: response.message
                    });
                }
            },
            error: function(xhr) {
                $('.site-loader').hide();
                refreshCaptcha();
                let errorMessage = "An error occurred. Please try again.";
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: errorMessage
                });

                let key = xhr.responseJSON.key;
                encryptionKey = key;
            }
        });
    }

    function handleConcurrentLogin(response) {
        let sessionInfo = '';
        if (response.current_session) {
            sessionInfo = `<br><small><strong>Current Session Details:</strong><br>
                      IP: ${response.current_session.ip || 'Unknown'}<br>
                      Login Time: ${response.current_session.login_time || 'Unknown'}</small>`;
        }

        Swal.fire({
            icon: 'warning',
            title: 'Already Logged In',
            html: `${response.message}${sessionInfo}`,
            showCancelButton: true,
            confirmButtonText: 'Yes, Logout from Other Device',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = "{{ route('logout.other-devices', ':userId') }}".replace(':userId', response.user_id);
            } else {
                refreshCaptcha();
            }
        });
    }
</script>
@endsection