@extends('layouts.master')

@section('title', 'Edit Pembayaran')
@section('page-title', 'Edit Pembayaran Tagihan')

@section('css')
    <link rel="stylesheet" href="{{ URL::asset('/assets/css/pembayaran-form.css') }}">
@endsection

@section('content')
    <div class="pembayaran-form-page">
        <div class="page-head">
            <div>
                <h4 class="mb-1">Edit Pembayaran</h4>
                <small class="text-muted">Perbarui data pembayaran tagihan pelanggan.</small>
            </div>
            <a href="{{ route('pembayaran.index') }}" class="btn btn-outline-secondary">
                <i class="bx bx-arrow-back"></i> Kembali ke Daftar
            </a>
        </div>

        <div class="row g-3">
            <div class="col-12 col-lg-8">
                <div class="card card-soft">
                    <div class="card-body">
                        <form action="{{ route('pembayaran.update', $pembayaran->id) }}" method="post" class="row g-3">
                            @csrf
                            @method('put')

                            <div class="col-12">
                                <div class="section-title">Informasi Tagihan</div>
                                <div class="section-divider"></div>
                            </div>

                            <div class="col-md-4 quick-info">
                                <div class="item">
                                    <div class="label">Pelanggan</div>
                                    <div class="value">
                                        {{ $pembayaran->tagihan->pelanggan->nama ?? '-' }}
                                    </div>
                                    @if ($pembayaran->tagihan?->pelanggan?->kode_pelanggan)
                                        <small class="text-muted">{{ $pembayaran->tagihan->pelanggan->kode_pelanggan }}</small>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-4 quick-info">
                                <div class="item">
                                    <div class="label">Periode</div>
                                    <div class="value">{{ $pembayaran->tagihan->periode?->translatedFormat('F Y') ?? '-' }}</div>
                                </div>
                            </div>
                            <div class="col-md-4 quick-info">
                                <div class="item">
                                    <div class="label">Paket</div>
                                    <div class="value">{{ $pembayaran->tagihan->paketInternet->nama ?? '-' }}</div>
                                </div>
                            </div>

                            <div class="col-12 mt-2">
                                <div class="section-title">Detail Pembayaran</div>
                                <div class="section-divider"></div>
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">Tanggal Bayar <span class="text-danger">*</span></label>
                                <input type="date" name="tanggal_bayar"
                                    class="form-control @error('tanggal_bayar') is-invalid @enderror"
                                    value="{{ old('tanggal_bayar', $pembayaran->tanggal_bayar?->format('Y-m-d')) }}">
                                @error('tanggal_bayar')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">Nominal Bayar <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="text" name="nominal_bayar"
                                        class="form-control text-mono @error('nominal_bayar') is-invalid @enderror"
                                        value="{{ old('nominal_bayar', number_format((float) $pembayaran->nominal_bayar, 0, ',', '.')) }}"
                                        data-terbilang="true" autocomplete="off">
                                </div>
                                @error('nominal_bayar')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">Metode</label>
                                <input type="text" name="metode" class="form-control @error('metode') is-invalid @enderror"
                                    value="{{ old('metode', $pembayaran->metode) }}" placeholder="Cash / Transfer / QRIS">
                                @error('metode')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">Referensi</label>
                                <input type="text" name="referensi" class="form-control @error('referensi') is-invalid @enderror"
                                    value="{{ old('referensi', $pembayaran->referensi) }}" placeholder="No bukti / VA / dsb.">
                                @error('referensi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 mt-2">
                                <div class="section-title">Catatan</div>
                                <div class="section-divider"></div>
                            </div>

                            <div class="col-12">
                                <label class="form-label">Catatan</label>
                                <textarea name="catatan" rows="3" class="form-control @error('catatan') is-invalid @enderror"
                                    placeholder="Catatan tambahan pembayaran...">{{ old('catatan', $pembayaran->catatan) }}</textarea>
                                @error('catatan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 mt-2 d-flex justify-content-end gap-2">
                                <button class="btn btn-primary">
                                    <i class="bx bx-save"></i> Simpan Perubahan
                                </button>
                                <a href="{{ route('pembayaran.index') }}" class="btn btn-light">
                                    Batal
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-4">
                <div class="card card-soft">
                    <div class="card-body">
                        <div class="section-title">Catatan Proses</div>
                        <div class="section-divider"></div>
                        <ul class="hint-text mb-0 ps-3">
                            <li class="mb-2">Perubahan nominal akan menghitung ulang status tagihan.</li>
                            <li class="mb-2">Gunakan referensi untuk pencocokan bukti transfer.</li>
                            <li>Pastikan tanggal bayar sesuai tanggal transaksi yang valid.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection