@php
  $inputName = $inputName ?? 'attachment_file';
  $mediaUrlInputName = $mediaUrlInputName ?? 'attachment_media_url';
  $inputId = $inputId ?? 'lesson-attachment-file';
  $previewId = $previewId ?? $inputId.'-preview';
  $pickBtnId = $inputId.'-pick-btn';
  $removeCheckboxId = $removeCheckboxId ?? $inputId.'-remove';
  $removeInputName = $removeInputName ?? 'attachment_remove';
  $currentUrl = $currentUrl ?? null;
  $showRemove = $showRemove ?? false;
  $label = $label ?? '資料ファイル';
@endphp
<div class="monaka-image-upload" data-monaka-image-upload
     data-file-input-name="{{ $inputName }}"
     data-media-input-name="{{ $mediaUrlInputName }}"
     data-preview-layout="inline">
  @if($label !== '')
    <label class="form-label fw-semibold">{{ $label }}</label>
  @endif
  <div class="d-flex align-items-start gap-3 flex-wrap mb-2">
    <div id="{{ $previewId }}"
         class="flex-shrink-0 d-flex align-items-center justify-content-center overflow-hidden bg-white"
         style="width:160px;height:90px;border:1px dashed #ced4da;border-radius:8px;">
      @if($currentUrl)
        <span class="small text-center px-2 monaka-image-preview-empty"><i class="bi bi-file-earmark-check d-block fs-4 text-success"></i>設定済み</span>
      @else
        <span class="text-muted small text-center px-1 monaka-image-preview-empty">未設定</span>
      @endif
    </div>
    <div class="flex-grow-1" style="min-width:200px;">
      <input type="file"
             name="{{ $inputName }}"
             id="{{ $inputId }}"
             class="d-none @error($inputName) is-invalid @enderror"
             accept=".pdf,.zip,.png,.jpg,.jpeg,.gif,.webp,.doc,.docx,.xls,.xlsx,.ppt,.pptx,application/pdf,application/zip,image/*">
      <input type="hidden" name="{{ $mediaUrlInputName }}" id="{{ $inputId }}-media-url" value="{{ old($mediaUrlInputName) }}">
      <div class="monaka-upload-area monaka-image-drop-zone py-3 px-2 mb-2" data-monaka-image-drop style="margin:0;">
        <i class="bi bi-cloud-upload"></i>
        <p class="mb-0 small text-muted">クリックまたはドラッグ＆ドロップ</p>
        <p class="mb-0 text-muted" style="font-size:0.72rem;">pdf / zip / 画像 / Office、20MB以下</p>
      </div>
      <div class="d-flex gap-2 flex-wrap">
        <button type="button" class="btn btn-sm btn-outline-secondary" id="{{ $pickBtnId }}">
          <i class="bi bi-upload me-1"></i>ファイルをアップロード
        </button>
      </div>
      @error($inputName)
        <div class="invalid-feedback d-block">{{ $message }}</div>
      @enderror
      @if($showRemove && $currentUrl)
        <div class="form-check mt-2 mb-0">
          <input class="form-check-input" type="checkbox" name="{{ $removeInputName }}" value="1" id="{{ $removeCheckboxId }}" @checked(old($removeInputName))>
          <label class="form-check-label" for="{{ $removeCheckboxId }}">現在の資料を削除する</label>
        </div>
        <p class="form-text mb-0 mt-1"><a href="{{ $currentUrl }}" target="_blank" rel="noopener">現在のファイルを開く</a></p>
      @endif
    </div>
  </div>
</div>