@extends('layouts.app')
@section('title', 'Create Stock')
@section('content')
<div class="container-fluid" style=" width: 1450px; margin-top: 10px;">
    <h2 class="mb-4 fw-bold text-dark">បង្កើតស្តុក</h2>
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <form action="{{ route('stocks.store') }}" method="POST">
        @csrf
        <!-- Single Card Wrapper -->
        <div class="card shadow-sm p-4" style="width: 1450px; margin-right: 10px;" >
            <!-- Stock Information -->
            <h5 class="mb-3 fw-semibold border-bottom pb-2">ព៍ត័មានស្តុក</h5>
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">លេខវិក័យប័ត្រ</label>
                    <input type="text" class="form-control bg-light" value="{{ $reference_no }}" readonly>
                    <input type="hidden" name="reference_no" value="{{ $reference_no }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">លំហូស្តុក(ចូល/ចេញ)</label>
                    <select name="type" class="form-select" required>
                        <option value="in" {{ old('type')=='in' ? 'selected' : '' }}>In</option>
                        <option value="out" {{ old('type')=='out' ? 'selected' : '' }}>Out</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">អ្នកផ្គត់ផ្គង់</label>
                    <select name="supplier_id" class="form-select" required>
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">ស្ថានភាពស្តុក</label>
                    <select name="purchase_status"  id="Status" class="form-select" required>
                        <option value="Pending">Pending</option>
                        <option value="Recived">Recived</option>
                        <option value="Order">Order</option>
                    </select>
                </div>
            </div>
            
            <!-- Stock Items -->
            <h5 class="mb-3 fw-semibold border-bottom pb-2">Stock Items</h5>
            <div class="mb-3">
                <div class="d-flex justify-content-end mb-2">
                    <button type="button" class="btn btn-primary btn-sm" id="addItem">
                        <i class="bi bi-plus-circle me-1"></i> Add Item
                    </button>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-bordered align-middle" id="stockItemsTable">
                        <thead class="table-light">
                            <tr>
                                <th>លេខកូដ</th>
                                <th>ឈ្មោះទំនិញ</th>
                                <th>ចំនួន</th>
                                <th>តម្លៃដើម</th>
                                <th style="width: 130px;">បញ្ចុះតម្លៃ (%)</th>
                                <th>ចំណាំ</th>
                                <th>តម្លៃសរុប</th>
                                <th class="text-center">សកម្មភាព</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select name="products[0][product_id]" class="form-select productSelect" required>
                                        <option value="">-- Select Product --</option>
                                        @foreach($products as $product)
                                            <option value="{{ $product->id }}" 
                                                    data-name="{{ $product->name }}" 
                                                    data-cost="{{ $product->cost }}">
                                                {{ $product->code }}-{{ $product->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td><input type="text" name="products[0][name]" class="form-control productName" readonly></td>
                                <td><input type="number" name="products[0][quantity]" class="form-control productQty" min="1" placeholder="Qty" required></td>
                                <td><input type="number" name="products[0][cost]" class="form-control productCost" min="0" step="0.01" placeholder="Cost"></td>
                                <td><input type="number" name="products[0][discount]" class="form-control productDiscount" min="0" max="100" step="0.01" placeholder="%"></td>
                                <td><input type="text" name="products[0][note]" class="form-control" placeholder="Item note"></td>
                                <td><input type="number" name="products[0][subtotal]" class="form-control productSubtotal" readonly></td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-danger btn-sm removeItem">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- Reference Discount & Total -->
                <div class="mt-3 d-flex gap-3 justify-content-end align-items-center">
                    <div class="d-flex align-items-center gap-2">
                        <label class="mb-0 fw-semibold" style="width: 180px;">បញ្ចុះតម្លៃ (%)</label>
                        <input type="number" id="referenceDiscount" name="reference_discount" class="form-control" min="0" max="100" step="0.01" value="0">
                    </div>
                    <div class="d-flex align-items-center gap-3">
                        <label class="mb-0 fw-semibold">សរុប:</label>
                        <input type="number" id="grandTotal" class="form-control" readonly value="0">
                    </div>
                </div>
            </div>

            <!-- Payment Information -->
            <h5 class="mb-3 fw-semibold border-bottom pb-2">ព៍ត័មានការទូទាត់</h5>
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">ស្ថានភាពនៃការទូទាត់</label>
                    <select name="payment_type" id="paymentType" class="form-select" required>
                        <option value="Pending">Pending</option>
                        <option value="Due">Due</option>
                        <option value="Partial">Partial</option>
                        <option value="Paid">Paid</option>
                    </select>
                </div>
                <div class="col-md-4 payment-fields">
                    <label class="form-label fw-semibold">ទូទាត់តាមរយះ</label>
                    <select name="payment_by_id" class="form-select">
                        @foreach($payments_by as $payment)
                            <option value="{{ $payment->id }}">{{ $payment->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4 payment-fields">
                    <label class="form-label fw-semibold">តម្លៃសរុប</label>
                    <input type="number" name="amount" class="form-control">
                </div>
                <div class="col-12">
                    <label class="form-label fw-semibold">ចំណាំ</label>
                    <textarea name="note" class="form-control" rows="2" placeholder="Enter a note...">{{ old('note') }}</textarea>
                </div>
            </div>
            <!-- Form Actions -->
            <div class="d-flex justify-content-end gap-2">
                <a href="{{ route('stocks.index') }}" class="btn btn-secondary"><i class="bi bi-x-circle"></i> Cancel</a>
                <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Save Stock</button>
            </div>
        </div>
    </form>
</div>
@endsection
@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let itemIndex = 1;
    const calculateRowSubtotal = row => {
        const qty = parseFloat(row.querySelector('.productQty').value) || 0;
        const cost = parseFloat(row.querySelector('.productCost').value) || 0;
        const discount = parseFloat(row.querySelector('.productDiscount').value) || 0;
        const subtotal = qty * cost * (1 - discount / 100);
        row.querySelector('.productSubtotal').value = subtotal.toFixed(2);
        calculateGrandTotal();
    };

    const calculateGrandTotal = () => {
        let total = 0;
        document.querySelectorAll('.productSubtotal').forEach(input => {
            total += parseFloat(input.value) || 0;
        });
        const refDiscount = parseFloat(document.getElementById('referenceDiscount').value) || 0;
        total = total * (1 - refDiscount / 100);
        document.getElementById('grandTotal').value = total.toFixed(2);

        const amountInput = document.querySelector('input[name="amount"]');
        if(amountInput && amountInput.offsetParent !== null){
            amountInput.value = total.toFixed(2);
        }
    };

    document.getElementById('addItem').addEventListener('click', function() {
        const tableBody = document.querySelector('#stockItemsTable tbody');
        const newRow = tableBody.rows[0].cloneNode(true);
        newRow.querySelectorAll('input, select').forEach(el => {
            el.name = el.name.replace(/\d+/, itemIndex);
            if(el.tagName === 'INPUT') el.value = '';
            if(el.tagName === 'SELECT') el.selectedIndex = 0;
        });
        tableBody.appendChild(newRow);
        itemIndex++;
    });

    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.removeItem');
        if(btn){
            const row = btn.closest('tr');
            const tbody = row.parentNode;
            if(tbody.rows.length > 1) row.remove();
            calculateGrandTotal();
        }
    });

    document.addEventListener('change', function(e){
        if(e.target.classList.contains('productSelect')){
            const row = e.target.closest('tr');
            const selected = e.target.options[e.target.selectedIndex];
            row.querySelector('.productName').value = selected.dataset.name || '';
            row.querySelector('.productCost').value = selected.dataset.cost || 0;
            calculateRowSubtotal(row);
        }
    });
    document.addEventListener('input', function(e){
        if(e.target.classList.contains('productQty') || 
           e.target.classList.contains('productCost') || 
           e.target.classList.contains('productDiscount')){
            const row = e.target.closest('tr');
            calculateRowSubtotal(row);
        }
        if(e.target.id === 'referenceDiscount') calculateGrandTotal();
    });

    const paymentType = document.getElementById('paymentType');
    const paymentFields = document.querySelectorAll('.payment-fields');
    const togglePaymentFields = () => {
        const amountInput = document.querySelector('input[name="amount"]');
        if(paymentType.value === 'Pending' || paymentType.value === 'Due'){
            paymentFields.forEach(f => f.style.display = 'none');
            if(amountInput) amountInput.value = '';
        } else {
            paymentFields.forEach(f => f.style.display = 'block');
            if(amountInput) amountInput.value = parseFloat(document.getElementById('grandTotal').value).toFixed(2);
        }
    };
    paymentType.addEventListener('change', togglePaymentFields);
    togglePaymentFields();
});
</script>
@endsection