@include('layouts.header')
@include('layouts.sidebar')

<script src="{{ asset('js/pharmacy-purchase.js') }}" type="text/javascript"></script>

<!-- ========================
   Start Page Content
  ========================= -->

<style>
    div#sidebar,
    .navbar-header {
        display: none;
    }


    .page-wrapper {
        margin: 0;
        width: 100%;
    }

    header.navbar-header {
        margin: 0 !important;
    }

    .purch-item-input {
        text-align: left !important;
    }
</style>

<div class="page-wrapper">

    <!-- Start Content -->
    <div class="content" id="purchases">

        <!-- Start Page Header -->
        <div class="d-flex align-items-sm-center flex-sm-row flex-column gap-2 mb-3 pb-3 border-bottom">
            <div class="flex-grow-1">
                <a href=" {{ $route }}" class="btn btn-primary">Back</a>
            </div>
            <div class="flex-grow-1">
                <h4 class="fw-bold mb-0">New {{ $module }}</h4>
            </div>
            <a href="javascript:void(0);" class="btn btn-primary ms-2 fs-13 btn-md" data-bs-toggle="modal"
                data-bs-target="#addModel"><i class="ti ti-plus me-1"></i>Add Item</a>

        </div>
        <!-- End Page Header -->

        <form action="{{ $route }}" method="POST">
            @csrf
            <div class="card">
                <div class="card-body">

                    <div class="row">
                        <div class="col-md-4">
                            <label class="form-label">Vendor</label>
                            <select name="vendor_id" id="vendor_id" class="form-control select2" required>
                                <option value="">Select Vendor</option>
                                @foreach ($vendors as $item)
                                    <option value="{{ $item->id }}" {{ isset( $data) && $data->vendor_id == $item->id ? 'selected' : '' }}>{{ $item->name }} - {{ $item->address }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label">Balance</label>
                            <input type="text" class="form-control" value="23,000" disabled>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label">Date</label>
                            <input type="date" id="date" class="form-control" value="{{ date('Y-m-d') }}">
                        </div>

                        <div class="col-md-2">
                            <label class="form-label">Purchase Id</label>
                            <input type="text" class="form-control" value="{{ $receipt_no }}" disabled>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Invoice No</label>
                            <input type="text" name="invoice_no" id='invoice_no' class="form-control">
                        </div>
                    </div>

                </div>
            </div>


            <div class="card" id="itemRows">
                <div class="card-body">
                    <div class="table-scroll">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th width="18%">Item <span class="text-danger">*</span></th>
                                    <th>Batch No</th>
                                    <th>Packing</th>
                                    <th>Expiry (MM-YY)</th>
                                    <th>HSN</th>
                                    <th>Item Code</th>
                                    <th>Item /(Pack)</th>
                                    <th>Qty <span class="text-danger">*</span></th>
                                    <th>Free</th>
                                    <th>Pur Rate</th>
                                    <th>Pur Cost <span class="text-danger">*</span></th>
                                    <th>Disc Type</th>
                                    <th>Disc Value</th>
                                    <th>Disc Amount</th>
                                    <th>Tax Rate</th>
                                    <th>Tax Amount</th>
                                    <th>MRP <span class="text-danger">*</span></th>
                                    <th>Total</th>
                                    <th></th>
                                </tr>
                            </thead>

                            @if ($action == 'add')
                                @include('pharmacy::purchase.create-table')
                            @else
                                @include('pharmacy::purchase.verify-table')
                            @endif

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


        </form>


    </div>
    <!-- End Content -->

</div>

<div id="purchase-tot-area">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <table>
                <tr>
                    <td>
                        <p>TOT. ITEMS: <b><span id="totItems">0.00</span></b></p>
                    </td>
                    <td>
                        <p>TOT. DISC: <b><span id="totDesc">0.00</span></p></b>
                    </td>
                    <td>
                        <p>MARGIN (%): <b><span id="mrgin_per">0.00</span></p></b>
                    </td>
                    <td>
                        <p>TOTAL: <b><span id="gross_sub_total">0.00</span></p></b>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p>TOT. QTY: <b><span id="totQty">0.00</span></b></p>
                    </td>
                    <td>
                        <p>TOT. TAX: <b><span id="totTax">0.00</span></b></p>
                    </td>
                    <td>
                        <p>MARGIN ({{ env('CURRENCY') }}): <b><span id="mrgin_amount">0.00</span></p></b>
                    </td>
                    <td>
                        <p>TOT (+TAX): <b><span id="grossTotal">0.00</span></p></b>
                    </td>
                </tr>

            </table>
        </div>


        <div class="separator"></div>


        <div>
            <p class="mb-2 fs-14">Payment Type:-</p>
            <div class="payment-type-area">
                <div class="payment-type credit active" data-name="credit">
                    <input type="radio" class="me-1" name="payment_type" id="credit" checked>
                    <label for="credit">CREDIT</label>
                </div>
                <div class="payment-type payment" data-name="payment">
                    <input type="radio" class="me-1" name="payment_type" id="payment">
                    <label for="payment">PAYMENT</label>
                </div>

            </div>
        </div>

        <div class="separator"></div>


        <div>
             <p id="roudoff">Round-Off: <span id="tot-roud-off">0.00</span></p>
            <div id="save-purchase">
                <i class="ti ti-device-floppy me-2"></i> SAVE PURCHASE
            </div>
        </div>



    </div>
</div>

@include('pharmacy::purchase.payment-canvas')
@include('pharmacy::add-item')


@if ($action == 'verify')
    <script>
        updateBilling({
            action: "verify",
            payment_type: "credit",
            purchase_id: "{{ $data->id }}",
            total_items: "{{ $data->total_items }}",
            total_qty: "{{ $data->total_qty }}",
            round_off: "{{ $data->round_off }}",
            total_tax: "{{ $data->total_tax }}",
            discount: "{{ $data->discount }}",
            margin_amount: "{{ $data->margin_amount }}",
            margin_per: "{{ $data->margin_per }}",
            gross_wt_tax_total: "{{ $data->gross_wt_tax }}",
            gross_total: "{{ $data->gross_total }}",
        });
    </script>
@endif

<input type="text" value="{{ route('purchase.store') }}" id="postUrl">

<!-- ========================
   End Page Content
  ========================= -->
<script>
    // click payment-type div
    $(document).on("click", ".payment-type", function() {

        // remove active class from all
        $(".payment-type").removeClass("active");

        // add active to clicked
        $(this).addClass("active");

        // check radio button
        $(this).find('input[type="radio"]').prop("checked", true);

    });
</script>

<script>
    saveToLocal();

    $('.purch-item-input').focus();



    let suggestionData = {};
    let flatIndexMap = [];
    let currentIndex = -1;
    let selectedRow = null;


    $(document).on('keyup', '.purch-item-input', function(e) {
        let input = $(this);
        let query = input.val();
        let box = input.siblings('.suggestions');

        if (!query || [38, 40, 13].includes(e.keyCode)) return;

        $.post("{{ route('pharmacy-item.find') }}", {
            _token: $('meta[name="csrf-token"]').attr('content'),
            query: query
        }, function(data) {

            suggestionData = data;
            hsnMap = {};
            currentIndex = -1;

            let html = '';
            let i = 0;

            Object.keys(data).forEach(key => {

                let items = data[key];
                let firstItem = items; // 👈 only show one
                let batch = items.batches[items.batches.length - 1].batch_no;

                html += `
            <a href="#" class="list-group-item suggest-item" data-index="${i}" data-item-id="${items.id}" data-batch="${batch}">${firstItem.name}
            </a>`;

    
                hsnMap[i] = {
                    hsn: items.hsn,
                    items: items.batches
                };

                i++;
            });

            box.html(html);
        });
    });

    // --------------------
    // AUTOCOMPLETE NAV
    // --------------------
    $(document).on('keydown', '.purch-item-input', function(e) {
        let items = $(this).siblings('.suggestions').find('.suggest-item');

        if (!items.length) return;

        if (e.keyCode === 40) currentIndex++;
        if (e.keyCode === 38) currentIndex--;

        currentIndex = Math.max(0, Math.min(currentIndex, items.length - 1));



        if (e.keyCode === 13 && currentIndex >= 0) {
            e.preventDefault();
            $(items[currentIndex]).click();
            return;
        }

        items.removeClass('active');
        $(items[currentIndex]).addClass('active');
    });

    // --------------------
    // SELECT MEDICINE
    // --------------------
    $(document).on('click', '.suggest-item', function() {
        let row = $(this).closest('tr');
        let itemId = $(this).data('item-id');
        let batch = $(this).data('batch');
    
        row.find('.purch-item-input').val($(this).text());
        row.find('.purch-batch-input').val(batch);
        row.find('.purch-item-id').val(itemId);
        row.find('.suggestions').html('');
        row.find('.enter-next:first').focus();
    });

    // --------------------
    // CLICK OUTSIDE CLOSE
    // --------------------
    $(document).on('click', function(e) {
        if (!$(e.target).closest('.purch-item-input, .suggestions').length) {
            $('.suggestions').html('');
        }
    });


    // ====================
    // ENTER NAVIGATION
    // ====================
    $(document).on('keydown', '.item-row input, .item-row select', function(e) {

        if (e.key === 'Enter') {
            e.preventDefault();

            let row = $(this).closest('.item-row');

            let inputs = row.find('input, select')
                // .not('.pharm-input-dis-type') // ✅ skip this field
                .filter(':visible:not([disabled])');

            let index = inputs.index(this);

            if (index == 0) {
                let item = row.find('.purch-item-input').val();
                let itemId = row.find('.purch-item-id').val();
                let purCost = row.find('.purch-pur-cost-input').val();

                if (item == '' || itemId == '') {
                    warningAlert("Please select item");
                    return
                };
            }

            if (index == 1) {
                let value = row.find('.purch-batch-input').val();
                if (value == '') {
                    warningAlert("Please enter batch");
                    return
                };
            }
            if (index == 7) {
                let value = row.find('.purch-qty-input').val();
                if (value == '') {
                    warningAlert("Please enter quantity");
                    return
                };
            }

            if (index == 10) {
                let value = row.find('.purch-pur-cost-input').val();
                if (value == '') {
                    warningAlert("Please enter purchase cost");
                    return
                };
            }

            if (index == 14) {
                let value = row.find('.purch-mrp-input').val();
                if (value == '') {
                    warningAlert("Please enter MRP");
                    return
                };
            }

            if (index + 1 < inputs.length) {
                inputs.eq(index + 1).focus();
            } else {
                $('.addBtn').click();

                setTimeout(() => {
                    row.next().find('.pharm-item-input').focus();
                }, 100);
            }
        }
    });


    // ===============================
    // ADD NEW ROW AT BOTTOM
    // ===============================

    $(document).on("click", ".addBtn", function() {

        let checkFailed = true;

        $(".item-row").each(function() {

            let itemName = $(this).find(".purch-item-input").val();
            let item_id = $(this).find(".purch-item-id").val();
            let qty = $(this).find(".purch-qty-input").val();
            let purCost = $(this).find(".purch-pur-cost-input").val();
            let mrp = $(this).find(".purch-mrp-input").val();

            if (itemName == "" || item_id == "" || qty == "" || purCost == "" || mrp == "") {
                warningAlert("required fields cannot be empty");
                checkFailed = true;
            } else {
                checkFailed = false;
            }

        });

        // checkFailed = false;

        if (checkFailed == false) {
            let currentRow = $(this).closest("tr");
            let newRow = currentRow.clone();
            newRow.find("input").val("");
            newRow.find(".purch-qty-input").val(1);
            newRow.find(".purch-item-id").val("");
            newRow.find(".suggestions").html("");

            newRow.find(".addBtn")
                .removeClass("btn-success addBtn")
                .addClass("btn-danger removeBtn")
                .html("-");

            $("#itemRows tbody").append(newRow);
            newRow.find(".purch-item-input").focus();
        }

    });



    // ===============================
    // REMOVE ROW
    // ===============================
    $(document).on("click", ".removeBtn", function() {

        if ($("#itemRows tbody tr").length > 1) {
            $(this).closest("tr").remove();
        }

    });


    $("#offcanvas_add_payment").on("hide.bs.offcanvas", function() {
        if (localStorage.getItem("paymentState")) {
            $(".payment-type.credit").removeClass("active");
            $(".payment-type.payment").addClass("active");
        } else {
            updateBilling({
                payment_type: 'credit',
            });
            $('#credit').prop('checked', true);
            $(".payment-type.credit").addClass("active");
            $(".payment-type.payment").removeClass("active");
        }
    });
</script>

@include('layouts.footer')