@extends('layouts.master')
@section('content')
<div class="flex-1 overflow-y-auto p-8 custom-scrollbar">
    <div class="bg-white p-8 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">Nama Topik</label>
                    <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name" class="p-2 border rounded w-full @error('name') is-invalid @enderror" placeholder="Masukan Nama" required>
                    @error('name')
                    <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                    @enderror
                </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 type="text/javascript">
     $(document).ready(function() {
            $('.numberInput').on('input', function() {
                this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
            });
            $('#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('fa-eye').addClass('fa-eye-slash'); // Ganti ikon
                } else {
                    passwordField.attr('type', 'password'); // Ubah ke password
                    icon.removeClass('fa-eye-slash').addClass('fa-eye'); // Kembalikan ikon
                }
            });
        });   
    </script>
@endsection