{{-- resources/views/purchases/create.blade.php --}}
@extends('layouts.app')

@section('title','New Purchase')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h3 class="mb-0">New Purchase</h3>
    <a href="{{ route('purchases.index') }}" class="btn btn-sm btn-secondary">Back</a>
</div>

<form action="{{ route('purchases.store') }}" method="POST" class="card">
    @csrf

    <div class="card-body">

        {{-- Top info --}}
        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">Invoice No</label>
                <input type="text"
                       name="invoice_no"
                       class="form-control @error('invoice_no') is-invalid @enderror"
                       value="{{ old('invoice_no') }}">
                @error('invoice_no')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">Date</label>
                <input type="date"
                       name="date"
                       class="form-control @error('date') is-invalid @enderror"
                       value="{{ old('date', now()->format('Y-m-d')) }}">
                @error('date')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">Supplier</label>
                <select name="supplier_id"
                        class="form-select @error('supplier_id') is-invalid @enderror"
                        required>
                    <option value="">-- Select supplier --</option>
                    @foreach($suppliers as $s)
                        <option value="{{ $s->id }}" @selected(old('supplier_id') == $s->id)>
                            {{ $s->name }}
                            @if($s->phone) ({{ $s->phone }}) @endif
                        </option>
                    @endforeach
                </select>
                @error('supplier_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        {{-- Total / Paid (optional) --}}
        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">Total Amount</label>
                <input type="number"
                       step="0.01"
                       id="purchase_total"
                       name="total"
                       class="form-control @error('total') is-invalid @enderror"
                       value="{{ old('total',0) }}"
                       readonly>
                @error('total')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <small class="text-muted">সব নিচের line total এর যোগফল।</small>
            </div>

            <div class="col-md-4">
                <label class="form-label">Paid</label>
                <input type="number"
                       step="0.01"
                       name="paid"
                       class="form-control @error('paid') is-invalid @enderror"
                       value="{{ old('paid',0) }}">
                @error('paid')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        {{-- ================= PURCHASE ITEMS TABLE ================= --}}
        <hr class="my-3">
        <h5 class="mb-2">Purchase Items</h5>

        <table class="table table-bordered align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width:30%;">Product</th>
                    <th style="width:18%;">Image</th>
                    <th style="width:10%;">Qty</th>
                    <th style="width:15%;">Cost / Unit</th>
                    <th style="width:15%;">Line Total</th>
                    <th style="width:10%;"></th>
                </tr>
            </thead>
            <tbody id="purchaseItemBody">
                <tr>
                    {{-- Product select --}}
                    <td>
                        <select class="form-select purchase-product-select">
                            <option value="">-- Select product --</option>
                            @foreach($products as $p)
                                <option value="{{ $p->id }}"
                                        data-cost="{{ $p->cost ?? 0 }}"
                                        data-image="{{ $p->image_primary ? asset('storage/'.$p->image_primary) : '' }}">
                                    {{ $p->sku ?? '' }} {{ $p->sku ? '-' : '' }} {{ $p->name }}
                                </option>
                            @endforeach
                        </select>
                    </td>

                    {{-- Image preview --}}
                    <td>
                        <div class="text-center">
                            <img src=""
                                 class="img-thumbnail purchase-product-thumb d-none"
                                 style="max-height:80px; max-width:100%;">
                        </div>
                    </td>

                    {{-- Qty --}}
                    <td>
                        <input type="number"
                               step="0.01"
                               class="form-control purchase-qty-input"
                               value="1">
                    </td>

                    {{-- Cost --}}
                    <td>
                        <input type="number"
                               step="0.01"
                               class="form-control purchase-cost-input">
                    </td>

                    {{-- Line total --}}
                    <td>
                        <input type="number"
                               step="0.01"
                               class="form-control purchase-line-total"
                               value="0.00"
                               readonly>
                    </td>

                    {{-- Remove --}}
                    <td class="text-center">
                        <button type="button"
                                class="btn btn-sm btn-outline-danger purchase-btn-remove">
                            &times;
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>

        {{-- hidden items holder --}}
        <div id="purchaseItemsContainer"></div>

        <button type="button"
                class="btn btn-sm btn-outline-primary"
                id="purchaseAddRowBtn">
            + Add Item
        </button>

        @error('items')
            <div class="text-danger small mt-2">{{ $message }}</div>
        @enderror

        {{-- Note --}}
        <div class="mt-4 mb-3">
            <label class="form-label">Note</label>
            <textarea name="note"
                      rows="3"
                      class="form-control @error('note') is-invalid @enderror">{{ old('note') }}</textarea>
            @error('note')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

    </div>

    <div class="card-footer d-flex justify-content-between">
        <a href="{{ route('purchases.index') }}" class="btn btn-secondary">Back</a>
        <button type="submit" class="btn btn-success">Save</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    function toNumber(v) {
        var n = parseFloat(v);
        return isNaN(n) ? 0 : n;
    }

    var itemBody    = document.getElementById('purchaseItemBody');
    var addRowBtn   = document.getElementById('purchaseAddRowBtn');
    var itemsHolder = document.getElementById('purchaseItemsContainer');
    var totalInput  = document.getElementById('purchase_total');

    // প্রথম row-এর clean template
    var firstRow        = itemBody.querySelector('tr');
    var rowTemplateHTML = firstRow.outerHTML;

    // ---------- Select2 with image (optional) ----------
    function formatProductWithImage(option) {
        if (!option.id) return option.text;
        var image = $(option.element).data('image');
        var text  = option.text;

        if (image) {
            return $(
                '<span class="d-flex align-items-center">' +
                    '<img src="'+ image +'" style="width:28px;height:28px;object-fit:cover;border-radius:4px;" class="me-2">' +
                    '<span>'+ text +'</span>' +
                '</span>'
            );
        }
        return $('<span>'+ text +'</span>');
    }

    function initSelect2ForRow(row) {
        if (typeof $ === 'undefined' || !$.fn.select2) return;
        var $select = $(row).find('.purchase-product-select');
        if (!$select.length) return;

        $select.select2({
            width: '100%',
            templateResult: formatProductWithImage,
            templateSelection: formatProductWithImage
        });
    }

    // ---------- Hidden items ----------
    function rebuildHiddenItems() {
        itemsHolder.innerHTML = '';
        var rows = itemBody.querySelectorAll('tr');

        rows.forEach(function (row, index) {
            var product = row.querySelector('.purchase-product-select').value;
            var qty     = row.querySelector('.purchase-qty-input').value;
            var cost    = row.querySelector('.purchase-cost-input').value;

            if (product) {
                itemsHolder.insertAdjacentHTML(
                    'beforeend',
                    '<input type="hidden" name="items['+index+'][product_id]" value="'+product+'">' +
                    '<input type="hidden" name="items['+index+'][qty]" value="'+qty+'">' +
                    '<input type="hidden" name="items['+index+'][cost]" value="'+cost+'">'
                );
            }
        });
    }

    // ---------- Row & total ----------
    function recalcRow(row) {
        var qty  = toNumber(row.querySelector('.purchase-qty-input').value);
        var cost = toNumber(row.querySelector('.purchase-cost-input').value);
        row.querySelector('.purchase-line-total').value = (qty * cost).toFixed(2);
    }

    function recalcTotal() {
        var sum = 0;
        itemBody.querySelectorAll('.purchase-line-total').forEach(function (input) {
            sum += toNumber(input.value);
        });
        if (totalInput) {
            totalInput.value = sum.toFixed(2);
        }
    }

    function updateRowImageFromOption(row, opt) {
        var img = row.querySelector('.purchase-product-thumb');
        if (!img) return;

        var url = opt ? (opt.dataset.image || '') : '';
        if (url) {
            img.src = url;
            img.classList.remove('d-none');
        } else {
            img.src = '';
            img.classList.add('d-none');
        }
    }

    function attachRowEvents(row) {
        var productSelect = row.querySelector('.purchase-product-select');
        var qtyInput      = row.querySelector('.purchase-qty-input');
        var costInput     = row.querySelector('.purchase-cost-input');
        var removeBtn     = row.querySelector('.purchase-btn-remove');
        var lineTotal     = row.querySelector('.purchase-line-total');

        if (productSelect) {
            productSelect.addEventListener('change', function () {
                var opt = this.options[this.selectedIndex];

                var c = toNumber(opt.dataset.cost || 0);
                if (c && !costInput.value) {
                    costInput.value = c.toFixed(2);
                }

                updateRowImageFromOption(row, opt);
                recalcRow(row);
                recalcTotal();
                rebuildHiddenItems();
            });
        }

        if (qtyInput) {
            qtyInput.addEventListener('input', function () {
                recalcRow(row);
                recalcTotal();
                rebuildHiddenItems();
            });
        }

        if (costInput) {
            costInput.addEventListener('input', function () {
                recalcRow(row);
                recalcTotal();
                rebuildHiddenItems();
            });
        }

        if (removeBtn) {
            removeBtn.addEventListener('click', function () {
                var allRows = itemBody.querySelectorAll('tr');
                if (allRows.length > 1) {
                    row.remove();
                } else {
                    productSelect.value = '';
                    qtyInput.value      = 1;
                    costInput.value     = '';
                    lineTotal.value     = '0.00';
                    updateRowImageFromOption(row, null);
                }
                recalcTotal();
                rebuildHiddenItems();
            });
        }
    }

    // ---------- initial row setup ----------
    var firstImg = firstRow.querySelector('.purchase-product-thumb');
    if (firstImg) {
        firstImg.src = '';
        firstImg.classList.add('d-none');
    }
    attachRowEvents(firstRow);
    initSelect2ForRow(firstRow);

    // ---------- Add new row ----------
    if (addRowBtn) {
        addRowBtn.addEventListener('click', function () {
            var wrapper = document.createElement('tbody');
            wrapper.innerHTML = rowTemplateHTML.trim();
            var newRow = wrapper.firstElementChild;

            // clean values
            var select = newRow.querySelector('.purchase-product-select');
            var qty    = newRow.querySelector('.purchase-qty-input');
            var cost   = newRow.querySelector('.purchase-cost-input');
            var total  = newRow.querySelector('.purchase-line-total');
            var img    = newRow.querySelector('.purchase-product-thumb');

            if (select) select.value = '';
            if (qty)    qty.value    = 1;
            if (cost)   cost.value   = '';
            if (total)  total.value  = '0.00';
            if (img) {
                img.src = '';
                img.classList.add('d-none');
            }

            itemBody.appendChild(newRow);
            attachRowEvents(newRow);
            initSelect2ForRow(newRow);

            recalcTotal();
            rebuildHiddenItems();
        });
    }

    // Select2 change event (যদি সরাসরি select2 থেকে আসে)
    if (typeof $ !== 'undefined') {
        $(document).on('select2:select', '.purchase-product-select', function () {
            var row = this.closest('tr');
            if (!row) return;
            var opt = this.options[this.selectedIndex];

            var costInput = row.querySelector('.purchase-cost-input');
            var c = toNumber(opt.dataset.cost || 0);
            if (c && !costInput.value) {
                costInput.value = c.toFixed(2);
            }

            updateRowImageFromOption(row, opt);
            recalcRow(row);
            recalcTotal();
            rebuildHiddenItems();
        });
    }

    // initial calc
    recalcRow(firstRow);
    recalcTotal();
    rebuildHiddenItems();
});
</script>
@endpush