@extends('layouts.master')
@section('css')
<link rel="stylesheet" href="{{asset('assets/libs/choices.js/public/assets/styles/choices.min.css')}}">
@endsection
@section('content')

<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
    <div class="p-8 bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
        <form action="{{route($route.'.store')}}" method="POST" class="">
            {{csrf_field()}}
            <input type="hidden" name="secure_id" value="{{@$keyId}}">
            <div class="flex flex-col p-3 gap-3">
                <div class="flex gap-4">
                    <label class="mb-3 w-1/2 font-semibold required">Username</label>
                    <input type="text" value="{{@$item->username ? @$item->username :  old('username')}}" name="username" class="p-2 bg-white rounded border w-full @error('username') is-invalid @enderror" placeholder="Masukan username" required>
                    @error('username')
                    <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
                    @enderror
                </div>
                <div class="flex gap-4">
                    <label class="mb-3 w-1/2 font-semibold required">Nama</label>
                    <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name"  class="p-2 bg-white rounded border w-full @error('name') is-invalid @enderror" placeholder="Masukan Nama" required>
                    @error('name')
                    <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
                    @enderror
                </div>
                <div class="flex gap-4">
                    <label class="mb-3 w-1/2 font-semibold required">Email</label>
                    <input type="email" name="email" value="{{@$item->email ? @$item->email :  old('email')}}" id="emailverify" class="p-2 bg-white rounded border w-full @error('email') is-invalid @enderror" placeholder="Masukan Email Aktif" required>
                    @error('email')
                    <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
                    @enderror
                </div>
                <div class="flex gap-4">
                    <label class="mb-3 w-1/2 font-semibold required">Role User</label>
                    <select name="group" class="p-2 bg-white rounded border w-full @error('group') is-invalid @enderror" required>
                        <option value="">-Pilih Role User-</option>
                        @foreach($group as $data_group)
                        <option {{@$item->ms_group_id == $data_group->MsGroupId ? 'selected' : ''}} value="{{encode_id($data_group->MsGroupId)}}">{{$data_group->name}}</option>
                        @endforeach
                    </select>
                    @error('group')
                    <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
                    @enderror
                </div>
                <div class="flex gap-4">
                    <label class="mb-3 w-1/2 font-semibold required">Jenis Instansi</label>
                    <select name="type" id="type" class="p-2 bg-white rounded border w-full @error('type') is-invalid @enderror" required>
                        <option value="">-Pilih Jenis Instansi-</option>
                        @foreach($group as $data_group)
                            <option {{ @$item->ms_group_id == $data_group->MsGroupId ? 'selected' : '' }} value="{{ $data_group->alias }}">{{ $data_group->name }}</option>
                        @endforeach
                        @error('type')
                            <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </select>
                </div>

                <div class="flex gap-4">
                    <label class="mb-3 w-1/2 font-semibold required">Instansi</label>
                    <select name="ms_instansi_id" id="ms_instansi_id" class="p-2 bg-white rounded border w-full select2 @error('ms_instansi_id') is-invalid @enderror" required>
                        <option value="">-Pilih Jenis Instansi-</option>
                        @if(@$userInstansi)
                            <option selected value="{{encode_id(@$userInstansi->ms_instansi_id)}}">{{@$userInstansi->instansi->name}}</option>
                        @endif
                    </select>
                    @error('ms_instansi_id')
                    <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
                    @enderror
                </div>
                <div class="flex gap-4">
                    <label class="mb-3 w-1/2 font-semibold required">Password Baru</label>
                    <div class="flex flex-col w-full justify-center items-start gap-2">
                        <input type="password" id="password" autocomplete="new-password" name="password" class="p-2 bg-white rounded border w-full @error('password') is-invalid @enderror" placeholder="Masukan Password Minimm 8 characters">
                        @error('password')
                            <span class="p-2 bg-red-500 text-white rounded mt-1" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                        <button class="p-2 bg-gray-500 rounded my-2 text-white" type="button" id="togglePassword"><i class="ri-eye-line"></i> Lihat Password</button>
                        <p>Kata Sandi harus mengandung Minimal 8 karakter, maksimal 15 karakter, <br>setidaknya 1 huruf kecil dan huruf besar, angka dan simbol</p>
                    </div>
                </div>
            </div>
            <div class="flex justify-center items-center gap-2">
                <a href="{{route($route.'.index')}}" class="bg-red-500 rounded py-2 px-3 text-white flex items-center"><i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i><span>Batal</span></a>
                <button type="submit" class="bg-emerald-500 rounded py-2 px-3 text-white flex items-center"><i data-lucide="save" class="w-4 h-4 mr-2"></i><span> <span>Simpan</span></button>
            </div>
        </form>
    </div>
</div>

@endsection
@section('js')
    <script src="{{asset('assets/libs/choices.js/public/assets/scripts/choices.min.js')}}"></script>
    
	<script type="text/javascript">

         // ketika type berubah
        $('#type').on('change', function () {
            const type = $(this).val();
            $.ajax({
                method: "GET",
                url: `{{ url('getInstansi') }}/${type}`,
            }).done(function(msg) {
                obj = msg.data;
                $('.remove').remove();
                if (obj.length > 0) {
                
                    $.each(obj, function(index) {
                        value = obj[index].id;
                        text = obj[index].name;
                        $('#ms_instansi_id').append('<option class="remove" value=' + value + '>' + text + '</option>');
                    });
                }else {
                    $('.remove').remove();
                }
                $('#loading-spinner').hide();
            });

        });
        
        // const typeSelect  = document.getElementById('type');
        // const instansiSelect = document.getElementById('ms_instansi_id');
        // const choicesInstansi = new Choices(instansiSelect, {
        //     allowHTML: false,
        //     searchPlaceholderValue: 'Pilih Instansi terlebih dahulu',
        // });
        

        // // Ketika user memilih sekolah, load ulang kelas
        // typeSelect.addEventListener('change', function() {
        //     const type = this.value;
            
        //     // Kosongkan pilihan kelas sebelumnya
        //     choicesInstansi.clearChoices();

        //     // Load data kelas berdasarkan type
        //     choicesInstansi.setChoices(() => {
        //         return fetch(`{{ url('getInstansi') }}/${type}`)
        //         .then(res => res.json())
        //         .then(res => {
        //             return res.data.map(item => ({
        //                 label: item.name,
        //                 value: item.id
        //             }));
        //         })
        //         .catch(err => {
        //             console.error('Gagal load instansi:', err);
        //             return [];
        //         });
        //     });

        // });
        $('#togglePassword').on('click', function() {
            let passwordField = $('#password');
            let icon = $(this).find('i');

            // Cek apakah input saat ini bertipe password
            if (passwordField.attr('type') === 'password') {
                passwordField.attr('type', 'text'); // Ubah ke teks
                icon.removeClass('ri-eye-line').addClass('ri-eye-2-line'); // Ganti ikon
            } else {
                passwordField.attr('type', 'password'); // Ubah ke password
                icon.removeClass('ri-eye-2-line').addClass('ri-eye-line'); // Kembalikan ikon
            }
        });   
    </script>
@endsection