@extends('layouts.app')

@section('title', 'فاتورة شراء جديدة')
@section('page_title', 'فاتورة شراء جديدة')
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('purchases.index') }}">{{ __('messages.purchases') }}</a></li>
<li class="breadcrumb-item active">إضافة</li>
@endsection

@push('styles')
<style>
.pur-cart-table th, .pur-cart-table td { padding: .35rem .4rem; vertical-align: middle; }
.pur-cart-table input, .pur-cart-table select { padding: .15rem .35rem; height: 32px; font-size: .85rem; }
</style>
@endpush

@section('content')
<form action="{{ route('purchases.store') }}" method="POST" id="pur-form" autocomplete="off">
    @csrf
    @if ($errors->any())<div class="alert alert-danger">@foreach ($errors->all() as $e)<div>{{ $e }}</div>@endforeach</div>@endif

    <div class="card">
        <div class="card-header"><h5 class="m-0">بيانات الفاتورة</h5></div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3 form-group"><label>الصيدلية <span class="text-danger">*</span></label>
                    <select name="pharmacy_id" id="pharmacy_id" class="form-control select2" required>
                        @foreach ($pharmacies as $p)
                            <option value="{{ $p->id }}" {{ old('pharmacy_id', $p->is_main ? $p->id : null) == $p->id ? 'selected' : '' }}>{{ $p->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 form-group"><label>المورد <span class="text-danger">*</span></label>
                    <select name="supplier_id" class="form-control select2" required>
                        <option value="">— اختر —</option>
                        @foreach ($suppliers as $s)
                            <option value="{{ $s->id }}" {{ old('supplier_id') == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 form-group"><label>رقم فاتورة المورد</label>
                    <input type="text" name="supplier_invoice_no" class="form-control" value="{{ old('supplier_invoice_no') }}"></div>
                <div class="col-md-2 form-group"><label>التاريخ <span class="text-danger">*</span></label>
                    <input type="date" name="purchase_date" class="form-control" value="{{ old('purchase_date', date('Y-m-d')) }}" required></div>

                <div class="col-md-3 form-group"><label>طريقة الدفع</label>
                    <select name="payment_method" class="form-control">
                        @foreach (['cash' => 'نقدى', 'credit' => 'آجل', 'mixed' => 'مختلط'] as $k => $v)
                            <option value="{{ $k }}" {{ old('payment_method', 'credit') === $k ? 'selected' : '' }}>{{ $v }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 form-group"><label>تاريخ الاستحقاق</label>
                    <input type="date" name="due_date" class="form-control" value="{{ old('due_date') }}"></div>
                <div class="col-md-2 form-group"><label>شحن</label>
                    <input type="number" step="0.01" min="0" name="shipping_amount" class="form-control" value="{{ old('shipping_amount', 0) }}"></div>
                <div class="col-md-2 form-group"><label>تكاليف أخرى</label>
                    <input type="number" step="0.01" min="0" name="other_charges" class="form-control" value="{{ old('other_charges', 0) }}"></div>
                <div class="col-md-3 form-group"><label>{{ __('messages.notes') }}</label>
                    <input type="text" name="notes" class="form-control" value="{{ old('notes') }}"></div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="m-0">بنود الفاتورة</h5>
            <div class="position-relative" style="width: 350px">
                <input type="text" id="item-search" class="form-control" placeholder="ابحث عن صنف للإضافة …">
                <div id="search-results" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 250px; overflow-y: auto; background: #fff; border: 1px solid #ddd; z-index: 1000; display: none;"></div>
            </div>
        </div>
        <div class="card-body p-0">
            <table class="table table-bordered pur-cart-table m-0" id="lines-table">
                <thead class="thead-light">
                    <tr>
                        <th width="3%">#</th>
                        <th width="18%">الصنف</th>
                        <th width="9%">الوحدة</th>
                        <th width="10%">رقم التشغيلة</th>
                        <th width="9%">الصلاحية</th>
                        <th width="6%">الكمية</th>
                        <th width="5%">هدية</th>
                        <th width="8%">تكلفة الوحدة</th>
                        <th width="6%">خصم %</th>
                        <th width="6%">ضريبة %</th>
                        <th width="8%">سعر بيع جديد</th>
                        <th width="8%">إجمالى</th>
                        <th width="4%"></th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            <div class="text-muted text-center p-4" id="empty-msg">ابحث عن صنف من فوق علشان تبدأ.</div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-9"></div>
                <div class="col-md-3">
                    <table class="table table-sm">
                        <tr><td>الإجمالى الفرعى</td><td class="text-left"><span id="t-subtotal">0.00</span></td></tr>
                        <tr><td>الخصم</td><td class="text-left"><span id="t-discount">0.00</span></td></tr>
                        <tr><td>الضريبة</td><td class="text-left"><span id="t-tax">0.00</span></td></tr>
                        <tr class="font-weight-bold"><td>الإجمالى</td><td class="text-left text-success"><span id="t-total">0.00</span></td></tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="card-footer">
            <button type="submit" name="confirm" value="0" class="btn btn-primary"><i class="fas fa-save"></i> حفظ كمسوّدة</button>
            <button type="submit" name="confirm" value="1" class="btn btn-success"><i class="fas fa-check"></i> حفظ وتأكيد (إدخال للمخزون)</button>
            <a href="{{ route('purchases.index') }}" class="btn btn-secondary">{{ __('messages.cancel') }}</a>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
const lines = [];
let lineIdx = 0;

let searchTimer;
$('#item-search').on('input', function () {
    const q = $(this).val().trim();
    clearTimeout(searchTimer);
    if (q.length < 2) { $('#search-results').hide(); return; }
    searchTimer = setTimeout(() => $.get('{{ route('items.search') }}', { q, pharmacy_id: $('#pharmacy_id').val() }, (res) => {
        const $r = $('#search-results').empty();
        if (!res.data.length) { $r.append('<div class="p-2 text-muted">لا توجد نتائج</div>').show(); return; }
        res.data.forEach(it => {
            $r.append(`<div class="p-2" style="cursor:pointer; border-bottom:1px solid #eee" data-item='${JSON.stringify(it)}'>
                <strong>${it.name}</strong> <small class="text-muted">${it.code}</small>
            </div>`);
        });
        $r.show();
    }), 200);
});

$(document).on('click', '#search-results [data-item]', function () {
    addLine(JSON.parse($(this).attr('data-item')));
    $('#search-results').hide();
    $('#item-search').val('').focus();
});

$('#item-search').on('keydown', function (e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        const $first = $('#search-results [data-item]').first();
        if ($first.length) $first.click();
    }
});

function addLine(item) {
    const purchaseUnit = item.units.find(u => u.is_default_purchase ?? u.is_default_sell) || item.units[0];
    const idx = lineIdx++;
    lines.push({
        idx, item_id: item.id, item_name: item.name, item_code: item.code,
        units: item.units, unit_id: purchaseUnit.unit_id, unit_name: purchaseUnit.unit_name,
        batch_number: '', expiry_date: '', quantity: 1, quantity_bonus: 0,
        unit_cost: 0, discount_percent: 0, tax_rate: Number(item.tax_rate || 0),
        selling_price: Number(purchaseUnit.selling_price || 0),
    });
    renderLines();
}

function renderLines() {
    const $tbody = $('#lines-table tbody').empty();
    $('#empty-msg').toggle(lines.length === 0);

    lines.forEach((l, i) => {
        const sub = l.quantity * l.unit_cost;
        const disc = sub * (l.discount_percent / 100);
        const net = sub - disc;
        const tax = net * (l.tax_rate / 100);
        const total = net + tax;
        l._total = total;

        const unitOpts = l.units.map(u =>
            `<option value="${u.unit_id}" ${u.unit_id == l.unit_id ? 'selected' : ''}>${u.unit_name}</option>`
        ).join('');

        $tbody.append(`<tr>
            <td>${i+1}</td>
            <td><strong>${l.item_name}</strong> <small class="text-muted d-block">${l.item_code}</small>
                <input type="hidden" name="lines[${i}][item_id]" value="${l.item_id}"></td>
            <td><select class="form-control" name="lines[${i}][unit_id]" onchange="updateLine(${i}, 'unit_id', this.value)">${unitOpts}</select></td>
            <td><input type="text" class="form-control" name="lines[${i}][batch_number]" value="${l.batch_number}" onchange="updateLine(${i}, 'batch_number', this.value)" required></td>
            <td><input type="date" class="form-control" name="lines[${i}][expiry_date]" value="${l.expiry_date}" onchange="updateLine(${i}, 'expiry_date', this.value)" required></td>
            <td><input type="number" step="0.001" min="0.001" class="form-control" name="lines[${i}][quantity]" value="${l.quantity}" onchange="updateLine(${i}, 'quantity', this.value)"></td>
            <td><input type="number" step="0.001" min="0" class="form-control" name="lines[${i}][quantity_bonus]" value="${l.quantity_bonus}" onchange="updateLine(${i}, 'quantity_bonus', this.value)"></td>
            <td><input type="number" step="0.00001" min="0" class="form-control" name="lines[${i}][unit_cost]" value="${l.unit_cost}" onchange="updateLine(${i}, 'unit_cost', this.value)"></td>
            <td><input type="number" step="0.01" min="0" max="100" class="form-control" name="lines[${i}][discount_percent]" value="${l.discount_percent}" onchange="updateLine(${i}, 'discount_percent', this.value)"></td>
            <td><input type="number" step="0.01" min="0" max="100" class="form-control" name="lines[${i}][tax_rate]" value="${l.tax_rate}" onchange="updateLine(${i}, 'tax_rate', this.value)"></td>
            <td><input type="number" step="0.00001" min="0" class="form-control" name="lines[${i}][selling_price]" value="${l.selling_price}" onchange="updateLine(${i}, 'selling_price', this.value)"></td>
            <td class="text-left">${total.toFixed(2)}</td>
            <td class="text-center"><button type="button" class="btn btn-sm btn-danger" onclick="removeLine(${i})"><i class="fas fa-times"></i></button></td>
        </tr>`);
    });
    recalc();
}

function updateLine(i, field, val) {
    if (['unit_id'].includes(field)) lines[i][field] = Number(val);
    else lines[i][field] = (field.match(/quantity|cost|percent|rate|price/) ? Number(val) : val);
    renderLines();
}

function removeLine(i) { lines.splice(i, 1); renderLines(); }

function recalc() {
    let sub = 0, disc = 0, tax = 0;
    lines.forEach(l => {
        const s = l.quantity * l.unit_cost;
        const d = s * (l.discount_percent / 100);
        const n = s - d;
        const t = n * (l.tax_rate / 100);
        sub += s; disc += d; tax += t;
    });
    const total = sub - disc + tax + Number($('input[name=shipping_amount]').val() || 0) + Number($('input[name=other_charges]').val() || 0);
    $('#t-subtotal').text(sub.toFixed(2));
    $('#t-discount').text(disc.toFixed(2));
    $('#t-tax').text(tax.toFixed(2));
    $('#t-total').text(total.toFixed(2));
}

$('input[name=shipping_amount], input[name=other_charges]').on('input', recalc);
</script>
@endpush