@php use Illuminate\Support\Str; @endphp
@props([
    'name',
    'label' => $name ?? '',
    'required' => false,
    'value' => null,
    'useLabel' => true,
    'readonly' => false,
    'accept' => null,
    'path' => '',
])
@php
    $nameId = !empty($name) ? Str::slug($name) : uniqid();
    $modalId = 'modal-file-' . $nameId;
@endphp
<div id="div-input-{{ $nameId }}" class="mb-2">
    @if($value)
        @php
            $fileUrl = asset($path . $value);
            $ext = strtolower(pathinfo($value, PATHINFO_EXTENSION));
            $fileExts = ['jpg', 'jpeg', 'png', 'pdf', 'gif', 'webp'];
        @endphp
        <div>
            @if(in_array($ext, $fileExts) && $path)
                <!-- Modal for file preview -->
                <div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-labelledby="{{ $modalId }}Label" aria-hidden="true">
                  <div class="modal-dialog modal-xl modal-dialog-centered">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="{{ $modalId }}Label">{{ $label }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body text-center">
                        <div class="ratio ratio-16x9">
                            <embed src="{{ $fileUrl }}" class="rounded border" style="max-width:100%;max-height:80vh;" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            @endif
        </div>
    @endif
    <div class="form-floating d-flex align-items-center" style="gap: 0.5rem;">
        <input
            {{ $attributes->class(['form-control', 'is-invalid' => $errors->has($name)]) }}
            id="input-{{ $nameId }}"
            type="file"
            name="{{ $name }}"
            aria-label="{{ __('general.choose_file') }}"
            placeholder="{{ __('general.choose_file') }}"
            {{ $readonly ? 'readonly tabindex=-1' : '' }}
            @required($required)
            accept="{{ $accept }}"
            style="height: 58px; min-width: 0; flex: 1 1 auto;"
        />
        @if($value && in_array($ext ?? '', $fileExts ?? []) && $path)
            <a
                style="margin-left: 0.5rem; z-index: 2; cursor:pointer; height: 38px; display: flex; align-items: center;"
                data-bs-toggle="modal"
                data-bs-target="#{{ $modalId }}"
                data-bs-toggle="tooltip" data-bs-placement="top" title="{{$label}}"
                class="btn btn-sm btn-outline-secondary"
            >
                <i class="fas fa-file text-primary"></i>
            </a>
        @endif
        @if($useLabel)
            <label for="input-{{ $nameId }}" style="pointer-events: none; left: 0.75rem;">
                {{ $label }}
                @if($required)
                    <span class="text-danger">*</span>
                @endif
            </label>
        @endif
    </div>
    @error($name)
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>