@extends('layouts.layoutapp')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card me-2">
                <form action="{{ route('bulk-purchase-confirm') }}" method="POST">
                    @csrf
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title">
                            <h4>Confirm Purchase</h4>
                            <p class="text-sm text-secondary mb-0">Review the items, then enter the payment.</p>
                        </div>
                        <div>
                            <a href="{{ route('bulk-purchase-index') }}" class="btn btn-secondary">Back</a>
                        </div>
                    </div>

                    <div class="card-body">

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

                        {{-- ITEMS --}}
                        <div class="table-responsive mb-4">
                            <table class="table table-bordered align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            S.No</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Product</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Supplier</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">
                                            Qty</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">
                                            Buying Amount</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">
                                            Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($pending['lines'] as $index => $line)
                                        <tr>
                                            <td class="ps-3"><p class="text-xs mb-0">{{ $index + 1 }}</p></td>
                                            <td class="ps-3"><p class="text-xs font-weight-bold mb-0">
                                                {{ $line['product_name'] }}</p></td>
                                            <td class="ps-3"><p class="text-xs mb-0">
                                                {{ $suppliers[$line['supplier_id']] ?? '-' }}</p></td>
                                            <td class="text-end pe-3"><p class="text-xs mb-0">
                                                {{ rtrim(rtrim(number_format($line['qty'], 2, '.', ''), '0'), '.') }}</p></td>
                                            <td class="text-end pe-3"><p class="text-xs mb-0">
                                                ₹ {{ number_format($line['unitPrice'], 2) }}</p></td>
                                            <td class="text-end pe-3"><p class="text-xs font-weight-bold mb-0">
                                                ₹ {{ number_format($line['amount'], 2) }}</p></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="row">
                            <div class="col-md-6">

                                {{-- TOTAL, shown above the paid amount --}}
                                <div class="card bg-gradient-primary mb-3">
                                    <div class="card-body p-3 text-center">
                                        <p class="text-white text-sm mb-1 opacity-8">Total Amount for this Purchase</p>
                                        <h3 class="text-white mb-0">₹ {{ number_format($pending['total'], 2) }}</h3>
                                    </div>
                                </div>

                                <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" max="{{ $pending['total'] }}" 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>
                                    {{-- Values match what the rest of the app stores in product_payments.payment_type --}}
                                    <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">Purchase Date</span>
                                            <span class="text-sm font-weight-bold">
                                                {{ \Carbon\Carbon::parse($pending['purchase_date'])->format('d-m-Y') }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span class="text-sm">Items</span>
                                            <span class="text-sm font-weight-bold">{{ count($pending['lines']) }}</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">
                                                ₹ {{ number_format($pending['total'], 2) }}</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="preview_paid">₹ 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="preview_balance">
                                                ₹ {{ number_format($pending['total'], 2) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-end">
                            <button class="btn bg-gradient-primary" type="submit">Save Purchase &amp; Show Bill</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            (function () {
                var total = {{ $pending['total'] }};
                var input = document.getElementById('paid_amount');
                var paidEl = document.getElementById('preview_paid');
                var balEl = document.getElementById('preview_balance');

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

                function update() {
                    var paid = parseFloat(input.value) || 0;
                    if (paid > total) paid = total;
                    paidEl.textContent = money(paid);
                    var bal = total - paid;
                    balEl.textContent = money(bal);
                    balEl.classList.toggle('text-danger', bal > 0);
                    balEl.classList.toggle('text-success', bal <= 0);
                }

                input.addEventListener('input', update);
                update();
            })();
        </script>
    @endpush
@endsection