@csrf
<div class="box-body">
    <div class="form-group">
        <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

        <div class="col-md-6">
            <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                value="{{ old('name', optional($data)->name) }}" required autocomplete="name" autofocus>

            @error('name')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>

    <div class="form-group">
        <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

        <div class="col-md-6">
            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror"
                name="email" value="{{ old('email', optional($data)->email) }}" required autocomplete="email">

            @error('email')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>

    <div class="form-group">
        <label for="no_telepon" class="col-md-4 col-form-label text-md-right">{{ __('No Telepon') }}</label>

        <div class="col-md-6">
            <input id="no_telepon" type="text" class="form-control @error('no_telepon') is-invalid @enderror"
                name="no_telepon" value="{{ old('no_telepon', optional($data)->no_telepon) }}" required
                autocomplete="no_telepon">

            @error('email')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>

    @if ($data == null)
        <div class="form-group">
            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

            <div class="col-md-6">
                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror"
                    name="password" required autocomplete="new-password">

                @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
    @endif

    <div class="form-group">
        <label for="role" class="col-md-4 col-form-label text-md-right">{{ __('Level/Role') }}</label>

        <div class="col-md-6">
            <select name="role" class="form-control" id="role" required="">
                <option value="1" {{ old('role', optional($data)->role) == 1 ? 'selected' : '' }}>User Super Admin
                </option>
                <option value="2" {{ old('role', optional($data)->role) == 2 ? 'selected' : '' }}>User Admin
                </option>
                <option value="0" {{ old('role', optional($data)->role) == 0 ? 'selected' : '' }}>User Operator
                </option>
            </select>

            @error('role')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>

    <div class="form-group" id="kabupaten">
        <label for="kabupaten_id" class="col-md-4 col-form-label text-md-right">Kabupaten / Kota</label>
        <div class="col-md-6">

            <select name="kabupaten_id" id="kabupaten_id" class="form-control">
                <option disabled selected>Pilih Kabupaten / Kota</option>
                @foreach ($kabupatens as $a)
                    <option value="{{ $a->id }}"
                        {{ old('kabupaten_id', @$data->kabupaten_id) == $a->id ? 'selected' : '' }}>
                        {{ $a->nama_kabupaten }}</option>
                @endforeach
            </select>

            @error('kabupaten_id')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>

    <div class="form-group">
        <label for="password_baru" class="col-md-4 col-form-label text-md-right">{{ __('Password Baru') }}</label>

        <div class="col-md-6">
            <input id="password_baru" type="password" class="form-control @error('password_baru') is-invalid @enderror"
                name="password_baru" value="" autocomplete="false">

            @error('password_baru')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>
</div>
<script>
    @section('jquery')
        $(document).ready(function() {
            $('#role').change(function() {
                if ($(this).val() == 0) {
                    $('#kabupaten').show();
                } else {
                    $('#kabupaten').hide();
                }
            });
        });
    @endsection
</script>