@extends('layouts.app')
@section('title', 'Buat Tanda Terima')
@section('page-title', 'Buat Tanda Terima')

@push('styles')
<style>
    .input-rp-group { position: relative; }
    .input-rp-group .rp-label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #6c757d; z-index: 10; font-size: 0.9rem; pointer-events: none; }
    .input-rp-group input { padding-left: 35px !important; }
</style>
@endpush

@section('content')
<div class="row mb-3">
    <div class="col-sm-12 d-flex align-items-center">
        <a href="{{ route('receipts.index') }}" class="btn btn-sm btn-outline-secondary mr-2"><i class="fas fa-arrow-left"></i></a>
        <h5 class="mb-0 font-weight-bold">Buat Tanda Terima Baru</h5>
    </div>
</div>

<div class="row">
    <div class="col-md-7">
        <form method="POST" action="{{ route('receipts.store') }}" id="receipt-form">
        @csrf
        <div class="card card-primary card-outline mb-3">
            <div class="card-header">
                <h3 class="card-title">Pilih Invoice</h3>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label>Invoice <span class="text-danger">*</span></label>
                    <select name="invoice_id" class="form-control select2" required id="invoice-select">
                        <option value="">-- Pilih Invoice --</option>
                        @foreach($invoices as $inv)
                            <option value="{{ $inv->id }}"
                                data-customer="{{ $inv->customer->name }}"
                                data-total="{{ $inv->total }}"
                                @selected(old('invoice_id', $invoice?->id) == $inv->id)>
                                {{ $inv->invoice_number }} — {{ $inv->customer->name }} (Rp {{ number_format($inv->total, 0, ',', '.') }})
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Preview info invoice terpilih --}}
                <div id="invoice-preview" class="alert alert-info d-none py-2 mt-3">
                    <div class="row">
                        <div class="col-6"><span class="small">Pelanggan</span><br><strong id="prev-customer">-</strong></div>
                        <div class="col-6 text-right"><span class="small">Total Invoice</span><br><strong id="prev-total">-</strong></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card card-info card-outline mb-3">
            <div class="card-header">
                <h3 class="card-title">Detail Penerimaan</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>No. Tanda Terima</label>
                            <input type="text" class="form-control" value="{{ $number }}" readonly>
                            <small class="form-text text-muted">Otomatis digenerate</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Tanggal <span class="text-danger">*</span></label>
                            <input type="date" name="receipt_date" class="form-control" value="{{ old('receipt_date', now()->format('Y-m-d')) }}" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Jumlah Diterima <span class="text-danger">*</span></label>
                            <div class="input-rp-group">
                                <span class="rp-label">Rp</span>
                                <input type="text" name="amount_received" class="form-control currency-input" value="{{ old('amount_received') }}" required placeholder="0">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Metode Pembayaran</label>
                            <select name="payment_method" class="form-control">
                                <option value="">-- Pilih --</option>
                                <option value="Tunai" @selected(old('payment_method')=='Tunai')>Tunai</option>
                                <option value="Transfer Bank" @selected(old('payment_method')=='Transfer Bank')>Transfer Bank</option>
                                <option value="QRIS" @selected(old('payment_method')=='QRIS')>QRIS</option>
                                <option value="Cek/Giro" @selected(old('payment_method')=='Cek/Giro')>Cek / Giro</option>
                                <option value="Lainnya" @selected(old('payment_method')=='Lainnya')>Lainnya</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-group">
                            <label>Catatan</label>
                            <textarea name="notes" class="form-control" rows="3" placeholder="Catatan tambahan...">{{ old('notes') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-4">
            <button type="submit" class="btn btn-success">
                <i class="fas fa-save"></i> Simpan Tanda Terima
            </button>
            <a href="{{ route('receipts.index') }}" class="btn btn-outline-secondary ml-1">Batal</a>
        </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
const invoiceSelect = document.getElementById('invoice-select');
const preview = document.getElementById('invoice-preview');

function updatePreview() {
    const opt = invoiceSelect.options[invoiceSelect.selectedIndex];
    if (opt.value) {
        document.getElementById('prev-customer').textContent = opt.dataset.customer;
        document.getElementById('prev-total').textContent = 'Rp ' + parseFloat(opt.dataset.total).toLocaleString('id-ID');
        preview.classList.remove('d-none');
    } else {
        preview.classList.add('d-none');
    }
}

invoiceSelect.addEventListener('change', updatePreview);
updatePreview(); // init jika ada pre-selected

// Digit Formatting
function parseCurrency(val) {
    if (!val) return 0;
    return parseFloat(val.toString().replace(/\./g, '').replace(/,/g, '.')) || 0;
}

document.addEventListener('input', e => {
    if (e.target.classList.contains('currency-input')) {
        let val = e.target.value.replace(/\D/g, '');
        if (val === '') {
            e.target.value = '';
        } else {
            e.target.value = parseInt(val, 10).toLocaleString('id-ID');
        }
    }
});

document.getElementById('receipt-form').addEventListener('submit', function(e) {
    document.querySelectorAll('.currency-input').forEach(input => {
        if (input.value) {
            input.value = parseCurrency(input.value);
        }
    });
});
</script>
@endpush