@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-1 gap-3">
                    <table class="gridjs-table">
                        <tbody class="gridjs-tbody">
                            <tr class="gridjs-tr">
                                <td class="gridjs-td border-none text-xs">Instansi</td>
                                <td class="gridjs-td border-none text-xs">{{$item->instansi->name}}</td>
                            </tr>
                            <tr class="gridjs-tr">
                                <td class="gridjs-td border-none text-xs">Resource Data</td>
                                <td class="gridjs-td border-none text-xs">{{$item->template->name}}</td>
                            </tr>
                            <tr class="gridjs-tr">
                                <td class="gridjs-td border-none text-xs">Nama Dataset</td>
                                <td class="gridjs-td border-none text-xs">{{$item->name}}</td>
                            </tr>
                            <tr class="gridjs-tr">
                                <td class="gridjs-td border-none text-xs">Sifat Dataset</td>
                                <td class="gridjs-td border-none text-xs">
                                    @if($item->publik == 1)
                                        <span class="p-1 text-xs text-white rounded  bg-success">Terbuka/Publik</span>
                                    @else
                                        <span class="p-1 text-xs text-white rounded bg-primary">Rahasia/Private</span>
                                    @endif
                                </td>
                            </tr>
                            <tr class="gridjs-tr">
                                <td class="gridjs-td border-none text-xs">Tags</td>
                                <td class="gridjs-td border-none text-xs">{{$item->tags}}</td>
                            </tr>
                            <tr class="gridjs-tr">
                                <td class="gridjs-td border-none text-xs">File : </td>
                                <td class="gridjs-td border-none text-xs"><a href="{{asset('uploads/'.@$item->file)}}" class="btn bg-primary text-white text-xs"><i class="ri-download-line"></i>&nbsp;Download File</a></td>
                            </tr>
                            <tr class="gridjs-tr">
                                <td class="gridjs-td border-none text-xs">Topik</td>
                                <td class="gridjs-td border-none text-xs">{{$item->topik}}</td>
                            </tr>
                            <tr class="gridjs-tr">
                                <td class="gridjs-td border-none text-xs">Deskripsi</td>
                                <td class="gridjs-td border-none text-xs">{{$item->deskripsi}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <?php 
                        $data = json_decode($item->data);
                    ?>
                    <table id="table" class="gridjs-table border">
                        <thead class="gridjs-thead">
                            <tr class="gridjs-tr bg-secondary/10">
                                @if (!empty($data))
                                    @foreach ($data[0] as $k => $key)
                                        <th class="gridjs-td gridjs-th text-xs text-gray-500">{{ ucwords(str_replace('_', ' ', $k)) }}</th>
                                    @endforeach
                                @endif
                            </tr>
                        </thead>
                        <tbody class="gridjs-tbody">
                            @if (!empty($data))
                                @foreach ($data as $row)
                                    <tr class="gridjs-tr">
                                        @foreach ($row as $value)
                                            <td class="gridjs-th text-xs">{{ $value ?? '-' }}</td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </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_default').on('change',function(){
            var instansi_id = $('.instansi_id').find(':selected').val();
            var val = $(this).find(':selected').val();
            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',"{{url('test')}}");
                    $('.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