@extends('layouts.master')

@section('title', 'Tambah Pembayaran')
@section('page-title', 'Tambah 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">Tambah Pembayaran</h4>
                <small class="text-muted">
                    Input pembayaran tagihan pelanggan dengan teliti. Nilai angka dibantu format ribuan dan teks terbilang.
                </small>
            </div>
            <a href="{{ route('pembayaran.index') }}" class="btn btn-outline-secondary">
                <i class="bx bx-arrow-back"></i> Kembali
            </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.store') }}" method="post" class="row g-3">
                            @csrf

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

                            <div class="col-md-8">
                                <label class="form-label">Tagihan <span class="text-danger">*</span></label>
                                <select name="tagihan_id" class="form-select @error('tagihan_id') is-invalid @enderror">
                                    <option value="">-- Pilih Tagihan --</option>
                                    @foreach ($tagihanList as $t)
                                        @php
                                            $label =
                                                ($t->pelanggan->nama ?? '-') .
                                                ' • ' .
                                                ($t->periode?->translatedFormat('M Y') ?? '') .
                                                ' • Rp ' .
                                                number_format($t->total_tagihan, 0, ',', '.');
                                        @endphp
                                        <option value="{{ $t->id }}" @selected(old('tagihan_id', $tagihan->id ?? null) == $t->id)>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('tagihan_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="hint-text mt-1">
                                    Pilih tagihan berdasarkan nama pelanggan, periode, dan nilai tagihan.
                                </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-4">
                                <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', now()->format('Y-m-d')) }}">
                                @error('tanggal_bayar')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <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', $tagihan ? number_format((int) $tagihan->total_tagihan, 0, ',', '.') : '') }}"
                                        data-terbilang="true" autocomplete="off">
                                </div>
                                @error('nominal_bayar')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <div class="hint-text mt-1">
                                    Angka akan diformat otomatis untuk membantu validasi input.
                                </div>
                            </div>

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

                            <div class="col-md-6">
                                <label class="form-label">Referensi</label>
                                <input type="text" name="referensi"
                                    class="form-control @error('referensi') is-invalid @enderror"
                                    value="{{ old('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 (opsional)...">{{ old('catatan') }}</textarea>
                                @error('catatan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 d-flex justify-content-end mt-2">
                                <button class="btn btn-primary me-2">
                                    <i class="bx bx-save"></i> Simpan
                                </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">Petunjuk Singkat</div>
                        <div class="section-divider"></div>
                        <ul class="hint-text mb-0 ps-3">
                            <li class="mb-2">Pastikan tagihan sesuai pelanggan dan periode.</li>
                            <li class="mb-2">Nominal bayar diformat otomatis untuk meminimalkan salah input.</li>
                            <li class="mb-2">Simpan bukti transfer pada kolom referensi.</li>
                            <li>Status tagihan akan diperbarui otomatis setelah simpan.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection