@extends('admin.frest_admin.page_layout')

@section('title')
    Login - @parent
@endsection

@push('style')
    {{-- vendor css --}}
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/vendors/css/vendors.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/vendors/css/tables/datatable/datatables.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/vendors/css/extensions/toastr.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/vendors/css/forms/select/select2.min.css') }}">

    {{-- theme css --}}
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/css/bootstrap.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/css/bootstrap-extended.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/css/colors.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/css/components.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/css/themes/dark-layout.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/css/themes/semi-dark-layout.css') }}" />

    {{-- page css --}}
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/css/core/menu/menu-types/horizontal-menu.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/css/pages/authentication.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/app-assets/css/plugins/extensions/toastr.css') }}"> <!-- harus di page css atau setelah bootstrap -->

    {{-- custom css --}}
    <link rel="stylesheet" type="text/css" href="{{ url('libraries/frest-admin_admin/assets/css/style.css') }}" />
@endpush

@push('style-after-global')
    @include('admin.frest_admin.datatables.style')
    <style>

        .btn-pa-green {
            border-color: #056e4f !important;
            background-color: #056e4f !important;
            color: #fff;
        }

    </style>
@endpush

@section('body-attribute')
    class="horizontal-layout horizontal-menu navbar-sticky 1-column footer-static bg-full-screen-image blank-page blank-page"
    data-open="hover"
    data-menu="horizontal-menu"
    data-col="1-column"
@endsection

@section('body')
    <div class="app-content content">
        <div class="content-overlay"></div>

        <div class="content-wrapper" style="margin-top: 0rem !important;">
            <div class="content-header row"></div>

            <div class="content-body">
                <section id="auth-login" class="row flexbox-container">
                    <div class="col-xl-8 col-11">
                        <div class="card bg-authentication mb-0">
                            <div class="row m-0">
                                <div class="col-md-6 col-12 px-0">
                                    <div class="card disable-rounded-right mb-0 p-2 h-100 d-flex justify-content-center">
                                        <div class="card-header pb-1">
                                            <div class="card-title">
                                                <h4 class="text-center mb-2">Login Administrator</h4>
                                            </div>
                                        </div>

                                        <div class="card-content">
                                            <div class="card-body">
                                                <form id="login-form" autocomplete="off">
                                                    <div class="form-group mb-50">
                                                        <label class="text-bold-600 form-label">Username</label>

                                                        <input type="text" class="name-field form-control form-control-sm" name="name" placeholder="Enter username">

                                                        <div class="name-validation invalid-feedback" style="display: none;">
                                                            <i class="bx bx-radio-circle"></i>
                                                            <span></span>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="text-bold-600 form-label">Password</label>

                                                        <input type="password" class="password-field form-control form-control-sm" name="password" placeholder="Enter password">

                                                        <div class="password-validation invalid-feedback" style="display: none;">
                                                            <i class="bx bx-radio-circle"></i>
                                                            <span></span>
                                                        </div>
                                                    </div>

                                                    <button id="login-form-submit" form="login-form" type="submit" class="btn btn-sm glow w-100 shadow btn-pa-green position-relative">
                                                        <span class="spinner-border spinner-border-sm btn-spinner" role="status" aria-hidden="true" style="display: none;"></span>
                                                        Login<i id="icon-arrow" class="bx bx-right-arrow-alt" style="top: 6px;"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 d-md-block d-none text-center align-self-center p-3">
                                    <div class="card-content">
                                        <img class="img-fluid" src="{{ url('libraries/default/assets/images/body/login.png') }}" alt="branding logo">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
@endsection

@push('script')
    {{-- Vendor JS --}}
    <script src="{{ url('libraries/frest-admin_admin/app-assets/vendors/js/vendors.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/fonts/LivIconsEvo/js/LivIconsEvo.tools.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/fonts/LivIconsEvo/js/LivIconsEvo.defaults.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/fonts/LivIconsEvo/js/LivIconsEvo.min.js') }}"></script>

    {{-- Page Vendor JS --}}
    <script src="{{ url('libraries/frest-admin_admin/app-assets/vendors/js/ui/jquery.sticky.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/vendors/js/tables/datatable/datatables.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/vendors/js/tables/datatable/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/vendors/js/tables/datatable/dataTables.buttons.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/vendors/js/tables/datatable/buttons.html5.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/vendors/js/tables/datatable/buttons.print.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/vendors/js/tables/datatable/buttons.bootstrap.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/vendors/js/tables/datatable/pdfmake.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/vendors/js/tables/datatable/vfs_fonts.js') }}"></script>
    <script src="{{ url('libraries/axios/axios.min.js') }}"></script>
    <script src="{{ url('libraries/bootbox/bootbox.min.js') }}"></script>
    <script src="{{ url('libraries/numeral/numeral.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/vendors/js/extensions/toastr.min.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/vendors/js/forms/select/select2.full.min.js') }}"></script>

    {{-- Theme JS --}}
    <script src="{{ url('libraries/frest-admin_admin/app-assets/js/scripts/configs/horizontal-menu.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/js/core/app-menu.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/js/core/app.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/js/scripts/components.js') }}"></script>
    <script src="{{ url('libraries/frest-admin_admin/app-assets/js/scripts/footer.js') }}"></script>

    {{-- Page JS --}}
    {{-- type page js here --}}
@endpush

@push('script-after-global')
    @include('admin.local_storage.script')
    @include('admin.frest_admin.datatables.script')

    <script>
     $('#login-form').submit(function(event) {
        event.preventDefault();

        const spin = spinButton({ id: '#login-form-submit' });
        spin.start();

        const name = $(this).find('input[name=name]').val();
        const password = $(this).find('input[name=password]').val();

        axios({
            method: 'post',
            url: '{{ url('api/admin/get-token') }}',
            data: { name, password },
        }).then((res) => {
            const { token } = res.data;

            setItems('token', token);

            axios({
                method: 'post',
                url: '{{ url('admin/set-session') }}',
                data: { _token: '{{ csrf_token() }}', name, password },
            }).then((res) => {
                clickLink('{{ url('admin/dashboard') }}');
            }).catch((err) => {
                handleErrorResponse(err.response, '#login-form');
                spin.stop();
            });
        }).catch((err) => {
            handleErrorResponse(err.response, '#login-form');
            spin.stop();
        });
    });
    </script>
@endpush