@extends('layout.dashboard_layout')

@section('content')
    <div class="pw-container">

        {{-- Header --}}
        <div class="pw-header">
            <div class="pw-header-left">

                <div class="pw-breadcrumb">
                    <i class="bi bi-people"></i>
                    <span>Data User</span>
                    <i class="bi bi-chevron-right"></i>
                    <span class="active">Tambah User</span>
                </div>

                <h4>Tambah User</h4>
                <p>Tambahkan akun pengguna baru ke dalam sistem</p>

            </div>

            <div class="pw-header-right">
                <a href="{{ route('users.index') }}" class="pw-btn pw-btn-secondary">
                    <i class="bi bi-arrow-left"></i>
                    Kembali
                </a>
            </div>
        </div>


        {{-- Card Form --}}
        <div class="pw-card">

            <div class="pw-card-badge">
                <i class="bi bi-plus-circle"></i>
                Data Baru
            </div>

            <p class="pw-section-label">
                Informasi User
            </p>

            <form action="{{ route('users.store') }}" method="POST">
                @csrf

                <div class="row">

                    {{-- Nama --}}
                    <div class="col-md-6 mb-4">

                        <label class="pw-label" for="name">
                            Nama Lengkap
                        </label>

                        <div class="pw-input-wrapper @error('name') is-invalid @enderror">

                            <i class="bi bi-person pw-input-icon"></i>

                            <input type="text" id="name" name="name" class="pw-input" value="{{ old('name') }}"
                                placeholder="Masukkan nama lengkap" autocomplete="off">

                        </div>

                        <p class="pw-hint">
                            Nama lengkap pengguna sistem
                        </p>

                        @error('name')
                            <div class="pw-error">
                                <i class="bi bi-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror

                    </div>


                    {{-- AFD --}}
                    <div class="col-md-6 mb-4">

                        <label class="pw-label" for="afd">
                            AFD
                        </label>

                        <div class="pw-input-wrapper @error('afd') is-invalid @enderror">

                            <i class="bi bi-diagram-3 pw-input-icon"></i>

                            <input type="text" id="afd" name="afd" class="pw-input" value="{{ old('afd') }}"
                                placeholder="Masukkan afdeling" autocomplete="off">

                        </div>

                        <p class="pw-hint">
                            Isi afdeling user jika diperlukan
                        </p>

                        @error('afd')
                            <div class="pw-error">
                                <i class="bi bi-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror

                    </div>


                    {{-- Username --}}
                    <div class="col-md-6 mb-4">

                        <label class="pw-label" for="username">
                            Username
                        </label>

                        <div class="pw-input-wrapper @error('username') is-invalid @enderror">

                            <i class="bi bi-at pw-input-icon"></i>

                            <input type="text" id="username" name="username" class="pw-input"
                                value="{{ old('username') }}" placeholder="Masukkan username" autocomplete="off">

                        </div>

                        <p class="pw-hint">
                            Username digunakan untuk login
                        </p>

                        @error('username')
                            <div class="pw-error">
                                <i class="bi bi-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror

                    </div>


                    {{-- Password --}}
                    <div class="col-md-6 mb-4">

                        <label class="pw-label" for="password">
                            Password
                        </label>

                        <div class="pw-input-wrapper @error('password') is-invalid @enderror">

                            <i class="bi bi-lock pw-input-icon"></i>

                            <input type="password" id="password" name="password" class="pw-input"
                                placeholder="Masukkan password">

                        </div>

                        <p class="pw-hint">
                            Minimal 6 karakter
                        </p>

                        @error('password')
                            <div class="pw-error">
                                <i class="bi bi-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror

                    </div>


                    {{-- Role --}}
                    <div class="col-md-6 mb-4">

                        <label class="pw-label" for="role">
                            Role
                        </label>

                        <div class="pw-input-wrapper @error('role') is-invalid @enderror">

                            <i class="bi bi-shield-check pw-input-icon"></i>

                            <select name="role" id="role" class="pw-input pw-select">

                                <option value="">
                                    -- Pilih Role --
                                </option>

                                @foreach ($roles as $role)
                                    <option value="{{ $role->name }}" {{ old('role') == $role->name ? 'selected' : '' }}>

                                        {{ ucfirst($role->name) }}

                                    </option>
                                @endforeach

                            </select>

                        </div>

                        <p class="pw-hint">
                            Pilih hak akses user
                        </p>

                        @error('role')
                            <div class="pw-error">
                                <i class="bi bi-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror

                    </div>

                </div>


                {{-- Footer --}}
                <div class="pw-form-footer">

                    <span class="pw-required-note">
                        <i class="bi bi-info-circle"></i>
                        Semua kolom wajib diisi
                    </span>

                    <div class="pw-form-actions">

                        <a href="{{ route('users.index') }}" class="pw-btn pw-btn-light">

                            Batal

                        </a>

                        <button type="submit" class="pw-btn pw-btn-primary">

                            <i class="bi bi-check-lg"></i>
                            Simpan User

                        </button>

                    </div>

                </div>

            </form>

        </div>

    </div>
@endsection