@php
    $tooltip = $tooltip ?? false;
    $withValidUntil = $withValidUntil ?? false;
    $valid_until = $valid_until ?? null;
@endphp

@php
    $prefilledDate = old('valid_until.' . $id);

    if (!$prefilledDate && !empty($valid_until)) {
        try {
            $prefilledDate = \Carbon\Carbon::parse($valid_until)->format('Y-m-d');
        } catch (\Exception $e) {
            $prefilledDate = null;
        }
    }
@endphp

@if($id=='pas_photo')
    @php $accept = '.png,.jpg,.jpeg'; @endphp
@else
    @php $accept = 'application/pdf'; @endphp
@endif
@if (isset($file) && $file != null)
    @php
        $folder = $folder ?? $id;
    @endphp
    <div class="columns">
        <div class="column is-4">
            @php
                $extension = Util::checkExtension($file);
            @endphp
            @if ($extension == 'image')
                <img src="{{ Util::linkFile($folder, $file) }}" style="height: 165px; width: 100%; object-fit: cover;">
            @else

                @if($folder == 'ktp')
                    @include('components.util.show-file-two', [
                        'file_url' => Util::linkFile('ktp', $user->ktp),
                        'file_name' => $user->name . '_ktp',
                        'employee_id' => $user->id,
                        'sub_folder' => 'ktp',
                        'file' => $user->ktp,
                        'employee_name' => $user->name,
                        'note_mcu' => '',
                        'approved' => '',
                        'nomor' => '',
                        'size' => 'small',
                        'created_at' => date('d F Y', strtotime($user->created_at)),
                    ])
                @elseif($folder == 'skck')
                        @include('components.util.show-file-two', [
                        'file_url' => Util::linkFile(
                            'skck',
                            $user->skck),
                        'file_name' => Util::shortName(
                            $user->name . '_skck',
                            20),
                        'employee_id' => $user->id,
                        'sub_folder' => 'skck',
                        'file' => $user->skck,
                        'employee_name' => $user->name,
                        'note_mcu' => '',
                        'approved' => '',
                        'nomor' => '',
                        'size' => 'small',
                        'created_at' => date('d F Y', strtotime($user->created_at)),
                    ])
                @elseif($folder == 'bpjs_kesehatan')
                        @include('components.util.show-file-two', [
                        'file_url' => Util::linkFile(
                            'bpjs-kesehatan',
                            $user->bpjs_kesehatan),
                        'file_name' => Util::shortName(
                            $user->name . '_bpjs_kesehatan',
                            20),
                        'employee_id' => $user->id,
                        'sub_folder' => 'bpjs-kesehatan',
                        'file' => $user->bpjs_kesehatan,
                        'employee_name' => $user->name,
                        'note_mcu' => '',
                        'approved' => '',
                        'nomor' => '',
                        'size' => 'small',
                        'created_at' => date('d F Y', strtotime($user->created_at)),
                    ])
                    @elseif($folder == 'bpjs_tenaga_kerja')
                        @include('components.util.show-file-two', [
                            'file_url' => Util::linkFile(
                                'bpjs-tenaga-kerja',
                                $user->bpjs_tenaga_kerja),
                            'file_name' => Util::shortName(
                                $user->name . '_bpjs_tenaga_kerja',
                                20),
                            'employee_id' => $user->id,
                            'sub_folder' => 'bpjs-tenaga-kerja',
                            'file' => $user->bpjs_tenaga_kerja,
                            'employee_name' => $user->name,
                            'note_mcu' => '',
                            'approved' => '',
                            'nomor' => '',
                            'size' => 'small',
                            'created_at' => date('d F Y', strtotime($user->created_at)),
                        ])
                    @elseif($folder == 'health-certificate')
                        @include('components.util.show-file-two', [
                            'file_url' => Util::linkFile(
                                'health-certificate',
                                $visitor->health_certificate),
                            'file_name' => $visitor->health_certificate,
                            'employee_id' => '',
                            'sub_folder' => 'health-certificate',
                            'file' => $visitor->health_certificate,
                            'employee_name' => '',
                            'note_mcu' => '',
                            'approved' => '',
                            'nomor' => '',
                            'size' => 'small',
                            'created_at' => ''
                        ])
                    @else
                        @php
                            $file_name = $file_name ?? null;

                            $extension = $file_name 
                                ? Util::checkExtension($file_name) 
                                : null;

                            $file_url = $file_name 
                                ? Util::linkFile("document-competency", $file_name) 
                                : null;
                        @endphp
                        <div class="flex-table">
                            <div class="flex-list-inner" style="text-align: left;">
                                <div class="flex-table-item">
                                    <div class="flex-table-cell is-media is-grow">
                                        <div class="is-medium">
                                            <img style="height: 50px" src="{{ url('assets/img/icons/icon-pdf.svg') }}">
                                        </div>
                                        <div>
                                            <span class="profil-txt1">
                                                <span data-filter-match="">{{ $file }}</span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex-table-cell cell-end">
                                        
                                        @include('components.button.button-download-file', [
                                            "file" => $file_name,
                                            'file_url' => $file_url,
                                            'file_name' => $user->name . '_' . $file_name,
                                            'employee_id' => $user->id,
                                            "sub_folder" => "document-competency",
                                            "employee_name" => $user->name,
                                        ])
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
            @endif
        </div>
        <div class="column @if($withValidUntil) is-5 @else is-8 @endif">
            <div class="file is-boxed {{ $id }}">
                <label class="file-label">
                    <input class="file-input"
                        onclick="uploadFile('{{ $id }}','image-preview-{{ $id }}')"
                        id="{{ $id }}" type="file" accept="{{ $accept }}" name="{{ $id }}">
                    <span class="file-cta" id="{{ $id }}" @if($withValidUntil) style="min-height: 70px; padding-top: 20px;" @endif>
                        <span class="file-icon" id="file-icon-{{ $id }}" @if($withValidUntil) style="margin-top:4px;" @else style="margin-top: 40px" @endif>
                            <i class="lnil lnil-32 lnil-cloud-upload"></i> @if($withValidUntil) &nbsp;&nbsp; @lang('app.drag_and_click_to_upload') @endif
                        </span>
                        @if(!$withValidUntil) <span class="file-label" id="label-{{ $id }}">@lang('app.drag_and_click_to_upload')</span> @endif
                        <img id="image-preview-{{ $id }}" src="" alt="Image Preview" class="img-upload-preview">
                        <span id="remove-icon-{{ $id }}" class="remove-icon remove-icon2">
                            ✖
                        </span>
                    </span>
                </label>
            </div>
        </div>
        @if($withValidUntil)
        <div class="column is-3" align="right" style="margin-left: 70px;">
            <div class="control mt-3" style="display: flex; flex-direction: row; align-items: center; gap: 12px;">
                <label class="fs-12 fw-400 text-grey" style="white-space: nowrap;">Valid Until</label>
                <div>
                    <input
                        type="date"
                        name="valid_until[{{ $id }}]"
                        class="input is-warning-focus valid-until-input"
                        autocomplete="off"
                        value="{{ $prefilledDate }}"
                        @if(!isset($file) || $file == null) required @endif
                    >
                </div>
            </div>
        </div>
        @endif
    </div>
