@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 flex-col gap-6">
    <div class="card">
        <div class="card-header">
            <div class="flex justify-between items-center">
                <h4 class="card-title">Data {{$title}}</h4>
            </div>
        </div>
        <form action="{{route($route.'.store')}}" method="POST" class="">
            {{csrf_field()}}
            <input type="hidden" name="secure_id" value="{{@$keyId}}">
            <div class="p-6">
                <div class="grid lg:grid-cols-2 gap-3">
                    <div class="mb-3">
                        <label class="mb-3">Username</label>
                        <input type="text" value="{{@$item->username ? @$item->username :  old('username')}}" name="username" class="form-input @error('username') is-invalid @enderror" placeholder="Masukan username" required>
                        @error('username')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="mb-3">Nama</label>
                        <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name"  class="form-input @error('name') is-invalid @enderror" placeholder="Masukan Nama Sekolah" required>
                        @error('name')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="mb-3">Email</label>
                        <input type="email" name="email" value="{{@$item->email ? @$item->email :  old('email')}}" id="emailverify" class="form-input @error('email') is-invalid @enderror" placeholder="Masukan Email Aktif" required>
                        @error('name')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="mb-3">Role User</label>
                        <select name="group" class="form-input @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="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="mb-3">Jenis Instansi</label>
                        <select name="type" id="type" class="form-input @error('type') is-invalid @enderror" required>
                            <option value="">-Pilih Jenis Instansi-</option>
                            <option {{@$item->instansi->parent == 'Biro' ? 'selected' : '' }} value="Biro">Biro</option>
                            <option {{@$item->instansi->parent == 'Badan' ? 'selected' : '' }} value="Badan">Badan</option>
                            <option {{@$item->instansi->parent == 'Deputi' ? 'selected' : '' }} value="Deputi">Deputi</option>
                            <option {{@$item->instansi->parent == 'Dinas' ? 'selected' : '' }} value="Dinas">Dinas</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="mb-3">Instansi</label>
                        <select name="ms_instansi_id" data-trigger id="ms_instansi_id" class="form-input @error('ms_instansi_id') is-invalid @enderror" required>
                            <option value="">-Pilih Jenis Instansi-</option>
                            @if(@$item)
                            <option selected value="{{encode_id(@$item->ms_instansi_id)}}">{{@$item->instansi->name}}</option>
                            @endif
                        </select>
                        @error('ms_instansi_id')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>
                    
                </div>
                <div class="grid lg:grid-cols-1">
                    <div class="mb-3">
                        <label class="mb-3">Password Baru</label>
                        <input type="password" id="password" autocomplete="new-password" name="password" class="form-input @error('password') is-invalid @enderror" placeholder="Masukan Password Minimm 8 characters">
                        @error('password')
                            <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                                <button class="btn bg-secondary 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="p-6">
                <a href="{{route($route.'.index')}}" class="btn bg-danger text-white"><i class="ri-close-line"></i>&nbsp;Batal</a>
                <button type="submit" class="btn bg-success text-white"><i class="ri-save-line"></i> Simpan</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">
        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 [];
                });
            });

        });
     $(document).ready(function() {
            
        });   
    </script>
@endsection