@extends('layouts.app', ["sidebar" => "no"]);

@section('content')

    <style>
        .bg-ukm {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url("{{ asset('ukmBG.jpeg') }}") no-repeat center center fixed;
            background-size: cover;
        }


        .form-control:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }

        .btn-primary.custom-btn {
    background: linear-gradient(45deg, #001F56, #339af0) !important;
    border: none !important;
    color: #fff !important;
    transition: background 0.4s ease, transform 0.3s ease;
}

.btn-primary.custom-btn:hover {
    background: linear-gradient(60deg, #0d6efd, #4dabf7) !important;

}
/* Larger checkbox while keeping Bootstrap look */
.form-check-input-lg {
  width: 1rem;         /* adjust to taste */
  height: 1rem;        /* adjust to taste */
  margin-top: 0;         /* reset default margin so it's vertically aligned */
  vertical-align: middle;
  accent-color: #4dabf7; /* change the check color (modern browsers) */
  -webkit-appearance: auto; /* ensure native rendering */
}

/* Ensure label text is vertically centered with the checkbox */
.form-check-label {
  line-height: 1.4rem; /* match the checkbox height so it's centered */
}

/* Optional: slightly bigger clickable area for better UX */
.form-check {
  display: flex;
  align-items: center;
  gap: .5rem; /* space between checkbox and label (alternative to ms-2) */
}
#showPassword,#showPasswordText{
    cursor: pointer;
}

    </style>

    <div class="page bg-ukm page-style1 d-flex align-items-center justify-content-center min-vh-100 bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-7 col-lg-5">
                   <div class="card rounded-3 overflow-hidden"
     style="background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);">
    <form id="loginForm" class="p-4">
        <h2 class="text-center mb-4 text-white">Login</h2>
        <div class="mb-3">
            <label for="email" class="form-label fw-semibold text-white">Email</label>
            <input type="text" class="form-control form-control-lg bg-transparent text-white border-light"
                   id="email" name="email" required>
        </div>
        <div class="mb-3">
            <label for="password" class="form-label fw-semibold text-white">Password</label>
            <input type="password" id="password" name="password"
                   class="form-control form-control-lg bg-transparent text-white border-light"
                   aria-describedby="passwordHelpBlock" required>
            <div id="passwordHelpBlock" class="form-text text-white"></div>
        </div>
<!-- Styled checkbox (Bootstrap 5) -->
<div class="form-check mb-3">
  <input class="form-check-input form-check-input-lg" type="checkbox" id="showPassword" aria-label="Show password">
  <label class="form-check-label text-white ms-2 fw-medium" for="showPassword" id="showPasswordText">
    Show Password
  </label>
</div>


        <div class="d-grid">
            <button type="submit" class="btn btn-primary custom-btn btn-lg" id='loginBtn'>Login</button>
        </div>
        <div id="responseMsg" class="mt-3 text-center text-white"></div>
    </form>
</div>

                </div>
            </div>
        </div>
    </div>







@endsection
@section("javascript")
    <script>
        $(document).ready(function () {
        // Show / Hide Password
$('#showPassword').on('change', function () {
    const passwordField = $('#password');
    if ($(this).is(':checked')) {
        passwordField.attr('type', 'text');
    } else {
        passwordField.attr('type', 'password');
    }
});



            $('#loginForm').on('submit', function (event) {
                event.preventDefault();
                $('#responseMsg').text('');

                // Get form data
                var email = $('#email').val();
                var password = $('#password').val();
                // // Validate email and password
                // if (email === '' || password === '') {
                //     $('#responseMsg').text('Please fill in all fields.').addClass('text-danger');
                //     return;
                // }

                // Simulate an AJAX request to the server
                $('#loginBtn').prop('disabled', true).text('Please wait');
                $.ajax({
                    url: `{{url('/login')}}`, // Adjust this URL to your login endpoint
                    type: 'POST',
                    data: {
                        email: email,
                        password: password,
                        _token: '{{ csrf_token() }}' // Include CSRF token for Laravel
                    },
                    success: function (response) {
                        // $('#loginBtn').prop('disabled', false).text('Login');
                        console.log(response);
                        if (response.status) {
                            //save the token in local storage
                            // localStorage.setItem('token', response.token);
                            // Redirect to the dashboard or another page
                            window.location.href = response.redirect; // Adjust this route to your desired page
                        }
                    },
                    error: function (xhr) {
                        $('#loginBtn').prop('disabled', false).text('Login');
                        console.log(xhr)
                        const Toast = Swal.mixin({
                            toast: true,
                            position: "top-end",
                            showConfirmButton: false,
                            timer: 5000,
                            timerProgressBar: true,
                            background: "#ff0000",
                            color: "#fff",
                            iconColor: "#fff",
                            didOpen: (toast) => {
                                toast.onmouseenter = Swal.stopTimer;
                                toast.onmouseleave = Swal.resumeTimer;
                            }
                        });
                        Toast.fire({
                            // title: "Email error",
                            text: xhr?.responseJSON?.message || "An error occurred during login.",
                            icon: "error"
                        });
                    }
                });
            });
        });
    </script>
@endsection