@extends('layouts.default')

@section('title', 'Login')

@push('styles')
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert2/sweetalert2.min.css') }}">
@endpush

@push('scripts')
    <script src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <script>
        $(function() {
            let status = 'idle'

            $('#formLogin').on('submit', function(e) {
                e.preventDefault();

                const $this = $(this)
                const $button = $this.find('button[type="submit"]');

                if (status === 'pending') {
                    return;
                }

                status = 'pending'

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

                if (!username || !password) {
                    status = 'error'
                    Swal.fire({
                        icon: 'warning',
                        title: 'Oops!',
                        text: 'Username dan password wajib diisi',
                    });
                    return;
                }

                $button.prop('disabled', true);

                this.submit();
            });
        });
    </script>
@endpush


@section('content')
    <div class="row no-gutters min-vh-100">
        <div class="col-12 col-lg-6">
            <div class="d-flex flex-column justify-content-center h-100 mx-auto" style="max-width: 450px;">
                <div class="card w-100 border-0 shadow-none mx-auto rounded-0">
                    <div class="px-4 pt-4">
                        <div class="h1 fw-medium mb-2">Admin Panel</div>
                        <div class="text-muted">
                            Sign in to your account
                        </div>
                        <div class="border-bottom mt-4"></div>
                    </div>
                    <div class="card-body p-4">
                        <form id="formLogin" method="post" action="{{ route('authenticate') }}">
                            @csrf

                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    {{ $errors->first() }}
                                </div>
                            @endif

                            <div class="mb-3">
                                <label for="username" class="small font-weight-medium">Username</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-white">
                                            <i class="far fa-user"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="username" id="username" class="form-control"
                                        placeholder="you_example" value="{{ old('username') }}">
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="password" class="small font-weight-medium">Password</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-white">
                                            <i class="fas fa-lock"></i>
                                        </span>
                                    </div>
                                    <input type="password" name="password" id="password" class="form-control"
                                        placeholder="••••••••">
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="custom-control custom-checkbox mr-sm-2">
                                    <input type="checkbox" class="custom-control-input" id="remember" name="remember"
                                        value="1" {{ old('remember') ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="remember">Ingat saya</label>
                                </div>
                                <a href="#" class="text-decoration-none">
                                    Forgot password?
                                </a>
                            </div>

                            <button type="submit" class="btn btn-primary btn-block">
                                Sign In
                            </button>
                        </form>
                    </div>
                    <div class="px-4 pb-4 text-center text-muted">
                        &copy;{{ date('Y') }} {{ env('COMPANY_NAME') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 d-none d-lg-block">
            <div class="d-flex position-relative flex-column justify-content-center h-100"
                style="
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            text-shadow: 0 2px 6px rgba(0,0,0,0.3);
        ">
                <div class="p-4 text-center">
                    <img src="{{ asset('images/logo.png') }}" alt="Logo" style="width: 96px;">
                    <div class="mt-3">{{ config('app.name') }}</div>
                    <div class="h2 font-weight-bold">{{ env('COMPANY_NAME') }}</div>
                    <p class="mt-4">
                        Solusi digital untuk mengelola keuangan secara efisien, cepat, dan
                        modern.
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection