@extends('pwa.template.main')
@section('content')
  <div class="login-wrapper d-flex align-items-center justify-content-center text-center"
    style="background-color: #9E0E13; background: #9E0E13;">
    <!-- Background Shape-->
    <div class="background-shape"></div>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-10 col-lg-8">
          <img class="big-logo" src="{{ asset('pwa/img/icons/logo.png') }}" style="width: 30%;" />
          <!-- Register Form-->
          <div class="register-form mt-5">
            <form action="{{ route('login.action') }}" method="POST">
              @csrf
              <h1 class="mb-2 text-white">Aplikasi Gamping Online</h1>
              <p class="mb-5 text-white">
                Bersama Desa Digital Membangun Desa Gamping, Kabupaten Trenggalek
              </p>
              <div class="form-group text-start mb-4">
                <span>Username</span>
                <label for="Nama"><i class="fa-solid fa-user"></i></label>
                <input class="form-control" id="username" type="text" placeholder="Username Akun Anda" name="username"
                  required />
              </div>
              <div class="form-group text-start mb-4">
                <span>Password</span>
                <label for="password"><i class="fa-solid fa-key"></i></label>
                <input class="form-control" id="password" type="password" placeholder="Password" name="password"
                  required />
              </div>
              <button class="btn btn-warning btn-lg w-100" type="submit">
                Masuk
              </button>
            </form>
          </div>
          <!-- Login Meta-->
          <div class="login-meta-data mt-3">
            <p class="mb-0">
              Tidak Punya Akun ?<a class="mx-1" href="{{ route('register') }}">Daftar Sekarang</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('script')
  <script>
    $('.dropify').dropify({
      tpl: {
        message: '<div class="dropify-message"><span class="file-icon" /></div>',
      }
    });
  </script>
  @if (session('failed'))
    <script>
      Swal.fire({
        icon: 'error',
        title: 'Gagal Login',
        text: "{{ session('failed') }}",
      })
    </script>
  @endif
@endsection