@extends('layouts.admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">

<link rel="stylesheet" href="{{ asset('css/jquery-editable-select.min.css') }}">

<link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

<link rel="stylesheet" href="{{ asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">

<style type="text/css">
    .modify_txt {

        margin-left: 3px;
        color: #d81b60;

    }

    .table-sm td,
    .table-sm th {
        padding: .1rem;
    }

    .title_plist {
        display: none;
    }

    div.mdl1 {

        left: -8%;

    }

    table.dataTable tr.odd>td,
    table.dataTable tr.even>td {

        padding: 2px 2px;

    }

    div.mdl1 div.modal-dialog {
        max-width: 350px;

    }

    #example1_filter {
        position: relative;
        left: -82px;

    }

    .table-sm td,
    .table-sm th {

        font-size: 15px;

    }

    .table-sm td,
    .table-sm th {
        font-size: 14px;
        color: #000;
        font-weight: bold;
    }

    .disnone {
        display: none;

    }

    .disblock {
        display: block;

    }

    div.mdl2 {
        top: 1%;
        left: 2%;
    }

    div.mdl2 div.modal-dialog {
        max-width: 875px;

    }

    div.mhdr {
        padding: 0 5px;

    }

    .tblimg {
        height: 16px;
        width: 16px;
    }

    .tbltxt {
        margin: 0;
        padding: 0;
        font-size: 13px;
    }


    .d1 {
        position: relative;
    }

    .tbll {
        position: absolute;
        top: 2px;
        right: 3px;
        font-size: 13px;
        font-weight: 700;

    }

    /* hide the default */
    .productlist input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid #ccc;
        border-radius: 3px;
        display: inline-block;
        position: relative;
    }

    /* checked */
    .productlist input[type="checkbox"]:checked {
        background-color: #28a745;
        /* green */
        border-color: #28a745;
    }

    /* disabled */
    .productlist input[type="checkbox"]:disabled {
        background-color: #f8d7da;
        /* light red */
        border-color: #f5c6cb;
        cursor: not-allowed;
    }
</style>
@endpush

@section('content')
<!-- Main content -->
<section class="content mt-1 p-0" style="min-height: 600.4px;">
    <div class="container-fluid">
        <div class="row">

            <div class="col-md-8">

                <div class="row">
                    <div class="col-md-3">
                        <p class="mb-1 text-center font-weight-bold">Categories</p>
                        <div class="pl-2" style="height: 480px;overflow-y: scroll;">
                            <ul class="list-unstyled">

                                @foreach ($categories as $cat)
                                <li>
                                    <button type="button"
                                        class="btn btn-block btn-dark btn-md mb-1 white text-light font-weight-bold product_cat"
                                        data-toggle="modal" data-target="#modal-lg3"
                                        data-catid="{{ $cat->id }}">
                                        {{ $cat->cat_name }}
                                    </button>
                                </li>
                                @endforeach

                            </ul>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="mt-2 p-2" style="background: #343a40;">

                            <div class="row">

                                <input type="hidden" id="move_item" value="">
                                <input type="hidden" id="move_qty" value="">
                                <input type="hidden" id="sale_id" value="">
                                <input type="hidden" id="tbl_id" value="">
                                <input type="hidden" id="waiter_id" value="">
                                <input type="hidden" id="person" value="">
                                <input type="hidden" id="tbl_status" value="">

                                <div class="col-4">
                                    <input type="text" id="prode_code" class="form-control form-control-sm" placeholder="Code" tabindex="1">

                                </div>


                                <div class="col-6">

                                    <select id="product_name" class="form-control form-control-sm"
                                        style="background:#fff;color: #000;">

                                        @foreach ($products as $v)
                                        <option value="{{ $v->product_code }}"> {{ $v->product_code }}-{{ $v->product_name }}</option>
                                        @endforeach


                                    </select>
                                </div>

                                <div class="col-2">

                                    <!--  <button type="button" class="btn btn-success btn-sm">ADD</button> -->

                                    <button type="button" id="tbl_list" class="tbl_list btn btn-success btn-sm"
                                        data-toggle="modal" data-target="#modal-lg">View Table </button>


                                </div>


                            </div>


                        </div>
                        <div style="height: 480px;overflow-y: scroll;">
                            <table class="productlist table table-sm">
                                <thead>
                                    <tr>

                                        <th style="width:200px;">

                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="" id="checkAllInput">
                                                <label class="form-check-label" for="checkAllInput">PRODUCT NAME </label>

                                            </div>


                                        </th>
                                        <!--  <th>Stock</th> -->
                                        <!-- <th>Dis.</th> -->
                                        <th>QTY</th>
                                        <th>PRICE</th>
                                        <th class="text-right">AMOUNT</th>
                                        <th style="width:160px;" class="text-right"></th>
                                    </tr>
                                </thead>
                                <tbody class="title_plist">
                                    <tr>
                                        <td></td>
                                        <td style="display:none;" colspan="7">
                                            <span class="font-weight-bold"
                                                style="display: block;border-bottom: 1px solid #28a745;text-transform: uppercase;color: #28a745;">Others
                                                <button type="button" data-typeid="99"
                                                    style="float: right;margin-top: -2px;"
                                                    class="kot_print_btn btn bg-gradient-info btn-xs">Print</button>
                                            </span>
                                        </td>
                                    </tr>

                                </tbody>
                                <tbody class="food_list" id="card_product_list">


                                </tbody>

                                @foreach ($food_type as $v)
                                @php

                                $tid = 'type_' . $v->id;

                                @endphp

                                <tbody class="title_plist">
                                    <tr>
                                        <td colspan="7">
                                            <span class="font-weight-bold"
                                                style="display: block;border-bottom: 1px solid #28a745;text-transform: uppercase;color: #28a745;">{{ $v->type_name }}

                                                <button type="button" data-typeid="{{ $v->id }}"
                                                    style="float: right;margin-top: -2px;"
                                                    class="kot_print_btn btn bg-gradient-info btn-xs">Print</button></span>

                                        </td>
                                    </tr>

                                </tbody>
                                <tbody class="food_list2" id="{{ $tid }}">


                                </tbody>
                                @endforeach

                            </table>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <table class="table ml-3">
                        <tr>

                            <th class="p-1">
                                <button type="button" id="tbl_change" class="tbl_change btn btn-primary btn-sm"
                                    data-toggle="modal" data-target="#modal-lg2">
                                    Table Change
                                </button>
                            </th>

                            <th class="p-1" style="color: #d81b60;text-align: right;">
                                <h3> <b style="color: #000;">Total Amount: </b> <b> <span class="total_amt"> </span> </b>
                                </h3>
                            </th>

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

            <div class="col-md-4">

                <div class="card p-2">
                    <table class="table-borderless table table-sm">
                        <tbody>
                            <tr>
                                <th>TABLE: </th>
                                <th class="text-right" style="color: #d81b60;">
                                    <span id="tblno"></span>
                                </th>
                            </tr>
                            <tr>
                                <th>INVOICENO: </th>
                                <th class="text-right" style="color: #d81b60;">
                                    <span id="invno"></span>
                                </th>
                            </tr>
                        </tbody>

                    </table>
                    <hr style="margin: 0;">

                    <table class="table-borderless table table-sm">
                        <tbody>
                            <tr>
                                <th>Base Amount :</th>
                                <th class="text-right"> <span id="sub_total"> </span></th>
                            </tr>


                            <tr style="display:none;">
                                <input type="hidden" id="scharge_amt" value="">
                                <th>(+)Scharge:</th>
                                <th class="text-right"> <span id="scharge_html"> </span></th>
                            </tr>


                            <tr>
                                <input type="hidden" id="sdAmt" value="">
                                <th>(+)SD:</th>
                                <th class="text-right"> <span id="sd_amt"> </span></th>
                            </tr>

                            <tr>
                                <input type="hidden" id="vatAmt" value="">
                                <th>(+)VAT:</th>
                                <th class="text-right"> <span id="vat_amt"> </span></th>
                            </tr>

                        </tbody>

                    </table>


                    <hr style="margin: 0;">

                    <table class="table-borderless table table-sm">
                        <tbody>

                            <tr>
                                <th>Total Amount:</th>
                                <th class="text-right"> <span id="total_amount"> </span></th>
                            </tr>

                            <tr>
                                <input type="hidden" id="dis_balance" value="">
                                <input type="hidden" id="dis_amount" value="">

                                <th style="vertical-align: middle;">
                                    <div class="row align-items-center">
                                        <!-- Label -->
                                        <div class="col-sm-3 d-flex align-items-center">
                                            <label class="mb-0">Dis. Card No:</label>
                                        </div>

                                        <!-- Percent Input -->
                                        <div class="col-sm-4 d-flex align-items-center gap-2">
                                            <input type="text" class="form-control form-control-sm text-end" id="discount_card_no" placeholder="Dis. Card No">
                                        </div>

                                        <!-- Fixed Input -->
                                        <div style="display: none;" class="col-sm-4 align-items-center gap-2 d-none">
                                            <span style="margin-right: 2px;">Fixed </span>
                                            <input type="text" class="form-control form-control-sm text-end" id="fiexd_dis" placeholder="Fixed">
                                        </div>


                                        <!-- Fixed Input -->
                                        <div style="display: none;" class="col-sm-4 d-flex align-items-center gap-2 d-none">
                                            <span style="margin-right: 2px;">Dis(%) </span>
                                            <input type="text" class="form-control form-control-sm text-end" id="persent_dis" placeholder="%" readonly>
                                        </div>

                                    </div>
                                </th>


                                <th style="vertical-align: middle;text-align: right;"> <span id="total_dis_amt"></span></th>

                            </tr>


                            <tr style="display:none;">
                                <input type="hidden" id="aftDisAmt" value="">
                                <th>AFTER DISCOUNT:</th>
                                <th class="text-right"> <span id="aftdis"> </span> </th>
                            </tr>


                            <tr>
                                <input type="hidden" id="totalAmt" value="">
                                <th>Net Payable:</th>
                                <th style="color:#dc3545;" class="text-right"> <span id="Sub_total_amt"></span></th>

                            </tr>


                        </tbody>

                    </table>

                    <hr style="margin: 0;">

                    <table class="table-borderless table table-sm">
                        <tbody>

                            <tr style="display: none;">

                                <input type="hidden" id="adjust_ment_amt" value="">
                                <th>ROUND OF AMT. :

                                    <div class="icheck-primary d-inline">
                                        <input type="checkbox" id="is_adj" checked>
                                        <label for="is_adj">
                                        </label>
                                    </div>

                                </th>
                                <th class="text-right"> <span id="adjust_ment"></span> </th>
                            </tr>
                            <tr>
                                <th colspan="2">
                                    <div class="form-group row">

                                        <label class="col-sm-3 col-form-label"> DUAL PAY:</label>

                                        <div class="select2-purple col-sm-9">
                                            <select class="form-control form-control-sm select2" id="dualpay"
                                                multiple="multiple" data-placeholder="Select a State"
                                                data-dropdown-css-class="select2-purple" style="width: 100%;">
                                                @foreach ($pmethods as $v)
                                                <option value="{{ $v->id }}">{{ $v->pmode_name }}</option>
                                                @endforeach

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

                                </th>
                            </tr>

                            @foreach ($pmethods as $v)
                            @php

                            $cl = 'p_' . $v->id;

                            if ($v->pmode_name != 'CASH') {
                            $st = 'disnone';
                            $st2 = '';
                            } else {
                            $st = '';
                            $st2 = 'disnone';
                            }

                            @endphp

                            <tr class="pmethod {{ $cl }} {{ $st }}">
                                <th>{{ $v->pmode_name }}:</th>
                                <th class="text-right">

                                    <input type="number" class="form-control form-control-sm pay_val"
                                        style="width: 85px;float: right;text-align: right;" value=""
                                        data-mid="{{ $v->id }}">

                                </th>
                            </tr>
                            @endforeach

                            <tr>
                                <input type="hidden" id="change_amt" value="">
                                <th>CHANGE:</th>
                                <th style="color:#28a745;" class="text-right"> <span id="change_amt_htm"></span></th>
                            </tr>
                            <tr class="d-none">
                                <th><b>MOBILE NO:</b></th>
                                <th style="position: relative;">
                                    <input type="text" class="form-control form-control-sm" id="mobile_no"
                                        placeholder="Mobile No" autocomplete="off">
                                    <ul id="mobile_suggestions" style="
            display:none; position:absolute; z-index:9999; background:#fff;
            border:1px solid #ccc; width:100%; max-height:150px;
            overflow-y:auto; list-style:none; padding:0; margin:0; top:100%;
        "></ul>
                                </th>
                            </tr>

                            <tr class="d-none">
                                <th>

                                    <b>CUSTOMER NAME:</b>

                                </th>
                                <th>
                                    <input type="text" class="form-control form-control-sm text-end" id="customer_name" placeholder="Customer Name">
                                </th>


                            </tr>
                            <tr class="d-none">
                                <th>

                                    <b>NOTE:</b>


                                </th>
                                <th>
                                    <textarea rows="1" type="text" class="form-control form-control-sm text-end" id="note"></textarea>
                                </th>


                            </tr>

                            <t<tr>
                                <th>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="is_corporate">
                                        <label class="form-check-label" for="is_corporate">
                                            Is Corporate Sale?
                                        </label>
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex align-items-center gap-1">
                                        <select class="corp_hide form-control form-control-sm" id="client_id"
                                            style="width: 60%;">
                                            <option value=""> Select Corporate Client</option>
                                            @foreach ($clients as $v)
                                            <option data-mobile="{{ $v->mobile_number }}" data-discount="{{ $v->dis_percent }}"
                                                data-bin="{{ $v->bin }}" data-company="{{ $v->company_name }}"
                                                data-address="{{ $v->address }}" value="{{ $v->id }}">
                                                {{ $v->company_name }} - ({{ $v->mobile_number }})
                                            </option>
                                            @endforeach
                                        </select>
                                        <input type="text" class="corp_hide form-control form-control-sm" id="client_phone"
                                            placeholder="Phone" style="width: 40%;" readonly>
                                    </div>
                                </th>
                                </tr>

                                <tr class="corp_hide">
                                    <th> <b>Mobile:</b> <span id="client_mobile"> </span> </th>
                                    <th> <b>Bin:</b> <span id="client_bin"> </span> </th>
                                </tr>

                                <tr class="corp_hide">
                                    <th colspan="2"> <b>Address:</b> <span id="client_address"> </span> </th>
                                </tr>


                        </tbody>

                    </table>

                    <hr style="margin: 0;">

                    <table class="table-borderless table table-sm">
                        <tr>
                            <th style="display:none;" class="p-1">
                                <select id="trans_type" class="form-control form-control-sm">
                                    <option value="1" selected>Normal Sale</option>
                                    <option value="2">Complementary</option>
                                </select>
                            </th>
                            <th class="p-1">
                                <select id="feed_status" class="form-control form-control-sm">
                                    <option value="1">Take In</option>
                                    <option value="2">Take Out</option>
                                </select>
                            </th>

                        </tr>
                        <tr>
                            <th class="p-2">

                                <button type="button" id="submit_inv" class="btn btn-primary btn-sm">Submit &
                                    Print</button>

                                <button type="button" id="print_slip" class="btn btn-secondary btn-sm">Bill
                                    Print</button>

                                <button type="button" id="all_kot_print" class="btn btn-dark btn-sm">Kot
                                    Print</button>

                                <!--  <button type="button" id="save_invo" class="btn btn-success btn-sm">Save</button> -->

                                @can('invoice_cancel')
                                <button type="button" id="inv_cancel" class="btn btn-danger btn-sm">Cancel</button>
                                @endcan

                            </th>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- /.card -->
    </div>
    <!-- right column -->

