@extends('layouts.master')

@section('content')
    <div class="container">
        <h1>Tambah User</h1>
        <div class="alert alert-danger" role="alert" id="errorAlert" style="display: none;">
            tes
        </div>
        <form action="{{ route('users.store') }}" method="POST">
            @csrf
            <div class="form-group mb-3">
                <label for="name">Nama</label>
                <input type="text" name="name" class="form-control" required>
            </div>
            <div class="form-group mb-3">
                <label for="email">Email</label>
                <input type="email" name="email" class="form-control" required>
            </div>
            <div class="form-group mb-3">
                <label for="no_wa">No. Whatsapp</label>
                <div class="input-group">
                    <span class="input-group-prepend">
                        <span class="input-group-text h-100">+62</span>
                    </span>
                    <input type="text" name="no_wa" class="form-control" required>
                </div>
            </div>
            <div class="form-group mb-3">
                <label for="password">Password</label>
                <input type="password" name="password" class="form-control" required>
            </div>
            <div class="form-group mb-3">
                <label for="password_confirmation">Konfirmasi Password</label>
                <input type="password" name="password_confirmation" class="form-control" required>
            </div>
            <div class="form-group mb-3">
                <label for="role">Role</label>
                <select name="role" class="form-control" id="role">
                    @foreach ($roles as $role)
                        <option value="{{ $role->id }}">{{ $role->nama_role }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group mb-3 d-none" id="opd-select">
                <label for="opd">OPD</label>
                <select name="id_opd" class="form-control select2">
                    @foreach ($opd as $item)
                        <option value="{{ $item->id }}">{{ $item->nama_opd }}</option>
                    @endforeach
                </select>
            </div>
            <button type="button" id="submitBtn" class="btn btn-primary">Submit</button>
        </form>
    </div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        $('#submitBtn').on('click', function(e) {
            var password = $('input[name="password"]').val();
            var password_confirmation = $('input[name="password_confirmation"]').val();
            
            if(password != password_confirmation) {
                $('#errorAlert').text('Password dan Konfirmasi Password harus sama!');
                $('#errorAlert').show();
            } else {
                $('form').submit();
            }
        });

        $('#role').on('change', function() {
            if($('#role').val() == 11) {
                $('#opd-select').removeClass('d-none');
            } else {
                $('#opd-select').addClass('d-none');
            }
        });
    });

</script>
@endpush