@extends('doctorpanel.layout.auth-index')
@section('title', 'Sign In | Waiting Room')
@section('custom-styles')
    <style>
        .signup_section .top_part {
            padding-bottom: 110px;
        }
    </style>
@endsection
@section('auth-content')

    <section class="signup_section">

        <div class="top_part">
            <a href="{{ route('user-signup') }}" class="back_btn"><i class="icofont-arrow-left"></i> {{ __('translations.Back') }}</a>
        </div>

        <!-- Comment Form Section -->
        <div class="signup_form">
            <div class="section_title">
                <h2> {{ __('translations.Welcome to') }}<br> <span>{{ __('translations.Waiting Room') }}</span> </h2>
                <p>
                    {{ __('translations.Login to your account') }}
                </p>
            </div>
            <form id="doctorLogin">
                @csrf
                <div class="form-group">
                    <input id="email" type="email" name="email" class="form-control" placeholder="{{ __('translations.Email') }}" required>
                    <div class="error-email"></div>
                </div>
                <div class="form-group">
                    <input id="password" type="password" name="password" class="form-control" placeholder="{{ __('translations.Password') }}">
                    <div class="error-password"></div>
                </div>
                <div class="form-group text-center">
                    <button class="btn puprple_btn" type="submit" id="submitBtn">{{ __('translations.SIGN IN') }}</button>
                </div>
            </form>
        </div>
    </section>

@endsection
@section('custom-script')
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
    <script src="{{ asset('assets/vendor/global/global.min.js') }}"></script>

    <script>
        $("#doctorLogin").on('submit', function(e) {
            e.preventDefault();
            let formData = new FormData($("#doctorLogin")[0]);
            const btn = $('#submitBtn');
            $.ajax({
                type: "POST",
                url: "{{ route('doctorpanel.login') }}", // Login route from your routes
                dataType: 'json',
                contentType: false,
                processData: false,
                cache: false,
                data: formData,
                beforeSend: function() {
                    $('.error-message').html('');
                    btn.prop('disabled', true).html('Processing...');
                },
                success: function(res) {
                    if (res.success) {
                        btn.prop('disabled', false).html('Login');
                        notyf.success(res.message);
                        console.log(1);
                        setTimeout(function() {
                            window.location.href =
                                "{{ route('doctorpanel.dashboard') }}"; // Redirect to dashboard
                        }, 2000);
                    } else {
                        btn.prop('disabled', false).html('Login');
                        notyf.error(res.message);
                    }
                },
                error: function(e) {
                    btn.prop('disabled', false).html('Login');
                    if (e.responseJSON?.errors['email']) {
                        $('.error-email').html('<small class="text-danger">' + e.responseJSON.errors[
                            'email'][0] + '</small>');
                    }
                    if (e.responseJSON?.errors['password']) {
                        $('.error-password').html('<small class="text-danger">' + e.responseJSON.errors[
                            'password'][0] + '</small>');
                    }
                }
            });
        });

        $(document).ready(function() {
            $("#toggleIcon").click(function() {
                let input = $("#password");
                let icon = $("#toggleIcon i");

                if (input.attr("type") === "password") {
                    input.attr("type", "text");
                    icon.removeClass("bi-eye").addClass("bi-eye-slash");
                } else {
                    input.attr("type", "password");
                    icon.removeClass("bi-eye-slash").addClass("bi-eye");
                }
            });
        });
    </script>
@endsection