@extends('layouts.admin')

@section('title', 'Pengaturan Toko')
@section('active', 'pengaturan')

@php
    $defaultFavicon = asset('favicon.svg');
    $currentFavicon = $faviconUrl ?? $defaultFavicon;
@endphp

@section('content')
@if ($errors->any())
  <div class="alert alert-danger shadow-soft" role="alert">
    <div class="fw-semibold mb-1">Pengaturan belum bisa disimpan:</div>
    <ul class="mb-0 small">
      @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
    </ul>
  </div>
@endif
<form action="{{ route('admin.pengaturan.update') }}" method="post" enctype="multipart/form-data" data-once data-settings-form>
  @csrf
  @method('PUT')
  <div class="row g-4">
    <div class="col-xl-8 d-grid gap-4">
      <section class="card-soft p-4" aria-labelledby="judul-identitas">
        <h2 class="h6 fw-bold mb-3" id="judul-identitas"><i class="bi bi-shop text-primary me-2" aria-hidden="true"></i>Identitas Toko</h2>
        <div class="row g-3">
          <div class="col-md-6">
            <label for="nama" class="form-label">Nama toko</label>
            <input id="nama" name="nama" class="form-control @error('nama') is-invalid @enderror" required maxlength="40" value="{{ old('nama', $toko['nama']) }}" data-preview-name>
            <div class="form-text">Tampil di logo, judul tab browser, footer, dan email.</div>
            @error('nama')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-6">
            <label for="tagline" class="form-label">Slogan</label>
            <input id="tagline" name="tagline" class="form-control @error('tagline') is-invalid @enderror" required maxlength="120" value="{{ old('tagline', $toko['tagline']) }}">
            <div class="form-text">Dipakai di judul halaman beranda &amp; deskripsi SEO.</div>
            @error('tagline')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="col-12">
            <label for="deskripsi" class="form-label">Deskripsi singkat (footer)</label>
            <textarea id="deskripsi" name="deskripsi" rows="2" class="form-control @error('deskripsi') is-invalid @enderror" maxlength="300">{{ old('deskripsi', $toko['deskripsi'] ?? '') }}</textarea>
            @error('deskripsi')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
        </div>
      </section>

      <section class="card-soft p-4" aria-labelledby="judul-favicon">
        <h2 class="h6 fw-bold mb-1" id="judul-favicon"><i class="bi bi-window-stack text-primary me-2" aria-hidden="true"></i>Favicon (ikon tab browser)</h2>
        <p class="small text-muted-soft mb-3">Gunakan gambar persegi, minimal 64×64 px (disarankan 512×512). PNG/JPG/WEBP otomatis dirapikan menjadi PNG 192×192.</p>
        <div class="d-flex flex-wrap align-items-center gap-3">
          <img src="{{ $currentFavicon }}" alt="Favicon saat ini" class="favicon-preview" width="64" height="64" id="faviconPreview" data-default-src="{{ $defaultFavicon }}">
          <div class="flex-grow-1 min-w-0">
            <label for="favicon" class="form-label small mb-1">Unggah favicon baru (PNG, JPG, WEBP, ICO · maks 1 MB)</label>
            <input type="file" id="favicon" name="favicon" accept="image/png,image/jpeg,image/webp,image/x-icon,image/vnd.microsoft.icon,.ico" class="form-control @error('favicon') is-invalid @enderror" data-max-size="1048576" data-preview="#faviconPreview">
            @error('favicon')<div class="invalid-feedback">{{ $message }}</div>@enderror
            @if ($faviconUrl)
              <div class="form-check mt-2">
                <input type="hidden" name="hapus_favicon" value="0">
                <input class="form-check-input" type="checkbox" id="hapus_favicon" name="hapus_favicon" value="1" @checked(old('hapus_favicon'))>
                <label class="form-check-label small" for="hapus_favicon">Kembalikan ke favicon bawaan</label>
              </div>
            @endif
          </div>
        </div>
      </section>

      <section class="card-soft p-4" aria-labelledby="judul-kontak">
        <h2 class="h6 fw-bold mb-3" id="judul-kontak"><i class="bi bi-telephone text-primary me-2" aria-hidden="true"></i>Kontak</h2>
        <div class="row g-3">
          <div class="col-12">
            <label for="alamat" class="form-label">Alamat toko</label>
            <input id="alamat" name="alamat" class="form-control @error('alamat') is-invalid @enderror" required maxlength="200" value="{{ old('alamat', $toko['alamat']) }}" autocomplete="street-address">
            @error('alamat')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-6">
            <label for="telepon" class="form-label">Nomor telepon (tampil di footer)</label>
            <input id="telepon" name="telepon" class="form-control @error('telepon') is-invalid @enderror" required maxlength="30" value="{{ old('telepon', $toko['telepon']) }}" inputmode="tel" placeholder="0812-3456-7890">
            @error('telepon')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-6">
            <label for="whatsapp" class="form-label">Nomor WhatsApp</label>
            <input id="whatsapp" name="whatsapp" class="form-control @error('whatsapp') is-invalid @enderror" required maxlength="20" value="{{ old('whatsapp', $toko['whatsapp']) }}" inputmode="tel" placeholder="081234567890">
            <div class="form-text">Boleh diawali 08 atau 62. Dipakai untuk tombol "Tanya via WhatsApp".</div>
            @error('whatsapp')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-6">
            <label for="email" class="form-label">Email</label>
            <input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror" required maxlength="100" value="{{ old('email', $toko['email']) }}">
            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
          <div class="col-md-6">
            <label for="jam" class="form-label">Jam operasional (opsional)</label>
            <input id="jam" name="jam" class="form-control @error('jam') is-invalid @enderror" maxlength="100" value="{{ old('jam', $toko['jam'] ?? '') }}" placeholder="Senin–Sabtu, 09.00–17.00 WIB">
            @error('jam')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
        </div>
      </section>

      <section class="card-soft p-4" aria-labelledby="judul-sosial">
        <h2 class="h6 fw-bold mb-1" id="judul-sosial"><i class="bi bi-share text-primary me-2" aria-hidden="true"></i>Media Sosial</h2>
        <p class="small text-muted-soft mb-3">Kosongkan bila tidak ingin ditampilkan di footer.</p>
        <div class="row g-3">
          @foreach (['instagram' => 'Instagram', 'facebook' => 'Facebook', 'tiktok' => 'TikTok'] as $key => $label)
            <div class="col-md-4">
              <label for="{{ $key }}" class="form-label"><i class="bi bi-{{ $key }} me-1" aria-hidden="true"></i>{{ $label }}</label>
              <input type="url" id="{{ $key }}" name="{{ $key }}" class="form-control @error($key) is-invalid @enderror" maxlength="200" value="{{ old($key, $toko['sosial'][$key] ?? '') }}" placeholder="https://">
              @error($key)<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
          @endforeach
        </div>
      </section>

      <section class="card-soft p-4" aria-labelledby="judul-kirim">
        <h2 class="h6 fw-bold mb-3" id="judul-kirim"><i class="bi bi-truck text-primary me-2" aria-hidden="true"></i>Pengiriman</h2>
        <div class="row g-3">
          <div class="col-md-6">
            <label for="ongkir" class="form-label">Tarif tetap fallback (mode lama)</label>
            <div class="input-group has-validation">
              <span class="input-group-text">Rp</span>
              <input type="number" id="ongkir" name="ongkir" min="0" max="1000000" step="500" class="form-control @error('ongkir') is-invalid @enderror" required value="{{ old('ongkir', $toko['ongkir']) }}" inputmode="numeric">
              @error('ongkir')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="form-text">Hanya fallback mode tarif tetap bila belum ada layanan. Untuk tarif GPS dan promo, gunakan <a href="{{ route('admin.ongkir.index') }}">Tarif Ongkir</a>.</div>
          </div>
        </div>
      </section>
    </div>

    <div class="col-xl-4">
      <div class="settings-aside d-grid gap-4">
        <div class="card-soft p-4">
          <h2 class="h6 fw-bold mb-3">Pratinjau</h2>
          <div class="browser-mock mb-3" aria-hidden="true">
            <div class="browser-tab">
              <img src="{{ $currentFavicon }}" alt="" width="16" height="16" data-preview-favicon>
              <span class="text-truncate"><span data-preview-name-text>{{ $toko['nama'] }}</span> · {{ \Illuminate\Support\Str::limit($toko['tagline'], 22) }}</span>
              <i class="bi bi-x"></i>
            </div>
            <div class="browser-bar"><i class="bi bi-lock-fill"></i> {{ parse_url(config('app.url'), PHP_URL_HOST) ?: 'tokoanda.com' }}</div>
            <div class="browser-body">
              <span class="navbar-brand m-0"><span data-preview-name-text>{{ $toko['nama'] }}</span><span class="dot">.</span></span>
            </div>
          </div>
          <p class="small text-muted-soft mb-0">Setelah disimpan, muat ulang halaman toko. Browser kadang menyimpan favicon lama di cache &mdash; tekan <kbd>Ctrl</kbd>+<kbd>F5</kbd> bila belum berubah.</p>
        </div>
        <div class="card-soft p-4">
          <button type="submit" class="btn btn-gradient w-100 btn-lg" data-loading-text="Menyimpan..."><i class="bi bi-check2-circle me-1" aria-hidden="true"></i>Simpan Pengaturan</button>
          <a href="{{ route('admin.pembayaran.index') }}" class="btn btn-light-blue w-100 mt-2"><i class="bi bi-credit-card-2-front me-1" aria-hidden="true"></i>Atur Virtual Account &amp; QRIS</a>
        </div>
      </div>
    </div>
  </div>
</form>
@endsection