{{-- <div title="Download File" style="cursor: pointer"
    onclick="downloadFile('{{ $sub_folder }}', '{{ $file }}','{{ $employee_id }}')">
    <span class="icon is-small">
        <i class="fa-solid fa-download"></i>
    </span>
</div> --}}
<button type="button" class="btn-explore" onclick="openFile('{{ Util::linkFile($sub_folder, $file) }}')">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
      <path d="M9 5.27539C11.8425 5.27539 14.3775 6.87289 15.615 9.40039C14.3775 11.9279 11.8425 13.5254 9 13.5254C6.1575 13.5254 3.6225 11.9279 2.385 9.40039C3.6225 6.87289 6.1575 5.27539 9 5.27539ZM9 3.77539C5.25 3.77539 2.0475 6.10789 0.75 9.40039C2.0475 12.6929 5.25 15.0254 9 15.0254C12.75 15.0254 15.9525 12.6929 17.25 9.40039C15.9525 6.10789 12.75 3.77539 9 3.77539ZM9 7.52539C10.035 7.52539 10.875 8.36539 10.875 9.40039C10.875 10.4354 10.035 11.2754 9 11.2754C7.965 11.2754 7.125 10.4354 7.125 9.40039C7.125 8.36539 7.965 7.52539 9 7.52539ZM9 6.02539C7.14 6.02539 5.625 7.54039 5.625 9.40039C5.625 11.2604 7.14 12.7754 9 12.7754C10.86 12.7754 12.375 11.2604 12.375 9.40039C12.375 7.54039 10.86 6.02539 9 6.02539Z" fill="#363636"/>
    </svg>
</button>
&nbsp;
<a href="{{ Util::linkFile($sub_folder, $file, 'download', $employee_name.'_'.$sub_folder.'.pdf') }}">
<button type="button" class="btn-explore">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
      <path d="M13.5 11.6504V13.9004H4.5V11.6504H3V13.9004C3 14.7254 3.675 15.4004 4.5 15.4004H13.5C14.325 15.4004 15 14.7254 15 13.9004V11.6504H13.5ZM12.75 8.65039L11.6925 7.59289L9.75 9.52789V3.40039H8.25V9.52789L6.3075 7.59289L5.25 8.65039L9 12.4004L12.75 8.65039Z" fill="#363636"/>
    </svg>
</button>
</a>
&nbsp;
@role('super_admin')
<button type="button" class="btn-explore h-modal-trigger" data-modal="demo-right-actions-modal{{$sub_folder}}">
    <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 7.15039V14.6504H6V7.15039H12ZM10.875 2.65039H7.125L6.375 3.40039H3.75V4.90039H14.25V3.40039H11.625L10.875 2.65039ZM13.5 5.65039H4.5V14.6504C4.5 15.4754 5.175 16.1504 6 16.1504H12C12.825 16.1504 13.5 15.4754 13.5 14.6504V5.65039Z" fill="#363636"/>
    </svg>
</button>
@endrole     
<div id="demo-right-actions-modal{{$sub_folder}}" class="modal h-modal">
    <div class="modal-background  h-modal-close"></div>
    <div class="modal-content">
        <div class="modal-card">
            <header class="modal-card-head">
                <h3>Delete {{$sub_folder}}</h3>
                <button class="h-modal-close ml-auto" aria-label="close">
                    <i data-feather="x"></i>
                </button>
            </header>
            <div class="modal-card-body" style="padding: 0px;">
                <div class="inner-content">
                    <div class="section-placeholder" style="padding: 0px;">
                        <div class="placeholder-content">
                            <img src="{{url('assets/img/icons/inbox-cleanup.svg')}}">
                            <div class="txt1">Are you sure you want to delete this data?</div>
                            <div class="txt2">This action is permanent and cannot be undone.</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-card-foot is-centered">
                <button class="button is-rounded h-modal-close" >@lang('app.cancel')</button>
                <button class="button is-danger is-raised is-rounded" onclick="btn_hapus({{ $employee_id }}, '{{ $sub_folder }}', '{{ $idFileMcu ?? 0 }}')">@lang('app.delete')</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Bulma -->
{{-- <div class="modal" id="myModal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head bg-white">
      <div class="modal-card-title-plus">Delete: <span class="modal-card-title-plus2"><span id="numbers2"></span> selected data</span></div>
      <button class="delete" aria-label="close" id="closeModal1"></button>
    </header>
    <section class="modal-card-body" align="center">
      <img src="{{url('assets/img/icons/inbox-cleanup.svg')}}">
      <div class="txt1">Are you sure you want to delete this data?</div>
      <div class="txt2">This action is permanent and cannot be undone.</div>
    </section>
    <footer class="modal-card-foot bg-white m-align-center">
      <button class="button" id="closeModal2">@lang('app.cancel')</button>
      <button class="button is-danger" onclick="btn_hapus({{$employee_id}})">@lang('app.delete')</button>
    </footer>
  </div>
</div> --}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.16.0/pdf-lib.min.js"></script>

<script>
    function downloadFile(target, namefile) {
        fetch(target, {
            mode: 'cors',
            cache: 'no-cache',
        })
            .then(res => res.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = namefile+'.pdf'; // ganti nama file sesuai kebutuhan
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
            })
            .catch(err => console.error('Gagal download:', err));
    }


    function openFile(target){
        window.open(target, '_blank');
    }

</script>

<script>
  function btn_hapus(id, file, idFileMcu) {
      window.location.href = "/employee/detail_delete_ktp/" + id + '_' + file + '_' + idFileMcu;
  }
</script>