@extends('layouts.app')
@section('title', 'Transaksi Penjualan Baru')

@section('content')
@php $penjualan = new \App\Models\Penjualan(['metode' => 'cash']); @endphp
<form method="POST" action="{{ route('penjualan.store') }}">
    @csrf
    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header bg-white fw-semibold">1. Unit & Pembeli</div>
                <div class="card-body">
                    @php
                        $unitTerpilih = old('unit_rumah_id', $selectedUnit);
                        $perumahanTerpilih = old('perumahan_id', $units->firstWhere('id', $unitTerpilih)?->perumahan_id);
                        $daftarPerumahan = $units->groupBy('perumahan_id')->map(fn ($list) => $list->first()->perumahan)->sortBy('nama');
                        $dataUnit = $units->map(fn ($u) => [
                            'id' => $u->id, 'perumahan_id' => $u->perumahan_id, 'label' => $u->label, 'tipe' => $u->tipe,
                            'lt' => $u->luas_tanah, 'lb' => $u->luas_bangunan, 'kt' => $u->kamar_tidur, 'km' => $u->kamar_mandi,
                            'harga' => (int) $u->harga, 'ket' => $u->keterangan,
                        ])->values();
                    @endphp
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Lokasi Perumahan <span class="text-danger">*</span></label>
                            <select name="perumahan_id" id="perumahan_id" class="form-select" required>
                                <option value="">— Pilih perumahan —</option>
                                @foreach($daftarPerumahan as $p)
                                    <option value="{{ $p->id }}" @selected($perumahanTerpilih == $p->id)>
                                        {{ $p->nama }} — {{ $p->kota }} ({{ $units->where('perumahan_id', $p->id)->count() }} unit tersedia)
                                    </option>
                                @endforeach
                            </select>
                            @if($units->isEmpty())<small class="text-danger">Tidak ada unit yang tersedia.</small>@endif
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Unit Rumah Tersedia <span class="text-danger">*</span></label>
                            <select name="unit_rumah_id" id="unit_rumah_id" class="form-select @error('unit_rumah_id') is-invalid @enderror" required disabled>
                                <option value="">— Pilih perumahan dahulu —</option>
                            </select>
                        </div>
                    </div>
                    <div id="info_unit" class="alert alert-light border small d-none"></div>
                    <div class="mb-0">
                        <label class="form-label">Pembeli <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <select name="pembeli_id" id="pembeli_id" class="form-select @error('pembeli_id') is-invalid @enderror" required
                                    data-cari="{{ route('pembeli.cari') }}" placeholder="Ketik nama atau NIK pembeli…">
                                <option value="">— Pilih pembeli —</option>
                                @foreach($pembeli as $p)
                                    <option value="{{ $p->id }}" data-nik="{{ $p->nik }}" data-telepon="{{ $p->telepon }}" @selected(old('pembeli_id', $selectedPembeli) == $p->id)>{{ $p->nama }} ({{ $p->nik }})</option>
                                @endforeach
                            </select>
                            <a href="{{ route('pembeli.create') }}" class="btn btn-outline-primary" target="_blank"><i class="bi bi-person-plus"></i> Baru</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header bg-white fw-semibold">2. Harga & Skema Pembayaran</div>
                <div class="card-body">
                    @include('penjualan._fields')
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header bg-white fw-semibold">3. Booking Fee (opsional)</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Jumlah Booking Fee (Rp)</label>
                        <input type="text" inputmode="numeric" data-uang name="booking_fee" value="{{ old('booking_fee') }}" class="form-control @error('booking_fee') is-invalid @enderror">
                        <small class="text-muted">Akan tercatat otomatis sebagai pembayaran pertama.</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Cara Bayar</label>
                        <select name="cara_bayar" class="form-select">
                            <option value="transfer" @selected(old('cara_bayar') == 'transfer')>Transfer</option>
                            <option value="tunai" @selected(old('cara_bayar') == 'tunai')>Tunai</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="d-grid gap-2 mt-3">
                <button class="btn btn-primary btn-lg"><i class="bi bi-save"></i> Simpan Transaksi</button>
                <a href="{{ route('penjualan.index') }}" class="btn btn-light">Batal</a>
            </div>
        </div>
    </div>
