@extends('layouts.main')
@section('title', 'Tambah User')
@section('content')
    @include('layouts.components.alert-prompt')

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="row">
                <div class="col-6">
                    <h5 class="m-0 font-weight-bold text-primary mt-2">Tambah User</h5>
                </div>
            </div>
        </div>
        <div class="card-body">
            <form action="{{ route('dashboard.user.store') }}" method="POST" enctype="multipart/form-data" id="createForm">
                @csrf
                <div class="form-group">
                    <label for="username" class="col-form-label">Username: <span class="text-danger">*</span></label>
                    <input class="form-control" name="username" type="text" id="username" value="{{ old('username') }}"
                        placeholder="Masukan Username user" pattern="[A-Za-z0-9]+"
                        title="Hanya karakter huruf dan angka yang diperbolehkan" required>

                    <label for="fullname" class="col-form-label">Nama Lengkap: <span class="text-danger">*</span></label>
                    <input class="form-control" name="fullname" type="text" id="fullname" value="{{ old('fullname') }}"
                        placeholder="Masukan Nama Lengkap user" pattern="[^0-9]+"
                        oninput="this.value=this.value.replace(/[0-9]/g,'');" required
                        title="Hanya karakter selain angka yang diperbolehkan">

                    <label for="email" class="col-form-label">Email: <span class="text-danger">*</span></label>
                    <input class="form-control" name="email" type="email" id="email" value="{{ old('email') }}"
                        placeholder="Masukan email user" title="Format email yang valid diperlukan" required>

                    <label for="divisi" class="col-form-label">Divisi: <span class="text-danger">*</span></label>
                    <input class="form-control" name="divisi" type="text" id="divisi" value="{{ old('divisi') }}"
                        placeholder="Masukan Divisi user" pattern="[^0-9]+"
                        oninput="this.value=this.value.replace(/[0-9]/g,'');" required
                        title="Hanya karakter selain angka yang diperbolehkan">

                    <label for="role_id" class="col-form-label">Hak Akses: <span class="text-danger">*</span></label>
                    <select class="form-control" name="role_id" id="role_id" required>
                        <option disabled selected>Pilih Hak Akses User</option>
                        @foreach ($role as $dt_role)
                            <option value="{{ $dt_role->id }}">{{ $dt_role->name }}</option>
                        @endforeach
                    </select>

                    <label for="warehouse_id" class="col-form-label">Ditugaskan: <span class="text-danger">*</span></label>
                    <select class="form-control" name="warehouse_id" id="warehouse_id" required>
                        <option disabled selected>Pilih Gudang</option>
                        @foreach ($warehouse as $dt_warehouse)
                            <option value="{{ $dt_warehouse->id }}">{{ $dt_warehouse->name }}</option>
                        @endforeach
                    </select>

                    <div class="form-group">
                        <label for="password" class="col-form-label">Password: <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input class="form-control" name="password" type="password" id="password"
                                value="{{ old('password') }}" placeholder="Masukkan password user" minlength="8"
                                pattern="^(?=.*[A-Za-z])(?=.*\d).*$" required
                                title="Minimal 8 karakter dengan kombinasi huruf dan angka">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" id="showPasswordButton">
                                    Tampilkan
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-center">
                    <a href="{{ route('dashboard.user.index') }}" class="btn btn-secondary">Kembali</a>
                    <button type="submit" class="btn btn-primary" id="submitButton">Simpan</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        const passwordInput = document.getElementById("password");
        const showPasswordButton = document.getElementById("showPasswordButton");

        showPasswordButton.addEventListener("click", function() {
            if (passwordInput.type === "password") {
                passwordInput.type = "text";
                showPasswordButton.textContent = "Sembunyikan";
            } else {
                passwordInput.type = "password";
                showPasswordButton.textContent = "Tampilkan";
            }
        });
    </script>

    <script>
        document.getElementById('createForm').addEventListener('submit', function() {
            document.getElementById('submitButton').setAttribute('disabled', 'true');
        });
    </script>
@endsection