{include file='header.tpl'}

<div class="row justify-content-center align-items-center min-vh-100">
    <div class="col-md-5">
        <div class="card shadow-lg">
            <div class="card-body p-5">
                <div class="text-center mb-4">
                    <h2 class="text-primary"><i class="bi bi-box-seam"></i> SCMS</h2>
                    <p class="text-muted">Supply Chain Management System</p>
                </div>
                
                <form id="loginForm">
                    <div class="mb-3">
                        <label for="email" class="form-label">Email Address</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                            <input type="email" class="form-control" id="email" name="email" 
                                   placeholder="your@email.com" required autofocus>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-lock"></i></span>
                            <input type="password" class="form-control" id="password" name="password" 
                                   placeholder="Enter password" required>
                        </div>
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg" id="loginBtn">
                            <span class="spinner-border spinner-border-sm d-none" id="loginSpinner"></span>
                            Login
                        </button>
                    </div>
                </form>
                
                <div class="alert alert-danger mt-3 d-none" id="loginError"></div>
            </div>
        </div>
        
        <p class="text-center text-muted mt-3">
            <small>Million Dollar Baby Co. &copy; 2026</small>
        </p>
    </div>
</div>

<script>
$(document).ready(function() {
    $('#loginForm').on('submit', function(e) {
        e.preventDefault();
        
        var email = $('#email').val();
        var password = $('#password').val();
        var btn = $('#loginBtn');
        var spinner = $('#loginSpinner');
        var error = $('#loginError');
        
        if (!email || !password) {
            error.text('Please enter email and password').removeClass('d-none');
            return;
        }
        
        btn.prop('disabled', true);
        spinner.removeClass('d-none');
        error.addClass('d-none');
        
        $.ajax({
            url: 'https://scmsai.mtgccc.com/login',
            method: 'POST',
            data: { email: email, password: password },
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    window.location.href = response.redirect;
                } else {
                    error.text(response.error || 'Login failed').removeClass('d-none');
                    btn.prop('disabled', false);
                    spinner.addClass('d-none');
                }
            },
            error: function() {
                error.text('Connection error. Please try again.').removeClass('d-none');
                btn.prop('disabled', false);
                spinner.addClass('d-none');
            }
        });
    });
});
</script>

{include file='footer.tpl'}