@extends('layouts.app')

@section('title', 'فاتورة جديدة')

@section('content')
<x-page-header title="فاتورة جديدة" />

<form id="invoiceForm">
    @csrf
    <div class="row row-cards">
        <div class="col-lg-8">
            <x-card title="بيانات الفاتورة">
                <div class="mb-3">
                    <label class="form-label">المريض <span class="text-danger">*</span></label>
                    <input type="text" id="invPatientSearch" class="form-control" placeholder="ابحث..." autocomplete="off">
                    <input type="hidden" name="patient_id" id="invPatientId">
                    <div class="dropdown-menu w-100 p-0" id="invPatientResults" style="max-height:240px;overflow-y:auto;"></div>
                    <div id="invSelectedPatient" class="text-success small d-none mt-1"></div>
                </div>
                <div class="row">
                    <div class="col-md-6"><x-form-input name="issue_date" label="تاريخ الإصدار" type="date" :value="now()->toDateString()" required /></div>
                    <div class="col-md-6"><x-form-input name="due_date" label="تاريخ الاستحقاق" type="date" :value="now()->addDays(14)->toDateString()" /></div>
                </div>
            </x-card>

            <x-card title="بنود الفاتورة" class="mt-3">
                <table class="table" id="itemsTable">
                    <thead>
                        <tr><th style="width:30%;">الخدمة / الوصف</th><th>الكمية</th><th>السعر</th><th>الخصم</th><th>الإجمالي</th><th></th></tr>
                    </thead>
                    <tbody id="itemsRows"></tbody>
                </table>
                <button type="button" class="btn btn-outline-primary btn-sm" id="addItemRow"><i class="ti ti-plus me-1"></i> إضافة بند</button>
            </x-card>

            <x-card title="ملاحظات" class="mt-3"><x-form-textarea name="notes" rows="3" /></x-card>
        </div>

        <div class="col-lg-4">
            <div class="position-sticky" style="top:90px;">
                <x-card title="الإجماليات">
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label small">نوع الخصم</label>
                            <select name="discount_type" class="form-select form-select-sm" id="discountType">
                                <option value="fixed">مبلغ ثابت</option>
                                <option value="percent">نسبة %</option>
                            </select>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label small">قيمة الخصم</label>
                            <input type="number" name="discount_value" id="discountValue" value="0" step="0.01" class="form-control form-control-sm">
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label small">نسبة الضريبة %</label>
                            <input type="number" name="tax_rate" id="taxRate" value="0" step="0.01" class="form-control form-control-sm">
                            <small id="taxAutoNote" class="form-hint text-warning d-none">
                                <i class="ti ti-info-circle"></i> طُبّقت ضريبة 15% — مريض غير سعودي.
                            </small>
                        </div>
                    </div>

                    <hr>
                    <div class="d-flex justify-content-between"><span>المجموع الفرعي</span><strong id="totSubtotal">0.00</strong></div>
                    <div class="d-flex justify-content-between text-warning"><span>الخصم</span><strong id="totDiscount">0.00</strong></div>
                    <div class="d-flex justify-content-between"><span>الضريبة</span><strong id="totTax">0.00</strong></div>
                    <hr>
                    <div class="d-flex justify-content-between fs-3"><span>الإجمالي</span><strong id="totGrand">0.00</strong></div>

                    <div class="mt-3">
                        <button type="button" class="btn btn-outline-secondary w-100 mb-2" data-status="draft">حفظ كمسودة</button>
                        <button type="button" class="btn btn-primary w-100" data-status="sent">حفظ + إرسال</button>
                    </div>
                </x-card>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
const services = @json($services);
const CURRENCY_CODE = @json(\App\Support\Currency::current());

let rowIdx = 0;
function addRow(serviceId = null) {
    const i = rowIdx++;
    const opts = services.map(s => `<option value="${s.id}" data-price="${s.price}" data-name="${s.name}">${s.name} (${s.price} ${CURRENCY_CODE})</option>`).join('');
    $('#itemsRows').append(`
        <tr data-row="${i}">
            <td>
                <select name="items[${i}][service_id]" class="form-select form-select-sm svc-select">
                    <option value="">— اختر من الكتالوج أو اكتب —</option>${opts}
                </select>
                <input name="items[${i}][description]" class="form-control form-control-sm mt-1 desc" placeholder="وصف">
            </td>
            <td><input name="items[${i}][quantity]" class="form-control form-control-sm qty" type="number" value="1" step="0.01" min="0.01"></td>
            <td><input name="items[${i}][unit_price]" class="form-control form-control-sm price" type="number" value="0" step="0.01"></td>
            <td><input name="items[${i}][discount]" class="form-control form-control-sm disc" type="number" value="0" step="0.01"></td>
            <td class="text-end line-total">0.00</td>
            <td><button type="button" class="btn btn-sm btn-outline-danger del"><i class="ti ti-x"></i></button></td>
        </tr>
    `);
    if (serviceId) $('#itemsRows tr:last .svc-select').val(serviceId).trigger('change');
}
addRow();

$('#addItemRow').on('click', () => addRow());
$(document).on('click', '#itemsRows .del', function () { $(this).closest('tr').remove(); recalc(); });
$(document).on('change', '.svc-select', function () {
    const $row = $(this).closest('tr');
    const $opt = $(this).find(':selected');
    if ($opt.val()) {
        $row.find('.desc').val($opt.data('name'));
        $row.find('.price').val($opt.data('price'));
    }
    recalc();
});
$(document).on('input', '.qty, .price, .disc, #discountType, #discountValue, #taxRate', recalc);

function recalc() {
    const items = $('#itemsRows tr').map(function () {
        const qty = parseFloat($(this).find('.qty').val()) || 0;
        const price = parseFloat($(this).find('.price').val()) || 0;
        const disc = parseFloat($(this).find('.disc').val()) || 0;
        const total = Math.max(0, qty * price - disc);
        $(this).find('.line-total').text(total.toFixed(2));
        return { quantity: qty, unit_price: price, discount: disc };
    }).get();

    const dt = $('#discountType').val(), dv = parseFloat($('#discountValue').val()) || 0;
    const tr = parseFloat($('#taxRate').val()) || 0;

    $.post(@json(route('invoices.calculate')), {
        _token: $('meta[name="csrf-token"]').attr('content'),
        items, discount_type: dt, discount_value: dv, tax_rate: tr,
    }).done(res => {
        $('#totSubtotal').text(res.subtotal.toFixed(2));
        $('#totDiscount').text(res.discount_amount.toFixed(2));
        $('#totTax').text(res.tax_amount.toFixed(2));
        $('#totGrand').text(res.total.toFixed(2));
    });
}

// Patient search
let pSearchTimer;
$('#invPatientSearch').on('input', function () {
    clearTimeout(pSearchTimer);
    const q = $(this).val();
    if (q.length < 2) return;
    pSearchTimer = setTimeout(() => {
        $.getJSON(@json(route('patients.search')), { q }).done(res => {
            $('#invPatientResults').html(res.data.map(p => `
                <a href="#" class="dropdown-item"
                   data-pid="${p.id}"
                   data-pname="${p.name}"
                   data-pfile="${p.file_number}"
                   data-pnat="${p.nationality || 'saudi'}">
                    <strong>${p.name}</strong><div class="small text-muted">${p.file_number}</div>
                </a>`).join('')).addClass('show');
        });
    }, 300);
});
$(document).on('click', '#invPatientResults [data-pid]', function (e) {
    e.preventDefault();
    const $row = $(this);
    $('#invPatientId').val($row.data('pid'));
    $('#invPatientSearch').val($row.data('pname'));
    $('#invSelectedPatient').removeClass('d-none').text(`${$row.data('pname')} · ${$row.data('pfile')}`);
    $('#invPatientResults').empty().removeClass('show');

    // Auto-apply 15% VAT for non-Saudi patients.
    const isNonSaudi = $row.data('pnat') === 'non_saudi';
    $('#taxRate').val(isNonSaudi ? 15 : 0);
    $('#taxAutoNote').toggleClass('d-none', !isNonSaudi);
    recalc();
});

// Save
$(document).on('click', '[data-status]', function () {
    const status = $(this).data('status');
    const $btn = $(this).prop('disabled', true);
    $.ajax({
        url: @json(route('invoices.store')),
        method: 'POST',
        data: $('#invoiceForm').serialize() + '&status=' + status,
        globalErrorHandled: true,
    }).done(res => { Notify.success(res.message); window.location.href = res.redirect; })
      .fail(xhr => { Notify.error(xhr.responseJSON?.message || 'تعذر الحفظ.'); $btn.prop('disabled', false); });
});
</script>
@endpush