@extends('templates.login')
@section('container')
    <form class="tf-form" action="{{ url('/register-proses') }}" method="POST">
        @csrf
        <center>
            <h1>{{ $title }}</h1>
        </center>
        <div class="group-input">
            <label>Nama Lengkap</label>
            <input type="text" placeholder="Nama Lengkap" class="@error('name') is-invalid @enderror"
                value="{{ old('name') }}" name="name">
            @error('name')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
            @enderror
        </div>
        <div class="group-input">
            <label>Username</label>
            <input type="text" placeholder="Username" class="@error('username') is-invalid @enderror"
                value="{{ old('username') }}" name="username">
            @error('username')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
            @enderror
        </div>
        <div class="group-input mt-4">
            <label>Alamat Email</label>
            <input type="email" placeholder="Example@mail.com" class="@error('email') is-invalid @enderror"
                value="{{ old('email') }}" name="email">
            @error('email')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
            @enderror
        </div>
        <div class="group-input auth-pass-input last">
            <label>Kata Sandi</label>
            <input type="password" class="password-input @error('password') is-invalid @enderror" placeholder="Password"
                name="password">
            <a class="icon-eye password-addon" id="password-addon"></a>
            @error('password')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
            @enderror
        </div>
        <div class="group-input auth-pass-input last mt-4">
            <label>Ulangi Kata Sandi</label>
            <input type="password" class="password-input @error('password_confirmation') is-invalid @enderror"
                placeholder="Re-type Password" name="password_confirmation">
            <a class="icon-eye password-addon" id="password-addon"></a>
            @error('password_confirmation')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
            @enderror
        </div>
        
        <div class="group-input mt-4">
            <label>Lokasi Ruangan</label>
            <select name="lokasi_id" id="lokasi_id">
                <option value="">- - Pilih - -</option>
                @foreach ($data_lokasi as $dl)
                    @if (old('lokasi_id') == $dl->id)
                        <option value="{{ $dl->id }}" selected>{{ $dl->nama_lokasi }}</option>
                    @else
                        <option value="{{ $dl->id }}">{{ $dl->nama_lokasi }}</option>
                    @endif
                @endforeach
            </select>
            @error('lokasi_id')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
            @enderror
        </div>
        
        <div class="group-input mt-4">
            <label>Jabatan</label>
            <select name="jabatan_id" id="jabatan_id">
                <option value="">- - Pilih - -</option>
            </select>
            @error('jabatan_id')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
            @enderror
        </div>


        <button type="submit" class="tf-btn accent large">Daftar</button>
    </form>
    <p class="mb-9 fw-3 text-center ">Sudah Punya Akun? <a href="{{ url('/') }}" class="auth-link-rg">Masuk</a></p>
    @push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#lokasi_id').on('change', function() {
                const ruanganId = $(this).val();
                console.log(ruanganId);
                if (ruanganId) {
                    $.ajax({
                        url: "{{ url('getJabatanId') }}",
                        type: "GET",
                        data: {
                            id_ruangan: ruanganId
                        },
                        success: function(response) {
                            let jabatanOptions = '<option value="">Pilih</option>';
                            if (response.data.length > 0) {
                                $.each(response.data, function(index, jabatan) {
                                    console.log(response.data)
                                    jabatanOptions +=
                                        `<option value="${jabatan.id}">${jabatan.nama_jabatan}</option>`;
                                });
                            }
                            $('#jabatan_id').html(jabatanOptions);
                        },
                        error: function() {
                            Swal.fire('Gagal Mendapatkan Data Jabatan!', 'Silakan coba lagi.', 'error');
                        }
                    });
                } else {
                    $('#jabatan_id').html('<option value="">Pilih</option>');
                }
            });
        });
    </script>
    @endpush
@endsection