@extends('layouts.layoutapp')

@section('content')
    <div class="row">
        <div class="col-12">
            <form action="{{ route('purchase-entry-store') }}" method="POST" id="purchaseEntryForm">
                @csrf
                <div class="card me-2">
                    <div class="card-header pb-0">
                        <div class="d-flex flex-row justify-content-between align-items-center flex-wrap gap-2">
                            <div>
                                <h5 class="mb-0">New Purchase</h5>
                                <p class="text-sm text-secondary mb-0">Add the materials purchased, then enter what was
                                    paid.</p>
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-primary btn-sm mb-0 add-row">+ Add Row</button>
                                <a href="{{ route('purchase-list') }}" class="btn btn-secondary btn-sm mb-0">Purchase
                                    List</a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">

                        @if (session('error'))
                            <div class="alert alert-danger text-white">{{ session('error') }}</div>
                        @endif

                        @if ($errors->any())
                            <div class="alert alert-danger text-white">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        {{-- HEADER --}}
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Supplier</label>
                                <select name="supplier_id" class="form-select" required>
                                    <option value="">Select Supplier</option>
                                    @foreach ($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}"
                                            {{ old('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                            {{ $supplier->supplier_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label">Purchase Date</label>
                                <input type="date" name="purchase_date" class="form-control"
                                    value="{{ old('purchase_date', date('Y-m-d')) }}" required>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label">Notes (Optional)</label>
                                <input type="text" name="notes" class="form-control" value="{{ old('notes') }}"
                                    placeholder="Reference, bill no, etc.">
                            </div>
                        </div>

                        {{-- MATERIAL ROWS --}}
                        <div class="table-responsive">
                            <table class="table table-bordered align-items-center mb-0" id="purchaseRows">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                                            style="width:40px;">#</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Material</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                                            style="width:130px;">Quantity</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                                            style="width:150px;">Buying Amount</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end"
                                            style="width:150px;">Amount</th>
                                        <th style="width:50px;"></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="4" class="text-end font-weight-bold">Total</td>
                                        <td class="text-end font-weight-bold" id="grandTotal">₹ 0.00</td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        {{-- PAYMENT --}}
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Paid Amount</label>
                                    <input type="number" name="paid_amount" id="paid_amount" class="form-control"
                                        min="0" step="0.01" placeholder="0.00" value="{{ old('paid_amount') }}">
                                    <small class="text-muted">Leave blank or 0 if nothing is paid yet.</small>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Payment Mode</label>
                                    <select name="payment_type" class="form-select">
                                        <option value="cash" {{ old('payment_type') == 'cash' ? 'selected' : '' }}>Cash
                                        </option>
                                        <option value="upi" {{ old('payment_type') == 'upi' ? 'selected' : '' }}>UPI
                                        </option>
                                        <option value="online" {{ old('payment_type') == 'online' ? 'selected' : '' }}>
                                            Online</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card border mb-3">
                                    <div class="card-body p-3">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-sm">Materials</span>
                                            <span class="text-sm font-weight-bold" id="rowCountLabel">0</span>
                                        </div>
                                        <hr class="horizontal dark my-2">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-sm">Total</span>
                                            <span class="text-sm font-weight-bold" id="summaryTotal">₹ 0.00</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-sm">Paying Now</span>
                                            <span class="text-sm font-weight-bold" id="summaryPaid">₹ 0.00</span>
                                        </div>
                                        <hr class="horizontal dark my-2">
                                        <div class="d-flex justify-content-between">
                                            <span class="text-sm font-weight-bold">Balance</span>
                                            <span class="text-sm font-weight-bold text-danger"
                                                id="summaryBalance">₹ 0.00</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-end">
                            <button type="submit" class="btn bg-gradient-primary">Save Purchase &amp; Show Bill</button>
                            <a href="{{ route('product-index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    @php
        $productOptions = $products->map(function ($p) {
            $useNative = $p->branch && $p->branch->native_name_flag == 'A' && $p->native_name;
            return [
                'id' => $p->id,
                'label' => $useNative ? $p->native_name : $p->name,
                'code' => $p->code,
                'rate' => (float) ($p->margin_price ?? 0),
            ];
        })->values()->toJson();
    @endphp
    <script>
        (function () {
            const products = {!! $productOptions !!};

            let rowIndex = 0;

            function money(v) {
                return '₹ ' + (v || 0).toLocaleString('en-IN', {
                    minimumFractionDigits: 2, maximumFractionDigits: 2
                });
            }

            function productOptions() {
                return '<option value="">Select Material</option>' + products.map(function (p) {
                    return '<option value="' + p.id + '" data-rate="' + p.rate + '">'
                        + (p.code ? p.code + ' - ' : '') + p.label + '</option>';
                }).join('');
            }

            function addRow() {
                const i = rowIndex++;
                $('#purchaseRows tbody').append(
                    '<tr class="purchase-row">' +
                        '<td class="text-center text-xs row-no"></td>' +
                        '<td><select name="rows[' + i + '][product_id]" class="form-select form-select-sm product-select" required>'
                            + productOptions() + '</select></td>' +
                        '<td><input type="number" name="rows[' + i + '][qty]" class="form-control form-control-sm qty" '
                            + 'min="0.01" step="0.01" placeholder="0" required></td>' +
                        '<td><input type="number" name="rows[' + i + '][rate]" class="form-control form-control-sm rate" '
                            + 'min="0" step="0.01" placeholder="0.00" required></td>' +
                        '<td class="text-end text-xs font-weight-bold line-amount">₹ 0.00</td>' +
                        '<td class="text-center"><a href="javascript:void(0)" class="text-danger remove-row">'
                            + '<i class="fas fa-trash"></i></a></td>' +
                    '</tr>'
                );
                renumber();
            }

            function renumber() {
                $('#purchaseRows tbody tr').each(function (n) {
                    $(this).find('.row-no').text(n + 1);
                });
                $('#rowCountLabel').text($('#purchaseRows tbody tr').length);
            }

            function recalc() {
                let total = 0;
                $('#purchaseRows tbody tr').each(function () {
                    const qty = parseFloat($(this).find('.qty').val()) || 0;
                    const rate = parseFloat($(this).find('.rate').val()) || 0;
                    const amount = qty * rate;
                    total += amount;
                    $(this).find('.line-amount').text(money(amount));
                });

                $('#grandTotal, #totalDisplay, #summaryTotal').text(money(total));
                $('#paid_amount').attr('max', total.toFixed(2));

                let paid = parseFloat($('#paid_amount').val()) || 0;
                if (paid > total) paid = total;
                const balance = total - paid;

                $('#summaryPaid').text(money(paid));
                $('#summaryBalance').text(money(balance))
                    .toggleClass('text-danger', balance > 0)
                    .toggleClass('text-success', balance <= 0);
            }

            $(document).on('click', '.add-row', addRow);

            $(document).on('click', '.remove-row', function () {
                $(this).closest('tr').remove();
                renumber();
                recalc();
            });

            // Picking a material pre-fills its last buying price as a starting point
            $(document).on('change', '.product-select', function () {
                const rate = $(this).find(':selected').data('rate');
                const $rate = $(this).closest('tr').find('.rate');
                if (rate && !parseFloat($rate.val())) {
                    $rate.val(rate);
                }
                recalc();
            });

            $(document).on('input', '.qty, .rate, #paid_amount', recalc);

            $('#purchaseEntryForm').on('submit', function (e) {
                if ($('#purchaseRows tbody tr').length === 0) {
                    e.preventDefault();
                    alert('Add at least one material to the purchase.');
                }
            });

            // start with one empty row
            addRow();
        })();
    </script>
@endpush