@else
    <div>
    <table width="100%">
        <tr>
            <td @if($withValidUntil) width="85%" @else width="100%" @endif>
                <div class="file is-boxed {{ $id }}"
                    @if ($tooltip) title="@lang('app.upload_tooltip_health_document')" @endif>
                    <label class="file-label">
                        <input class="file-input" onclick="uploadFile('{{ $id }}','image-preview-{{ $id }}')"
                            id="{{ $id }}" type="file" accept="{{ $accept }}" name="{{ $id }}">
                        <span class="file-cta" id="{{ $id }}" @if($withValidUntil) style="min-height: 73px;" @endif>
                            <span class="file-icon" id="file-icon-{{ $id }}" @if($withValidUntil) style="margin-top:15px;" @else style="margin-top: 40px" @endif>
                                <i class="lnil lnil-32 lnil-cloud-upload"></i> @if($withValidUntil) &nbsp;&nbsp; @lang('app.drag_and_click_to_upload') @endif
                            </span>
                            @if(!$withValidUntil) <span class="file-label" id="label-{{ $id }}">@lang('app.drag_and_click_to_upload')</span> @endif
                            <img id="image-preview-{{ $id }}" src="" alt="Image Preview" class="img-upload-preview">
                            <span id="remove-icon-{{ $id }}" class="remove-icon remove-icon2">
                                ✖
                            </span>
                        </span>
                    </label>
                </div>
            </td>
            @if($withValidUntil)
            <td width="20">
                
            </td>
            <td>
                <label class="fs-12 fw-400 text-grey" style="white-space: nowrap;">Valid Until <sup class="text-danger">*</sup></label>
                    <div style="display: flex; flex-direction: row; align-items: center; gap: 12px;">
                        
                        <div>
                            <input
                                type="date"
                                name="valid_until[{{ $id }}]"
                                class="input is-warning-focus valid-until-input"
                                autocomplete="off"
                                value="{{ $prefilledDate }}"
                                required
                            >
                        </div>
                    </div>
            </td>
            @endif
        </tr>
    </table>
    </div>
@endif

<script>
document.addEventListener('DOMContentLoaded', function(){
  // ganti 'YOUR_ID' dengan id input kamu
  uploadFile('{{ $id }}', 'image-preview-{{ $id }}');
});
</script>