@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-cart-plus"></i> Create Purchase</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="d-flex justify-content-between">
                                            <label for="supplier_id">Select Supplier</label>
                                            <button type="button" data-target="#modal-add" data-toggle="modal" class="btn btn-sm btn-info mb-1">
                                                <i class="fas fa-plus-circle"></i> Add Supplier
                                            </button>
                                        </div>
                                        <select name="supplier_id" class="form-control">
                                            @foreach($suppliers as $supplier)
                                                <option value="{{ $supplier->id }}">
                                                    {{ $supplier->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <!-- Date -->
                                    <div class="col-md-6">
                                        <label>Date</label>
                                        <input type="datetime-local" id="date-time" name="date" class="form-control" >
                                    </div>  
                                    <!-- PRODUCT SEARCH -->
                                    <div class="col-md-12 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>
                                <hr>

                                <div class="table-responsive">
                                    <table class="table table-bordered" id="itemsTable">
                                        <thead class="bg-light">
                                            <tr>
                                                <th>Product</th>
                                                <th width="80">P.Qty</th>
                                                <th width="80">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="100">Subtotal</th>
                                                <th width="80">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>

                            </div> <!-- card-body -->
                        </div> <!-- card -->
                    </div> <!-- col-md-8 -->


                    <!-- RIGHT SIDE -->
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <h1 class="text-center font-weight-bold">
                                    <span id="display_total">0.00</span>
                                </h1>

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

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

                                <div class="form-group">
                                    <label>Paid</label>
                                    <input type="number" id="paid"
                                        name="paid" class="form-control" value="0" 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">Cash</option>
                                        <option value="Bank">Bank</option>
                                    </select>
                                </div>
                                
                                <button type="submit"
                                        class="btn btn-success btn-block btn-lg">
                                    Complete Purchase
                                </button>

                            </div> <!-- card-body -->
                        </div> <!-- card -->
                    </div> <!-- col-md-4 -->

                </div> <!-- row -->
            </form>
        </div> <!-- container-fluid -->

        <div id="modal-add" class="modal fade" role="dialog">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Add Supplier</h4>
                        <button type="button" class="close"
                            data-dismiss="modal">&times;</button>
                    </div>
                    <form action="{{route('admin.supplier.create')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            <div class="row">
                                <input type="hidden" value="modal" name="modal">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        <input type="text" id="name" name="name" class="form-control"
                                            value="{{old('name')}}"
                                            placeholder="Enter ">
                                        @error('name')
                                        <span class="text-danger text-sm pull-right">{{$errors->first('name')}}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="phone">Phone</label>
                                        <input type="number" id="phone" name="phone" class="form-control"
                                            value="{{old('phone')}}"
                                            placeholder="Enter ">
                                        @error('phone')
                                        <span class="text-danger text-sm pull-right">{{$errors->first('phone')}}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="address">Address</label>
                                        <textarea class="form-control" rows="2" id="address" name="address"
                                                placeholder="Enter ">{{old('address')}}</textarea>
                                        @error('address')
                                        <span
                                            class="text-danger text-sm pull-right">{{$errors->first('address')}}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-sm btn-info">Save Record</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </section>
</div> <!-- content-wrapper -->

@endsection

@push('script')
<script>
const products = @json($products);
$(document).ready(function () {
    $('#product_search').focus();
    let row = 0;
    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;
        }

        row++;

        let html = `
            <tr data-packsize="${packSize}">
                <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"
                        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>
                </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).data('packsize')) || 0;

            // 🔴 UNIT VALIDATION
            if (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