@extends('layouts.app')

@section('page-title', 'Catat Pembayaran')
@section('page-subtitle', 'Pembayaran')

@section('content')
    <a href="{{ route('pembayaran.index') }}" class="back-link">
        <i data-lucide="arrow-left"></i>
        <span>Kembali ke riwayat pembayaran</span>
    </a>

    <x-page-header eyebrow="Pembayaran" title="Catat Pembayaran Baru" />

    @if (! $tagihan)
        <div class="panel">
            <div class="panel__head">
                <div>
                    <h3>Cari Tagihan</h3>
                    <p class="panel__head-sub">Masukkan ID tagihan yang akan dibayar. ID tagihan dapat dilihat pada slip atau data pelanggan.</p>
                </div>
            </div>
            <div class="panel__body">
                <form method="GET" action="{{ route('pembayaran.create') }}" style="display:flex; gap:10px; max-width:420px; flex-wrap:wrap;">
                    <div class="field" style="flex:1; min-width:200px; margin-bottom:0;">
                        <label for="tagihan_id">ID Tagihan</label>
                        <input type="text" id="tagihan_id" name="tagihan_id" placeholder="Contoh: 128">
                    </div>
                    <div style="align-self:flex-end;">
                        <button type="submit" class="btn">
                            <i data-lucide="search"></i>
                            <span>Cari</span>
                        </button>
                    </div>
                </form>
                @if (request()->filled('tagihan_id'))
                    <div class="alert alert--error" style="margin-top:18px;">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.25" /><path d="M12 7.5v5.5M12 16.25h.01" /></svg>
                        <span>Tagihan tidak ditemukan. Periksa kembali ID tagihan yang dimasukkan.</span>
                    </div>
                @endif
            </div>
        </div>
    @else
        @php
            $denda = $tagihan->calculateDenda();
            $total = (float) $tagihan->tarif + $denda;
        @endphp

        @if ($tagihan->status !== 'BELUM_BAYAR')
            <div class="alert alert--error">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9.25" /><path d="M12 7.5v5.5M12 16.25h.01" /></svg>
                <span>Tagihan ini tidak dapat dibayar karena berstatus {{ $tagihan->status === 'LUNAS' ? 'Lunas' : 'Dibatalkan' }}.</span>
            </div>
        @else
            <div class="panel">
                <div class="panel__head"><h3>Detail Tagihan</h3></div>
                <div class="panel__body">
                    <div class="detail-list">
                        <div>
                            <div class="detail-item__label">No. Tagihan</div>
                            <div class="detail-item__value mono">{{ $tagihan->nomor_tagihan }}</div>
                        </div>
                        <div>
                            <div class="detail-item__label">Pelanggan</div>
                            <div class="detail-item__value">{{ $tagihan->pelanggan->nama ?? '-' }}</div>
                        </div>
                        <div>
                            <div class="detail-item__label">Alamat</div>
                            <div class="detail-item__value" style="font-weight:400;">{{ $tagihan->pelanggan->kelurahan->nama ?? '-' }}, {{ $tagihan->pelanggan->kecamatan->nama ?? '-' }}</div>
                        </div>
                        <div>
                            <div class="detail-item__label">Periode</div>
                            <div class="detail-item__value">{{ $tagihan->bulan }}/{{ $tagihan->tahun }}</div>
                        </div>
                        <div>
                            <div class="detail-item__label">Tarif Pokok</div>
                            <div class="detail-item__value money">{{ \App\Helpers\NumberHelper::formatRupiah($tagihan->tarif) }}</div>
                        </div>
                        <div>
                            <div class="detail-item__label">Denda</div>
                            <div class="detail-item__value money">{{ \App\Helpers\NumberHelper::formatRupiah($denda) }}</div>
                        </div>
                        <div>
                            <div class="detail-item__label">Total Dibayar</div>
                            <div class="detail-item__value money" style="color: var(--color-primary); font-size:17px;">{{ \App\Helpers\NumberHelper::formatRupiah($total) }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel">
                <div class="panel__head"><h3>Form Pembayaran</h3></div>
                <div class="panel__body">
                    <form method="POST" action="{{ route('pembayaran.store') }}">
                        @csrf
                        <input type="hidden" name="tagihan_id" value="{{ $tagihan->id }}">
                        <input type="hidden" name="nominal_bayar" value="{{ $total }}">
                        <div class="form-grid form-grid--single">
                            <div class="field">
                                <label for="tanggal_bayar">Tanggal Bayar</label>
                                <input type="date" id="tanggal_bayar" name="tanggal_bayar" value="{{ old('tanggal_bayar', now()->format('Y-m-d')) }}">
                                @error('tanggal_bayar')<p class="field-error">{{ $message }}</p>@enderror
                            </div>
                            <div class="field">
                                <label for="metode_pembayaran">Metode Pembayaran</label>
                                <select id="metode_pembayaran" name="metode_pembayaran">
                                    <option value="Tunai">Tunai</option>
                                    <option value="Transfer">Transfer</option>
                                    <option value="QRIS">QRIS</option>
                                    <option value="Lainnya">Lainnya</option>
                                </select>
                                @error('metode_pembayaran')<p class="field-error">{{ $message }}</p>@enderror
                            </div>
                            <div class="field">
                                <label>Nominal Dibayar</label>
                                <input type="text" value="{{ \App\Helpers\NumberHelper::formatRupiah($total) }}" disabled style="background: var(--color-paper); font-family: var(--font-mono); font-weight:600;">
                                <p class="field-hint">Nominal mengikuti total tagihan, tidak dapat diubah.</p>
                                @error('nominal_bayar')<p class="field-error">{{ $message }}</p>@enderror
                            </div>
                            <div class="field field--span-2">
                                <label for="keterangan">Keterangan</label>
                                <textarea id="keterangan" name="keterangan" rows="2" placeholder="Opsional">{{ old('keterangan') }}</textarea>
                            </div>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn" data-confirm-inline="Simpan pembayaran sejumlah {{ \App\Helpers\NumberHelper::formatRupiah($total) }}?">
                                <i data-lucide="check"></i>
                                <span>Simpan Pembayaran</span>
                            </button>
                            <a href="{{ route('pembayaran.create') }}" class="btn btn--ghost">Batal</a>
                        </div>
                    </form>
                </div>
            </div>
        @endif
    @endif
@endsection