@extends('layouts.admin')

@use('App\Enums\PaymentMethod')

@php
    $editing = $channel->exists;
    $type = old('type', $channel->type?->value ?? 'va');
    $isVa = $type === PaymentMethod::Va->value;
@endphp

@section('title', $editing ? 'Edit Metode Pembayaran' : 'Tambah Metode Pembayaran')
@section('active', 'pembayaran')

@section('content')
<a href="{{ route('admin.pembayaran.index') }}" class="btn btn-light-blue mb-3"><i class="bi bi-arrow-left me-1" aria-hidden="true"></i>Kembali</a>
<div class="row g-4">
  <div class="col-xl-8">
    <div class="card-soft p-4">
      <h2 class="h5 mb-4">{{ $editing ? 'Edit: '.$channel->label : 'Tambah Metode Pembayaran' }}</h2>
      @if ($errors->any())
        <div class="alert alert-danger" role="alert">
          <div class="fw-semibold mb-1">Data belum bisa disimpan:</div>
          <ul class="mb-0 small">
            @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
          </ul>
        </div>
      @endif
      <form action="{{ $editing ? route('admin.pembayaran.update', $channel) : route('admin.pembayaran.store') }}" method="post" enctype="multipart/form-data" class="row g-3" data-once data-channel-form>
        @csrf
        @if ($editing) @method('PUT') @endif

        <fieldset class="col-12">
          <legend class="form-label">Jenis pembayaran</legend>
          <div class="row g-2">
            <div class="col-sm-6">
              <input class="btn-check" type="radio" name="type" id="jenis-va" value="va" @checked($isVa)>
              <label class="pay-card" for="jenis-va">
                <span class="bank-badge" style="--bank:#2b6fe0"><i class="bi bi-bank" aria-hidden="true"></i></span>
                <span><span class="d-block fw-semibold">Virtual Account</span><span class="d-block small text-muted-soft">BCA, Mandiri, BNI, BRI, dll.</span></span>
                <i class="bi bi-check-circle-fill pay-check" aria-hidden="true"></i>
              </label>
            </div>
            <div class="col-sm-6">
              <input class="btn-check" type="radio" name="type" id="jenis-qris" value="qris" @checked(! $isVa)>
              <label class="pay-card" for="jenis-qris">
                <span class="bank-badge" style="--bank:#d61f26"><i class="bi bi-qr-code" aria-hidden="true"></i></span>
                <span><span class="d-block fw-semibold">QRIS</span><span class="d-block small text-muted-soft">Gambar kode QR dari bank / e-wallet</span></span>
                <i class="bi bi-check-circle-fill pay-check" aria-hidden="true"></i>
              </label>
            </div>
          </div>
          @error('type')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </fieldset>

        <div class="col-md-6 {{ $isVa ? '' : 'type-hidden' }}" data-type-section="va">
          <label for="code" class="form-label">Bank</label>
          <select id="code" name="code" class="form-select @error('code') is-invalid @enderror">
            <option value="" disabled @selected(! old('code', $channel->code))>Pilih bank</option>
            @foreach ($banks as $code => $bankLabel)
              <option value="{{ $code }}" @selected(old('code', $channel->code) === $code)>{{ $bankLabel }}</option>
            @endforeach
          </select>
          @error('code')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-md-6">
          <label for="name" class="form-label" data-label-va="Nama tampil (opsional)" data-label-qris="Nama kanal (opsional)">{{ $isVa ? 'Nama tampil (opsional)' : 'Nama kanal (opsional)' }}</label>
          <input id="name" name="name" class="form-control @error('name') is-invalid @enderror" maxlength="40" value="{{ old('name', $channel->name) }}" data-placeholder-va="Otomatis sesuai bank, mis. BCA" data-placeholder-qris="QRIS" placeholder="{{ $isVa ? 'Otomatis sesuai bank, mis. BCA' : 'QRIS' }}">
          <div class="form-text {{ $isVa ? '' : 'type-hidden' }}" data-type-section="va">Wajib diisi bila memilih "Bank Lainnya".</div>
          @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-md-6">
          <label for="account_number" class="form-label" data-label-va="Nomor Virtual Account" data-label-qris="NMID (opsional)">{{ $isVa ? 'Nomor Virtual Account' : 'NMID (opsional)' }}</label>
          <input id="account_number" name="account_number" class="form-control font-monospace @error('account_number') is-invalid @enderror" maxlength="40" value="{{ old('account_number', $channel->account_number) }}" @if ($isVa) inputmode="numeric" required @endif data-placeholder-va="mis. 39358 0812 3456 7890" data-placeholder-qris="mis. ID1026123456789" placeholder="{{ $isVa ? 'mis. 39358 0812 3456 7890' : 'mis. ID1026123456789' }}">
          <div class="form-text {{ $isVa ? '' : 'type-hidden' }}" data-type-section="va">Boleh diberi spasi agar mudah dibaca pelanggan.</div>
          @error('account_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-md-6">
          <label for="account_name" class="form-label" data-label-va="Atas nama" data-label-qris="Nama merchant">{{ $isVa ? 'Atas nama' : 'Nama merchant' }}</label>
          <input id="account_name" name="account_name" class="form-control @error('account_name') is-invalid @enderror" maxlength="100" required value="{{ old('account_name', $channel->account_name) }}" placeholder="mis. {{ config('toko.nama') }} Supply">
          @error('account_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 {{ $isVa ? 'type-hidden' : '' }}" data-type-section="qris">
          <label for="qr_image" class="form-label">Gambar QRIS {{ $channel->qr_url ? '(kosongkan bila tidak diganti)' : '' }}</label>
          <div class="d-flex flex-wrap gap-3 align-items-start">
            <img src="{{ $channel->qr_url ?? asset('assets/img/placeholder.webp') }}" alt="Pratinjau gambar QRIS" id="qrPreview" class="qr-preview" width="150" height="192">
            <div class="flex-grow-1 min-w-0">
              <input type="file" id="qr_image" name="qr_image" accept="image/jpeg,image/png,image/webp" class="form-control @error('qr_image') is-invalid @enderror" data-max-size="2097152" data-preview="#qrPreview">
              @error('qr_image')<div class="invalid-feedback">{{ $message }}</div>@enderror
              <div class="form-text">PNG/JPG/WEBP, maks 2 MB. Pakai file QRIS asli dari bank / penyedia QRIS agar bisa di-scan.</div>
            </div>
          </div>
        </div>

        <div class="col-12"><h2 class="h6">Logo dan latar pembayaran</h2><div class="d-flex align-items-center gap-3 mb-3">@include('partials.bank-logo',['channel'=>$channel])<span class="small text-muted-soft">Logo hanya identitas bank, bukan QR pembayaran.</span></div><label for="logo_image" class="form-label">Ganti logo bank</label><input type="file" id="logo_image" name="logo_image" accept="image/png,image/jpeg,image/webp" class="form-control"><div class="form-text">PNG transparan disarankan. Maks 2 MB / 2048×2048 px; SVG tidak diterima. Kosongkan untuk mempertahankan logo.</div>@error('logo_image')<div class="text-danger">{{ $message }}</div>@enderror<label for="logo_background" class="form-label mt-3">Warna latar logo</label><input id="logo_background" name="logo_background" type="color" class="form-control form-control-color" value="{{ old('logo_background',$channel->logo_bg) }}">@error('logo_background')<div class="text-danger">{{ $message }}</div>@enderror<div class="form-check mt-3"><input class="form-check-input" type="checkbox" id="reset_logo" name="reset_logo" value="1"><label class="form-check-label" for="reset_logo">Kembali ke logo bank bawaan</label></div></div>
        <div class="col-12">
          <label for="instructions" class="form-label">Cara pembayaran (opsional)</label>
          <textarea id="instructions" name="instructions" rows="4" class="form-control @error('instructions') is-invalid @enderror" maxlength="2000" placeholder="Satu langkah per baris. Kosongkan untuk memakai langkah bawaan.">{{ old('instructions', $channel->instructions) }}</textarea>
          @error('instructions')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-sm-6 col-md-4">
          <label for="sort_order" class="form-label">Urutan tampil</label>
          <input type="number" id="sort_order" name="sort_order" min="0" max="999" class="form-control @error('sort_order') is-invalid @enderror" value="{{ old('sort_order', $channel->sort_order ?? 0) }}" inputmode="numeric">
          @error('sort_order')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-sm-6 col-md-4">
          <label for="is_active" class="form-label">Status</label>
          @php($aktif = (string) old('is_active', $channel->is_active ? '1' : '0'))
          <select id="is_active" name="is_active" class="form-select">
            <option value="1" @selected($aktif === '1')>Aktif (tampil di checkout)</option>
            <option value="0" @selected($aktif === '0')>Nonaktif (disembunyikan)</option>
          </select>
        </div>

        <div class="col-12 d-flex flex-wrap gap-2 pt-2">
          <button type="submit" class="btn btn-gradient" data-loading-text="Menyimpan..."><i class="bi bi-check2-circle me-1" aria-hidden="true"></i>Simpan</button>
          <a href="{{ route('admin.pembayaran.index') }}" class="btn btn-light-blue">Batal</a>
        </div>
      </form>
    </div>
  </div>
  <div class="col-xl-4">
    <div class="card-soft p-4">
      <h2 class="h6 fw-bold mb-3"><i class="bi bi-lightbulb text-primary me-2" aria-hidden="true"></i>Tips</h2>
      <ul class="small text-muted-soft mb-0 ps-3 d-grid gap-2">
        <li><strong>Virtual Account</strong>: isi nomor VA dari bank / payment gateway toko. Tiap bank cukup satu.</li>
        <li><strong>QRIS</strong>: unggah gambar QRIS statis milik toko (biasanya dari aplikasi bank atau penyedia QRIS).</li>
        <li>Nonaktifkan kanal yang sedang gangguan agar tidak tampil di checkout, tanpa perlu menghapusnya.</li>
        <li>Pelanggan tetap mengunggah bukti bayar, lalu admin memverifikasi di menu Pesanan.</li>
      </ul>
    </div>
  </div>
</div>
@endsection