@extends('app')
@section('content')
    <div class="app-content">
        <div class="content-wrapper">

            <div class="page-heading">
                <div>
                    <h1 class="page-title">{{ $title }}</h1>
                    <p class="page-subtitle">Tambahkan akun pengguna baru ke sistem</p>
                </div>
                <a href="{{ route('admin.users.index') }}" class="btn-app-ghost">
                    <i class="fa-solid fa-arrow-left me-2"></i>Kembali
                </a>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <i class="fa-solid fa-triangle-exclamation me-2"></i>
                    <div>
                        <strong>Terdapat kesalahan input:</strong>
                        <ul class="mb-0 mt-1 ps-3">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif

            <div class="row g-4 align-items-start">

                {{-- Form Utama --}}
                <div class="col-12 col-lg-8">
                    <div class="app-card">
                        <div class="app-card-header">
                            <span class="app-card-title">
                                <i class="fa-solid fa-user-plus me-2"></i>Data Pengguna
                            </span>
                        </div>
                        <div class="app-card-body">
                            <form action="{{ route('admin.users.store') }}" method="POST">
                                @csrf

                                <div class="row g-3">
                                    <div class="col-12 col-md-6">
                                        <label class="app-label">Nama Lengkap <span class="text-danger">*</span></label>
                                        <input type="text" name="name" value="{{ old('name') }}"
                                            class="app-input @error('name') is-invalid @enderror"
                                            placeholder="Masukkan nama lengkap">
                                        @error('name')
                                            <div class="mt-1" style="font-size:12px; color:var(--color-rejected)">
                                                <i class="fa-solid fa-triangle-exclamation me-1"></i>{{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label class="app-label">Email <span class="text-danger">*</span></label>
                                        <input type="email" name="email" value="{{ old('email') }}"
                                            class="app-input @error('email') is-invalid @enderror"
                                            placeholder="contoh@email.com">
                                        @error('email')
                                            <div class="mt-1" style="font-size:12px; color:var(--color-rejected)">
                                                <i class="fa-solid fa-triangle-exclamation me-1"></i>{{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label class="app-label">Password <span class="text-danger">*</span></label>
                                        <div class="position-relative">
                                            <input type="password" name="password" id="password"
                                                class="app-input @error('password') is-invalid @enderror"
                                                placeholder="Minimal 6 karakter" style="padding-right:40px">
                                            <button type="button" id="togglePassword"
                                                class="btn btn-link position-absolute top-50 end-0 translate-middle-y pe-3 p-0"
                                                style="color:var(--text-faint)">
                                                <i class="fa-regular fa-eye" id="eyeIcon"></i>
                                            </button>
                                        </div>
                                        @error('password')
                                            <div class="mt-1" style="font-size:12px; color:var(--color-rejected)">
                                                <i class="fa-solid fa-triangle-exclamation me-1"></i>{{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label class="app-label">Role <span class="text-danger">*</span></label>
                                        <select name="role" class="app-select @error('role') is-invalid @enderror">
                                            <option value="">— Pilih Role —</option>
                                            @foreach (['Admin', 'Perawat', 'Kepala Ruangan', 'Logistik', 'Kasie Pengembangan'] as $role)
                                                <option value="{{ $role }}"
                                                    {{ old('role') == $role ? 'selected' : '' }}>
                                                    {{ $role }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('role')
                                            <div class="mt-1" style="font-size:12px; color:var(--color-rejected)">
                                                <i class="fa-solid fa-triangle-exclamation me-1"></i>{{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="col-12">
                                        <label class="app-label">Ruangan <span class="text-danger">*</span></label>
                                        <select name="id_ruangan"
                                            class="app-select @error('id_ruangan') is-invalid @enderror">
                                            <option value="">— Pilih Ruangan —</option>
                                            @foreach ($ruangans as $ruangan)
                                                <option value="{{ $ruangan->id }}"
                                                    {{ old('id_ruangan') == $ruangan->id ? 'selected' : '' }}>
                                                    {{ $ruangan->nama_ruangan }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('id_ruangan')
                                            <div class="mt-1" style="font-size:12px; color:var(--color-rejected)">
                                                <i class="fa-solid fa-triangle-exclamation me-1"></i>{{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="d-flex gap-2 justify-content-end mt-4">
                                    <a href="{{ route('admin.users.index') }}" class="btn-app-ghost">Batal</a>
                                    <button type="submit" class="btn-app-primary">
                                        <i class="fa-solid fa-floppy-disk me-2"></i>Simpan
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- Panduan --}}
                <div class="col-12 col-lg-4">
                    <div class="app-card">
                        <div class="app-card-header">
                            <span class="app-card-title">
                                <i class="fa-solid fa-circle-info me-2"></i>Panduan Role
                            </span>
                        </div>
                        <div class="app-card-body">
                            <div class="guide-list">
                                <div class="guide-item">
                                    <div class="at-dot"><i class="fa-solid fa-user-shield"></i></div>
                                    <div class="guide-text">
                                        <strong>Admin</strong>
                                        <span>Mengelola data master sistem</span>
                                    </div>
                                </div>
                                <div class="guide-item">
                                    <div class="at-dot"><i class="fa-solid fa-user-nurse"></i></div>
                                    <div class="guide-text">
                                        <strong>Perawat</strong>
                                        <span>Mengajukan permintaan alat medis</span>
                                    </div>
                                </div>
                                <div class="guide-item">
                                    <div class="at-dot"><i class="fa-solid fa-user-tie"></i></div>
                                    <div class="guide-text">
                                        <strong>Kepala Ruangan</strong>
                                        <span>Menyetujui atau menolak permintaan</span>
                                    </div>
                                </div>
                                <div class="guide-item">
                                    <div class="at-dot"><i class="fa-solid fa-boxes-stacked"></i></div>
                                    <div class="guide-text">
                                        <strong>Logistik</strong>
                                        <span>Memproses dan menyiapkan alat medis</span>
                                    </div>
                                </div>
                                <div class="guide-item">
                                    <div class="at-dot"><i class="fa-solid fa-user-gear"></i></div>
                                    <div class="guide-text">
                                        <strong>Kasie Pengembangan</strong>
                                        <span>Melihat laporan dan statistik</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.getElementById('togglePassword').addEventListener('click', function() {
            const input = document.getElementById('password');
            const icon = document.getElementById('eyeIcon');
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.replace('fa-eye', 'fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.replace('fa-eye-slash', 'fa-eye');
            }
        });
    </script>
@endpush