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

@section('title', 'Add Sale')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="h4 mb-0">Add Sale</h1>
    <a href="{{ route('sales.index') }}" class="btn btn-sm btn-secondary">Back to List</a>
</div>

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

    <div class="card-body">

        {{-- ============ CUSTOMER SECTION ============ --}}
        <div class="row mb-3">
            {{-- Date --}}
            <div class="col-md-3">
                <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>

            {{-- Existing customer dropdown --}}
            <div class="col-md-5">
                <label class="form-label">Existing Customer (optional)</label>
                <select id="customerSelect" class="form-select">
                    <option value="">-- New customer --</option>
                    @foreach($customers as $c)
                        <option value="{{ $c->id }}"
                                data-name="{{ $c->name }}"
                                data-phone="{{ $c->phone }}"
                                data-due="{{ $c->current_due ?? 0 }}">
                            {{ $c->name }} @if($c->phone) ({{ $c->phone }}) @endif
                        </option>
                    @endforeach
                </select>
                <small class="text-muted">
                    পুরনো customer হলে এখানে select করো, না হলে খালি রাখো।
                </small>
            </div>

            {{-- Phone --}}
            <div class="col-md-4">
                <label class="form-label">Customer Phone</label>
                <input type="text"
                       name="customer_phone"
                       class="form-control @error('customer_phone') is-invalid @enderror"
                       value="{{ old('customer_phone') }}">
                @error('customer_phone')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        {{-- Name + Total + Paid --}}
        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">Customer Name</label>
                <input type="text"
                       name="customer_name"
                       class="form-control @error('customer_name') is-invalid @enderror"
                       value="{{ old('customer_name') }}">
                @error('customer_name')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">Total Amount</label>
                <input type="number"
                       step="0.01"
                       name="total"
                       class="form-control @error('total') is-invalid @enderror"
                       value="{{ old('total', 0) }}">
                @error('total')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </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>

        {{-- DUE summary --}}
        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">Previous Due</label>
                <input type="number" step="0.01" id="previous_due"
                       class="form-control" value="0" readonly>
                <small class="text-muted">এই কাস্টমারের পুরনো বাকি।</small>
            </div>

            <div class="col-md-4">
                <label class="form-label">This Sale Due</label>
                <input type="number" step="0.01" id="new_due"
                       class="form-control" value="0" readonly>
                <small class="text-muted">এই সেলের Total - Paid।</small>
            </div>

            <div class="col-md-4">
                <label class="form-label">Total Due After This Sale</label>
                <input type="number" step="0.01" id="total_due"
                       class="form-control" value="0" readonly>
                <small class="text-muted">Previous Due + This Sale Due (শুধু দেখানোর জন্য)।</small>
            </div>
        </div>

        {{-- Payment Cycle --}}
        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">Payment Cycle</label>
                <select name="payment_cycle"
                        class="form-select @error('payment_cycle') is-invalid @enderror">
                    <option value="none" {{ old('payment_cycle','none') === 'none' ? 'selected' : '' }}>None (full payment)</option>
                    <option value="weekly" {{ old('payment_cycle') === 'weekly' ? 'selected' : '' }}>Weekly</option>
                    <option value="monthly" {{ old('payment_cycle') === 'monthly' ? 'selected' : '' }}>Monthly</option>
                </select>
                @error('payment_cycle')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        {{-- ============ SALE ITEMS SECTION ============ --}}
        <hr class="my-4">
        <h5 class="mb-2">Sale Items</h5>

        <table class="table table-bordered align-middle" id="itemTable">
            <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%;">Price</th>
                    <th style="width: 15%;">Total</th>
                    <th style="width: 10%;"></th>
                </tr>
            </thead>
            <tbody id="itemBody">
                <tr>
                    {{-- Product --}}
                    <td>
                        <select class="form-select product-select">
                            <option value="">-- Select product --</option>
                            @foreach($products as $p)
                                <option value="{{ $p->id }}"
                                        data-price="{{ $p->price_web ?? $p->price ?? 0 }}"
                                        data-image="{{ $p->image_primary ? asset('storage/'.$p->image_primary) : '' }}">
                                    {{ $p->name }}
                                </option>
                            @endforeach
                        </select>
                    </td>

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

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

                    {{-- Price --}}
                    <td>
                        <input type="number" step="0.01" class="form-control price-input">
                    </td>

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

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

        {{-- Hidden inputs for items --}}
        <div id="itemsContainer"></div>

        <button type="button" class="btn btn-sm btn-outline-primary" id="addRowBtn">+ 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>

        {{-- Hidden selected customer id --}}
        <input type="hidden" name="customer_id" id="customer_id" value="{{ old('customer_id') }}">
    </div>

    <div class="card-footer d-flex justify-content-between">
        <a href="{{ route('sales.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) {
        const n = parseFloat(v);
        return isNaN(n) ? 0 : n;
    }

    const customerSelect   = document.getElementById('customerSelect');
    const customerId       = document.getElementById('customer_id');
    const nameInput        = document.querySelector('input[name="customer_name"]');
    const phoneInput       = document.querySelector('input[name="customer_phone"]');
    const totalInput       = document.querySelector('input[name="total"]');
    const paidInput        = document.querySelector('input[name="paid"]');

    const previousDueInput = document.getElementById('previous_due');
    const newDueInput      = document.getElementById('new_due');
    const totalDueInput    = document.getElementById('total_due');

    const itemBody    = document.getElementById('itemBody');
    const addRowBtn   = document.getElementById('addRowBtn');
    const itemsHolder = document.getElementById('itemsContainer');

    // ---------- DUE calculation ----------
    function recalcDue() {
        const prev  = toNumber(previousDueInput.value);
        const total = toNumber(totalInput.value);
        const paid  = toNumber(paidInput.value);

        const newDue   = Math.max(0, total - paid);
        const combined = prev + newDue;

        newDueInput.value   = newDue.toFixed(2);
        totalDueInput.value = combined.toFixed(2);
    }

    // ---------- Items → Hidden inputs ----------
    function rebuildHiddenItems() {
        itemsHolder.innerHTML = '';
        const rows = itemBody.querySelectorAll('tr');

        rows.forEach((row, index) => {
            const product = row.querySelector('.product-select').value;
            const qty     = row.querySelector('.qty-input').value;
            const price   = row.querySelector('.price-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}][price]" value="${price}">
                `);
            }
        });
    }

    // ---------- Row & Total calculation ----------
    function recalcRow(row) {
        const qty   = toNumber(row.querySelector('.qty-input').value);
        const price = toNumber(row.querySelector('.price-input').value);
        row.querySelector('.line-total').value = (qty * price).toFixed(2);
    }

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

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

        const 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) {
        const productSelect = row.querySelector('.product-select');
        const qtyInput      = row.querySelector('.qty-input');
        const priceInput    = row.querySelector('.price-input');
        const removeBtn     = row.querySelector('.btn-remove');
        const lineTotal     = row.querySelector('.line-total');

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

                const p = toNumber(opt.dataset.price || 0);
                if (p && !priceInput.value) {
                    priceInput.value = p.toFixed(2);
                }

                // image preview update
                updateRowImageFromOption(row, opt);

                recalcRow(row);
                recalcTotal();
                rebuildHiddenItems();
            });
        }

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

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

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

    // প্রথম রোতে event attach + image initially hide করে নিই
    itemBody.querySelectorAll('tr').forEach(row => {
        const img = row.querySelector('.product-thumb');
        if (img) {
            img.src = '';
            img.classList.add('d-none');
        }
        attachRowEvents(row);
    });

    // Add new row
    if (addRowBtn) {
        addRowBtn.addEventListener('click', function () {
            const lastRow = itemBody.querySelector('tr:last-child');
            const clone   = lastRow.cloneNode(true);

            const productSelect = clone.querySelector('.product-select');
            const qtyInput      = clone.querySelector('.qty-input');
            const priceInput    = clone.querySelector('.price-input');
            const lineTotal     = clone.querySelector('.line-total');
            const img           = clone.querySelector('.product-thumb');

            if (productSelect) productSelect.value = '';
            if (qtyInput)      qtyInput.value      = 1;
            if (priceInput)    priceInput.value    = '';
            if (lineTotal)     lineTotal.value     = '0.00';
            if (img) {
                img.src = '';
                img.classList.add('d-none');
            }

            itemBody.appendChild(clone);
            attachRowEvents(clone);
        });
    }

    // ---------- Customer select → name, phone, due ----------
    if (customerSelect) {
        customerSelect.addEventListener('change', function () {
            const opt = this.options[this.selectedIndex];

            if (this.value) {
                customerId.value        = this.value;
                nameInput.value         = opt.dataset.name  || '';
                phoneInput.value        = opt.dataset.phone || '';
                const prevDue           = toNumber(opt.dataset.due || 0);
                previousDueInput.value  = prevDue.toFixed(2);
            } else {
                customerId.value        = '';
                nameInput.value         = '';
                phoneInput.value        = '';
                previousDueInput.value  = '0.00';
            }

            recalcDue();
        });
    }

    if (totalInput) totalInput.addEventListener('input', recalcDue);
    if (paidInput)  paidInput.addEventListener('input', recalcDue);

    // Initial calc
    recalcTotal();
    rebuildHiddenItems();
    recalcDue();
});
</script>
@endpush