@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="card border rounded mb-5">
                    <div class="card-header">
                        <h5 class="font-bold text-md">Informasi Instansi Dataset</h5>
                    </div>
                    <div class="card-body p-5">
                        <div class="grid lg:grid-cols-1 gap-3">
                            <div class="">
                                <label class="mb-3 required">Instansi</label>
                                <select name="instansi_id" required class="form-input instansi_id select2 @error('instansi_id') is-invalid @enderror" id="">
                                    <option value="">-</option>
                                    @foreach($instansi as $dataInstansi)
                                    <option {{@$item->instansi_id == $dataInstansi->MsInstansiId ? 'selected' : ''}} value="{{encode_id($dataInstansi->MsInstansiId)}}">{{$dataInstansi->name}}</option>
                                    @endforeach
                                </select>
                                @error('instansi_id')
                                <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                @enderror
                            </div>
                            <div class="">
                                <label class="mb-3 required">Resource Data</label>
                                <select name="template_id" required class="form-input template_id select2 @error('template_id') is-invalid @enderror" id="">
                                    <option value="">-</option>
                                    @foreach($template as $dataTemplate)
                                        <option {{@$item->template_id == $dataTemplate->MsTemplateId ? 'selected' : ''}} data-template="{{asset($dataTemplate->template_url)}}" value="{{encode_id($dataTemplate->MsTemplateId)}}">{{$dataTemplate->name}}</option>
                                    @endforeach
                                </select>
                                @error('template_id')
                                <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="mb-3 required">Apakah Menggunakan Template Yang Disediakan ?</label>
                                <select name="template_default" {{@$item->template_default ? 'disabled' : 'required'}} class="form-input {{@$item->template_default ? 'bg-secondary/50 text-white' : ''}} @error('template_default') is-invalid @enderror" id="template_default">
                                    <option value="">-</option>
                                    <option {{@$item->template_default == 1 ? 'selected' : ''}} value="1">Ya</option>
                                    <option {{@$item->template_default == 0 ? 'selected' : ''}} value="0">Tidak</option>
                                </select>
                                @error('template_default')
                                <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                                @enderror
                            </div>
                        </div>
                        <a href="#" class="btn bg-success btnDownload hidden text-white btn-md"><i class="ri-download-2-line"></i>&nbsp;Download Template Excel</a>
                    </div>
                    
                </div>
                <div class="grid lg:grid-cols-2 gap-3">
                    <div class="mb-3">
                        <label class="mb-3 required">Nama Dataset</label>
                        <input type="text" value="{{@$item->name ? @$item->name :  old('name')}}" name="name" class="form-input @error('name') is-invalid @enderror" placeholder="Masukan Nama Dataset" required>
                        <small><i>*Harap perhatikan nama dataset yang Anda buat. Pastikan tidak ada duplikasi dataset dengan menekan tombol Cek Data.</i></small>
                        @error('name')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="mb-3 required">Sifat Dataset</label>
                        <select name="publik" required class="form-input @error('publik') is-invalid @enderror" id="">
                            <option {{@$item->publik == 1 ? 'selected' : ''}} value="1">Terbuka/Publik</option>
                            <option {{@$item->publik == 0 ? 'selected' : ''}} value="0">Rahasia/Private</option>
                        </select>
                        @error('publik')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="mb-3 required">Tags / Kata Kunci</label>
                        <div id="tag-container" class="flex flex-wrap gap-2 p-2 form-input rounded bg-white focus-within:ring-2 ring-blue-500">
                            <?php
                                $tag = @json_decode(@$item->tags);
                            ?>
                            @if(@$tag)
                            @foreach($tag as $dataTags)
                                @if(@$dataTags)
                                    <span class="inline-flex items-center px-2 py-1 bg-primary text-white text-sm rounded">{{@$dataTags}} <button type="button" class="ml-1 text-blue-500 hover:text-red-600">×</button><input type="hidden" name="tags[]" value="{{@$dataTags}}"></span>
                                @endif
                            @endforeach
                            @endif
                            <input id="tag-input" type="text" value="" name="tags[]" placeholder="Tambah tag..."  class="flex-grow border-none p-1 text-sm" />
                        </div>
                        <small><i>*Sesuaikan kata kunci dengan dataset Anda</i></small>
                        @error('tags')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="mb-3 required">Upload File</label>
                        <input type="file" accept=".xls,.xlsx" value="{{@$item->file ? @$item->file :  old('file')}}" name="file" class="form-input @error('file') is-invalid @enderror" placeholder="Masukan File Dataset" {{@$item->file ? '' : 'required'}}>
                        <small><i>Masukan Ekstensi File : .xls,.xlsx</i></small>
                        @if(@$item->file)
                            <br>
                            <a href="{{asset('uploads/'.$item->file)}}" class="btn bg-success text-white mt-3"><i class="ri-download-line"></i>&nbsp;Download File</a>
                        @endif
                        @error('file')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>
                </div>
                <div class="mb-3">
                        <label class="mb-3 required">Topik</label>
                        <select required name="topik[]" class="form-input select2 @error('topik') is-invalid @enderror" multiple>
                            @foreach($topik as $dataTopik)
                            @php
                                if(@$item){
                                    $isSelected = is_array(json_decode($item->topik) ?? []) && in_array(encode_id($dataTopik->MsTopikId), json_decode($item->topik));
                                }
                            @endphp
                            <option {{ @$isSelected ? 'selected' : '' }} value="{{encode_id($dataTopik->MsTopikId)}}">{{$dataTopik->name}}</option>
                            @endforeach
                        </select>
                        @error('topik')
                        <span class="invalid-feedback" style="display: block!important;"><strong>{{$message}}</strong></span>
                        @enderror
                    </div>

                <div class="mb-3">
                    <label class="mb-3 required">Deskripsi Dataset</label>
                    <textarea name="deskripsi" rows="10" required class="form-input @error('deskripsi') is-invalid @enderror" id="">{{@$item->deskripsi}}</textarea>
                    @error('deskripsi')
                    <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('js')
    <script>
        
        const input = document.getElementById('tag-input');
        const container = document.getElementById('tag-container');

        input.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' && this.value.trim() !== '') {
            e.preventDefault();
            const tagText = this.value.trim();

            // Buat tag baru
            const tag = document.createElement('span');
            tag.className = 'inline-flex items-center px-2 py-1 bg-primary text-white text-sm rounded';
            tag.innerHTML = `${tagText} <button type="button" class="ml-1 text-blue-500 hover:text-red-600">&times;</button>`;

            // Hidden input untuk dikirim ke server
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'tags[]';
                hiddenInput.value = tagText;
            
            // Tempelkan ke tag
            tag.appendChild(hiddenInput);

            // Tambahkan tag ke container sebelum input
            container.insertBefore(tag, input);

            // Reset input
            this.value = '';

            // Hapus tag saat tombol × ditekan
            tag.querySelector('button').addEventListener('click', () => tag.remove());
            }
        });
        </script>
	<script type="text/javascript">
        $('.template_id').on('change',function(){
            var template = $(this).find(':selected').attr('data-template');
            $('.btnDownload').attr('href',template);
        });
        $('#template_default').on('change',function(){
            var instansi_id = $('.instansi_id').find(':selected').val();
            var val = $(this).find(':selected').val();
            var template = $('.template_id').find(':selected').attr('data-template');
            if(instansi_id == ''){
                toastr.error("Data instansi_id Belum Dipilih", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
                $('#template_default').val('');
            }else{
                if(val == 1){
                    $('.btnDownload').attr('href',template);
                    $('.btnDownload').removeClass('hidden');
                }else{
                    $('.btnDownload').attr('href',"#");
                    $('.btnDownload').addClass('hidden');
                }
            }
        });
        $(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