@extends('layouts.master')
@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">{{$title}}</h4>
            </div>
        </div>
        <form action="{{route($route.'.store')}}" method="POST" class="" enctype="multipart/form-data">
            {{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">Nama Instansi</label>
                        <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name" class="form-input @error('name') is-invalid @enderror" placeholder="Masukan Nama Instansi" 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">Jenis Instansi</label>
                        <select name="parent" class="form-input select2 @error('parent') is-invalid @enderror" required>
                            <option value="">-Pilih Jenis Instansi-</option>
                            @foreach($group as $dataGroup)
                                <option {{@$dataGroup->alias == @$item->parent ? 'selected' : ''}} value="{{ @$dataGroup->alias }}">{{ @$dataGroup->name }}</option>
                            @endforeach
                        </select>
                        @error('parent')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="mb-3">Telp</label>
                        <input type="text" value="{{@$item->telp ? @$item->telp :  old('telp')}}" name="telp" class="form-input @error('telp') is-invalid @enderror" placeholder="Masukan Telp Instansi">
                        @error('telp')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="mb-3">Website</label>
                        <input type="text" value="{{@$item->website ? @$item->website :  old('website')}}" name="website" class="form-input @error('website') is-invalid @enderror" placeholder="Masukan Website">
                        @error('website')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>
                    
                </div>
                @php
                    // Ambil data yang sudah dipilih (bisa dari old input atau dari model saat edit)
                    $selectedResources = @$item->resource_data ? json_decode(@$item->resource_data) : [];
                    // dd($selectedResources);
                @endphp
                <div class="mb-3">
                        <label class="mb-3">Logo</label>
                        <input accept=".png,.jpg,.jpeg" type="file" value="{{@$item->logo ? @$item->logo :  old('logo')}}" name="logo" class="form-input @error('logo') is-invalid @enderror" placeholder="Masukan logo">
                        @if(@$item->logo)
                        <div class="border w-1/4 mt-3">
                            <img src="{{ asset('uploads/'.@$item->logo) }}" alt="" width="150" class="mx-auto">
                        </div>
                        @endif
                        @error('logo')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>
                <div class="mb-3">
                    <label class="mb-3 required">Resource Data</label>
                    <select name="resource_data[]" required class="form-input resource_data select2 @error('resource_data') is-invalid @enderror" id="" multiple>
                        <option value="">-</option>
                        @foreach($template as $dataTemplate)
                            <?php
                                $filename = pathinfo($dataTemplate->template_url, PATHINFO_FILENAME); 
                            ?>
                            <option {{ in_array($dataTemplate->MsTemplateId, $selectedResources) ? 'selected' : '' }} value="{{$dataTemplate->MsTemplateId}}">{{$filename}} - {{$dataTemplate->name}}</option>
                        @endforeach
                    </select>
                    @error('resource_data')
                    <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                    @enderror
                </div>
                <div class="mb-3">
                        <label class="mb-3">Alamat</label>
                        <textarea name="alamat" class="form-input @error('alamat') is-invalid @enderror" id="">{{@$item->alamat}}</textarea>
                        @error('alamat')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </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('page-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