</section>
<!-- /.content -->


<!-- modal product-->
<div class="modal fade" id="modal-lg3" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <table id="example1" class="table table-bordered table-striped">

                    <thead>
                        <tr>
                            <th> <span id="catName"> </span> </th>
                        </tr>
                    </thead>

                    <tbody id="cat_product">
                        <tr>
                            <td class="d-flex flex-wrap"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!-- /.modal product-->


<!-- modal table-->
<div class="mdl2 modal fade" id="modal-lg">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="mhdr modal-header">
                <!--
<button style="margin: 5px;" data-floor="Floor 1" type="button" class="btn btn-dark btn-sm floor-btn" id="floor1"> Floor-01 </button>
<button style="margin: 5px;" data-floor="Floor 2" type="button" class="btn btn-secondary btn-sm floor-btn" id="floor2"> Floor-02 </button> -->



                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">

                <div class="row" id="tableLIst">

                    @foreach ($tables as $tbl)
                    @php

                    $waiter = Helper::findData('waiters', ['id' => $tbl->waiter]);
                    if (!empty($waiter->name)) {
                    $waitename = $waiter->name;
                    } else {
                    $waitename = $tbl->waiter;
                    }

                    if ($tbl->status == 4) {
                    $bxt = 'style=background:#ddd;';
                    } else {
                    $bxt = '';
                    }

                    @endphp


                    <div class="col-md-2 col-sm-6 col-12">
                        <div
                            class="info-box"
                            style="
                                        @if($tbl->status == 2) background-color:#ffc107; color:#000;   /* order */
                                        @elseif($tbl->status == 3) background-color:#17a2b8; color:#fff; /* kot */
                                        @elseif($tbl->status == 4) background-color:#28a745; color:#fff; /* bill */
                                        @else background-color:#f8f9fa; color:#000; /* default */
                                        @endif
                                    ">
                            <div onclick="show_action('{{ $tbl->id }}', '{{ $tbl->status }}', '{{ $tbl->order_no }}','{{ $tbl->table_name }}')" style="padding: 0;" class="d1 info-box-content">

                                <p class="tbltxt"><img class="tblimg" src="{{ asset('img/cover.png') }}"> &nbsp; - </p>
                                <p class="tbltxt"><img class="tblimg" src="{{ asset('img/waiter.png') }}"> &nbsp; {{ $waitename }}</p>
                                <p class="tbltxt"><img class="tblimg" src="{{ asset('img/clock.png') }}"> &nbsp;
                                    <span data-stime="{{ $tbl->o_time }}" class="timecount"></span>
                                </p>
                            </div>
                            <div class="tbll">
                                <span class="info-box-text">{{ $tbl->table_name }}</span>
                            </div>
                        </div>
                    </div>

                    @endforeach

                </div>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!-- /.modal table-->


<!-- modal table change-->
<div class="mdl2 modal fade" id="modal-lg2">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="mhdr modal-header">

                <div class="btnr">
                    <p class="text-primary">Current Table: <b id="sel_tbl"></b></p>

                </div>


                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">

                <div class="row" id="tableLIst2">



                </div>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal table change-->


