@extends('layouts.template_auth')

@section('title', 'Login | Survey Mutu RSAB Harapan Kita')
@section('custom_css')
    <style>
        @media (min-width: 768px) {
            .w-md-40 {
                width: 40% !important;
            }
        }
    </style>
@endsection

@section('content')
<div class="container-fluid bg-primary vh-100 vw-100 d-flex align-items-center justify-content-center">
    <div class="card w-100 w-md-40">
        <div class="card-body">
            <div class="text-center">
                <img src="{{ asset('assets/img/logo-fullname.png') }}" class="card-img-top w-100 w-md-40" alt="...">
            </div>
        </div>
        <div class="card-body">
            <h5 class="card-title text-center fw-bold">Login Survey Mutu</h5>
            <form id="form">
                <div class="mb-3">
                    <label for="username">Username</label>
                    <input type="text" class="form-control" id="user_name" name="user_name" aria-describedby="user_name" />
                    <span id="user_name_error" class="form-label text-danger"></span>
                </div>
                <div class="form-password-toggle">
                    <label class="" for="password">Password</label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="password" name="password" aria-describedby="password2" />
                        <span id="password2" class="input-group-text cursor-pointer"><i
                            class="icon-base ti tabler-eye-off"></i></span>
                    </div>
                    <span id="password_error" class="form-label text-danger"></span>
                </div>
            </form>
        </div>
        <div class="card-body">
            <button class="btn btn-primary" id="button_login">Login</button>
        </div>
    </div>
@endsection

@section('custom_js')
<script>
    $(document).ready(function(){
        $('#button_login').on('click', function(){
            login();
        })
    })

    function login() {
        const formData = new FormData($('#form')[0]);
        $('#button_login').attr('disabled', 'true');

        const username = $('#user_name').val();
        const password = $('#password').val();
        if(username == 'admin' && password == 'admin'){
            window.location.href = '{{ url("/admin") }}';
        }

    }
</script>
@endsection