@extends('layouts.app')
@section('title', 'Register')
@section('content')

    <section class="bannr-section" style="background-image: url({{ asset('banner.jpg') }});">
        <div class="container">
            <div class="bannr-text">
                <h4 style="color:white">{{ $title }}</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">Home</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
                </ol>
            </div>
        </div>
    </section>
    <section class="gap position-relative">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 islamic-history">
                    <p align="center" class="mb-4">Formulir Pendaftaran Jemaat Baru</p>
                    @if (session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger" role="alert">
                            {!! implode('', $errors->all('<li>:message</li>')) !!}
                        </div>
                    @endif
                    <form action="{{ route('register.store') }}" id="formAuthentication" class="mb-3" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label for="name" class="form-label">Nama</label>
                            <input type="text" class="form-control" id="name" name="name"
                                placeholder="Masukkan nama Lengkap" autofocus required />
                        </div>
                        <div class="mb-3">
                            <label for="username" class="form-label">Username</label>
                            <input type="text" class="form-control" id="username" name="username"
                                placeholder="Masukkan nama Lengkap" autofocus required />
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email (Aktif)</label>
                            <input type="text" class="form-control" id="email" name="email"
                                placeholder="Masukkan email" required />
                        </div>
                        <div class="mb-3">
                            <label for="tempat_lahir" class="form-label">Tempat Lahir</label>
                            <input type="text" class="form-control" id="tempat_lahir" name="tempat_lahir"
                                placeholder="Masukkan Tempat Lahir" autofocus required />
                        </div>
                        <div class="mb-3">
                            <label for="tanggal_lahir" class="form-label">Tanggal Lahir</label>
                            <input type="date" class="form-control" id="tanggal_lahir" name="tanggal_lahir"
                                placeholder=" " autofocus required />
                        </div>
                        <div class="form-group mb-3">
                            <label>Status*</label>
                            <select name="status" class="form-control" required>
                                <option value="">Pilih</option>
                                <option value="Belum Menikah">Belum Menikah</option>
                                <option value="Menikah">Menikah</option>
                                <option value="Duda">Duda</option>
                                <option value="Janda">Janda</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="alamat" class="form-label">Alamat</label>
                            <input type="text" class="form-control" id="alamat" name="alamat"
                                placeholder="Masukkan Alamat" autofocus required />
                        </div>
                        <div class="mb-3">
                            <label for="no_hp" class="form-label">No HP</label>
                            <input type="number" class="form-control" id="no_hp" name="no_hp"
                                placeholder="Masukkan no_hp" autofocus required />
                        </div>
                        <div class="mb-3">
                            <label for="pekerjaan" class="form-label">Pekerjaan</label>
                            <input type="text" class="form-control" id="pekerjaan" name="pekerjaan"
                                placeholder="Masukkan pekerjaan" autofocus required />
                        </div>

                        <div class="mb-3 form-password-toggle">
                            <label class="form-label" for="password">Password</label>
                            <div class="input-group input-group-merge">
                                <input type="password" id="password" class="form-control" name="password"
                                    placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                    aria-describedby="password" required />
                                <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
                            </div>
                        </div>

                        <label class="form-label" for="password">Konfirmasi Password</label>
                        <div class="input-group mb-3">
                            <input type="password" name="password_confirmation" class="form-control"
                                placeholder="Konfirmasi Password" required>
                            <div class="input-group-text">
                                <span class="fas fa-lock"></span>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="terms-conditions" name="terms"
                                    required />
                                <label class="form-check-label" for="terms-conditions">
                                    Data yang saya masukkan telah benar
                                    <a href="javascript:void(0);"> </a>
                                </label>
                            </div>
                        </div>
                        <button class="btn btn-danger d-grid w-100 mb-4">Daftar</button>
                    </form>
                    <p class="text-center">
                        <span>Sudah punya akun?</span>
                        <a href="{{ url('/admin/login') }}">
                            <span>Login Sekarang</span>
                        </a>
                    </p>

                </div>
                <a class="btn btn-danger btn-block" href="{{ url('/') }}">Kembali</a>
            </div>
        </div>
    </section>
@endsection