@extends('layouts.master')
@section('title', 'Add Stock/Stock in')

@section('style')
    <style>
    </style>
@endsection

@section('script')
    <script>
        // ฟังก์ชันสำหรับ Initialize Select2 ให้กับ Row ใหม่
        function initSelect2(row) {
            $(row).find('.select2').select2({
                width: '100%'
            });
        }

        document.addEventListener("click", function(e) {
            // ADD ROW
            if (e.target.closest(".addRow")) {
                let table = document.querySelector("#productTable tbody");
                let rowCount = table.rows.length + 1;
                let productOptions = document.querySelector("#productTemplate").innerHTML;

                let newRow = `
        <tr>
            <td class="row-number">${rowCount}</td>
            <td>
                <select class="form-control select2 product-select" name="product_id[]" required>
                    ${productOptions}
                </select>
            </td>
            <td>
                <input type="number" class="form-control qty" name="quantity[]" min="1" step="1" required>
            </td>
            <td>
                <input type="number" class="form-control price" name="price[]" step="0.01" required>
            </td>
            <td>
                <input type="number" class="form-control total" name="total[]" readonly>
            </td>
            <td>
                <button type="button" class="btn btn-danger btn-sm removeRow rounded-pill">
                    <i class="uil uil-trash-alt"></i>
                </button>
            </td>
        </tr>
        `;
                let tempDiv = document.createElement('table');
                tempDiv.innerHTML = newRow;
                let rowNode = tempDiv.querySelector('tr');
                table.appendChild(rowNode);
                initSelect2(rowNode);
            }

            // REMOVE ROW
            if (e.target.closest(".removeRow")) {

                let table = document.querySelector("#productTable tbody");

                if (table.rows.length == 1) {
                    alert("ต้องมีสินค้าอย่างน้อย 1 รายการ");
                    return;
                }

                e.target.closest("tr").remove();

                document.querySelectorAll("#productTable tbody tr").forEach((row, index) => {
                    row.querySelector(".row-number").innerText = index + 1;
                });

                calculateGrandTotal(); // ✅ เรียกตรงนี้ถูกต้อง
            }

        });


        // AUTO CALCULATE TOTAL
        document.addEventListener("input", function(e) {

            if (e.target.classList.contains("qty") || e.target.classList.contains("price")) {

                let row = e.target.closest("tr");

                let qty = parseFloat(row.querySelector(".qty").value) || 0;
                let price = parseFloat(row.querySelector(".price").value) || 0;

                row.querySelector(".total").value = (qty * price).toFixed(2);

                calculateGrandTotal(); // ✅ update grand total
            }

        });


        // GRAND TOTAL
        function calculateGrandTotal() {
            let total = 0;

            document.querySelectorAll(".total").forEach(el => {
                total += parseFloat(el.value) || 0;
            });

            document.getElementById("grandTotal").innerText = total.toFixed(2);
        }

        // PRODUCT SELECTION & AUTO PRICE
        $(document).on('change', '.product-select', function() {
            let val = $(this).val();
            let row = $(this).closest('tr');

            // Auto Price
            let price = $(this).find(':selected').data('price') || 0;
            row.find(".price").val(price).trigger('input');

            // Check Duplicate
            let selected = [];
            $(".product-select").each(function() {
                if ($(this).val()) selected.push($(this).val());
            });

            let duplicates = selected.filter((item, index) => selected.indexOf(item) !== index);
            if (duplicates.length > 0) {
                setTimeout(() => {
                    alert("เลือกสินค้าซ้ำ");
                    $(this).val("").trigger('change.select2');
                    row.find(".price").val("");
                    row.find(".total").val("");
                    calculateGrandTotal();
                }, 10);
            }
        });

        document.addEventListener("DOMContentLoaded", function() {
            $('.select2').select2({
                width: '100%'
            });
            calculateGrandTotal();
        });
    </script>
@endsection