</form>
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<style>
    .ts-wrapper.form-select { flex: 1 1 auto; width: 1%; }
    .ts-dropdown .nik { font-family: var(--bs-font-monospace); }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
<script>
// Pilih pembeli dengan pencarian nama / NIK / telepon (data dicari ke server saat mengetik)
(() => {
    const el = document.getElementById('pembeli_id');
    if (!el || typeof TomSelect === 'undefined') return;   // tanpa CDN: tetap select biasa
    const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
    const awal = [...el.options].filter(o => o.value).map(o => ({
        id: o.value, nama: o.text.replace(/\s*\([^)]*\)\s*$/, ''), nik: o.dataset.nik, telepon: o.dataset.telepon,
    }));
    const terpilih = el.value;
    [...el.options].forEach(o => { if (o.value && o.value !== terpilih) o.remove(); });

    new TomSelect(el, {
        valueField: 'id',
        labelField: 'nama',
        searchField: ['nama', 'nik', 'telepon'],
        options: awal,
        maxOptions: 50,
        loadThrottle: 250,
        preload: 'focus',
        load(query, callback) {
            fetch(el.dataset.cari + '?q=' + encodeURIComponent(query), { headers: { Accept: 'application/json' } })
                .then(r => r.json()).then(callback).catch(() => callback());
        },
        render: {
            option: d => `<div><div class="fw-semibold">${esc(d.nama)}</div><small class="text-muted">NIK <span class="nik">${esc(d.nik)}</span>${d.telepon ? ' · ' + esc(d.telepon) : ''}</small></div>`,
            item: d => `<div>${esc(d.nama)} <small class="text-muted ms-1">NIK ${esc(d.nik)}</small></div>`,
            no_results: () => '<div class="no-results text-muted p-2">Pembeli tidak ditemukan. Klik <strong>Baru</strong> untuk menambah pembeli.</div>',
            loading: () => '<div class="p-2 text-muted small">Mencari…</div>',
        },
    });
})();
</script>
@endpush

@push('scripts')
<script>
(() => {
    const units = @json($dataUnit);
    const selPerumahan = document.getElementById('perumahan_id');
    const selUnit = document.getElementById('unit_rumah_id');
    const info = document.getElementById('info_unit');
    const fmt = n => 'Rp ' + Math.round(n).toLocaleString('id-ID');

    // Isi ulang daftar unit sesuai perumahan yang dipilih
    const isiUnit = (pilih = '') => {
        const list = units.filter(u => String(u.perumahan_id) === selPerumahan.value);
        selUnit.innerHTML = '';
        selUnit.add(new Option(selPerumahan.value ? `— Pilih unit (${list.length} tersedia) —` : '— Pilih perumahan dahulu —', ''));
        list.forEach(u => {
            const opt = new Option(`${u.label} — ${u.tipe} — ${fmt(u.harga)}`, u.id, false, String(u.id) === String(pilih));
            selUnit.add(opt);
        });
        selUnit.disabled = !selPerumahan.value;
        tampilInfo();
    };

    // Ringkasan unit terpilih
    const tampilInfo = () => {
        const u = units.find(x => String(x.id) === selUnit.value);
        info.classList.toggle('d-none', !u);
        if (!u) return;
        info.innerHTML = `<i class="bi bi-house-door text-primary"></i> <strong>${u.label}</strong> · ${u.tipe}
            · LT ${u.lt} m² / LB ${u.lb} m² · ${u.kt} KT / ${u.km} KM
            · <strong>${fmt(u.harga)}</strong>${u.ket ? ` · <em>${u.ket}</em>` : ''}`;
    };

    selPerumahan.addEventListener('change', () => isiUnit());
    selUnit.addEventListener('change', () => {
        tampilInfo();
        const u = units.find(x => String(x.id) === selUnit.value);
        if (u) { setUang(document.getElementById('harga_jual'), u.harga); window.hitungTotal(); }
    });

    isiUnit(@json((string) $unitTerpilih));
    @if(!old('harga_jual') && $selectedUnit)
        selUnit.dispatchEvent(new Event('change'));
    @endif
})();
</script>
@endpush