@extends('layouts.layout')

@section('title', 'Masuk')


@section('content')
    <h1 style='color:white;text-align: center;margin-block: 60px; font-size: 25px; font-weight: 700;'>Selamat Datang di
        Layanan Surat Desa</h1>
    <div class="row justify-content-center pb-5">
        <div class="col-lg-5 col-md-7">
            <div class="card shadow border-0"
                style="border-radius: 20px;background: linear-gradient(135deg, #32263E 0%, #231E22 100%);">
                <div class="card-body ">
                    <p class="text-center" style="color: white;font-weight: 500;font-size: 14px">Silakan masuk menggunakan
                        akun Klipaa</p>
                    <form role="form" action="{{ route('masuk') }}" method="POST">
                        @csrf
                        @if (isset($error))
                            <div class="alert alert-danger">{{ $error }}</div>
                        @endif
                        <div class="form-group mb-3">
                            <div class="input-group input-group-alternative">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24">
                                            <path fill="none" stroke="currentColor" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="1.5"
                                                d="M5 20v-1a7 7 0 0 1 7-7v0a7 7 0 0 1 7 7v1m-7-8a4 4 0 1 0 0-8a4 4 0 0 0 0 8" />
                                        </svg>

                                    </span>
                                </div>
                                <input class="form-control @error('username') is-invalid @enderror" name="username"
                                    value="{{ old('username') }}" required autocomplete="username" autofocus
                                    placeholder="Masukkan username" style="color: black" type="text">
                                @error('username')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group input-group-alternative">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24">
                                            <path fill="none" stroke="currentColor" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="1.5"
                                                d="M16 12h1.4a.6.6 0 0 1 .6.6v6.8a.6.6 0 0 1-.6.6H6.6a.6.6 0 0 1-.6-.6v-6.8a.6.6 0 0 1 .6-.6H8m8 0V8c0-1.333-.8-4-4-4S8 6.667 8 8v4m8 0H8" />
                                        </svg>
                                    </span>
                                </div>
                                <input class="form-control @error('password') is-invalid @enderror" style="color: black"
                                    name="password" required autocomplete="current-password" placeholder="Masukkan password"
                                    type="password" value="{{ old('password') }}">

                            </div>
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn"
                                style="width: 100%;
                        color: #404040; background-color: #FFFFFF;
                    ">Masuk</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $(document).on("submit", "form", function() {
                $(this).find("button:submit").attr('disabled', 'disabled');
                $(this).find("button:submit").html(
                    `<img height="20px" src="{{ url('/storage/loading.gif') }}" alt=""> Loading ...`);
            });
        });
    </script>
@endpush