@extends('dashboard.layouts.main')

@section('container')
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Tambah Data Pengguna</h1>
    </div>

    @if(session()->has('PasswError'))
        <div class="alert alert-danger col-lg-6" role="alert"> <i data-lucide="alert-octagon" class="w-6 h-6 mr-2"></i> 
            {{ session('PasswError') }} 
        </div>
    @endif

    @if(session()->has('sukses'))
    <div class="alert alert-success col-lg-6" role="alert"> <i data-lucide="alert-triangle" class="w-6 h-6 mr-2"></i> 
        {{ session('sukses') }} 
    </div>
    @endif

    <div class="col-lg-8">
        <form method="post" action="{{ url('') }}/user" class="mb-5" enctype="multipart/form-data">
            @csrf
            <div class="mb-3">
                <label for="bank" class="form-label">Bank</label>
                <select class="form-select @error('bank_id') is-invalid @enderror" name="bank_id" id="bank_id" required>
                    <option selected disabled>-- Pilih Bank --</option>
                    @foreach ($bank as $b)
                        <option value="{{ $b->id }}" {{ old('bank_id') == $b->id ? 'selected' : '' }}>
                            {{ $b->nama_banks }}
                        </option>
                    @endforeach
                </select>
                @error('bank_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="name" class="form-label">Nama</label>
                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" required value="{{ old('name') }}">
                @error('name')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="username" class="form-label">Username</label>
                <input type="text" class="form-control @error('username') is-invalid @enderror" id="username" name="username" autocomplete="off" required value="{{ old('username') }}">
                @error('username')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
             <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="text" class="form-control @error('email') is-invalid @enderror" id="email" name="email" required value="{{ old('email') }}">
                @error('email')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="user_type" class="form-label">Tipe Pengguna</label>
                <select class="form-select @error('user_type') is-invalid @enderror" name="user_type" id="user_type" required>
                    <option selected disabled>-- Pilih Bank --</option>
                    <option value="0" {{ old('user_type') == 0 ? 'selected' : '' }}>Admin Bank</option>
                    <option value="1" {{ old('user_type') == 1 ? 'selected' : '' }}>Admin DLH</option>
                </select>
                @error('user_type')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
            <label for="password" class="form-label">Password <span><b>(min. 6 karakter, kombinasi huruf besar & kecil & angka)</b><span></label>
                <div class="input-group">
                    <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" autocomplete="new-password">
                    <span class="input-group-text" onclick="togglePassword()" style="cursor: pointer;">
                    <i data-feather="eye" id="toggleIcon"></i>
                    </span>
                    @error('password')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <button type="submit" class="btn btn-primary">Simpan</button>
        </form>
    </div>

    {{-- Toggle password visibility --}}
   <script>
        function togglePassword() {
            const input = document.getElementById('password');
            const icon = document.getElementById('toggleIcon');
            
            if (input.type === "password") {
            input.type = "text";
            icon.setAttribute("data-feather", "eye-off");
            } else {
            input.type = "password";
            icon.setAttribute("data-feather", "eye");
            }

            feather.replace(); // update icon
        }

        // Initial load
        feather.replace();
    </script>

@endsection