@php
  $inputName = $inputName ?? 'logo_file';
  $inputId = $inputId ?? 'site-logo-file';
  $previewId = $previewId ?? 'site-logo-preview';
  $mediaUrlInputId = $mediaUrlInputId ?? 'site-logo-media-url';
  $pickBtnId = $inputId.'-pick-btn';
  $mediaBtnId = $inputId.'-media-btn';
  $currentUrl = $currentUrl ?? null;
  $showRemove = $showRemove ?? false;
@endphp
<div class="site-logo-upload" data-site-logo-upload>
  <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:80px;height:80px;border:1px dashed #ced4da;border-radius:8px;">
      @if($currentUrl)
        <img src="{{ $currentUrl }}" alt="" class="site-logo-preview-img" style="max-width:100%;max-height:100%;object-fit:contain;">
      @else
        <span class="text-muted small text-center px-1 site-logo-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=".png,.jpg,.jpeg,.gif,.webp,image/png,image/jpeg,image/gif,image/webp">
      <input type="hidden" name="logo_media_url" id="{{ $mediaUrlInputId }}" value="{{ old('logo_media_url') }}">
      <div class="monaka-upload-area site-logo-drop-zone py-3 px-2 mb-2" data-site-logo-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;">png / jpg / gif / webp、5MB以下</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>
        <button type="button" class="btn btn-sm btn-outline-secondary" id="{{ $mediaBtnId }}">
          <i class="bi bi-images me-1"></i>メディアから選ぶ
        </button>
      </div>
      <div class="form-text mb-0 mt-1">{{ $showRemove ? '更新時に差し替えます。' : '作成後もサイト設定から変更できます。' }}</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="logo_remove" value="1" id="logoRemove" @checked(old('logo_remove'))>
          <label class="form-check-label" for="logoRemove">現在のロゴを削除する（画像を選ばずに消す場合のみ）</label>
        </div>
      @endif
    </div>
  </div>
</div>

@once
@push('scripts')
<script>
(function () {
  function setPreview(preview, url) {
    if (!preview) return;
    if (url) {
      preview.innerHTML = '<img src="' + url.replace(/"/g, '&quot;') + '" alt="" class="site-logo-preview-img" style="max-width:100%;max-height:100%;object-fit:contain;">';
    } else {
      preview.innerHTML = '<span class="text-muted small text-center px-1 site-logo-preview-empty">未設定</span>';
    }
  }

  function initSiteLogoUpload(root) {
    if (!root || root.dataset.bound === '1') return;
    root.dataset.bound = '1';

    const fileInput = root.querySelector('input[type="file"][name="logo_file"]');
    const mediaInput = root.querySelector('input[name="logo_media_url"]');
    const preview = root.querySelector('[id$="-preview"], #site-logo-preview');
    const drop = root.querySelector('[data-site-logo-drop]');
    const pickBtn = root.querySelector('[id$="-pick-btn"]');
    const mediaBtn = root.querySelector('[id$="-media-btn"]');

    pickBtn?.addEventListener('click', function () { fileInput?.click(); });
    drop?.addEventListener('click', function () { fileInput?.click(); });

    fileInput?.addEventListener('change', function () {
      const file = fileInput.files && fileInput.files[0];
      if (!file) return;
      if (mediaInput) mediaInput.value = '';
      const reader = new FileReader();
      reader.onload = function () { setPreview(preview, reader.result); };
      reader.readAsDataURL(file);
      const removeCb = document.getElementById('logoRemove');
      if (removeCb) removeCb.checked = false;
    });

    drop?.addEventListener('dragover', function (e) {
      e.preventDefault();
      drop.classList.add('drag-over');
    });
    drop?.addEventListener('dragleave', function () {
      drop.classList.remove('drag-over');
    });
    drop?.addEventListener('drop', function (e) {
      e.preventDefault();
      drop.classList.remove('drag-over');
      const file = e.dataTransfer.files && e.dataTransfer.files[0];
      if (!file || !file.type.startsWith('image/')) return;
      const dt = new DataTransfer();
      dt.items.add(file);
      fileInput.files = dt.files;
      fileInput.dispatchEvent(new Event('change', { bubbles: true }));
    });

    mediaBtn?.addEventListener('click', function () {
      if (typeof window.MonakaImagePicker === 'undefined') {
        alert('メディア選択を読み込めませんでした。ページを再読み込みしてください。');
        return;
      }
      window.MonakaImagePicker.open({
        onSelect: function (url) {
          if (mediaInput) mediaInput.value = url;
          if (fileInput) fileInput.value = '';
          setPreview(preview, url);
          const removeCb = document.getElementById('logoRemove');
          if (removeCb) removeCb.checked = false;
        },
      });
    });
  }

  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('[data-site-logo-upload]').forEach(initSiteLogoUpload);
  });
})();
</script>
@endpush
@endonce