@extends('master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col">
            <div class="page-description">
                <h1>User Register</h1>
            </div>
        </div>  
    </div>

    @if(session('success'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: '{{ session('success') }}',
                showConfirmButton: false,
                timer: 1000
            });
        });
    </script>
    @endif

    @if(session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: '{{ session('error') }}',
                    showConfirmButton: false,
                    timer: 1000
                });
            });
        </script>
    @endif
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Register New User</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('createuser.store') }}" method="post">
                        @csrf
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="name" class="form-label">Name</label>
                                <input type="text" name="name" id="name" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label for="username" class="form-label">Username</label>
                                <input type="text" name="username" id="username" class="form-control">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="password" class="form-label">Password</label>
                                <input type="password" name="password" id="password" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label for="password_confirmation" class="form-label">Re-type Password</label>
                                <input type="password" name="password_confirmation" id="password_confirmation" class="form-control">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="level" class="form-label">Role Access</label>
                                <select name="level" id="level" class="form-select">
                                    <option value="user_mikro">Sub Mikrobiology</option>
                                    <option value="user_kumikro">KU Mikro</option>
                                    <option value="user_cpo">Sub CPO</option>
                                    <option value="user_kucpo">KU CPO</option>
                                    <option value="user_spvcpo">SPV CPO</option>
                                    <option value="user_ci">Sub CI</option>
                                    <option value="user_kuci">KU CI</option>
                                    <option value="user_adminsystem">Admin System</option>
                                    <option value="user_kuadmin">KU Admin</option>
                                    <option value="user_spvadmin">SPV Admin</option>
                                    <option value="user_hod">HOD</option>
                                    <option value="super_admin">Super Admin~</option>
                                </select>
                            </div>
                            <div class="col-md-6" style="display: none;">
                                <label for="sub" class="form-label">Sub</label>
                                <input type="text" name="sub" id="sub" class="form-control" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


@push('scripts')
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const levelSelect = document.getElementById('level');
        const subInput = document.getElementById('sub');

        levelSelect.addEventListener('change', function() {
            switch(this.value) {
                case 'user_mikro':
                    subInput.value = 'Sub Mikrobiology';
                    break;
                case 'user_kumikro':
                    subInput.value = 'KU Mikro';
                    break;
                case 'user_cpo':
                    subInput.value = 'Sub CPO';
                    break;
                case 'user_kucpo':
                    subInput.value = 'KU CPO';
                    break;
                case 'user_ci':
                    subInput.value = 'Sub CI';
                    break;
                case 'user_kuci':
                    subInput.value = 'KU CI';
                    break;
                case 'user_adminsystem':
                    subInput.value = 'Admin System';
                    break;
                case 'user_kuadmin':
                    subInput.value = 'KU Admin';
                    break;
                case 'user_spvadmin':
                    subInput.value = 'SPV Admin';
                    break;
                case 'user_spvcpo':
                    subInput.value = 'SPV CPO';
                    break;
                case 'user_hod':
                    subInput.value = 'HOD';
                    break;
                case 'super_admin':
                    subInput.value = 'Super Admin~';
                    break;
                default:
                    subInput.value = '';
            }
        });

        // Set initial value
        levelSelect.dispatchEvent(new Event('change'));
    });
</script>
@endpush

@endsection