@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold text-dark mb-1">Log Material Purchase Inward</h4>
            <p class="text-muted small mb-0">Record incoming inventory stocks from master vendors to update warehouse
                metrics and billing balances.</p>
        </div>
        <a href="{{ route('admin.purchases.index') }}" class="btn btn-outline-secondary btn-sm px-3 rounded-3">
            <i class="bi bi-arrow-left me-1"></i> Back to Logs
        </a>
    </div>

    <div class="card border-0 shadow-sm rounded-4 max-w-4xl mx-auto">
        <div class="card-body p-4">

            @if ($errors->any())
            <div class="alert alert-danger p-3 mb-4 border-0 shadow-sm"
                style="border-radius: 12px; background-color: #fef2f2;">
                <h6 class="fw-bold text-danger mb-2"><i class="bi bi-exclamation-octagon-fill me-2"></i>Validation
                    Blocks Failed:</h6>
                <ul class="mb-0 text-danger small ps-3">
                    @foreach ($errors->all() as $error)
                    <li><strong>{{ $error }}</strong></li>
                    @endforeach
                </ul>
            </div>
            @endif

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

                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-secondary">Purchase Invoice Number <span
                                class="text-danger">*</span></label>
                        <input type="text" name="purchase_invoice_no" class="form-control"
                            placeholder="e.g., INV/2026/884" value="{{ old('purchase_invoice_no') }}" required
                            style="border-radius: 8px;">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-secondary">Received / Purchase Date <span
                                class="text-danger">*</span></label>
                        <input type="date" name="received_date" class="form-control"
                            value="{{ old('received_date', date('Y-m-d')) }}" required style="border-radius: 8px;">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-secondary">Select Vendor Partner <span
                                class="text-danger">*</span></label>
                        <select name="vendor_id" class="form-select" style="border-radius: 8px;" required>
                            <option value="">-- Choose Vendor --</option>
                            @foreach($vendors as $vendor)
                            <option value="{{ $vendor->id }}" {{ old('vendor_id')==$vendor->id ? 'selected' : '' }}>
                                {{ $vendor->name }} ({{ $vendor->vendor_code }})
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-secondary">Select Target Product Article <span
                                class="text-danger">*</span></label>
                        <select name="product_id" class="form-select" style="border-radius: 8px;" required>
                            <option value="">-- Choose Article --</option>
                            @foreach($products as $product)
                            <option value="{{ $product->id }}" {{ old('product_id')==$product->id ? 'selected' : '' }}>
                                {{ $product->name }} [{{ $product->product_code }}]
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-dark">Purchased Quantity (Units) <span
                                class="text-danger">*</span></label>
                        <input type="number" name="purchased_qty" id="purchased_qty" class="form-control" min="1"
                            value="{{ old('purchased_qty', 1) }}" required style="border-radius: 8px;"
                            oninput="liveAtomicCalc()">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-dark">Buying Cost Per Unit (₹) <span
                                class="text-danger">*</span></label>
                        <input type="number" step="0.01" name="unit_cost" id="unit_cost" class="form-control"
                            value="{{ old('unit_cost', '0.00') }}" required style="border-radius: 8px;"
                            oninput="liveAtomicCalc()">
                    </div>

                    <div class="col-md-12 mt-3">
                        <div class="p-3 rounded-4 border d-flex justify-content-between align-items-center flex-wrap gap-2"
                            style="background-color: #f1f5f9;">
                            <div>
                                <small class="text-muted font-monospace d-block">LIVE INWARD TRANSACTION
                                    OVERVIEW</small>
                                <span class="small text-secondary">Valuation Matrix: Units × Unit Cost</span>
                            </div>
                            <div class="text-end">
                                <span class="h5 mb-0 fw-bold text-indigo-600 d-block" id="live_total_val"
                                    style="color: #4f46e5;">₹0.00</span>
                                <small class="text-muted small">Estimated Aggregate Payable</small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-end mt-4 pt-2 border-top">
                    <button type="submit" class="btn btn-primary px-4 fw-bold"
                        style="background-color: #4f46e5; border: none; border-radius: 8px;">
                        <i class="bi bi-box-arrow-in-down me-1"></i> Confirm Inward Entry
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function liveAtomicCalc() {
        let qty = parseFloat(document.getElementById('purchased_qty').value) || 0;
        let cost = parseFloat(document.getElementById('unit_cost').value) || 0;
        let total = qty * cost;
        document.getElementById('live_total_val').innerText = '₹' + total.toFixed(2);
    }
    window.addEventListener('DOMContentLoaded', liveAtomicCalc);
</script>
@endsection