@extends('layouts.login')

@section('content')
    <style>
        .input-group {
            margin-top: 8px;
            margin-bottom: 5px;
        }

        .input-group input.form-control {
            padding: .7rem 3rem;
        }

        .input-group select.form-control {
            width: 100%;
            font-size: 1rem;
            background-color: var(--gray);
            padding: .7rem 3rem;
            border-radius: 0.5rem;
            border: 0.125rem solid var(--white);
            outline: none;
        }

        .error-message {
            text-align: left;
            color: #dc3545;
            font-size: 0.8rem;
            margin-top: 0.25rem;
            display: none;
        }
    </style>
    <div id="container" class="container sign-in">
        <!-- FORM SECTION -->
        <div class="row">
            <!-- SIGN UP -->
            <div class="col align-items-center flex-col sign-up" id="signup-container">
                <img src="/assets/login/images/logo.png" alt="logo" class="logo">
                <form id="registerForm" method="POST" action="{{ route('register') }}" novalidate>
                    @csrf
                    <div class="form-wrapper align-items-center">
                        <div class="form sign-up">
                            <div class="input-group">
                                <i class='bx bxs-user'></i>
                                {{-- Tambahkan old('name') di sini --}}
                                <input type="text" class="form-control" id="name" name="name"
                                    placeholder="Nama Lengkap" required maxlength="255" value="{{ old('name') }}">
                            </div>
                            <span class="error-message" id="name-error"></span>
                            @error('name')
                                <span class="error-message" style="display: block;">{{ $message }}</span>
                            @enderror

                            <div class="input-group">
                                <i class='bx bx-key'></i>
                                {{-- Tambahkan old('nomor_induk') di sini --}}
                                <input type="text" class="form-control" id="nomor_induk" name="nomor_induk"
                                    placeholder="NIP / NIK" required value="{{ old('nomor_induk') }}">
                            </div>
                            <span class="error-message" id="nomor_induk-error"></span>
                            @error('nomor_induk')
                                <span class="error-message" style="display: block;">{{ $message }}</span>
                            @enderror

                            <div class="input-group">
                                <i class='bx bxs-bank'></i>
                                <select class="form-control" id="perangkat_daerah_id" name="perangkat_daerah_id" required>
                                    {{-- Gunakan old() untuk memilih opsi yang benar --}}
                                    <option value="" disabled
                                        {{ old('perangkat_daerah_id') == '' ? 'selected' : '' }}>
                                        Pilih Perangkat Daerah</option>
                                    @foreach ($perangkatDaerah as $pd)
                                        <option value="{{ $pd->id }}"
                                            {{ old('perangkat_daerah_id') == $pd->id ? 'selected' : '' }}>
                                            {{ $pd->nama_pd }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <span class="error-message" id="perangkat_daerah_id-error"></span>
                            @error('perangkat_daerah_id')
                                <span class="error-message" style="display: block;">{{ $message }}</span>
                            @enderror

                            <div class="input-group">
                                <i class='bx bxs-lock-alt'></i>
                                {{-- Password tidak perlu old() untuk alasan keamanan --}}
                                <input type="password" class="form-control" id="password" name="password"
                                    placeholder="Password" required minlength="8">
                            </div>
                            <span class="error-message" id="password-error"></span>
                            @error('password')
                                <span class="error-message" style="display: block;">{{ $message }}</span>
                            @enderror

                            <div class="input-group">
                                <i class='bx bxs-lock-alt'></i>
                                {{-- Konfirmasi password juga tidak perlu old() --}}
                                <input type="password" class="form-control" id="password_confirmation"
                                    name="password_confirmation" placeholder="Konfirmasi Password" required>
                            </div>
                            <span class="error-message" id="password_confirmation-error"></span>
                            @error('password_confirmation')
                                <span class="error-message" style="display: block;">{{ $message }}</span>
                            @enderror

                            <button type="submit">
                                Daftar
                            </button>
                            <p>
                                <span>
                                    Sudah punya Akun?
                                </span>
                                <a id="show-login" class="pointer" href="{{ route('login') }}">→ Masuk ke Akun</a>
                                {{-- <b onclick="toggle()" class="pointer">
                                -> Masuk ke Akun
                            </b> --}}
                            </p>
                        </div>
                    </div>
                </form>
            </div>
            <!-- END SIGN UP -->
            <!-- SIGN IN -->
            <div class="col align-items-center flex-col sign-in" id="signin-container" style="bottom: 20px;">
                <img src="/assets/login/images/logo.png" alt="logo" class="logo">
                <form method="POST" action="{{ route('login') }}">
                    @csrf
                    <div class="form-wrapper align-items-center">
                        <div class="form sign-in">
                            <div class="input-group">
                                <i class='bx bxs-user'></i>
                                <input type="text" class="form-control" id="nomor_induk" name="nomor_induk"
                                    placeholder="NIP / NIK" value="{{ old('nomor_induk') }}" required autofocus>
                            </div>
                            @error('nomor_induk')
                                <span class="error-message" style="display: block;">{{ $message }}</span>
                            @enderror
                            <div class="input-group">
                                <i class='bx bxs-lock-alt'></i>
                                <input type="password" class="form-control" id="password" name="password"
                                    placeholder="Password" required>
                            </div>
                            @error('password')
                                <span class="error-message" style="display: block;">{{ $message }}</span>
                            @enderror
                            <button type="submit">
                                Masuk
                            </button>
                            <p>
                                <span>
                                    Belum punya Akun?
                                </span>
                                <a id="show-register" class="pointer" href="{{ route('register') }}" style="font-weight: bold; font-size: 1rem; text-decoration: none;">→ Daftar Akun</a>
                                {{-- <b onclick="toggle()" class="pointer">
                                -> Daftar Akun
                            </b> --}}
                            </p>
                        </div>
                    </div>
                </form>
            </div>
            <!-- END SIGN IN -->
        </div>
        <!-- END FORM SECTION -->
        <!-- CONTENT SECTION -->
        <div class="row content-row">
            <!-- SIGN IN CONTENT -->
            <div class="col align-items-center flex-col">
                <div class="text sign-in">
                    <h2>
                        Selamat Datang
                    </h2>
                    <p>
                        Selamat datang kembali di aplikasi Bebas Temuan Inspektorat kabupaten Lamongan. Silakan masuk untuk
                        melanjutkan.
                    </p>
                </div>
                <div class="img sign-in">
                    <img src="/assets/login/images/content-1.svg" alt="welcome">
                </div>
            </div>
            <!-- END SIGN IN CONTENT -->
        </div>
        <!-- END CONTENT SECTION -->
    </div>
    <script></script>
@endsection