@extends('partials.main_auth')

@section('custom_css')
<style>
    .container-fluid {
        padding: 0 10px !important;
    }

    @media (max-width: 575.98px) {
        .hide-xs {
            display: none !important;
        }
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 hide-xs bg-secondary vh-100">
            <div class="d-flex align-items-center justify-content-center h-75 flex-column">
                <img src="{{ asset('metronic/assets/media/illustrations/sigma-1/10.png') }}" alt="" srcset="" class="h-75">
                <div class="mt-5">
                    <span class="fs-1 fw-bold" id="title_selamat_datang"></span>
                </div>
            </div>
        </div>
        <div class="col-md-4 py-10 px-5">
            <div class="d-flex align-items-center justify-content-center h-100 flex-column">
                <center>
                    <img src="{{ asset('assets/img/logo-fullname.png') }}" alt="" srcset="" class="w-50">
                    <h1 class="mt-5">Login Admin Pra Akreditasi</h1>
                </center>
                <form id="form_login" class="form mt-10 w-75" action="/login" autocomplete="off" method="POST">
                @csrf
                    <div class="fv-row mb-7">
                        <label class="required fw-semibold fs-6 mb-2">Username</label>
                        <input type="text" name="namauser" class="form-control mb-3 mb-lg-0" placeholder="" value="" />
                    </div>
                    <div class="fv-row mb-7">
                        <label class="required fw-semibold fs-6 mb-2">Password</label>
                        <div class="input-group mb-3">
                            <input type="password" name="password" id="password" class="form-control" placeholder="Password">
                            <button class="btn btn-primary" type="button" id="togglePassword">
                                <i class="fa fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    <button id="form_permintaan_submit" type="submit" class="btn btn-primary w-100 mt-10">
                        <span class="indicator-label">
                            Login
                        </span>
                        <span class="indicator-progress">
                            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                        </span>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom_js')
<script>
    @if (session('error'))
        toastr.error("{{ session('error') }}");
    @endif

    $(document).ready(function() {
        $('#togglePassword').on('click', function () {
            let input = $('#password');
            let icon = $(this).find('i');

            if (input.attr('type') === 'password') {
                input.attr('type', 'text');
                icon.removeClass('fa-eye').addClass('fa-eye-slash');
            } else {
                input.attr('type', 'password');
                icon.removeClass('fa-eye-slash').addClass('fa-eye');
            }
        });
    });
    var typed = new Typed("#title_selamat_datang", {
        strings: ["Selamat Datang", "Di Halaman Admin", "Permintaan IT", "Silahkan Masukkan Username Dan Password", "Jika Belum Memiliki Akun", "Silahkan Hubungi Tim IT"],
        typeSpeed: 30,
    });

    // Define form element
    const form = document.getElementById('form_login');
    const token = $('meta[name="csrf-token"]').attr('content');

    // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
    var validator = FormValidation.formValidation(
        form,
        {
            fields: {
                'username': {
                    validators: {
                        notEmpty: {
                            message: 'Username masih kosong'
                        }
                    }
                },
                'password': {
                    validators: {
                        notEmpty: {
                            message: 'Password masih kosong'
                        }
                    }
                },
            },

            plugins: {
                trigger: new FormValidation.plugins.Trigger(),
                bootstrap: new FormValidation.plugins.Bootstrap5({
                    rowSelector: '.fv-row',
                    eleInvalidClass: '',
                    eleValidClass: ''
                })
            }
        }
    );

    // Submit button handler
    const submitButton = document.getElementById('form_permintaan_submit');
    submitButton.addEventListener('click', function (e) {
        // Prevent default button action
        e.preventDefault();

        // Validate form before submit
        if (validator) {
            validator.validate().then(function (status) {
                if (status == 'Valid') {
                    submitButton.setAttribute('data-kt-indicator', 'on');
                    submitButton.disabled = true;
                    setTimeout(function () {
                        submitButton.removeAttribute('data-kt-indicator');
                        submitButton.disabled = false;
                    }, 2000);

                    if (!form.querySelector('input[name="_token"]')) {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = '_token';
                        input.value = token;
                        form.appendChild(input);
                    }
                    form.submit();
                }
            });
        }
    });
</script>
@endsection