@section('content')
    @include('layouts.sidebar')
    @include('layouts.header-sub')

    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row gx-lg-8 gx-xl-12">

                <div class="col-md-12">
                    <h5 class="display-1 mb-3" style="font-size: 30px">@yield('title')</h5>
                    <p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
                </div>

                <div class="col-lg-12">
                    <div class="blog single">
                        <div class="card">
                            <div class="card-body">

                                <form action="{{ url('/restockedit') }}" method="post" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="restock_id" value="{{ $restock->stock_id ?? 0 }}">
                                    <div class="row mb-3">
                                        <div class="col-md-3">
                                            <label class="form-label">Purchase Order</label>
                                            <input type="text" class="form-control" name="purchase_order"
                                                value="{{ old('purchase_order', $restock->purchase_order ?? '') }}"
                                                required>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-3">
                                            <label class="form-label">Entry Date</label>
                                            <input type="date" class="form-control" name="entry_date" value="{{ old('entry_date', (isset($restock->entry_date) ? \Carbon\Carbon::parse($restock->entry_date)->format('Y-m-d') : '')) }}">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Order Date</label>
                                            <input type="date" class="form-control" name="order_date" value="{{ old('order_date', (isset($restock->order_date) ? \Carbon\Carbon::parse($restock->order_date)->format('Y-m-d') : '')) }}">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Delivery Date</label>
                                            <input type="date" class="form-control" name="delivery_date" value="{{ old('delivery_date', (isset($restock->delivery_date) ? \Carbon\Carbon::parse($restock->delivery_date)->format('Y-m-d') : '')) }}">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Supplier</label>
                                            <select class="form-control" name="supplier_id" id="">
                                                <option value="">-- Select Supplier --</option>
                                                @foreach ($suppliers as $i => $supplier)
                                                    <option value="{{ $supplier->supplier_id }}"
                                                        {{ isset($restock) && $restock->supplier_id == $supplier->supplier_id ? 'selected' : '' }}>
                                                        {{ $supplier->supplier_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <br>

                                    <div class="table-responsive">
                                        <table id="productTable" width="100%" class="table table-bordered text-center">
                                            <thead>
                                                <tr>
                                                    <th style="width: 50px;">No.</th>
                                                    <th>Product (Code - Name)</th>
                                                    <th style="width: 120px;">Quantity</th>
                                                    <th style="width: 150px;">Price</th>
                                                    <th style="width: 150px;">Total</th>
                                                    <th style="width: 80px;">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                @if (isset($items) && count($items) > 0)
                                                    @foreach ($items as $index => $item)
                                                        <tr>
                                                            <td class="row-number">{{ $index + 1 }}</td>
                                                            <td>
                                                                <select class="form-control select2 product-select" name="product_id[]" required>
                                                                    <option value="">-- Select Product (Code - Name) --</option>
                                                                    @foreach ($products as $product)
                                                                        <option value="{{ $product->product_id }}"
                                                                            data-price="{{ $product->product_current_unit_price }}"
                                                                            {{ $item->product_id == $product->product_id ? 'selected' : '' }}>
                                                                            {{ $product->product_code }} - {{ $product->product_name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </td>

                                                            <td>
                                                                <input type="number" class="form-control qty"
                                                                    name="quantity[]" value="{{ $item->quantity }}"
                                                                    min="1" step="1">
                                                            </td>

                                                            <td>
                                                                <input type="number" class="form-control price"
                                                                    name="price[]" value="{{ $item->price }}"
                                                                    step="0.01">
                                                            </td>

                                                            <td>
                                                                <input type="number" class="form-control total"
                                                                    name="total[]" value="{{ $item->total }}" readonly>
                                                            </td>

                                                            <td>
                                                                <button type="button"
                                                                    class="btn btn-danger btn-sm removeRow rounded-pill">
                                                                    <i class="uil uil-trash-alt"></i>
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @else
                                                    {{-- ถ้าไม่มี item (create ใหม่) --}}
                                                    <tr>
                                                        <td class="row-number">1</td>
                                                        <td>
                                                            <select class="form-control select2 product-select" name="product_id[]" required>
                                                                <option value="">-- Select Product (Code - Name) --</option>
                                                                @foreach ($products as $product)
                                                                    <option value="{{ $product->product_id }}"
                                                                        data-price="{{ $product->product_current_unit_price }}">
                                                                        {{ $product->product_code }} - {{ $product->product_name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control qty" name="quantity[]"
                                                                min="1">
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control price" name="price[]"
                                                                step="0.01">
                                                        </td>
                                                        <td>
                                                            <input type="number" class="form-control total" name="total[]"
                                                                readonly>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-green btn-sm addRow rounded-pill">
                                                                <i class="uil uil-plus" style="color: black !important"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endif

                                            </tbody>
                                        </table>
                                        <div class="text-end mt-3">
                                            <h5>Grand Total: <span id="grandTotal">0.00</span></h5>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <label class="form-label">Remark</label>
                                            <textarea class="form-control" name="remark" rows="3">{{ old('remark', $restock->remark ?? '') }}</textarea>
                                        </div>
                                    </div>

                                    <br>

                                    <div class="text-center">
                                        <button class="btn btn-primary rounded-pill">Submit</button>
                                        <a href="{{ url('/restocklist') }}" class="btn btn-danger rounded-pill">Back</a>
                                    </div>

                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Template สำหรับ Select ช่องเดียว --}}
    <div id="productTemplate" style="display:none">
        <option value="">-- Select Product (Code - Name) --</option>
        @foreach ($products as $product)
            <option value="{{ $product->product_id }}"
                data-price="{{ $product->product_current_unit_price }}">
                {{ $product->product_code }} - {{ $product->product_name }}
            </option>
        @endforeach
    </div>

    @include('layouts.footer')
@endsection