@extends('admin.layout.app')

@section('content')
<style>
.search-wrapper {
    position: relative;
}

#product_results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    display: none;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
}

.content-wrapper {
    overflow-x: hidden;
}
.font-weight-bold{
    background: black;
    color: white;
    padding: 15px;
    border-radius:5px;
}
.product-item.active {
    background-color: #007bff !important;
    color: #fff !important;
}
.table td, .table th{
    padding: 0px !important;
}
.list-group-item{
    padding: 0px 5px !important;
}
</style>

<div class="content-wrapper">
    <section class="content py-2">
        <div class="container-fluid">

            <form action="" method="POST">
                @csrf
                <div class="row">
                    <!-- LEFT SIDE -->
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-header">
                                <h6><i class="fas fa-edit"></i> Edit Purchase</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>Customer</label>
                                        <select name="supplier_id" class="form-control">
                                            @foreach($suppliers as $supplier)
                                                <option value="{{$supplier->id}}"
                                                    {{ $purchase->supplier_id == $supplier->id ? 'selected' : '' }}>
                                                    {{$supplier->name}}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Date</label>
                                        <input type="datetime-local" id="date-time" name="date" class="form-control" value="{{ $purchase->date }}" >
                                    </div> 

                                    <div class="col-md-6 mt-2">
                                        <label>Search Product by name & code</label>
                                        <div class="search-wrapper">
                                            <input type="text"
                                                id="product_search"
                                                class="form-control"
                                                placeholder="Search by name or code"
                                                autocomplete="off">
                                            <!-- Dropdown -->
                                            <div id="product_results" class="list-group shadow"></div>
                                        </div>
                                        <!-- Append Below Search -->
                                        {{-- <div class="mt-2">
                                            <ul id="product_list" class="list-group"></ul>
                                        </div> --}}
                                    </div>

                                    {{-- <div class="col-md-4">
                                        <label>Select Product</label>
                                        <select id="product_id" class="form-control select2">
                                            <option value="">Select & Search</option>
                                            @foreach($products as $product)
                                                <option value="{{ $product->id }}"
                                                        data-rate="{{ $product->purchase_rate }}">
                                                    {{ $product->name }} - {{ $product->pack_size }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div> --}}
                                </div>

                                <hr>

                                <table class="table table-bordered" id="itemsTable">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>Product</th>
                                            <th width="90">P.Qty</th>
                                            <th width="90">U.Qty</th>
                                            <th width="90">P.Rate</th>
                                            <th width="90">U.Rate</th>
                                            <th width="90">Batch No</th>
                                            <th width="90">Expiry Date</th>
                                            <th width="120">Subtotal</th>
                                            <th width="80">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $row = 0; @endphp
                                        @foreach($purchase->items as $item)
                                            @php $row++; @endphp
                                            <tr>
                                                <td>
                                                    <input type="hidden"
                                                        name="products[{{$row}}][product_id]"
                                                        value="{{$item->product_id}}">
                                                    <input type="text"
                                                        class="form-control"
                                                        value="{{$item->product->name}} {{$item->product->strength}} | {{$item->product->code}} | Pack: {{$item->product->pack_size}}"
                                                        readonly>
                                                </td>

                                                <td>
                                                    <input type="number"
                                                        name="products[{{$row}}][pack_quantity]"
                                                        class="form-control pack_qty"
                                                        value="{{$item->pack_quantity}}"
                                                        min="0" step="0.01">
                                                </td>

                                                <td>
                                                    <input type="number"
                                                        name="products[{{$row}}][unit_quantity]"
                                                        class="form-control unit_qty"
                                                        data-packsize="{{ $item->product->pack_size }}"
                                                        value="{{$item->unit_quantity}}"
                                                        min="0" step="0.01">
                                                </td>

                                                <td>
                                                    <input type="number"
                                                        name="products[{{$row}}][pack_rate]"
                                                        class="form-control pack_rate"
                                                        value="{{$item->pack_rate}}"
                                                        min="0" step="0.01">
                                                </td>


                                                <td>
                                                    <input type="number"
                                                        name="products[{{$row}}][unit_rate]"
                                                        class="form-control unit_rate"
                                                        value="{{$item->unit_rate}}"
                                                        step="0.01" step="0.01">
                                                </td>
                                                <td>
                                                    <input type="text"
                                                        name="products[{{$row}}][batch_no]"
                                                        class="form-control batch_no"
                                                        value="{{$item->batch_no}}">
                                                </td>

                                                <td>
                                                    <input type="date"
                                                        name="products[{{$row}}][expiry_date]"
                                                        class="form-control expiry_date"
                                                        value="{{$item->expiry_date}}">
                                                </td>
                                                <td>
                                                    <input type="number"
                                                        name="products[{{$row}}][subtotal]"
                                                        class="form-control subtotal"
                                                        value="{{$item->subtotal}}"
                                                        readonly step="0.01">
                                                </td>

                                                <td style="text-align:center;">
                                                    <button type="button"
                                                            class="btn btn-danger btn-sm remove">
                                                        Remove
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- RIGHT SIDE BILL -->
                    <div class="col-md-3">
                        <div class="card bill-panel">
                            <div class="card-body">

                                <h3 class="text-center font-weight-bold">
                                    <span id="display_total">{{ number_format($purchase->total,2) }}</span>
                                </h3>

                                {{-- <div class="pos-total-box mb-3">
                                    <h3 id="display_total">
                                        {{ number_format($purchase->total,2) }}
                                    </h3>
                                </div> --}}

                                <div class="form-group">
                                    <label>Total</label>
                                    <input type="number"
                                           id="grand_total" name="total" class="form-control" value="{{ $purchase->total }}" readonly step="0.01">
                                </div>

                                <div class="form-group">
                                    <label>Discount</label>
                                    <input type="number" name="discount"
                                           id="discount" class="form-control" value="{{ $purchase->discount }}" step="0.01">
                                </div>

                                <div class="form-group">
                                    <label>Paid</label>
                                    <input type="number"
                                           id="paid" name="paid" class="form-control"
                                           value="{{ $purchase->paid }}" step="0.01">
                                </div>

                                <div class="form-group">
                                    <label for="mop">MOP</label>
                                    <select id="mop" name="mop" class="form-control"
                                            data-placeholder="Select MOP">
                                        <option value="Cash" {{ $purchase->mop == 'Cash' ? 'selected' : '' }}>Cash</option>
                                        <option value="Bank" {{ $purchase->mop == 'Bank' ? 'selected' : '' }}>Bank</option>
                                    </select>
                                </div>

                                <button type="submit"
                                        class="btn btn-success btn-block btn-lg">
                                    Update Purchase
                                </button>

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

                </div>
            </form>

        </div>
    </section>
</div>
@endsection
@push('script')
<script>
    const products = @json($products);
    $(document).ready(function () {
        $('#product_search').focus();
        let row = $('#itemsTable tbody tr').length;
        let selectedIndex = -1;
        // ==============================
        // SEARCH PRODUCTS
        // ==============================
        $('#product_search').on('keyup', function (e) {

            if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
                return;
            }

            let keyword = $(this).val().toLowerCase().trim();
            let resultBox = $('#product_results');

            resultBox.empty();
            selectedIndex = -1;

            if (keyword.length === 0) {
                resultBox.hide();
                return;
            }

            let filtered = products.filter(function (p) {
                return (
                    (p.name && p.name.toLowerCase().includes(keyword)) ||
                    (p.code && p.code.toLowerCase().includes(keyword))
                );
            });

            if (filtered.length === 0) {
                resultBox.hide();
                return;
            }

            filtered.slice(0, 20).forEach(function (product) {

                resultBox.append(`
                    <a href="#"
                    class="list-group-item list-group-item-action product-item"
                    data-id="${product.id}"
                    data-name="${product.name} | ${product.code} | Pack: ${product.pack_size}"
                    data-packsize="${product.pack_size}"
                    data-packrate="${product.purchase_rate}"
                    data-unitrate="${product.purchase_unit_rate}">

                        <strong>${product.name} </strong><br>
                        <small>
                            Code: ${product.code} |
                            Pack Rate: ${product.purchase_rate} |
                            Unit Rate: ${product.purchase_unit_rate} |
                            Size: ${product.pack_size}
                        </small>
                    </a>
                `);
            });

            resultBox.show();
        });
        // ==============================
        // KEYBOARD NAVIGATION
        // ==============================
        $('#product_search').on('keydown', function (e) {

            let items = $('.product-item');
            if (!items.length) return;

            // DOWN
            if (e.key === "ArrowDown") {
                e.preventDefault();
                selectedIndex++;
                if (selectedIndex >= items.length) selectedIndex = 0;
                highlight(items);
            }

            // UP
            if (e.key === "ArrowUp") {
                e.preventDefault();
                selectedIndex--;
                if (selectedIndex < 0) selectedIndex = items.length - 1;
                highlight(items);
            }

            // ENTER
            if (e.key === "Enter") {
                e.preventDefault();
                if (selectedIndex >= 0) {
                    items.eq(selectedIndex).click();
                }
            }
        });

        function highlight(items) {

            items.removeClass('active');

            let activeItem = items.eq(selectedIndex);
            activeItem.addClass('active');

            // AUTO SCROLL INSIDE DROPDOWN
            let container = $('#product_results');

            let containerTop = container.scrollTop();
            let containerHeight = container.height();

            let itemTop = activeItem.position().top + containerTop;
            let itemHeight = activeItem.outerHeight();

            // If below view
            if (itemTop + itemHeight > containerTop + containerHeight) {
                container.scrollTop(itemTop + itemHeight - containerHeight);
            }

            // If above view
            if (itemTop < containerTop) {
                container.scrollTop(itemTop);
            }
        }
        // =============
        // CLICK PRODUCT
        // =============
        $(document).on('click', '.product-item', function (e) {
            e.preventDefault();

            let productId   = $(this).data('id');
            let productName = $(this).data('name');
            let packSize    = parseFloat($(this).data('packsize')) || 0;
            let packRate    = parseFloat($(this).data('packrate')) || 0;
            let unitRate    = parseFloat($(this).data('unitrate')) || 0;

            // Prevent duplicate
            let exists = false;
            $('#itemsTable tbody input[type="hidden"]').each(function () {
                if ($(this).val() == productId) {
                    exists = true;
                }
            });

            if (exists) {
                alert('Product already added');
                resetSearch();
                return;
            }

            let row = Date.now();

            let html = `
                <tr>
                    <td>
                        <input type="hidden"
                            name="products[${row}][product_id]"
                            value="${productId}">
                        <input type="text"
                            class="form-control"
                            value="${productName}"
                            readonly>
                    </td>

                    <td>
                        <input type="number"
                            name="products[${row}][pack_quantity]"
                            class="form-control pack_qty"
                            value="1"
                            min="0"
                            step="0.01">
                    </td>

                    <td>
                        <input type="number"
                            name="products[${row}][unit_quantity]"
                            class="form-control unit_qty"
                            data-packsize="${packSize}"
                            value="1"
                            min="0"
                            step="0.01">
                    </td>
                    
                    <td>
                        <input type="number"
                            name="products[${row}][pack_rate]"
                            class="form-control pack_rate"
                            value="${packRate}"
                            min="0"
                            step="0.01">
                    </td>

                    <td>
                        <input type="number"
                            name="products[${row}][unit_rate]"
                            class="form-control unit_rate"
                            value="${unitRate}"
                            min="0"
                            step="0.01">
                    </td>
                    <td>
                        <input type="text"
                            name="products[${row}][batch_no]"
                            class="form-control batch_no">
                    </td>
                    <td>
                        <input type="date"
                            name="products[${row}][expiry_date]"
                            class="form-control expiry_date">
                    </td>
                    <td>
                        <input type="number"
                            name="products[${row}][subtotal]"
                            class="form-control subtotal"
                            readonly step="0.01">
                    </td>

                    <td style="text-align:center;">
                        <button type="button"
                            class="btn btn-danger btn-sm remove">
                            Remove
                        </button>
                    </td>
                </tr>
            `;

            $('#itemsTable tbody').append(html);

            calculate();
            resetSearch();
        });

        function resetSearch() {
            $('#product_search').val('');
            $('#product_results').hide();
            selectedIndex = -1;
            setTimeout(function () {
                $('#product_search').focus();
            }, 50);
        }

        // ===========
        // REMOVE ITEM
        // ===========
        $(document).on('click', '.remove', function () {
            $(this).closest('tr').remove();
            calculate();
        });

        // ================
        // LIVE CALCULATION
        // ================
        $(document).on('input', '.pack_qty, .pack_rate, .unit_qty, .unit_rate, #discount', function () {
            calculate();
        });

        function calculate() {

            let total = 0;

            $('#itemsTable tbody tr').each(function () {

                let packQty   = parseFloat($(this).find('.pack_qty').val())  || 0;
                let packRate  = parseFloat($(this).find('.pack_rate').val()) || 0;

                let unitQty   = parseFloat($(this).find('.unit_qty').val())  || 0;
                let unitRate  = parseFloat($(this).find('.unit_rate').val()) || 0;

                let packSize = parseFloat($(this).find('.unit_qty').data('packsize')) || 0;

                if (packSize > 0 && unitQty > packSize) {
                    alert('Unit quantity cannot be greater than pack size (' + packSize + ')');
                    unitQty = packSize;
                    $(this).find('.unit_qty').val(packSize);
                }

                let subtotal = (packQty * packRate) + (unitQty * unitRate);

                $(this).find('.subtotal').val(subtotal.toFixed(2));

                total += subtotal;
            });

            $('#grand_total').val(total.toFixed(2));
            $('#display_total').text(total.toFixed(2));

            let discount = parseFloat($('#discount').val()) || 0;
            $('#paid').val((total - discount).toFixed(2));
        }

        // Hide dropdown when clicking outside
        $(document).click(function (e) {
            if (!$(e.target).closest('.search-wrapper').length) {
                $('#product_results').hide();
            }
        });

    });
</script>
@endpush