{{---- resources/views/admin/logo/edit.blade.php ----}}
@extends('layouts.admin')
@section('title', 'Logo Sekolah')

@section('content')
<div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
    <div>
      <h3 class="fw-bold mb-3">Logo Sekolah</h3>
      <h6 class="op-7 mb-2">Kelola file logo, email, dan favicon.</h6>
    </div>
</div>

<form method="POST" action="{{ route('admin.logo.update') }}" enctype="multipart/form-data">
  @csrf 

  <div class="row">

    <div class="col-md-4 mb-4">
      <div class="card card-round shadow-sm border-0 h-100">
        <div class="card-header">
          <div class="card-title fw-bold">Logo Utama</div>
        </div>
        <div class="card-body text-center">
          <p class="text-muted small">Untuk kogo utama. Rekomendasi: .png transparan, maks 2MB.</p>
          <div class="my-2" style="height: 120px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 5px; border: 1px dashed #ddd;">
            {{-- Area Pratinjau --}}
            <img id="logo_utama_preview" 
                 src="{{ $logo->logo_utama ? asset('uploads/logos/' . $logo->logo_utama) : '' }}" 
                 alt="Pratinjau Logo Utama" 
                 style="max-height: 110px; max-width: 90%; {{ !$logo->logo_utama ? 'display: none;' : '' }}">
            <small id="logo_utama_placeholder" style="{{ $logo->logo_utama ? 'display: none;' : '' }}">Tidak ada gambar</small>
          </div>
          <input type="file" class="form-control @error('logo_utama') is-invalid @enderror" 
                 id="logo_utama_input" name="logo_utama" accept="image/png, image/jpeg, image/svg+xml">
          @error('logo_utama')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
      </div>
    </div>

    <div class="col-md-4 mb-4">
      <div class="card card-round shadow-sm border-0 h-100">
        <div class="card-header">
          <div class="card-title fw-bold">Logo Email</div>
        </div>
        <div class="card-body text-center">
          <p class="text-muted small">Untuk header email. Rekomendasi: .png, maks 2MB.</p>
          <div class="my-2" style="height: 120px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 5px; border: 1px dashed #ddd;">
            {{-- Area Pratinjau --}}
            <img id="logo_email_preview" 
                 src="{{ $logo->logo_email ? asset('uploads/logos/' . $logo->logo_email) : '' }}" 
                 alt="Pratinjau Logo Email" 
                 style="max-height: 110px; max-width: 90%; {{ !$logo->logo_email ? 'display: none;' : '' }}">
            <small id="logo_email_placeholder" style="{{ $logo->logo_email ? 'display: none;' : '' }}">Tidak ada gambar</small>
          </div>
          <input type="file" class="form-control @error('logo_email') is-invalid @enderror" 
                 id="logo_email_input" name="logo_email" accept="image/png, image/jpeg, image/svg+xml">
          @error('logo_email')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
      </div>
    </div>

    <div class="col-md-4 mb-4">
      <div class="card card-round shadow-sm border-0 h-100">
        <div class="card-header">
          <div class="card-title fw-bold">Favicon</div>
        </div>
        <div class="card-body text-center">
          <p class="text-muted small">Ikon tab browser. Wajib file .ico atau .png (32x32px).</p>
          <div class="my-2" style="height: 120px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 5px; border: 1px dashed #ddd;">
            {{-- Area Pratinjau --}}
            <img id="logo_favicon_preview" 
                 src="{{ $logo->logo_favicon ? asset('uploads/logos/' . $logo->logo_favicon) : '' }}" 
                 alt="Pratinjau Favicon" 
                 style="height: 32px; width: 32px; {{ !$logo->logo_favicon ? 'display: none;' : '' }}">
            <small id="logo_favicon_placeholder" style="{{ $logo->logo_favicon ? 'display: none;' : '' }}">Tidak ada gambar</small>
          </div>
          <input type="file" class="form-control @error('logo_favicon') is-invalid @enderror" 
                 id="logo_favicon_input" name="logo_favicon" accept="image/png, image/x-icon">
          @error('logo_favicon')
            <div class="invalid-feedback">{{ $message }}</div>
          @enderror
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
        <div class="card card-round shadow-sm border-0">
            <div class="card-body text-end">
                <button type="submit" class="btn btn-primary btn-round">
                  <i class="fa fa-check"></i> Simpan Perubahan Logo
                </button>
            </div>
        </div>
    </div>
  </div>
</form>
@endsection

@push('scripts')
<script>
  function setupImagePreview(inputId, previewId, placeholderId) {
    const input = document.getElementById(inputId);
    const preview = document.getElementById(previewId);
    const placeholder = document.getElementById(placeholderId);

    input.addEventListener('change', function () {
      if (this.files && this.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function (e) {
          preview.src = e.target.result;
          preview.style.display = 'block';
          placeholder.style.display = 'none';
        }
        
        reader.readAsDataURL(this.files[0]);
      }
    });
  }

  $(document).ready(function() {
    setupImagePreview('logo_utama_input', 'logo_utama_preview', 'logo_utama_placeholder');
    setupImagePreview('logo_email_input', 'logo_email_preview', 'logo_email_placeholder');
    setupImagePreview('logo_favicon_input', 'logo_favicon_preview', 'logo_favicon_placeholder');
  });
</script>