@extends('layouts.app')

@section('title', 'Pesanan '.$order->code)

@use('App\Enums\OrderStatus')
@use('App\Enums\PaymentMethod')

@php
    $pay = $order->paymentInfo();
    $isQris = $order->payment_method === PaymentMethod::Qris;
@endphp

@section('content')
<section class="py-4 bg-biru-muda">
  <div class="container d-flex flex-wrap justify-content-between align-items-center gap-2">
    <div class="min-w-0">
      <h1 class="mb-1 text-break">Pesanan {{ $order->code }}</h1>
      <span class="text-muted-soft">{{ $order->created_at->translatedFormat('d F Y, H:i') }} WIB</span>
    </div>
    <div>@include('partials.status-badge', ['status' => $order->status])</div>
  </div>
</section>
<section class="section-sm order-detail-page">
  <div class="container">
    @if ($order->status !== OrderStatus::Batal)
    <ol class="steps mb-4" aria-label="Tahapan pesanan">
      @foreach ($order->steps() as $step)
        <li class="step {{ $step['done'] ? 'done' : '' }}">@if ($step['done'])<i class="bi bi-check-circle-fill me-1" aria-hidden="true"></i><span class="visually-hidden">Selesai: </span>@endif{{ $step['label'] }}</li>
      @endforeach
    </ol>
    @else
      <div class="alert alert-danger shadow-soft" role="status"><i class="bi bi-x-octagon me-1" aria-hidden="true"></i>Pesanan ini telah dibatalkan{{ $order->cancelled_at ? ' pada '.$order->cancelled_at->translatedFormat('d F Y, H:i') : '' }}.</div>
    @endif
    <div class="row g-4 order-layout">
      <div class="col-lg-8 order-main">
        @if($order->expires_at && $order->status===OrderStatus::Menunggu)<div class="alert alert-warning">Bayar sebelum {{ $order->expires_at->translatedFormat('d M Y, H:i') }} WIB. Jika melewati batas, reservasi dapat dibatalkan otomatis. Jangan bayar pesanan yang sudah batal.</div>@endif
        @if ($order->canUploadProof())
        <div class="card-soft p-4 mb-4 pay-panel" id="pembayaran">
          <div class="d-flex flex-wrap align-items-center gap-3 mb-3">
            <span class="bank-badge bank-badge-lg" style="--bank: {{ $pay->color }}">{{ $pay->badge }}</span>
            <div class="min-w-0 flex-grow-1">
              <h2 class="h5 mb-0">{{ $isQris ? 'Bayar dengan QRIS' : 'Bayar ke '.$pay->label }}</h2>
              <div class="small text-muted-soft">{{ $order->payment_method->description() }}</div>
            </div>
          </div>

          @if ($order->status === OrderStatus::Dibayar)
            <div class="alert alert-info small d-flex gap-2 mb-3" role="status"><i class="bi bi-hourglass-split" aria-hidden="true"></i><div>Bukti pembayaran sudah kami terima dan sedang diverifikasi admin. Kamu masih bisa mengganti bukti bila salah unggah.</div></div>
          @endif

          <div class="row g-4 align-items-center">
            @if ($isQris)
              <div class="col-md-5 text-center">
                @if ($pay->qrUrl)
                  <a href="{{ $pay->qrUrl }}" target="_blank" rel="noopener" class="qris-frame d-inline-block">
                    <img src="{{ $pay->qrUrl }}" alt="Kode QRIS {{ $pay->holder ?: config('toko.nama') }}" class="img-fluid" width="260" height="333">
                  </a>
                  <div class="mt-2"><a href="{{ $pay->qrUrl }}" download="QRIS-{{ $order->code }}" class="btn btn-sm btn-light-blue"><i class="bi bi-download me-1" aria-hidden="true"></i>Simpan QRIS</a></div>
                @else
                  <div class="alert alert-warning small mb-0" role="alert">Kode QRIS sedang diperbarui toko. Silakan hubungi kami via WhatsApp.</div>
                @endif
              </div>
            @endif
            <div class="{{ $isQris ? 'col-md-7' : 'col-12' }}">
              <dl class="pay-details mb-0">
                @if ($isQris)
                  @if ($pay->holder)<div><dt>Nama merchant</dt><dd>{{ $pay->holder }}</dd></div>@endif
                  @if ($pay->number)<div><dt>NMID</dt><dd class="font-monospace">{{ $pay->number }}</dd></div>@endif
                @else
                  <div>
                    <dt>Nomor Virtual Account</dt>
                    <dd class="d-flex flex-wrap align-items-center gap-2">
                      <span class="va-number" id="vaNumber">{{ $pay->number }}</span>
                      <button type="button" class="btn btn-sm btn-light-blue" data-copy="{{ preg_replace('/\s+/', '', (string) $pay->number) }}" aria-label="Salin nomor Virtual Account"><i class="bi bi-copy me-1" aria-hidden="true"></i>Salin</button>
                    </dd>
                  </div>
                  @if ($pay->holder)<div><dt>Atas nama</dt><dd>{{ $pay->holder }}</dd></div>@endif
                @endif
                <div>
                  <dt>Total yang harus dibayar</dt>
                  <dd class="d-flex flex-wrap align-items-center gap-2">
                    <span class="pay-amount">{{ rupiah($order->total) }}</span>
                    <button type="button" class="btn btn-sm btn-light-blue" data-copy="{{ $order->total }}" aria-label="Salin nominal pembayaran"><i class="bi bi-copy me-1" aria-hidden="true"></i>Salin</button>
                  </dd>
                </div>
              </dl>
            </div>
          </div>

          <details class="pay-steps mt-4">
            <summary>Cara pembayaran</summary>
            <ol class="small text-muted-soft mb-0 mt-2 ps-3">
              @foreach ($pay->steps as $langkah)
                <li>{{ $langkah }}</li>
              @endforeach
            </ol>
          </details>

          <hr class="my-4">

          <h3 class="h6 mb-2">{{ $order->payment_proof ? 'Bukti pembayaran kamu' : 'Sudah bayar? Unggah bukti pembayaran' }}</h3>
          <div class="row g-3 align-items-start">
            @if ($order->payment_proof)
              <div class="col-sm-4">
                <a href="{{ route('pesanan.bukti', $order) }}" target="_blank" rel="noopener">
                  <img src="{{ route('pesanan.bukti', $order) }}" class="img-fluid rounded proof-img proof-thumb" alt="Bukti pembayaran pesanan {{ $order->code }}">
                </a>
              </div>
            @endif
            <div class="{{ $order->payment_proof ? 'col-sm-8' : 'col-12' }}">
              <form action="{{ route('pesanan.bukti.store', $order) }}" method="post" enctype="multipart/form-data" data-once>
                @csrf
                <label for="bukti" class="form-label small">Screenshot / foto bukti bayar (JPG, PNG, WEBP · maks 2 MB)</label>
                <input type="file" id="bukti" name="bukti" accept="image/jpeg,image/png,image/webp" class="form-control mb-2 @error('bukti') is-invalid @enderror" required data-max-size="2097152">
                @error('bukti')<div class="invalid-feedback mb-2">{{ $message }}</div>@enderror
                <button type="submit" class="btn btn-gradient" data-loading-text="Mengunggah..."><i class="bi bi-upload me-1" aria-hidden="true"></i>{{ $order->payment_proof ? 'Ganti Bukti' : 'Kirim Bukti Pembayaran' }}</button>
              </form>
            </div>
          </div>
        </div>
        @endif

        <div class="card-soft p-4 mb-4">
          <h2 class="h6 mb-3">Produk Dipesan</h2>
          <ul class="list-unstyled mb-0 d-grid gap-3">
            @foreach ($order->items as $item)
            <li class="d-flex gap-3 align-items-center">
              <img src="{{ $item->product?->image_url ?? asset('assets/img/placeholder.webp') }}" width="56" height="56" class="thumb-sm" alt="" loading="lazy">
              <div class="flex-grow-1 min-w-0">
                <div class="fw-semibold text-truncate">{{ $item->product_name }}</div>
                <div class="small text-muted-soft">Ukuran {{ $item->size }}@if($item->color) · {{ $item->color }}@endif &middot; {{ $item->qty }} &times; {{ rupiah($item->price) }}</div>
              </div>
              <span class="fw-semibold text-nowrap">{{ rupiah($item->subtotal) }}</span>
            </li>
            @endforeach
          </ul>
        </div>
        @unless($order->canUploadProof())
          @include('partials.order-shipping')
        @endunless
        @if (! $order->canUploadProof() && $order->payment_proof)
        <div class="card-soft p-4 mb-4">
          <h2 class="h6 mb-2">Bukti Pembayaran</h2>
          <a href="{{ route('pesanan.bukti', $order) }}" target="_blank" rel="noopener">
            <img src="{{ route('pesanan.bukti', $order) }}" class="img-fluid rounded proof-img" alt="Bukti pembayaran pesanan {{ $order->code }}">
          </a>
        </div>
        @endif
      </div>
      <div class="col-lg-4 order-aside">
        <div class="card-soft p-4 mb-4">
          <h2 class="h6 mb-3">Ringkasan Pembayaran</h2>
          <p class="small text-muted-soft mb-3">Nominal dan metode tersimpan saat pesanan dibuat.</p>
          <div class="d-flex justify-content-between mb-2"><span class="text-muted-soft">Subtotal</span><span>{{ rupiah($order->subtotal) }}</span></div>
          <div class="d-flex justify-content-between mb-2"><span class="text-muted-soft">Ongkir</span><span>{{ rupiah($order->shipping_cost) }}</span></div>
          <hr>
          <div class="d-flex justify-content-between"><span class="fw-bold">Total</span><span class="fw-bold text-primary fs-5">{{ rupiah($order->total) }}</span></div>
          <div class="mt-3 small d-flex justify-content-between gap-2"><span class="text-muted-soft">Metode</span><span class="fw-semibold text-end">{{ $order->paymentLabel() }}</span></div>
          @if ($order->paid_at)
            <div class="small d-flex justify-content-between gap-2 mt-1"><span class="text-muted-soft">Bukti dikirim</span><span class="text-end">{{ $order->paid_at->translatedFormat('d M Y, H:i') }}</span></div>
          @endif
        </div>

        @include('partials.order-history')
        @if($order->canUploadProof())
          @include('partials.order-shipping')
        @endif

        <button type="button" class="btn btn-light-blue w-100 no-print" data-print><i class="bi bi-printer me-1" aria-hidden="true"></i>Cetak ringkasan pesanan</button>

        @if ($order->canBeCancelledByCustomer())
          <form class="mt-2 no-print" action="{{ route('pesanan.batal', $order) }}" method="post" data-confirm="Batalkan pesanan {{ $order->code }}? Tindakan ini tidak bisa diurungkan.">
            @csrf
            <button type="submit" class="btn btn-outline-danger w-100"><i class="bi bi-x-circle me-1" aria-hidden="true"></i>Batalkan Pesanan</button>
          </form>
        @endif

        <a href="https://wa.me/{{ config('toko.whatsapp') }}?text={{ rawurlencode('Halo '.config('toko.nama').', saya mau tanya pesanan '.$order->code) }}" target="_blank" rel="noopener" class="btn btn-light-blue w-100 mt-2"><i class="bi bi-whatsapp me-1" aria-hidden="true"></i>Tanya via WhatsApp</a>
      </div>
    </div>
    <a href="{{ route('pesanan.index') }}" class="btn btn-light-blue mt-4"><i class="bi bi-arrow-left me-1" aria-hidden="true"></i>Kembali ke daftar pesanan</a>
  </div>
</section>
@endsection