<!-- Waiter Select Modal -->
<div class="modal fade" id="modal-waiter" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">

            <!-- Close Button -->
            <div class="modal-header">
                <h5 class="modal-title">Select Waiter</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">

                <div class="form-group">
                    <label for="enterPerson">Person</label>
                    <input type="number" class="form-control form-control-sm" id="person_number" value="" name="">
                </div>

                <div class="form-group">
                    <label for="waiterSelect">Waiter</label>
                    <select id="waiterSelect" class="form-control form-control-sm">
                        <option value="">Select Waiter</option>
                        @foreach($waiters as $v)
                        <option value="{{ $v->id }}">{{ $v->name }}</option>
                        @endforeach
                    </select>
                </div>


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



    @endsection

    @push('scripts')
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>

    <script src="{{ asset('js/shortcut.js') }}"></script>

    <script src="{{ asset('js/jquery-editable-select.min.js') }}"></script>

    <script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('js/sweetalert.all.js') }}"></script>

    <script type="text/javascript">
        const takeaway = [71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82];

        function countUpFromTime(countFrom, id) {
            countFrom = new Date(countFrom).getTime();
            var now = new Date(),
                countFrom = new Date(countFrom),
                timeDifference = (now - countFrom);

            var secondsInADay = 60 * 60 * 1000 * 24,
                secondsInAHour = 60 * 60 * 1000;

            var days = Math.floor(timeDifference / (secondsInADay) * 1);
            var hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
            var mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
            var secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);

            var timer = hours + ':' + mins + ':' + secs;

            if (secs) {


                $(id).html(timer);

            }

            countUpFromTime.interval = setTimeout(function() {
                countUpFromTime(countFrom, id);
            }, 1000);
        }


        let mobileSearchTimer = null;

        $(document).on('keyup', '#mobile_no', function() {
            let q = $(this).val().trim();
            clearTimeout(mobileSearchTimer);

            if (q.length < 3) {
                $('#mobile_suggestions').hide().empty();
                return;
            }

            mobileSearchTimer = setTimeout(function() {
                $.get("{{ route('customer.search') }}", {
                        q: q
                    })
                    .done(function(data) {
                        let $list = $('#mobile_suggestions').empty();

                        if (!data.length) {
                            $list.hide();
                            return;
                        }

                        data.forEach(function(c) {
                            $list.append(
                                $('<li>').text(c.mobile_no + ' — ' + c.customer_name)
                                .css({
                                    padding: '6px 10px',
                                    cursor: 'pointer',
                                    fontSize: '13px'
                                })
                                .hover(
                                    function() {
                                        $(this).css('background', '#f0f0f0');
                                    },
                                    function() {
                                        $(this).css('background', '#fff');
                                    }
                                )
                                .on('click', function() {
                                    $('#mobile_no').val(c.mobile_no);
                                    $('#customer_name').val(c.customer_name);
                                    $list.hide();
                                })
                            );
                        });

                        $list.show();
                    });
            }, 300);
        });

        // Hide dropdown when clicking outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest('#mobile_no, #mobile_suggestions').length) {
                $('#mobile_suggestions').hide();
            }
        });


        function startCounting() {

            $('.timecount').each(function(i, obj) {

                var sel = this;

                var start_time = $(sel).data("stime");

                countUpFromTime(start_time, sel);

            });


        }

        startCounting();

        function submitBill(subtype, bp = null, btn = null) {
            const $saleId = $("#sale_id");
            if (!$saleId.val()) {
                alert("No Product Selected!");
                return false;
            }

            const $persentDis = $("#persent_dis");
            const $fixedDis = $("#fixed_dis");

            // Collect sale data
            const saleData = {
                sale_id: $saleId.val(),
                feed_status: $("#feed_status").val() || '',
                persent_dis: parseFloat($persentDis.val()) || 0,
                fixed_dis: parseFloat($fixedDis.val()) || 0,
                totalAmt: parseFloat($("#totalAmt").val()) || 0,
                dis_balance: parseFloat($("#dis_balance").val()) || 0,
                aftDisAmt: parseFloat($("#aftDisAmt").val()) || 0,
                adjust_ment_amt: parseFloat($("#adjust_ment_amt").val()) || 0,
                dis_amount: parseFloat($("#dis_amount").val()) || 0,
                client_id: $("#client_id").val() || 0,
                mobile_no: $("#mobile_no").val().trim() || '',
                customer_name: $("#customer_name").val().trim() || '',
                note: encodeURIComponent($("#note").val() || ''),
                change_amt: '',
                pamt: '',
                pmethArr: {},
                trans_type: $("#trans_type").val(),
                feed_status: $("#feed_status").val(),
                waiter_id: $("#waiter_id").val(),
                tbl_id: $("#tbl_id").val(),
                vat_amt: parseFloat($("#vatAmt").val()) || 0,
                sd_amt: parseFloat($("#sdAmt").val()) || 0,
                scharge_amt: parseFloat($("#scharge_amt").val()) || 0,
                subtype: subtype,
                _token: "{{ csrf_token() }}"
            };

            if (saleData.dis_amount > 0) {
                if (saleData.mobile_no == '') {
                    alert('Please Enter Mobile Number !!!');
                    $("#mobile_no").focus();
                    return false;
                }

                if (saleData.customer_name == '') {
                    alert('Please Enter Customer Name!');
                    $("#customer_name").focus();
                    return false;
                }

                if (saleData.note == '') {
                    alert('Please Enter Note !!!');
                    $("#note").focus();
                    return false;
                }

            }


            // FS subtype: handle payment methods
            if (subtype === 'FS') {
                const pm = pmethodSum();
                if (!pm) {
                    alert("Receive Cash Not Empty!");
                    return false;
                }

                const pamt = parseFloat(pm.amt) || 0;
                const adjustAmt = saleData.adjust_ment_amt;


                saleData.pmethArr = Object.fromEntries(
                    Object.entries(pm.pmethArr).filter(([_, val]) => +val > 0)
                );


                if (Object.prototype.hasOwnProperty.call(saleData.pmethArr, 8)) {

                    if (saleData.mobile_no == '') {
                        $("#mobile_no").focus();
                        alert('Please Enter Mobile Number !!!');
                        return false;
                    }
                    if (saleData.note == '') {
                        $("#note").focus();
                        alert('Please Enter Note !!!')
                        return false;
                    }

                }

                if (pamt < adjustAmt) {
                    alert("Receive cash cannot be less than total amount!");
                    return false;
                } else {
                    btn.prop('disabled', true);
                }

                if (Object.keys(saleData.pmethArr).length > 2 && pamt > adjustAmt) {
                    alert("Receive cash cannot be greater than total amount!");
                    return false;
                } else {
                    btn.prop('disabled', true);
                }

                saleData.pamt = pamt;
                saleData.change_amt = parseFloat($("#change_amt").val()) || 0;
            }

            // Clear the other discount field
            if (saleData.persent_dis > 0) $fixedDis.val('');
            if (saleData.fixed_dis > 0) $persentDis.val('');

            // Submit via AJAX
            const route = "{{ route('saletbl.store') }}";

            $.post(route, saleData)
                .done(function(data) {
                    if (!data.success) {
                        clear();
                        Swal.fire({
                            title: "Something went wrong. Please try again!",
                            icon: "warning",
                            toast: true,
                            position: "top-end",
                            timer: 2000,
                            showConfirmButton: false,
                            showCloseButton: true
                        });
                        updateTable();
                        $('#modal-lg').modal('show');
                        return;
                    }

                    $('#pendind_inv option:selected').remove();
                    clear();

                    if (bp !== 1) {
                        printSlip(saleData.sale_id, subtype);
                    }
                })
                .fail(function() {
                    alert("Error submitting the sale!");
                });
        }



        function viewInv(sale_id) {
            if (!sale_id) return false;

            let url = "{{ route('salerestbl.viewinv', ':id') }}".replace(':id', sale_id);

            $.get(url)
                .done(function(data) {
                    if (!data) {
                        alert('No Sale found!');
                        return;
                    }

                    // Destructure data
                    const {
                        outlet_id = 1,
                            inv_amt = 0,
                            after_dis_amt = 0,
                            totalWvs = 0,
                            persent_dis = 0,
                            fiexd_dis = 0,
                            totalAmt = 0,
                            dis_balance = 0,
                            aftDisAmt = 0,
                            adjust_ment_amt = 0,
                            sale_id: sale_id,
                            dis_amount = 0,
                            change_amt = 0,
                            vatAmt = 0,
                            sdAmt = 0,
                            scharge_amt = 0,
                            total_scharge = 0,
                            products = [],
                            sub_total = 0,
                            total_amt = 0,
                            total_dis_amt = 0,
                            aftdis = 0,
                            adjust_ment = 0,
                            change_amt_htm = '',
                            invoiceno = '',
                            waiter_id = '',
                            person = '',
                            tbl_id = '',
                            dualpay = null
                    } = data;



                    // Prepare storage
                    let sections = {};

                    // Build HTML grouped by food_type
                    products.forEach(p => {
                        let row = `<tr style="${p.kot_print == 1 ? 'background: #c47676;' : ''}" id="${p.id}">
                    <input type="hidden" class="ins_des_qty" value="${p.qty}">
                    <td>

                        <div class="form-check">
                          <input data-insid="${p.id}" class="checkSingleInput form-check-input" type="checkbox" value=""  ${p.dis_status == 1 ? 'checked' : ''} ${p.dis_status == 1 ? 'checked' : ''} >
                            <label class="form-check-label" for="checkSingleInput">  ${p.product_name} <span class="modify_txt">${p.modify?p.modify:''}</span> </label>
                        </div>

                    </td>
                    <td class="text-center">
                        <input class="form-control form-control-sm qty_val" data-insid="${p.id}"
                               data-pcode="${p.product_code}"
                               style="width:55px;height:25px;"
                               type="text" value="${p.qty}" ${p.kot_print == 1 ? 'disabled' : ''}>
                    </td>
                    <td class="text-center">
                        <input class="form-control form-control-sm price_val" data-insid="${p.id}"
                               data-pcode="${p.product_code}"
                               style="width:55px;height:25px;"
                               type="text" value="${p.price}" ${p.kot_print == 1 ? 'disabled' : ''}>
                    </td>
                    <td class="text-right"><span class="amt">${p.price * p.qty}</span></td>
                    <td class="text-right">

                        <button data-saleid="${p.sale_id}" data-pcode="${p.product_code}" data-insid="${p.id}"
                                class="move_order btn bg-gradient-warning btn-xs"
                                style="width:28px;font-size:12px;padding:0;font-weight:700;">
                                <i class="fas fa-angle-double-left"></i>
                        </button>

                        <button data-saleid="${p.sale_id}" data-pcode="${p.product_code}" data-insid="${p.id}"
                                class="modify btn bg-gradient-dark btn-xs"
                                style="width:28px;font-size:12px;padding:0;font-weight:700;" ${p.kot_print == 1 ? 'disabled' : ''}>
                            <i class="nav-icon fas fa-edit"></i>
                        </button>

                        <button data-saleid="${p.sale_id}" data-pcode="${p.product_code}" data-insid="${p.id}"
                                class="btn bg-gradient-secondary btn-xs des"
                                style="width:28px;font-size:12px;padding:0;font-weight:700;" ${p.kot_print == 1 ? 'disabled' : ''}>-</button>
                        <button data-saleid="${p.sale_id}" data-pcode="${p.product_code}" data-insid="${p.id}"
                                class="btn bg-gradient-info btn-xs ins"
                                style="width:28px;font-size:12px;padding:0;font-weight:700;" ${p.kot_print == 1 ? 'disabled' : ''}>+</button>
                        <button data-saleid="${p.sale_id}" data-pcode="${p.product_code}" data-insid="${p.id}"
                                class="btn bg-gradient-danger btn-xs rem"
                                style="width:28px;font-size:12px;padding:0;font-weight:700;" ${ (p.kot_print == 1 && outlet_id != 1) ? 'disabled' : ''}>x</button>
                    </td>
                </tr>`;

                        let sectionKey = (p.food_type != 99) ? `#type_${p.food_type}` : "#card_product_list";
                        if (!sections[sectionKey]) {
                            sections[sectionKey] = "";
                        }
                        sections[sectionKey] += row;

                    });

                    // Now clear and render each section
                    Object.keys(sections).forEach(selector => {
                        $(selector).html(sections[selector]);
                    });

                    // Handle payment methods
                    if (dualpay) {
                        $(".pmethod").hide();
                        for (const method in dualpay) {
                            $(`.p_${method}`).show().find(".pay_val").val(dualpay[method]);
                        }
                    }

                    if (dis_amount > 0) {
                        $('#mobile_no').closest('tr').removeClass('d-none');
                        $('#customer_name').closest('tr').removeClass('d-none');
                        $('#note').closest('tr').removeClass('d-none');
                    } else {
                        $('#mobile_no').closest('tr').addClass('d-none');
                        $('#customer_name').closest('tr').addClass('d-none');
                        $('#note').closest('tr').addClass('d-none');
                    }

                    // Update Invoice Info
                    $("#total_amount").html(total_amt);
                    $("#invno").html(invoiceno);
                    $("#persent_dis").val(persent_dis);
                    $("#fiexd_dis").val(fiexd_dis);
                    $("#totalAmt").val(totalAmt);
                    $("#dis_balance").val(dis_balance);
                    $("#aftDisAmt").val(aftDisAmt);
                    $("#adjust_ment_amt").val(adjust_ment_amt);
                    $("#sale_id").val(sale_id);
                    $("#dis_amount").val(dis_amount);
                    $("#change_amt").val(change_amt);
                    $("#vatAmt").val(vatAmt);
                    $("#sdAmt").val(sdAmt);
                    $("#scharge_amt").val(scharge_amt);
                    $("#vat_amt").html(vatAmt);
                    $("#sd_amt").html(sdAmt);
                    $("#scharge_html").html(total_scharge);
                    $("#waiter_id").val(waiter_id);
                    $("#person").val(person);
                    $("#tbl_id").val(tbl_id);

                    // Update totals
                    $("#Sub_total_amt").html(inv_amt);

                    $("#sub_total").html(sub_total);
                    $("#total_amt").html(total_amt);
                    $("#total_dis_amt").html(total_dis_amt);
                    $("#aftdis").html(after_dis_amt);
                    $("#adjust_ment").html(adjust_ment);
                    $(".total_amt").html(adjust_ment);
                    $("#change_amt_htm").html(change_amt_htm);

                    // Reset payment UI
                    $(".pay_val").val('');
                    $(".p_1").show();


                }).fail(function() {
                    alert("Failed to fetch invoice. Please try again.");
                });
        }



        function updateTable(floor = null) {
            let url = "{{ route('saleres.tblload') }}";

            $.get(url, {
                    floor: floor
                })
                .done(function(data) {
                    if (data) {
                        $("#tableLIst").empty();

                        data.forEach(function(tbl) {
                            let bxt = (tbl.status == 5) ? 'style="background:#ddd;"' : '';

                            // assign background + text colors based on status
                            let bgStyle = "";
                            let textColor = "";
                            if (tbl.status == 2) { // order
                                bgStyle = "background:#ffc107; color:#000;";
                                textColor = "#000";
                            } else if (tbl.status == 3) { // kot
                                bgStyle = "background:#17a2b8; color:#fff;";
                                textColor = "#fff";
                            } else if (tbl.status == 4) { // bill
                                bgStyle = "background:#28a745; color:#fff;";
                                textColor = "#fff";
                            } else {
                                bgStyle = "background:#f8f9fa; color:#000;"; // default
                                textColor = "#000";
                            }

                            let row = `
                        <div class="col-md-2 col-sm-6 col-12">
                            <div ${bxt} class="info-box" style="${bgStyle}">
                                <div onclick="show_action('${tbl.id}', '${tbl.status}', '${tbl.order_no}', '${tbl.table_name}')"
                                     style="padding: 0;" class="d1 info-box-content">
                                    <p class="tbltxt"><img class="tblimg" src="{{ asset('img/cover.png') }}"> &nbsp;${tbl.person ?? ''}</p>
                                    <p class="tbltxt"><img class="tblimg" src="{{ asset('img/waiter.png') }}"> &nbsp;${tbl.waiter_name}</p>
                                    <p class="tbltxt"><img class="tblimg" src="{{ asset('img/clock.png') }}"> &nbsp;
                                        <span data-stime="${tbl.o_time ?? ''}" class="timecount"></span>
                                    </p>
                                </div>
                                <div class="tbll">
                                    <span class="info-box-text" style="color:${textColor};">${tbl.table_name}</span>
                                </div>
                            </div>
                        </div>
                    `;

                            $("#tableLIst").append(row);
                        });

                        startCounting();
                    } else {
                        console.error('Failed to load tables.');
                    }
                });
        }



        function checkWaiter() {
            return new Promise((resolve) => {
                // Show modal
                $("#modal-waiter").modal("show");

                // Wait for user to select waiter
                $(document).off("change", "#waiterSelect").on("change", "#waiterSelect", function() {
                    let selectedWaiter = $(this).val() || 1;

                    // Close modal
                    $("#modal-waiter").modal("hide");

                    // Resolve Promise with selected waiter
                    resolve(selectedWaiter);

                });
            });
        }

        async function selectWaiter() {
            let waiterId = await checkWaiter();

            $("#waiter_id").val(waiterId);

            let person_number = $("#person_number").val() || 1;

            $("#person").val(person_number);

            return waiterId;

        }


        function checkPerson() {
            return 1;
        }

        function show_action2(tblid, status, orderno, table_name) {
            let sale_id = $("#sale_id").val();
            let tbl_id = $("#tbl_id").val();

            clear(); // existing function

            if (!tblid) return;

            $('#modal-lg2').modal('hide');

            if (!sale_id) return alert("Sale Not Found!");
            if (!tbl_id) return alert("Please Select Table!");


            if (Array.isArray(takeaway) && takeaway.includes(parseInt(tblid))) {
                $("#feed_status").val(2);
            }

            var route = "{{ route('saleres.tblcngupdate') }}";

            $.post(route, {
                    cur_tbl: tbl_id,
                    sel_tbl: tblid,
                    _token: "{{ csrf_token() }}"
                })
                .done(function(data) {
                    if (data) {

                        viewInv(sale_id); // existing function

                        updateTable();

                        $('#modal-lg').modal('show');

                        // Focus input after modal shown
                        $('#modal-lg').on('shown.bs.modal', function() {
                            $("#prode_code").focus();
                        });
                    } else {
                        alert("Something went wrong, please try again!");
                    }
                })
                .fail(function(jqXHR) {
                    alert("Error: " + jqXHR.responseText);
                });
        }

        function moveItem(tblid, move_item_id, orderno, move_item_qty) {

            var route = "{{ route('saleres.moveitem') }}";

            $.post(route, {
                    move_item_id: move_item_id,
                    move_item_qty: move_item_qty,
                    orderno: orderno,
                    tblid: tblid,
                    _token: "{{ csrf_token() }}"
                })
                .done(function(data) {
                    if (data) {

                        clear();

                        viewInv(data.sale_id);
                        $('#modal-lg').modal('hide');


                    } else {
                        alert("Something went wrong, please try again!");
                    }
                })
                .fail(function(jqXHR) {
                    alert("Error: " + jqXHR.responseText);
                });

        }


        function show_action(tblid, status, orderno, table_name) {

            let move_item_id = $.trim($("#move_item").val());
            let move_item_qty = parseFloat($("#move_qty").val()) || 0;

            if (move_item_id !== '' && move_item_qty > 0) {

                moveItem(tblid, move_item_id, orderno, move_item_qty);

                return false; // stop further execution
            }


            clear();

            $(".title_plist").show();

            if (tblid) {

                if (Array.isArray(takeaway) && takeaway.includes(parseInt(tblid))) {
                    $("#feed_status").val(2);
                }

                $("#tbl_id").val(tblid);
                $("#tbl_status").val(status);
                $("#tblno").html(table_name);

                $('#modal-lg').modal('hide');

                if (status == 2) {
                    viewInv(orderno);
                    $('#modal-lg').modal('hide');
                } else if (status == 3) {
                    viewInv(orderno);
                    $('#modal-lg').modal('hide');
                } else if (status == 4) {
                    viewInv(orderno);
                    $('#modal-lg').modal('hide');
                } else if (status == 1) {
                    $("#persent_dis").prop('disabled', false);
                    $("#fiexd_dis").prop('disabled', false);
                    $("#dualpay").prop('disabled', false);
                    $(".qty_val").prop('disabled', false);
                    $(".pay_val").prop('disabled', false);

                    let waitersS = selectWaiter();


                } else {
                    // no action for other statuses
                }
            }

            setTimeout(function() {
                $("#prode_code").focus();
            }, 500);

        }


        function clear() {

            $("#discount_card_no").val('');
            $("#move_qty").val('');
            $("#move_item").val('');
            $("#person_number").val(1);
            $("#total_amount").html('');
            $(".food_list").html('');
            $(".food_list2").html('');
            $("#Sub_total_amt").html('');
            $("#tblno").html('');
            $("#invno").html('');
            $("#tbl_id").val('');
            $("#prode_code").val('');
            $("#product_name").val('');
            $("#persent_dis").val('');
            $("#fiexd_dis").val('');
            $("#totalAmt").val('');
            $("#dis_balance").val('');
            $("#aftDisAmt").val('');
            $("#adjust_ment_amt").val('');
            $("#sale_id").val('');
            $("#dis_amount").val('');
            $("#change_amt").val('');
            $("#vatAmt").val('');
            $("#sdAmt").val('');
            $("#scharge_amt").val('');

            $("#waiter_id").val('');
            $("#person").val('');

            $("#card_product_list").html('');
            $("#sub_total").html('');
            $("#vat_amt").html('');
            $("#sd_amt").html('');
            $("#scharge_html").html('');
            $("#total_amt").html('');
            $("#total_dis_amt").html('');
            $("#aftdis").html('');
            $("#adjust_ment").html('');
            $(".total_amt").html('');

            $("#dualpay").val('');
            $(".pay_val").val('');
            $("#change_amt_htm").html('');
            $("#submit_inv").prop('disabled', false);

            $("#feed_status").val(1).trigger("change");
            $("#waiterSelect").val('').trigger("change");

            $('.select2').val(null).trigger('change');
            $('#mobile_no').closest('tr').addClass('d-none');
            $('#customer_name').closest('tr').addClass('d-none');
            $('#note').closest('tr').addClass('d-none');
            $('#note').val('');
            $('#mobile_no').val('');
            $('#customer_name').val('');
            $("#is_corporate").prop("checked", false);
            $("#client_id").val(null).trigger('change');
            $("#client_id").val('');
            $(".corp_hide").hide();
            $("#trans_type").val(1);
            $("#client_phone").val('');
            // syncOnline();

        }


        // Helper: Update totals and discount together// Build HTML row dynamically
        function buildCartRow(data) {
            const p = data.product;
            const row = `
        <tr id="${data.insid}">
            <td>
                <input type="hidden" class="ins_des_qty" value="${p.qty}">
                <div class="form-check">
                  <input  data-insid="${data.insid}" class="checkSingleInput form-check-input" type="checkbox" value=""  ${p.dis_status == 1 ? 'checked' : ''}>
                    <label class="form-check-label" for="checkSingleInput">  ${p.name} <span class="modify_txt">${p.modify?p.modify:''}</span> </label>
                </div>
            </td>
            <td class="text-center"><input class="form-control form-control-sm qty_val" data-insid="${data.insid}" data-pcode="${p.code}" style="width:55px;height:25px;" type="text" value="${p.qty}"></td>
            <td class="text-center"><input class="form-control form-control-sm price_val" data-insid="${data.insid}" data-pcode="${p.code}" style="width:55px;height:25px;" type="text" value="${p.price}"></td>
            <td class="text-right"><span class="amt">${p.price * p.qty}</span></td>
            <td class="text-right">

        <button data-saleid="${data.sale_id}"data-pcode="${p.code}"  data-insid="${data.insid}" class="move_order btn bg-gradient-warning btn-xs" style="width:28px;font-size:12px;padding:0;font-weight:700;"><i class="fas fa-angle-double-left"></i></button>

                <button data-saleid="${data.sale_id}"data-pcode="${p.code}"  data-insid="${data.insid}" class="modify btn bg-gradient-dark btn-xs" style="width:28px;font-size:12px;padding:0;font-weight:700;"><i class="nav-icon fas fa-edit"></i></button>

                <button data-saleid="${data.sale_id}" data-pcode="${p.code}" data-insid="${data.insid}" class="btn bg-gradient-secondary btn-xs des" style="width:28px;font-size:12px;padding:0;font-weight:700;">-</button>
                <button data-saleid="${data.sale_id}" data-pcode="${p.code}" data-insid="${data.insid}" class="btn bg-gradient-info btn-xs ins" style="width:28px;font-size:12px;padding:0;font-weight:700;">+</button>
                <button data-saleid="${data.sale_id}" data-pcode="${p.code}" data-insid="${data.insid}" class="btn bg-gradient-danger btn-xs rem" style="width:28px;font-size:12px;padding:0;font-weight:700;">x</button>
            </td>
        </tr>`;
            return row;
        }

        function updateTotals(totals) {
            $("#sub_total").html(totals.totalBaseAmt);
            $("#total_amount").html(totals.amount);
            $("#Sub_total_amt").html(totals.inv_amt);
            $("#totalAmt").val(totals.inv_amt);
            $("#aftDisAmt").val(totals.inv_amt);
            $("#adjust_ment_amt").val(totals.inv_amt);
            $("#adjust_ment").html(totals.inv_amt);
            $(".total_amt").html(totals.inv_amt);
            $("#total_dis_amt").html(totals.dis_amt);
            $("#aftdis").html(totals.after_dis_amt);

            $("#vat_amt").html(totals.vat_amt);
            $("#vatAmt").val(totals.vat_amt);
            $("#sd_amt").html(totals.sd_amt);
            $("#scharge_html").html(totals.total_scharge);
            $("#sdAmt").val(totals.sd_amt);
            $("#scharge_amt").val(totals.total_scharge);

            $("#persent_dis").val(totals.percent);
            $("#fiexd_dis").val(totals.fixed);

            let fixedDis = parseFloat($("#fiexd_dis").val()) || 0;
            let percent = parseFloat($("#persent_dis").val()) || 0;

            $("#dis_balance").val(totals.dis_balance || 0);
            if ($("#dis_balance").val()) {

                if (percent > 0 || fixedDis > 0) {
                    disCount(percent, fixedDis);
                }
            }

        }


        function addTocard(product_code, qty, type, thiSel, price = null, insid = null) {
            if (!$("#tbl_id").val()) {
                alert('Please Select Table!');
                $("#tbl_list").trigger("click");
                return false;
            }

            let fixedDis = parseFloat($("#fiexd_dis").val()) || 0;
            let percent = parseFloat($("#persent_dis").val()) || 0;

            $.ajax({
                url: "{{ route('salerestbl.addtocard') }}",
                type: "POST",
                data: {
                    sale_id: $("#sale_id").val() || '',
                    product_code: product_code,
                    qty: qty,
                    price: price,
                    tbl_id: $("#tbl_id").val(),
                    waiter_id: $("#waiter_id").val() || '',
                    person: parseInt($("#person").val()) || 1,
                    fixed: fixedDis,
                    percent: percent,
                    insid: insid,
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    if (data.error) {
                        alert(data.error);
                        return;
                    }

                    if (data.sale_id) $("#sale_id").val(data.sale_id);
                    if (data.invoiceno) $("#invno").html(data.invoiceno);

                    const target = (data.apptype != 99) ? $(data.apptype) : $("#card_product_list");

                    // Replace row if exists, otherwise add it
                    const newRow = buildCartRow(data);
                    if ($("#" + data.insid).length) {
                        $("#" + data.insid).replaceWith(newRow);
                    } else {
                        target.append(newRow);
                    }

                    updateTotals(data.totals);
                    adjustMent(1);
                    $("#prode_code").val('');

                    if (type == 'rem') {
                        //viewInv(data.sale_id);
                    }

                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    alert("Something went wrong!");
                }
            });
        }


        function applyDiscount(present, fixed) {

            if (!$("#sale_id").val()) {
                alert('No Sale found!');
                return false;
            }

            let sale_id = $("#sale_id").val();

            $.ajax({
                url: "{{ route('apply.discount') }}",
                type: "POST",
                data: {
                    sale_id: parseInt(sale_id),
                    present: present,
                    fixed: fixed
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    if (data.error) {
                        alert(data.error);
                        return;
                    }

                    viewInv(sale_id);

                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    alert("Something went wrong!");
                }
            });

            return true;
        }



        //new add to end

        function disCount(present = 0, fixed = 0) {


            let disBalance = parseFloat($("#dis_balance").val()) || 0;
            let totalAmt = parseFloat($("#totalAmt").val()) || 0;

            if (disBalance > 0) {

                applyDiscount(present, fixed);


                // // Calculate percentage discount
                // let percentDiscount = present > 0 ? (disBalance * present) / 100 : 0;

                // // Total discount
                // let totalDiscount = percentDiscount + fixed;
                // totalDiscount = parseFloat(totalDiscount.toFixed(3));

                // // Amount after discount
                // let afterDiscount = totalAmt - totalDiscount;
                // afterDiscount = afterDiscount > 0 ? parseFloat(afterDiscount.toFixed(3)) : 0;

                // // Update DOM
                // $("#total_dis_amt").html(totalDiscount);
                // $("#dis_amount").val(totalDiscount);
                // $("#aftdis").html(afterDiscount);
                // $("#aftDisAmt").val(afterDiscount);
                // $(".total_amt").html(afterDiscount);

                // $("#adjust_ment_amt").val(afterDiscount);
                // $("#adjust_ment").html(afterDiscount);

                // adjustMent(1); // Adjust with flag

            } else {
                // // Reset fields if no discount balance
                // $("#dis_amount").val('');
                // $("#aftdis").html('');
                // $("#aftDisAmt").val('');
                // $("#total_dis_amt").html('');
                // $(".total_amt").html(totalAmt);
                // $("#adjust_ment_amt").val('');
                // $("#adjust_ment").html('');
            }

            return false;
        }

        function adjustMent(isAdj) {
            let aftDisAmt = parseFloat($("#aftDisAmt").val()) || 0;
            let finalVal = (isAdj === 1) ? Math.round(aftDisAmt) : aftDisAmt;

            $("#adjust_ment_amt").val(finalVal);
            $("#adjust_ment").html(finalVal);
            $(".total_amt").html(finalVal);
            $("#aftdis").html(finalVal);
        }


        function pmethodSum() {
            var pmethArr = {};
            var amt = 0;

            $('.pay_val').each(function() {
                var pal = parseFloat($(this).val()) || 0;
                if (pal > 0) {
                    var id = $(this).data("mid");
                    pmethArr[id] = pal;
                    amt += pal;
                }
            });

            if (Object.keys(pmethArr).length) {
                return {
                    pmethArr: pmethArr,
                    amt: amt
                };
            }

            return false;
        }

        function syncOnline() {
            //let surl = "http://localhost/kandk/public/sync-sales";
            let surl = "{{ route('sync.online') }}";
            $.ajax({
                url: surl, // Laravel route
                type: 'GET',
                success: function(response) {
                    console.log("Sync successful:", response);
                    // You can show a SweetAlert or toast here if you want
                },
                error: function(xhr, status, error) {
                    // console.error("Sync failed:", error);
                }
            });
        }


        function printSlip(sale_id, subtype = null) {
            var url = "{{ route('salerestbl.printslip', ':id') }}".replace(':id', sale_id);

            $.get(url, function(data) {
                if (!data) {
                    alert('No Sale found!');
                    return;
                }

                let sdata = (subtype === 'BS') ?
                    data.slip.replace("Customer Copy", "Bill Copy") :
                    data.slip;

                let mywindow = window.open('', 'Invoice Print', 'height=400,width=600');

                let htmlContent = `
            <html>
            <head>
                <title>Invoice</title>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
                <style>
                    * { font-family: 'OCR-B', monospace; font-size: 15px; margin:0; padding:0; color:#000; }
                    body { width: 80mm; margin:0 auto; background:#fff; }
                    .header { text-align:center; font-size:17px; font-weight:bold; margin-bottom:5px; }
                    .subheader { text-align:center; font-size:16px; margin-bottom:3px; }
                    .center { text-align:center; }
                    .right { text-align:right; }
                    .bold { font-weight:bold; }
                    hr { border:none; border-top:1px dashed #000; margin:5px 0; }
                    table { width:100%; border-collapse:collapse; margin-top:5px; }
                    th, td { padding:2px 0; font-size:20px; }
             td b, th b { font-size:20px; }
                    .totals td { font-size:18px; font-weight:bold; }
                    .footer { font-size:19px; text-align:center; margin-top:8px; }
                    .bordered td { border-top:1px dashed #000; }
                    @media print { body { width:80mm; margin:0; } }
                </style>
            </head>
            <body>${sdata}</body>
            </html>`;

                mywindow.document.write(htmlContent);
                mywindow.document.close();

                mywindow.focus();

                // Use setTimeout to ensure print dialog opens before actions
                setTimeout(() => {
                    mywindow.print();

                    // Fallback close after some time in case onafterprint doesn't fire
                    setTimeout(() => {
                        mywindow.close();
                        updateTable();
                        $('#modal-lg').modal('show');
                    }, 500); // 0.5s after print dialog opens
                }, 300);
            });
        }



        function printKot(sale_id, type_id, ktype) {
            var route = "{{ route('salerestbl.kotprint') }}";

            $.post(route, {
                    "sale_id": sale_id,
                    "type_id": type_id,
                    "ktype": ktype,
                    "feed_status": $("#feed_status").val() || '',
                    "_token": "{{ csrf_token() }}"
                })
                .done(function(data) {
                    if (data.kot) {
                        let kotContent = data.kot;

                        let mywindow2 = window.open('', 'Kot Print', 'height=400,width=600');

                        let htmlContent = `
                <html>
                <head>
                    <title>KOT Print</title>
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
                    <style>
                        /* === Base Styles === */
                        * {
                            font-family: 'OCR-B', monospace; /* Receipt font */
                            font-size: 12px; /* Clean readable text */
                            margin: 0;
                            padding: 0 0 0 2px;
                            color: #000;
                        }
                        body {
                            width: 80mm; /* Adjust to 58mm if needed */
                            margin: 0 auto;
                            background: #fff;
                        }

                        /* === Typography === */
                        .header {
                            text-align: center;
                            font-size: 14px;
                            font-weight: bold;
                            margin-bottom: 5px;
                        }
                        .subheader {
                            text-align: center;
                            font-size: 13px;
                            margin-bottom: 3px;
                        }
                        .center { text-align: center; }
                        .right { text-align: right; }
                        .bold { font-weight: bold; }

                        /* === Layout === */
                        hr {
                            border: none;
                            border-top: 1px dashed #000;
                            margin: 5px 0;
                        }
                        table {
                            width: 100%;
                            border-collapse: collapse;
                            margin-top: 5px;
                        }
                        th, td {
                            padding: 2px 0;
                            font-size: 12px;
                        }
                        .totals td {
                            font-size: 20px;
                            font-weight: bold;
                        }
                        .footer {
                            font-size: 11px;
                            text-align: center;
                            margin-top: 8px;
                        }
                        .bordered td { border-top: 1px dashed #000; }

                        @media print {
                            body { width: 80mm; margin: 0; }
                        }
                    </style>
                </head>
                <body>
                    ${kotContent}
                </body>
                </html>
            `;

                        mywindow2.document.write(htmlContent);
                        mywindow2.document.close();
                        mywindow2.focus();

                        setTimeout(() => mywindow2.print(), 300);
                        setTimeout(() => mywindow2.close(), 300);

                        // Highlight printed rows
                        if (type_id != 99) {
                            $("#type_" + type_id).find("td").css("color", "#d81b60");
                        } else {
                            $("#card_product_list").find("td").css("color", "#d81b60");
                        }

                        viewInv(sale_id);

                    } else {
                        console.log("Already Kot Printed..!");
                        viewInv(sale_id);
                    }

                })
                .fail(function() {
                    alert("Error generating KOT print.");
                });
        }



        function updateDiscount(fixedDis, percent) {
            // let fixedDis = parseFloat($("#fiexd_dis").val()) || 0;
            // let percent = parseFloat($("#persent_dis").val()) || 0;
            let disBalance = parseFloat($("#dis_balance").val()) || 0;

            // Validate fixed discount
            if (fixedDis > disBalance) {
                $("#fiexd_dis").val('');
                fixedDis = 0;
            }

            // Validate percent discount
            if (percent > 80) {
                $("#persent_dis").val('');
                percent = 0;
            }


            disCount(percent, fixedDis);

        }


        function updateDiscountStatus(isChecked, insid = null) {

            let sale_id = $("#sale_id").val();
            if (!sale_id) {
                alert("Sale Not Found!");
                return false;
            }

            let disChangerurl = "{{ route('discount.change') }}";

            if (!isChecked) {
                isChecked = 0;
            } else {
                isChecked = 1;
            }

            $.get(disChangerurl, {
                    sale_id: sale_id,
                    isChecked: isChecked,
                    insid: insid
                })
                .done(function(data) {
                    if (data.error) {
                        alert(data.error);
                        return;
                    }

                    viewInv(sale_id);


                })
                .fail(function() {
                    alert("Failed to Change Discount Status.");
                });



        }

        $(function() {


            $('body').addClass('sidebar-collapse');

            $('#modal-lg').modal('show');


            $('.select2').select2();
            $('#client_id').select2({
                theme: 'bootstrap4',
                placeholder: 'Select Corporate Client',
                allowClear: true,
                width: '100%'
            });

            //Initialize Select2 Elements

            $('.select2bs4').select2({
                theme: 'bootstrap4'
            });


            clear();

            $("#discount_card_no").keyup(function(event) {
                if (event.key === "Enter" || event.keyCode === 13) {

                    if ($('#is_corporate').is(':checked')) {
                        alert("Discount Card not allowed for corporate sale!");
                        return false;
                    }

                    let discount_card = $(this).val().trim();
                    if (discount_card) {
                        let route = "{{ route('dis.carddis') }}";

                        $.get(route, {
                                dis_card: discount_card
                            })
                            .done(function(data) {
                                if (data.discount_rate !== undefined) {
                                    $("#persent_dis").val(data.discount_rate);

                                    // Simulate Enter key press
                                    let e = jQuery.Event("keyup");
                                    e.key = "Enter";
                                    e.keyCode = 13;
                                    e.which = 13;
                                    $("#persent_dis").trigger(e);
                                }

                                console.log("Discount Rate:", data.discount_rate);
                                console.log("CID:", data.cid);
                            })
                            .fail(function(jqXHR, textStatus, errorThrown) {
                                console.error("Error fetching discount data:", textStatus, errorThrown);
                            });
                    }
                }
            });

            $("#client_id").change(function() {

                $("#client_mobile").html('');
                $("#client_bin").html('');
                $("#client_address").html('');

                var selected = $(this).find(':selected');

                if (parseFloat($(this).val()) > 0) {

                    var client_id = $(this).val();
                    var mobile = selected.data('mobile') || '';
                    var bin = selected.data('bin') || '';
                    var company = selected.data('company') || '';
                    var address = selected.data('address') || '';
                    var discount = +selected.data('discount') || 0;


                    if (discount > 0) {

                        $("#persent_dis").val(discount);

                        // Simulate Enter key press
                        let e = jQuery.Event("keyup");
                        e.key = "Enter";
                        e.keyCode = 13;
                        e.which = 13;
                        $("#persent_dis").trigger(e);

                        $("#mobile_no").val(mobile);
                        $("#customer_name").val(company);

                    } else {

                        if (parseFloat($("#persent_dis").val()) > 0) {


                            $("#discount_card_no").val(0);
                            $("#persent_dis").val(0);

                            // Simulate Enter key press
                            let e = jQuery.Event("keyup");
                            e.key = "Enter";
                            e.keyCode = 13;
                            e.which = 13;
                            $("#persent_dis").trigger(e);

                            $("#mobile_no").val('');
                            $("#customer_name").val('');

                        }


                    }

                    $("#client_phone").val(mobile);
                    $("#client_bin").html(bin);
                    $("#client_address").html(address);

                } else {


                    if (parseFloat($("#persent_dis").val()) > 0) {


                        $("#discount_card_no").val(0);
                        $("#persent_dis").val(0);

                        // Simulate Enter key press
                        let e = jQuery.Event("keyup");
                        e.key = "Enter";
                        e.keyCode = 13;
                        e.which = 13;
                        $("#persent_dis").trigger(e);

                        $("#mobile_no").val('');
                        $("#customer_name").val('');


                        $("#client_mobile").html('');
                        $("#client_bin").html('');
                        $("#client_address").html('');


                    }


                }

            });

            $("#is_corporate").change(function() {
                if ($(this).is(":checked")) {
                    // Checkbox is checked
                    $(".corp_hide").show();
                } else {
                    // Checkbox is unchecked
                    $(".corp_hide").hide();

                    $("#client_mobile").html('');
                    $("#client_bin").html('');
                    $("#client_address").html('');
                    $('#client_id').val(null).trigger('change');
                    $('#client_id').val(null);

                    if (parseFloat($("#persent_dis").val()) > 0) {


                        $("#discount_card_no").val(0);
                        $("#persent_dis").val(0);
                        // Simulate Enter key press
                        let e = jQuery.Event("keyup");
                        e.key = "Enter";
                        e.keyCode = 13;
                        e.which = 13;
                        $("#persent_dis").trigger(e);

                        $("#mobile_no").val('');
                        $("#customer_name").val('');

                    }


                }
            });



            $(document).on('click', '.floor-btn', function() {
                // remove active style from all
                $('.floor-btn').removeClass('btn-dark').addClass('btn-secondary');
                // add active style to clicked one
                $(this).removeClass('btn-secondary').addClass('btn-dark');

                let floorno = $(this).data('floor');

                updateTable(floorno);


            });


            // Check/uncheck all single inputs
            $(document).on('change', '#checkAllInput', function() {
                let isChecked = $(this).prop('checked');
                $('.checkSingleInput').prop('checked', isChecked);

                updateDiscountStatus(isChecked);


            });

            // Update "Check All" based on single inputs
            $(document).on('change', '.checkSingleInput', function() {
                let allChecked = $('.checkSingleInput').length === $('.checkSingleInput:checked').length;
                $('#checkAllInput').prop('checked', allChecked);
                let checkType = 'single';
                var insid = $(this).data("insid");

                let isChecked = $(this).prop('checked');
                updateDiscountStatus(isChecked, insid);


            });


            $(".productlist").on("click", ".modify", function() {

                var saleid = $(this).data("saleid");
                var insid = $(this).data("insid");

                if (!saleid || !insid) {
                    alert("something went wrong please try again!!");
                    return;
                }

                var modify_code = prompt("Modify Code: ", "");
                if (!modify_code) return;

                var route = "{{ route('salerestbl.modify') }}";

                $.post(route, {
                        sale_id: saleid,
                        insid: insid,
                        modify_code: modify_code,
                        _token: "{{ csrf_token() }}"
                    })
                    .done(function(data) {
                        if (data && data.mid && data.mtext) {
                            var sel = "#" + data.mid;
                            $(sel).find(".modify_txt").html('[' + data.mtext + ']');
                        } else {
                            alert("Something went wrong, please try again!");
                        }
                    })
                    .fail(function(xhr) {
                        alert("Error: " + (xhr.responseJSON?.error || 'Server error'));
                    });
            });



            $(".productlist").on("click", ".kot_print_btn", function() {

                if ($("#sale_id").val()) {

                    var sale_id = $("#sale_id").val();
                    var type_id = $(this).data("typeid");

                    var ktype = 'S';

                    printKot(sale_id, type_id, ktype);


                } else {
                    alert("Sale Not Found!");
                    return false;
                }

            });


            $(".table").on("click", "#all_kot_print", function() {

                if ($("#sale_id").val()) {

                    var sale_id = $("#sale_id").val();
                    var type_id = '';

                    var ktype = 'A';

                    printKot(sale_id, type_id, ktype);

                    $(".food_list").find("td").css("color", "#d81b60");
                    $(".food_list2").find("td").css("color", "#d81b60");

                } else {
                    alert("Sale Not Found!");
                    return false;
                }

            });



            $("#tbl_list").click(function() {

                $("#floor1").removeClass('btn-secondary').addClass('btn-dark');
                $("#floor2").removeClass('btn-dark').addClass('btn-secondary');

                updateTable();

            });


            $("#tbl_change").click(function() {
                let sale_id = $("#sale_id").val();
                let tbl_id = $("#tbl_id").val();

                if (!sale_id || !tbl_id) {
                    alert("Please Select Table!");
                    return;
                }

                $("#tableLIst2").empty();
                $("#sel_tbl").empty();

                let url = "{{ route('saleres.tblcng', ':id') }}".replace(':id', tbl_id);

                $.get(url)
                    .done(function(data) {
                        // Selected table name
                        $("#sel_tbl").text(data.selected_table);

                        // Render table list dynamically
                        data.tables.forEach(function(tbl) {
                            let bxt = (tbl.status == 5) ? 'style="background:#ddd;"' : '';

                            // assign background + text colors based on status
                            let bgStyle = "";
                            let textColor = "";
                            if (tbl.status == 2) { // order
                                bgStyle = "background:#ffc107; color:#000;";
                                textColor = "#000";
                            } else if (tbl.status == 3) { // kot
                                bgStyle = "background:#17a2b8; color:#fff;";
                                textColor = "#fff";
                            } else if (tbl.status == 4) { // bill
                                bgStyle = "background:#28a745; color:#fff;";
                                textColor = "#fff";
                            } else {
                                bgStyle = "background:#f8f9fa; color:#000;"; // default
                                textColor = "#000";
                            }

                            let row = `
                        <div class="col-md-2 col-sm-6 col-12">
                            <div ${bxt} class="info-box" style="${bgStyle}">
                                <div onclick="show_action2('${tbl.id}', '${tbl.status}', '${tbl.order_no}', '${tbl.table_name}')"
                                     style="padding: 0;" class="d1 info-box-content">
                                    <p class="tbltxt"><img class="tblimg" src="{{ asset('img/cover.png') }}"> &nbsp;${tbl.person ?? ''}</p>
                                    <p class="tbltxt"><img class="tblimg" src="{{ asset('img/waiter.png') }}"> &nbsp;${tbl.waiter_name}</p>
                                    <p class="tbltxt"><img class="tblimg" src="{{ asset('img/clock.png') }}"> &nbsp;
                                        <span data-stime="${tbl.o_time}" class="timecount"></span>
                                    </p>
                                </div>
                                <div class="tbll">
                                    <span class="info-box-text" style="color:${textColor};">${tbl.table_name}</span>
                                </div>
                            </div>
                        </div>
                    `;

                            $("#tableLIst2").append(row);


                        });

                    })
                    .fail(function() {
                        console.error("Failed to load table data.");
                    })
                    .always(function() {
                        startCounting(); // Timer function
                    });
            });



            $("#pendind_inv").change(function() {


                if ($(this).val()) {

                    var sale_id = $(this).val();

                    viewInv(sale_id);
                }

            });


            $("#save_invo").click(function(e) {
                e.preventDefault();

                let sale_id = $("#sale_id").val();
                if (!sale_id) {
                    Swal.fire({
                        icon: 'error',
                        title: 'No Sale Found!',
                        toast: true,
                        position: 'top-end',
                        timer: 2000,
                        showConfirmButton: false
                    });
                    return;
                }

                let url = "{{ route('salerestbl.saveinv', ':id') }}".replace(':id', sale_id);

                $.get(url)
                    .done(function(data) {
                        if (data) {
                            $("#pendind_inv").html(data);
                            clear();

                            Swal.fire({
                                icon: 'success',
                                title: 'Invoice Saved successfully!',
                                toast: true,
                                position: 'top-end',
                                timer: 2000,
                                showConfirmButton: false
                            });
                        } else {
                            clear();
                            Swal.fire({
                                icon: 'warning',
                                title: 'No data returned. Please try again.',
                                toast: true,
                                position: 'top-end',
                                timer: 2000,
                                showConfirmButton: false
                            });
                        }
                    })
                    .fail(function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Server error',
                            text: xhr.statusText,
                            toast: true,
                            position: 'top-end',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    });
            });



            $("#inv_cancel").click(function(e) {
                e.preventDefault();

                let sale_id = $("#sale_id").val();

                if (!sale_id) {
                    Swal.fire({
                        icon: 'error',
                        title: 'No sale found!',
                        toast: true,
                        position: 'top-end',
                        timer: 2000,
                        showConfirmButton: false
                    });
                    return false;
                }

                if (!confirm('Are you sure you want to cancel this sale?')) {
                    return false;
                }

                let url = "{{ route('salerestbl.invcancel', ':id') }}".replace(':id', sale_id);

                $.get(url)
                    .done(function(data) {
                        if (data.success) {
                            $('#pendind_inv option:selected').remove();
                            clear();
                            Swal.fire({
                                icon: 'success',
                                title: 'Invoice Canceled!',
                                toast: true,
                                position: 'top-end',
                                timer: 2000,
                                showConfirmButton: false
                            });
                        } else {
                            clear();
                            Swal.fire({
                                icon: 'warning',
                                title: data.message || 'Something went wrong. Please trry again!',
                                toast: true,
                                position: 'top-end',
                                timer: 2000,
                                showConfirmButton: false
                            });
                        }
                        updateTable();
                        $('#modal-lg').modal('hide');
                    })
                    .fail(function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Server error',
                            text: xhr.statusText,
                            toast: true,
                            position: 'top-end',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    });
            });



            $("#print_slip").click(function(e) {
                e.preventDefault();

                if ($("#sale_id").val()) {
                    let $btn = $(this);
                    let bp = null;

                    var sale_id = $("#sale_id").val();

                    let subtype = 'BS';

                    submitBill(subtype, bp, $btn);
                }

            });


            $("#submit_inv").click(function(e) {
                e.preventDefault();

                let bp = null;
                let $btn = $(this);
                // Disable the button to prevent multiple clicks
                // $btn.prop('disabled', true);

                let subtype = 'FS';
                submitBill(subtype, bp, $btn);

            });

            $(".pay_val").keyup(function() {
                let adjust_ment_amt = parseFloat($("#adjust_ment_amt").val()) || 0;
                let pm = pmethodSum();
                let pamt = parseFloat(pm.amt) || 0;

                if (!adjust_ment_amt) {
                    $("#change_amt").val('');
                    $("#change_amt_htm").html('');
                    return;
                }

                if (pamt <= adjust_ment_amt) {
                    $("#change_amt").val('');
                    $("#change_amt_htm").html('');
                } else {
                    let chAmt = Math.abs(adjust_ment_amt - pamt);
                    $("#change_amt").val(chAmt);
                    $("#change_amt_htm").html(chAmt.toFixed(2));
                }
            });



            $("#dualpay").on("change", function() {

                // reset values
                $(".pay_val").val('').prop('readonly', false);
                $("#change_amt").val('');
                $("#change_amt_htm").html('');

                // get selection and normalize to array
                let dualpay = $(this).val() || [];
                if (!Array.isArray(dualpay)) {
                    dualpay = [dualpay];
                }

                $(".pmethod").hide();

                let perDis = parseFloat($("#persent_dis").val()) || 0;
                let hasSpecialView = false;

                if (dualpay.length > 0) {

                    dualpay.forEach(element => {

                        let $method = $(".p_" + element);
                        $method.show();

                        if (element == 8) {
                            let aftdis = $("#adjust_ment_amt").val() || 0;

                            $method.find(".pay_val").val(aftdis).trigger("keyup");

                            hasSpecialView = true;

                        } else if (perDis > 0) {
                            hasSpecialView = true;
                        }

                    });

                } else {
                    $(".p_1").show(); // default fallback
                }

                // handle mobile row visibility once
                if (hasSpecialView) {
                    $('#customer_name').closest('tr').removeClass('d-none');
                    $('#mobile_no').closest('tr').removeClass('d-none');
                    $('#note').closest('tr').removeClass('d-none');
                } else {
                    $('#customer_name').closest('tr').addClass('d-none');
                    $('#mobile_no').closest('tr').addClass('d-none');
                    $('#note').closest('tr').addClass('d-none');
                }

            });



            $("#is_adj").click(function() {
                adjustMent($(this).prop('checked') ? 1 : 0);
            });


            $("#persent_dis").on("keyup", function(e) {
                if (e.keyCode === 13) { // Enter key
                    e.preventDefault(); // prevent form submission
                    $("#fiexd_dis").val('');
                    let percent = parseFloat($(this).val()) || 0;
                    updateDiscount(0, percent);
                }
            });



            $("#fiexd_dis").on("keydown", function(e) {
                if (e.keyCode === 13) { // Enter key
                    e.preventDefault(); // prevent form submission
                    $("#persent_dis").val('');
                    let fixedDis = parseFloat($(this).val()) || 0;
                    updateDiscount(fixedDis, 0);
                }
            });


            //  $("#persent_dis, #fiexd_dis").on('change', updateDiscount);

            $(".product_cat").click(function() {
                let cat_name = $(this).html();
                $("#catName").html(cat_name);

                let catid = $(this).data("catid");

                let urlc = "{{ route('salerestbl.catproduct', ':id') }}".replace(':id', catid);

                $.get(urlc)
                    .done(function(products) {
                        let html = '';

                        if (products.length === 0) {
                            html = '<p>No Product found!</p>';
                        } else {
                            products.forEach(function(p) {
                                html += `
                    <button type="button" style="width: 170px;"
                        class="btn btn-outline-success btn-sm m-2 font-weight-bold addbyname"
                        data-toggle="modal" data-target="#modal-lg3"
                        data-pcode="${p.product_code}" data-pid="${p.id}">
                        ${p.product_name}
                    </button>
                `;
                            });
                        }

                        $("#cat_product").html(html);
                    })
                    .fail(function() {
                        console.error('Failed to load products.');
                    });
            });



            $("#prode_code").focus();


            // Initialize editableSelect
            $('#product_name').editableSelect({
                effects: 'default'
            });

            // Function to add selected product
            function addSelectedProduct(codeName) {
                if (!codeName) return;

                let code = codeName.split('-');
                let product_code = code[0].trim();
                let selectElement = document.getElementById('product_name');

                addTocard(product_code, 1, 'add', selectElement);

                $('#product_name').val('');
            }

            // Trigger when user presses Enter
            $('#product_name').on('keydown', function(e) {
                if (e.keyCode === 13) {
                    e.preventDefault();
                    addSelectedProduct($(this).val());
                }
            });

            // Trigger when user clicks/selects a product from dropdown
            $('#product_name').on('es-select', function() {
                // Use the current input value, not the li text
                addSelectedProduct($(this).val());
            });



            $("body").on("click", ".addbyname", function() {
                let clickedElement = this;
                let product_code = $(this).data('pcode');
                if (!product_code) return;

                $('#modal-default').modal('hide');

                let type = 'add';
                addTocard(product_code, 1, type, clickedElement);
            });


            $(".productlist").on("click", ".move_order", function() {

                let sel = this;
                let sale_id = $(sel).data("saleid");
                let insid = $(sel).data("insid");

                if (!insid) return;

                let max_qty = parseFloat(
                    $(sel).closest("tr").find(".qty_val").val()
                ) || 0;

                Swal.fire({
                    title: 'Enter Move Quantity',
                    input: 'number',
                    inputLabel: `Available: ${max_qty}`,
                    inputPlaceholder: 'Enter qty',
                    inputAttributes: {
                        min: 1,
                        step: 1
                    },
                    showCancelButton: true,
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.getInput().focus();
                    },
                    inputValidator: (value) => {

                        value = parseFloat(value);

                        if (!value || value <= 0) {
                            return 'Please enter a valid quantity';
                        }

                        if (value > max_qty) {
                            return `Quantity cannot exceed ${max_qty}`;
                        }

                        return undefined; // ✔ important
                    }
                }).then((result) => {

                    if (result.isConfirmed) {
                        let move_qty = parseFloat(result.value);

                        $("#move_qty").val(move_qty);
                        $("#move_item").val(insid);

                        // trigger your process
                        $("#tbl_list").trigger("click");
                    }
                });

            });



            $(".productlist").on("click", ".rem", function() {

                let sale_id = $(this).data("saleid");
                let insid = $(this).data("insid");

                if (!insid) {
                    alert("No Sale found!");
                    return;
                }

                if (!sale_id) {
                    alert("No Sale found!");
                    return;
                }

                let rurl = "{{ route('carditem.del') }}";
                var remsel = this;

                $.get(rurl, {
                        sale_id: sale_id,
                        insid: insid
                    })
                    .done(function(data) {
                        if (data.error) {
                            alert(data.error);
                            return;
                        }

                        viewInv(sale_id);

                        setTimeout(function() {
                            $(remsel).closest("tr").remove();
                        }, 300);
                    })
                    .fail(function() {
                        alert("Failed to delete item. Please try again.");
                    });
            });



            $(".productlist").on("click", ".ins", function(event) {
                event.preventDefault(); // Stop any unintended navigation

                let insid = $(this).data("insid");
                if (!insid) {
                    alert("No Sale found!");
                    return false;
                }

                const clickedElement = this;
                const $row = $(clickedElement).closest('tr');

                let qty = parseInt($row.find('.ins_des_qty').val()) || 0;
                const price = parseFloat($row.find('.price_val').val()) || 0; // in case price is needed

                const productCode = $(clickedElement).data('pcode');

                qty = qty + 1;
                if (qty <= 0) qty = 1;

                const type = 'ins';

                addTocard(productCode, qty, type, clickedElement, price, insid);
            });


            $(".productlist").on("click", ".des", function(event) {
                event.preventDefault(); // Prevent default action if it's a link/button

                let insid = $(this).data("insid");
                if (!insid) {
                    alert("No Sale found!");
                    return false;
                }

                const clickedElement = this;
                const $row = $(clickedElement).closest('tr');

                let qty = parseInt($row.find('.ins_des_qty').val()) || 0;
                const price = parseFloat($row.find('.price_val').val()) || 0; // in case price is needed
                const productCode = $(clickedElement).data('pcode');

                qty = qty - 1;
                if (qty <= 0) qty = 1; // Ensure minimum quantity is 1

                const type = 'des';

                addTocard(productCode, qty, type, clickedElement, price, insid);
            });

            // Enter product code
            $('#prode_code').on('keypress', function(e) {
                if (e.which !== 13) return;

                const element = this;
                const productCode = $(this).val().trim();
                if (!productCode) return;

                let qty = parseFloat(prompt("Please enter Quantity")) || 0;
                if (qty > 0) {
                    addTocard(productCode, qty, 'add', element);
                }

                e.preventDefault();
            });

            // Quantity change
            $(".productlist").on("keydown", ".qty_val, .price_val", function(e) {
                if (e.keyCode !== 13) return; // only run on Enter
                e.preventDefault(); // prevent form submission if inside a form

                let insid = $(this).data("insid");
                if (!insid) {
                    alert("No Sale found!");
                    return false;
                }


                const element = this;
                const $row = $(element).closest('tr');

                const qty = parseFloat($row.find('.qty_val').val()) || 0;
                const price = parseFloat($row.find('.price_val').val()) || 0;
                const productCode = $(element).data('pcode');

                if (qty > 0 && price > 0) {
                    addTocard(productCode, qty, 'add', element, price, insid);
                }
            });


            $("#example1").DataTable({
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "searching": false,
                "paging": false

            });



        });
    </script>
    @endpush