@extends('layouts.app')

@section('page-title', 'Detail Tagihan')
@section('page-subtitle', 'Tagihan')

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

    <x-page-header eyebrow="Tagihan" :title="$tagihan->nomor_tagihan" subtitle="Periode {{ $tagihan->bulan }}/{{ $tagihan->tahun }}" />

    <div class="stat-grid">
        <x-stat-card label="Tarif Pokok" value="{{ \App\Helpers\NumberHelper::formatRupiah($tagihan->tarif) }}" accent="primary" />
        <x-stat-card label="Denda Saat Ini" value="{{ \App\Helpers\NumberHelper::formatRupiah($denda) }}" accent="danger" />
        <x-stat-card label="Total Tagihan" value="{{ \App\Helpers\NumberHelper::formatRupiah((float) $tagihan->tarif + $denda) }}" accent="accent" />
    </div>

    <div class="panel-grid panel-grid--2">
        <div class="panel">
            <div class="panel__head"><h3>Informasi Tagihan</h3></div>
            <div class="panel__body">
                <div class="detail-list">
                    <div>
                        <div class="detail-item__label">Pelanggan</div>
                        <div class="detail-item__value">{{ $tagihan->pelanggan->nama ?? '-' }}</div>
                    </div>
                    <div>
                        <div class="detail-item__label">No. Pelanggan</div>
                        <div class="detail-item__value mono">{{ $tagihan->pelanggan->nomor_pelanggan ?? '-' }}</div>
                    </div>
                    <div>
                        <div class="detail-item__label">Tanggal Generate</div>
                        <div class="detail-item__value">{{ \App\Helpers\DateHelper::formatTanggal($tagihan->tanggal_generate) }}</div>
                    </div>
                    <div>
                        <div class="detail-item__label">Jatuh Tempo</div>
                        <div class="detail-item__value">{{ \App\Helpers\DateHelper::formatTanggal($tagihan->jatuh_tempo) }}</div>
                    </div>
                    <div>
                        <div class="detail-item__label">Status</div>
                        <div class="detail-item__value">
                            @if ($tagihan->status === 'LUNAS')
                                <x-badge variant="success">Lunas</x-badge>
                            @elseif ($tagihan->status === 'BATAL')
                                <x-badge variant="neutral">Dibatalkan</x-badge>
                            @else
                                <x-badge variant="warning">Belum Bayar</x-badge>
                            @endif
                        </div>
                    </div>
                    @if ($tagihan->keterangan)
                        <div style="grid-column: 1 / -1;">
                            <div class="detail-item__label">Keterangan</div>
                            <div class="detail-item__value" style="font-weight:400;">{{ $tagihan->keterangan }}</div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel__head"><h3>Ubah Status Tagihan</h3></div>
            <div class="panel__body">
                <form method="POST" action="{{ route('tagihan.update', $tagihan->id) }}">
                    @csrf
                    @method('PUT')
                    <div class="form-grid form-grid--single">
                        <div class="field">
                            <label for="status">Status</label>
                            <select id="status" name="status">
                                <option value="BELUM_BAYAR" @selected($tagihan->status === 'BELUM_BAYAR')>Belum Bayar</option>
                                <option value="LUNAS" @selected($tagihan->status === 'LUNAS')>Lunas</option>
                                <option value="BATAL" @selected($tagihan->status === 'BATAL')>Dibatalkan</option>
                            </select>
                            @error('status')<p class="field-error">{{ $message }}</p>@enderror
                        </div>
                        <div class="field">
                            <label for="keterangan">Keterangan</label>
                            <textarea id="keterangan" name="keterangan" rows="3" placeholder="Opsional">{{ old('keterangan', $tagihan->keterangan) }}</textarea>
                            @error('keterangan')<p class="field-error">{{ $message }}</p>@enderror
                        </div>
                    </div>
                    <div class="form-actions" style="border-top:none; padding-top:0;">
                        <button type="submit" class="btn btn--sm">
                            <i data-lucide="check"></i>
                            <span>Simpan Perubahan</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="panel__head">
            <h3>Pembayaran</h3>
        </div>
        <div class="panel__body">
            @if ($tagihan->pembayaran)
                <div class="detail-list">
                    <div>
                        <div class="detail-item__label">No. Kwitansi</div>
                        <div class="detail-item__value mono">{{ $tagihan->pembayaran->nomor_kwitansi }}</div>
                    </div>
                    <div>
                        <div class="detail-item__label">Tanggal Bayar</div>
                        <div class="detail-item__value">{{ \App\Helpers\DateHelper::formatTanggal($tagihan->pembayaran->tanggal_bayar) }}</div>
                    </div>
                    <div>
                        <div class="detail-item__label">Metode</div>
                        <div class="detail-item__value">{{ $tagihan->pembayaran->metode_pembayaran }}</div>
                    </div>
                    <div>
                        <div class="detail-item__label">Total Dibayar</div>
                        <div class="detail-item__value money">{{ \App\Helpers\NumberHelper::formatRupiah($tagihan->pembayaran->total_bayar) }}</div>
                    </div>
                    <div>
                        <div class="detail-item__label">Status</div>
                        <div class="detail-item__value">
                            @if ($tagihan->pembayaran->status === 'BERHASIL')
                                <x-badge variant="success">Berhasil</x-badge>
                            @else
                                <x-badge variant="danger">Dibatalkan</x-badge>
                            @endif
                        </div>
                    </div>
                </div>

                @if ($tagihan->pembayaran->status === 'BERHASIL')
                    <form method="POST" action="{{ route('pembayaran.void') }}" style="margin-top: 18px;" data-confirm="Batalkan pembayaran ini? Tagihan akan kembali berstatus belum bayar.">
                        @csrf
                        <input type="hidden" name="pembayaran_id" value="{{ $tagihan->pembayaran->id }}">
                        <button type="submit" class="btn btn--sm" style="background: var(--color-danger);">
                            <i data-lucide="x-circle"></i>
                            <span>Batalkan Pembayaran</span>
                        </button>
                    </form>
                @endif
            @else
                <p class="text-faint" style="font-size:13px;">Tagihan ini belum memiliki pembayaran.</p>
            @endif
        </div>
    </div>
@endsection