{{-- @include('main') --}}
@extends('main')
@section('title', $data['title'])
@section('content')
    <style>
        .content {
            min-height: 0px !important;
            padding: 15px !important;
            background-color: #fff;
        }

        .card-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-top: 20px;
            gap: 20px;
        }

        .scroll-container {
            width: 100%;
            max-width: 400px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            border-radius: 8px;
            height: 85vh;
            background-color: #fff;
            overflow-y: auto;
            margin-bottom: 20px;
        }

        .status {
            flex-direction: column;
            margin-left: 0;
            margin-right: 0;
        }

        .status-item {
            text-align: center;
            flex: 1;
            padding: 10px;
            border-radius: 5px;
            padding-top: 19px;
            padding-bottom: 2px;
            transition: background-color 0.3s;
        }

        .status-item h3 {
            margin-bottom: 10px;
            font-size: 20px;
            color: #000000;
            font-weight: 600;

        }

        .pending {
            /* background-color: #cbcbcb; */
            background-color: #db4545;
            /* background-color: #dd6a6a; */
            margin-bottom: 14px;
        }

        .in-progress {
            /* background-color: #cbcbcb; */
            background-color: #f0ad4e;
            /* background-color: #d4ab71; */
            color: white;
            margin-bottom: 14px;

        }

        .complete {
            /* background-color: #cbcbcb; */
            background-color: #37963e;
            /* background-color: #7ea881; */

            color: white;
            margin-bottom: 14px;

        }

        .count {
            font-size: 24px;
            font-weight: bold;
            margin-top: 5px;
            color: #fff;

        }

        .order-card {
            background-color: #fff;
            width: 100%;
            max-width: 400px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            height: fit-content;
            margin-bottom: 25px;
            cursor: move;
            display: flex;
            flex-direction: column;
        }

        /* .card-header-pending,
                                                                    .card-header-inprogress,
                                                                    .card-header-complete {
                                                                        padding: 15px;
                                                                        font-size: 100px;
                                                                    
                                                                        flex-wrap: wrap;
                                                                        justify-content: space-between;
                                                                        align-items: center;
                                                                    } */

        /* .table-info p, */
        .order-time p {
            font-size: 9px;
            margin: 5px 0;
        }

        .order-items {
            background-color: white;
            padding: 10px;
            font-size: 100px;
        }

        .item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
            font-size: 13px;
        }

        .item:last-child {
            border-bottom: none;
        }

        .item-indicator {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .item-details p {
            margin: 0;
        }

        .small-text {
            font-size: 100px;
            color: #666;
        }

        .card-footer {
            padding: 10px;
            background-color: #fff;
            text-align: center;
        }

        .card-footer p {
            margin-bottom: 10px;
            font-size: 100px;
        }

        .card-footer button {
            padding: 8px 12px;
            background-color: #5bc0de;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 100px;
        }

        @media screen and (max-width:1920px) {

            .scroll-container {
                max-width: 450px;
            }
        }

        @media screen and (max-width:1859px) {

            .scroll-container {
                max-width: 430px;
            }
        }

        @media screen and (max-width:1779px) {

            .scroll-container {
                max-width: 400px;
            }
        }

        @media screen and (max-width:1660px) {

            .scroll-container {
                max-width: 370px;
            }
        }

        @media screen and (max-width:1539px) {

            .scroll-container {
                max-width: 348px;
            }
        }

        @media screen and (max-width:1440px) {
            .scroll-container {
                max-width: 325px;
                padding: 15px !important;
            }

            .order-card.new-order-design {
                margin: 10px 0;
            }

            .table-icon {
                width: 70px;
                font-size: 10px;
                height: 25px;
                line-height: 25px;
                border-radius: 5px;
            }

            .order-time {
                min-width: auto !important;
            }
        }

        @media screen and (max-width:1359px) {

            .scroll-container {
                max-width: 305px;
            }
        }

        @media screen and (max-width:1279px) {

            .scroll-container {
                max-width: 286px;
            }
        }

        @media screen and (max-width:1189px) {

            .scroll-container {
                max-width: 271px;
            }
        }

        @media screen and (max-width:1143px) {

            .scroll-container {
                max-width: 322px;
            }
        }

        @media screen and (max-width:1005px) {

            .scroll-container {
                max-width: 300px;
            }
        }

        @media screen and (max-width:939px) {

            .scroll-container {
                max-width: 428px;
            }
        }

        @media (max-width: 768px) {
            .order-card {
                max-width: 90%;
                margin: 0 auto 20px;
            }

            .order-items {
                padding: 8px;
                font-size: 0.9rem;
            }

            .item {
                padding: 8px 0;
            }

            .item-indicator {
                width: 12px;
                height: 12px;
            }

            .card-footer p {
                font-size: 0.9rem;
            }

            .card-footer button {
                font-size: 0.9rem;
                padding: 6px 10px;
            }
        }

        @media (max-width: 480px) {
            .order-card {
                max-width: 100%;
                margin: 0 auto 15px;
            }

            .order-time p {
                font-size: 11px;
            }

            .order-items {
                padding: 6px;
                font-size: 0.8rem;
            }

            .item {
                padding: 6px 0;
            }

            .item-indicator {
                width: 10px;
                height: 10px;
            }

            .small-text {
                font-size: 0.8rem;
            }

            .card-footer p {
                font-size: 0.8rem;
            }

            .card-footer button {
                font-size: 0.8rem;
                padding: 5px 8px;
            }

            .order-table .table-icon {
                width: 70px;
                font-size: 10px;
                height: 25px;
                line-height: 25px;
                border-radius: 5px;
            }

            .order-time {
                min-width: 160px !important;
            }

            .d-flex.align-items-center.ms-auto {
                margin-right: 0 !important;
            }
        }

        .card-header {
            background-color: #f0ad4e;
            padding: 20px;
            color: white;
            display: flex;
            justify-content: space-between;
        }

        .order-time p {
            margin: 0;
            text-align: right;
        }

        .order-items {
            background-color: white;
            padding: 10px;
        }

        .item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
        }

        .item:last-child {
            border-bottom: none;
        }

        .item-indicator {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .item-details p {
            margin: 0;
        }

        .small-text {
            font-size: 12px;
            color: #666;
        }

        .card-footer {
            padding: 10px;
            background-color: #fff;
            text-align: center;
        }

        .card-footer p {
            margin-bottom: 10px;
        }

        .card-footer button {
            padding: 8px 12px;
            background-color: #5bc0de;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .hiddens {
            display: none;
        }



        /* Tablets */
        @media (max-width: 768px) {
            .card-container {

                align-items: center;
            }

            .scroll-container {
                max-width: 356px;
                justify-items: center;
            }

            .status-item {
                flex: 1 1 calc(50% - 10px);
            }

            .ms-5.d-flex.align-items-center {
                margin-left: 10px !important;
            }
        }

        @media (max-width: 480px) {
            .scroll-container {
                max-width: 100%;
                padding: 15px;
            }

            .status {
                flex-direction: column;
                gap: 10px;
            }

            .status-item {
                flex: 1 1 100%;
                padding: 10px;
            }


        }

        .border-all {
            border: 1px solid #0000004f !important;
            border-radius: 5px !important;
        }

        .btnhover:hover {
            background-color: #5853523d !important;
            color: #000;
        }

        .new-order-design {
            background: #fff;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            font-family: Arial, sans-serif;
            /* width: 320px; */
            margin: 10px;
        }

        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* border-bottom: 1px solid #eee; */
            padding-bottom: 10px;
        }

        .order-table {
            display: flex;
            align-items: center;
        }

        .table-icon {
            width: 100px;
            height: 35px;
            background: #008080;
            color: white;
            font-weight: bold;
            text-align: center;
            line-height: 35px;
            border-radius: 7px;
            margin-right: 15px;
        }

        .order-info h4 {
            margin: 0;
            font-size: 16px;
        }

        .order-info p {
            margin: 2px 0;
            font-size: 12px;
            color: gray;
        }

        .order-status {
            color: green;
            font-weight: bold;
            font-size: 12px;
        }

        .order-time {
            font-size: 12px;
            text-align: right;
        }

        /* .order-items {
                                                                    width: 100%;
                                                                    border-collapse: collapse;
                                                                    margin: 10px 0;
                                                                }

                                                                .order-items th,
                                                                .order-items td {
                                                                    padding: 8px;
                                                                    font-size: 14px;
                                                                }

                                                                .order-items th {
                                                                    background: #f8f8f8;
                                                                    font-weight: bold;
                                                                } */
        .order-items {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
            text-align: left;
        }

        .order-items th,
        .order-items td {
            padding: 8px 12px;
            font-size: 14px;

        }

        .order-items th {
            font-weight: bold;
            background: none !important;
            color: #333;
        }

        .order-items td {
            color: #555;
        }


        .order-total {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            font-size: 16px;
            padding: 10px 0;
            border-top: 1px solid #eee;
        }

        .order-actions {
            display: flex;
            justify-content: space-between;
        }

        .details-btn,
        .pay-btn {
            flex: 1;
            padding: 10px;
            font-size: 14px;
            border: none;
            cursor: pointer;
            border-radius: 6px;
        }

        .details-btn {
            background: #e0f7fa;
            color: #00796b;
            margin-right: 5px;
        }

        .pay-btn {
            background: #ffcc00;
            color: #fff;
        }

        .order-footer {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: gray;
            padding-top: 5px;
            border-bottom: 1px solid #eee;
        }

        .in-progress1 {
            background-color: #fff5cc;
            /* Light Yellow */
            color: #000000;
            /* Dark Brown/Black for Contrast */
            font-weight: bold;
            padding: 1px 3px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
        }

        .order-completed1 {
            background-color: #8ff3b1;
            /* Light Yellow */
            color: #000000;
            /* Dark Brown/Black for Contrast */
            font-weight: bold;
            padding: 1px 3px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
        }

        .in-pending1 {
            background-color: #ffcccc;
            /* Light Yellow */
            color: #000000;
            /* Dark Brown/Black for Contrast */
            font-weight: bold;
            padding: 1px 3px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
        }

        .status-icon {
            margin-right: 5px;
            font-size: 16px;

        }

        .status-icon i {
            font-size: 12px;
            MARGIN-BOTTOM: 6PX;
        }

        .order-info {
            flex-grow: 1;
            padding-right: 15px;
        }

        .order-time {
            white-space: nowrap;
            text-align: right;
            min-width: 160px;
        }

        :root {
            --primary-color: {{ getPrimaryColor() }};
            --secondary-color: {{ getSecondaryColor() }};
        }
        .company_header {
            --header-primary: var(--primary-color);
            --header-secondary: var(--secondary-color);
        }

    </style>

    @if (in_array('view', $data['kitchenPermissions']))
        <div class="content d-flex">
            <div class="ms-5 d-flex align-items-center">
                <div>
                    <img src="{{ getCompanyLogo() }}" alt="" width="100px"
                        style="height: 40px;width: 100%;">
                </div>

                <div class="ms-2">
                    <strong class="f-color title" style="line-height: 40px;font-size: 20px;">Kitchen Dashboard</strong>
                </div>
            </div>

            <div class="d-flex align-items-center ms-auto" style="margin-right: 20px;">
                <!-- <label class="me-2">Kitchen Dashboard</label> -->

                <div class="dropdown">
                    <img src="{{ asset('assets/images/logo/user.png') }}" alt="Profile Picture" id="profile-pic"
                        style="width:40px; height:40px;" class="me-2 dropdown-toggle" data-bs-toggle="dropdown"
                        aria-expanded="false">
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profile-pic">

                        <li><a class="dropdown-item text-danger" href="{{ route('logout') }}">
                                <i class="bx bx-power-off font-size-16 align-middle me-1 text-danger"></i>Logout</a></li>
                    </ul>
                </div>
            </div>

        </div>



        <div class="card-container">
            @if (in_array('status_update', $data['kitchenPermissions']))
                <div id="pending" ondrop="drop(event)" ondragover="allowDrop(event)"
                    class="order-pending scroll-container"
                    style="box-shadow: 2px 2px 10px rgb(208 108 108 / 50%); padding: 20px;">
                    <h3 style="text-align: center;">Pending</h3>

                </div>

                <div id="progress" ondrop="drop(event)" ondragover="allowDrop(event)"
                    class="order-progress scroll-container"
                    style="box-shadow: 2px 2px 10px rgb(217 211 62 / 50%);padding: 20px;">
                    <h3 style="text-align: center;">In Progress</h3>
                </div>

                <div id="completed" ondrop="drop(event)" ondragover="allowDrop(event)"
                    class="order-completed scroll-container"
                    style="box-shadow:2px 2px 10px rgb(60 165 68 / 50%); padding: 20px;">
                    <h3 style="text-align: center;">Completed</h3>
                </div>
            @else
                <div id="pending"
                    class="order-pending scroll-container"
                    style="box-shadow: 2px 2px 10px rgb(208 108 108 / 50%); padding: 20px;">
                    <h3 style="text-align: center;">Pending</h3>

                </div>

                <div id="progress"
                    class="order-progress scroll-container"
                    style="box-shadow: 2px 2px 10px rgb(217 211 62 / 50%);padding: 20px;">
                    <h3 style="text-align: center;">In Progress</h3>
                </div>

                <div id="completed"
                    class="order-completed scroll-container"
                    style="box-shadow:2px 2px 10px rgb(60 165 68 / 50%); padding: 20px;">
                    <h3 style="text-align: center;">Completed</h3>
                </div>
            @endif


            <div class="order-completed scroll-container">
                <h3 style="text-align: center;">Order Status</h3>
                <div class="status">
                    <div class="status-item pending">
                        <h3>Pending</h3>
                        <p class="count" id="pending-status-number">0</p>
                    </div>
                    <div class="status-item in-progress">
                        <h3>In Progress</h3>
                        <p class="count" id="process-status-number">0</p>
                    </div>
                    <div class="status-item complete">
                        <h3>Complete</h3>
                        <p class="count" id="complete-status-number">0</p>
                    </div>
                </div>
            </div>


        </div>


        <div class="modal" id="kottransferremarkModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="width: 100%;">Please Add Reason For Transfer Completed kot </h5>


                        <button type="button" class="btn-close text-reset" id="closeModalButton"
                            data-bs-dismiss="modal"></button>

                    </div>
                    <div class="modal-body">

                        <div class="pr-2 pl-2 mt-2">
                            <textarea type="text" class="form-control" name="kotTransferRemark" id="kotTransferRemark" placeholder="Enter Remark"
                                rows="3" style="height: 33px;"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button"
                            class="AddKotitemsRemark btn btn-custom">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection('content')
@section('custom-scripts')
    <script>
        var GetKotData = '{{ route('kitchen.dashboard.getdata') }}';
        var UpdateKotStatus = '{{ route('kitchen.dashboard.updatestatus') }}';
        var kotTransfer = '{{ route('kot.transfer') }}';

        $(document).ready(function() {
            // alert('hello');
            LoadKotdata();
        });

        function LoadKotdata() {
            $.ajax({
                url: GetKotData,
                type: 'POST',
                data: {
                    '_token': '{{ csrf_token() }}',
                },
                success: function(response) {

                    if (Array.isArray(response)) {
                        const groupedItems = {};

                        response.forEach(item => {
                            const key = `${item.kot_no}_${item.order_id}`;

                            if (!groupedItems[key]) {
                                groupedItems[key] = {
                                    status: item.kot_status,
                                    items: [],
                                    order_id: item.order_id,
                                    table_id: item.table_id,
                                    table_name: item.name,
                                    saledate: item.saledate,
                                    created_time: item.created_time,
                                    kot_no: item.kot_no,
                                    is_paid: item.is_paid,

                                };
                            }
                            groupedItems[key].items.push({
                                item_name: item.item_name,
                                quantity: item.saleqty,
                                salerate: item.salerate,
                            });
                        });

                        for (const key in groupedItems) {
                            const group = groupedItems[key];
                            const kotNo = group.kot_no;

                            if (group.status == 1) {
                                // Only append to Completed if is_paid is 0
                                if (group.is_paid === 0) {
                                    appendToCompleted(kotNo, group);
                                }
                            } else if (group.status == 2) {
                                appendToPending(kotNo, group);
                            } else {
                                appendToInProgress(kotNo, group);
                            }
                        }


                        CountPendingOrders();
                        CountCompletedOrders();
                        CountInProgressOrders();

                    }
                },
                error: function(error) {
                    console.error('Failed to load KOT data', error);
                }
            });
        }

        //     function appendToPending(kotNo, group) {
        //         const itemsList = group.items.map(item => `
    //     <div class="item">
    //         <span class="item-indicator" style="background-color: #f7c200;"></span>
    //         <div class="item-details">
    //             <p>${item.item_name}</p>
    //             <p class="small-text">Regular x ${item.quantity}</p>
    //         </div>
    //     </div>
    // `).join('');

        //         $('#pending').append(`
    //     <div class="order-card" id="${group.order_id}_${group.kot_no}_${group.table_id}" ondragstart="dragStart(event)" draggable="true">
    //         <div class="card-header-pending">
    //             <div class="table-info">
    //                 <p class="hiddens">${group.order_id}</p>
    //                 <p>Table : ${group.table_name}</p>
    //                 <p>KOT No : ${group.kot_no}</p>
    //             </div>
    //             <div class="order-time">
    //                 <p>${group.saledate}</p>
    //                 <p>${group.created_time}</p>
    //             </div>
    //         </div>
    //         <div class="order-items">${itemsList}</div>
    //     </div>
    // `);


        //     }
        function appendToPending(kotNo, group) {
            let totalPrice = group.items.reduce((sum, item) => sum + (parseFloat(item.salerate) * parseInt(item.quantity)),
                0);

            const formattedDate = new Date(group.saledate).toLocaleDateString('en-US', {
                weekday: 'long',
                month: 'long',
                day: 'numeric',
                year: 'numeric'
            });
            const itemsList = group.items.map(item => `
        <div class="">
          
            <tr>
            <td>${item.item_name}</td>
            <td>${item.quantity}</td>
            <td  colspan="2" style="text-align: right;">₹${item.salerate}</td>
        </tr>
        </div>
    `).join('');

            $('#pending').append(`
        <div class="order-card new-order-design" id="${group.order_id}_${group.kot_no}_${group.table_id}" ondragstart="dragStart(event)" draggable="true">
            <div class="card-header-pending order-header">
               
                    <p class="hiddens">${group.order_id}</p>
                    <div class="order-table">
                         <div class="table-icon">${group.table_name}</div>
                        <div class="order-info table-info">
                            <p class="hiddens">${group.order_id}</p>
                            <h4>KOT: ${group.kot_no}/</h4>
                            <p>KOT: ${group.kot_no}/Order #${group.order_id} / Dine In</p>
                     
                       </div>
                        <div class="order-time">
                        <p class="in-pending1">
                            <span class="status-icon"><i class="fas fa-hourglass-half"></i></span>Pending
                        </p>
                     </div>
                    </div>
                   
               
                 
            </div>
             <div class="order-footer" >
                 <p class="">${formattedDate}</p>
                       <p>${group.created_time}</p>
                 </div>
            <table class="order-items">

                <thead style="justify-content: space-between;">
                    <tr>
                        <th>Items</th>
                        <th>Qty</th>
                        <th colspan="2" style="text-align: right;">Price</th>
                    </tr>
                </thead>
                <tbody>
                    ${itemsList}
                    
                </tbody>
            </table>
            <div class="order-total">
                <p>Total</p>
                <p>₹${totalPrice}</p>
            </div>
           
        </div>
    `);


        }

        // function appendToInProgress(kotNo, group) {
        //     const itemsList = group.items.map(item => `
    //     <div class="item">
    //         <span class="item-indicator" style="background-color: #f7c200;"></span>
    //         <div class="item-details">
    //             <p>${item.item_name}</p>
    //             <p class="small-text">Regular x ${item.quantity}</p>
    //         </div>
    //     </div>
    // `).join('');

        //     $('#progress').append(`
    //     <div class="order-card" id="${group.order_id}_${group.kot_no}_${group.table_id}" ondragstart="dragStart(event)" draggable="true">
    //         <div class="card-header-inprogress">
    //             <div class="table-info">
    //                 <p class="hiddens">${group.order_id}</p>
    //                 <p>Table : ${group.table_name}</p>
    //                 <p>KOT No : ${group.kot_no}</p>
    //             </div>
    //             <div class="order-time">
    //                 <p>${group.saledate}</p>
    //                 <p>${group.created_time}</p>
    //             </div>
    //         </div>
    //         <div class="order-items">${itemsList}</div>
    //     </div>
    // `);


        // }
        function appendToInProgress(kotNo, group) {
            let totalPrice = group.items.reduce((sum, item) => sum + (parseFloat(item.salerate) * parseInt(item.quantity)),
                0);
            const formattedDate = new Date(group.saledate).toLocaleDateString('en-US', {
                weekday: 'long',
                month: 'long',
                day: 'numeric',
                year: 'numeric'
            });
            const itemsList = group.items.map(item => `
        <div class="">
          
            <tr>
            <td>${item.item_name}</td>
            <td>${item.quantity}</td>
            <td colspan="2" style="text-align: right;">₹${item.salerate}</td>
        </tr>
        </div>
    `).join('');

            $('#progress').append(`
        <div class="order-card new-order-design" id="${group.order_id}_${group.kot_no}_${group.table_id}" ondragstart="dragStart(event)" draggable="true">
            <div class="card-header-inprogress order-header">
               
                    <p class="hiddens">${group.order_id}</p>
                    <div class="order-table">
                         <div class="table-icon">${group.table_name}</div>
                        <div class="order-info table-info">
                            <p class="hiddens">${group.order_id}</p>
                             <h4>KOT: ${group.kot_no}</h4>
                            <p>KOT: ${group.kot_no}/Order #${group.order_id} / Dine In</p>
                     
                       </div>
                         <div class="order-time">
                        <p class="in-progress1">
                            <span class="status-icon"><i class="fas fa-spinner"></i></span>Progress
                        </p>
                     </div>
                    </div>
                   
               
                 
            </div>
             <div class="order-footer" >
                        <p class="">${formattedDate}</p>
                       <p>${group.created_time}</p>
                 </div>
            <table class="order-items">

                <thead style="justify-content: space-between;">
                    <tr>
                        <th>Items</th>
                        <th>Qty</th>
                        <th colspan="2" style="text-align: right;">Price</th>
                    </tr>
                </thead>
                <tbody>
                    ${itemsList}
                </tbody>
            </table>
            <div class="order-total">
                <p>Total</p>
                <p>₹${totalPrice}</p>
            </div>
           
        </div>
    `);


        }
        //     function appendToInProgress(kotNo, group) {
        //         const itemsList = group.items.map(item => `
    //         <tr>
    //             <td>${item.item_name}</td>
    //             <td>${item.quantity}</td>
    //             <td>$${item.price}</td>
    //         </tr>
    //   `).join('');

        //     $('#progress').append(`
    //         <div class="order-card new-order-design" id="${group.order_id}_${group.kot_no}_${group.table_id}" ondragstart="dragStart(event)" draggable="true">
    //             <div class="order-header card-header-inprogress">
    //                 <div class="order-table">
    //                     <div class="table-icon">${group.table_name}</div>
    //                     <div class="order-info table-info">
    //                          <p class="hiddens">${group.order_id}</p>
    //                         <h4>${group.customer_name}</h4>
    //                         <p>KOT: ${group.kot_no}/Order #${group.order_id} / Dine In</p>

    //                     </div>
    //                 </div>
    //                <div class="order-time">
    //                     <p class="in-progress1">
    //                         <span class="status-icon">⏳</span> In Progress
    //                     </p>
    //                 </div>

    //             </div>
    //                <div class="order-footer" >
    //                     <p class="">${group.saledate}</p>
    //                       <p>${group.created_time}</p>
    //                 </div>
    //            <table class="order-items">

    //                 <thead style="justify-content: space-between;">
    //                     <tr>
    //                         <th>Items</th>
    //                         <th>Qty</th>
    //                         <th>Price</th>
    //                     </tr>
    //                 </thead>
    //                 <tbody>
    //                     ${itemsList}
    //                 </tbody>
    //             </table>
    //             <div class="order-total">
    //                 <p>Total</p>
    //                 <p>$${group.total_price}</p>
    //             </div>
    //             <div class="order-actions">
    //                 <button class="details-btn">See Details</button>
    //                 <button class="pay-btn">Pay Bills</button>
    //             </div>
    //         </div>
    //     `);
        // }

        // function appendToCompleted(kotNo, group) {



        //     const itemsList = group.items.map(item => `
    //     <div class="item">
    //         <span class="item-indicator" style="background-color: #f7c200;"></span>
    //         <div class="item-details">
    //             <p>${item.item_name}</p>
    //             <p class="small-text">Regular x ${item.quantity}</p>
    //         </div>
    //     </div>
    // `).join('');

        //     $('#completed').append(`
    //     <div class="order-card" id="${group.order_id}_${group.kot_no}_${group.table_id}" ondragstart="dragStart(event)" draggable="true">
    //         <div class="card-header-complete">
    //             <div class="table-info">
    //                 <p class="hiddens">${group.order_id}</p>
    //                 <p>Table : ${group.table_name}</p>
    //                 <p>KOT No : ${group.kot_no}</p>
    //             </div>
    //             <div class="order-time">
    //                 <p>${group.saledate}</p>
    //                 <p>${group.created_time}</p>
    //             </div>
    //         </div>
    //         <div class="order-items">${itemsList}</div>
    //     </div>
    // `);

        // }

        function appendToCompleted(kotNo, group) {
            let totalPrice = group.items.reduce((sum, item) => sum + (parseFloat(item.salerate) * parseInt(item.quantity)),
                0);


            const formattedDate = new Date(group.saledate).toLocaleDateString('en-US', {
                weekday: 'long',
                month: 'long',
                day: 'numeric',
                year: 'numeric'
            });
            const itemsList = group.items.map(item => `
                <div class="">
                    <tr>
                        <td>${item.item_name}</td>
                        <td>${item.quantity}</td>
                        <td colspan="2" style="text-align: right;">${item.salerate}</td>
                    </tr>
                </div>
             `).join('');

            $('#completed').append(`
        <div class="order-card new-order-design"  id="${group.order_id}_${group.kot_no}_${group.table_id}" ondragstart="dragStart(event)" draggable="true">
            <div class="card-header-complete order-header">
               
                    <p class="hiddens">${group.order_id}</p>
                    <div class="order-table">
                         <div class="table-icon">${group.table_name}</div>
                        <div class="order-info table-info">
                            <p class="hiddens">${group.order_id}</p>
                            <h4>KOT: ${group.kot_no}</h4>
                            <p>KOT: ${group.kot_no}/Order #${group.order_id} / Dine In</p>
                     
                       </div>
                         <div class="order-time">
                        <p class="order-completed1">
                            <span class="status-icon"><i class="fas fa-check-circle"></i></span>Complete
                        </p>
                     </div>
                    </div>
               
                 
            </div>
             <div class="order-footer" >
                 <p class="">${formattedDate}</p>
                       <p>${group.created_time}</p>
                 </div>
            <table class="order-items">

                <thead style="justify-content: space-between;">
                    <tr>
                        <th>Items</th>
                        <th>Qty</th>
                        <th colspan="2" style="text-align: right;">Price</th>
                    </tr>
                </thead>
                <tbody>
                    ${itemsList}
                </tbody>
            </table>
            <div class="order-total">
                <p>Total</p>
                <p>₹${totalPrice}</p>
            </div>
           
        </div>
    `);


        }
        //     function appendToCompleted(kotNo, group) {
        //      const itemsList = group.items.map(item => `
    //         <tr>
    //             <td>${item.item_name}</td>
    //             <td>${item.quantity}</td>
    //             <td>$${item.price}</td>
    //         </tr>
    //   `).join('');

        //       $('#completed').append(`
    //         <div class="order-card new-order-design" id="${group.order_id}_${group.kot_no}_${group.table_id}" ondragstart="dragStart(event)" draggable="true">
    //             <div class="order-header">
    //                 <div class="order-table">
    //                     <div class="table-icon">${group.table_name}</div>
    //                     <div class="order-info">
    //                         <h4>${group.customer_name}</h4>
    //                         <p>KOT: ${group.kot_no}/Order #${group.order_id} / Dine In</p>

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

    //                  <div class="order-time">
    //                     <p class="order-completed1">
    //                         <span class="status-icon">✔</span> Ready
    //                     </p>
    //                 </div>

    //             </div>
    //                <div class="order-footer" >
    //                     <p class="">${group.saledate}</p>
    //                       <p>${group.created_time}</p>
    //                 </div>




    //             <table class="order-items">

    //                 <thead style="justify-content: space-between;">
    //                     <tr>
    //                         <th>Items</th>
    //                         <th>Qty</th>
    //                         <th>Price</th>
    //                     </tr>
    //                 </thead>
    //                 <tbody>
    //                     ${itemsList}
    //                 </tbody>
    //             </table>
    //             <div class="order-total">
    //                 <p>Total</p>
    //                 <p>$${group.total_price}</p>
    //             </div>
    //             <div class="order-actions">
    //                 <button class="details-btn">See Details</button>
    //                 <button class="pay-btn">Pay Bills</button>
    //             </div>
    //         </div>
    //     `);
        // }

        let scrollInterval = null;

        function dragStart(event) {
            event.dataTransfer.setData("text/plain", event.target.id);
        }

        function allowDrop(event) {
            event.preventDefault();

            // autoScroll(event);
            // fullPageAutoScroll(event);
            autoScrollContainer(event);

        }

        function autoScrollContainer(event) {
            const scrollSpeed = 5;
            const dropZone = event.target.closest('.scroll-container');

            if (!dropZone) return;

            const rect = dropZone.getBoundingClientRect();
            const mouseY = event.clientY;

            clearInterval(scrollInterval);


            if (mouseY < rect.top + 50 && dropZone.scrollTop > 0) {
                scrollInterval = setInterval(() => {
                    if (dropZone.scrollTop > 0) {
                        dropZone.scrollBy(0, -scrollSpeed);
                    } else {
                        clearInterval(scrollInterval);
                    }
                }, 20);
            } else if (mouseY > rect.bottom - 50 && dropZone.scrollTop < dropZone.scrollHeight - dropZone.clientHeight) {
                scrollInterval = setInterval(() => {
                    dropZone.scrollBy(0, scrollSpeed);
                }, 20);
            }
        }


        function drop(event) {
            event.preventDefault();

            clearInterval(scrollInterval);

            const data = event.dataTransfer.getData("text/plain");
            const draggedElement = document.getElementById(data);
            let dropZone = event.target.closest('.scroll-container');;

            // while (dropZone && (!dropZone.id || (dropZone.id !== "pending" && dropZone.id !== "progress" && dropZone.id !== "completed"))) {
            //     dropZone = dropZone.parentElement;
            // }
            //     if (draggedElement.closest('#completed') && (dropZone.id !== 'completed')) {
            //         $('#kottransferremarkModal').modal('show');
            //         return;
            // }

            if (draggedElement.closest('#completed') && dropZone.id !== 'completed') {
                $('#kottransferremarkModal').modal('show');
                $('#kotTransferRemark').val('');

                $('.AddKotitemsRemark').off('click').on('click', function() {
                    const remark = $('#kotTransferRemark').val().trim();
                    if (!remark) {
                        // alert('Please enter a remark before submitting.');
                        flasher.error('Please enter a remark before submitting.', {
                            timeout: 3000
                        });
                        return;
                    }


                    $.ajax({
                        url: kotTransfer,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            kot_no: draggedElement.id.split('_')[1],
                            order_id: draggedElement.id.split('_')[0],
                            table_id: draggedElement.id.split('_')[2],
                            status: dropZone.id === "pending" ? 2 : dropZone.id === "progress" ? 3 : 1,
                            remark: remark
                        },
                        success: function(response) {
                            if (response.status === 'success') {
                                dropZone.appendChild(draggedElement);
                                updateCardStatus(draggedElement, dropZone.id === "pending" ? 2 : 3);
                                $('#kottransferremarkModal').modal('hide');
                            } else {
                                flasher.error(response['msg'], {
                                    timeout: 3000
                                });
                            }
                        },
                        error: function(error) {
                            console.error('Error during KOT transfer:', error);
                            flasher.error('An error occurred. Please try again.', {
                                timeout: 3000
                            });
                        }
                    });

                });

                return;
            }

            if (dropZone && dropZone !== draggedElement.parentElement) {
                dropZone.appendChild(draggedElement);

                if (dropZone.id === "pending") {
                    updateCardStatus(draggedElement, 2);
                } else if (dropZone.id === "progress") {
                    updateCardStatus(draggedElement, 3);
                } else if (dropZone.id === "completed") {
                    updateCardStatus(draggedElement, 1);
                }
            }
        }



        // function updateCardStatus(card, status) {
        //     const cardHeader = card.querySelector('[class^="card-header"]');
        //     const kotNoElement = cardHeader.querySelector('.table-info p:nth-child(3)');
        //     const orderIdElement = cardHeader.querySelector('.hiddens');

        //     const kotNo = kotNoElement ? kotNoElement.textContent.split(':')[1].trim() : null;
        //     const orderId = orderIdElement ? orderIdElement.textContent.trim() : null;



        //     if (kotNo && orderId) {
        //         $.ajax({
        //             url: UpdateKotStatus,
        //             type: 'POST',
        //             data: {
        //                 '_token': '{{ csrf_token() }}',
        //                 kot_no: kotNo,
        //                 order_id: orderId,
        //                 status: status
        //             },
        //             success: function(response) {
        //                 if (response['status'] === 1) {
        //                     cardHeader.className = '';
        //                     cardHeader.classList.add(
        //                         `card-header-${status === 1 ? 'complete' : status === 2 ? 'pending' : 'inprogress'}`
        //                     );
        //                     flasher.success(response['msg'], {
        //                         timeout: 2500
        //                     });
        //                     CountPendingOrders();
        //                     CountCompletedOrders();
        //                     CountInProgressOrders();
        //                 } else {
        //                     flasher.error(response['msg'], {
        //                         timeout: 3000
        //                     });
        //                 }
        //             },
        //             error: function(error) {
        //                 console.error('Failed to update KOT status', error);
        //             }
        //         });
        //     }
        // }
        function updateCardStatus(card, status) {
            const cardHeader = card.querySelector('[class^="card-header"]');
            const kotNoElement = cardHeader.querySelector('.table-info p:nth-child(3)');
            const orderIdElement = cardHeader.querySelector('.hiddens');
            const statusElement = cardHeader.querySelector('.order-time p'); // Select the status element

            const kotNo = kotNoElement ? kotNoElement.textContent.split(':')[1].trim() : null;
            const orderId = orderIdElement ? orderIdElement.textContent.trim() : null;

            if (kotNo && orderId) {
                $.ajax({
                    url: UpdateKotStatus,
                    type: 'POST',
                    data: {
                        '_token': '{{ csrf_token() }}',
                        kot_no: kotNo,
                        order_id: orderId,
                        status: status
                    },
                    success: function(response) {
                        if (response['status'] === 1) {
                            // Remove existing status classes before applying new one
                            statusElement.classList.remove("order-completed1", "in-pending1", "in-progress1");

                            // Change header class based on status
                            cardHeader.className =
                                `card-header-${status === 1 ? 'complete' : status === 2 ? 'pending' : 'inprogress'}`;

                            // Update status text and icon dynamically
                            if (status === 1) {
                                statusElement.classList.add("order-completed1"); // Add only relevant class
                                statusElement.innerHTML =
                                    `<span class="status-icon"><i class="fas fa-check-circle"></i></span> Complete`;
                            } else if (status === 2) {
                                statusElement.classList.add("in-pending1"); // Add only relevant class
                                statusElement.innerHTML =
                                    `<span class="status-icon"><i class="fas fa-hourglass-half"></i></span> Pending`;
                            } else {
                                statusElement.classList.add("in-progress1"); // Add only relevant class
                                statusElement.innerHTML =
                                    `<span class="status-icon"><i class="fas fa-spinner"></i></span> In Progress`;
                            }

                            flasher.success(response['msg'], {
                                timeout: 2500
                            });

                            // Update order counts
                            CountPendingOrders();
                            CountCompletedOrders();
                            CountInProgressOrders();
                        } else {
                            flasher.error(response['msg'], {
                                timeout: 3000
                            });
                        }
                    },
                    error: function(error) {
                        console.error('Failed to update KOT status', error);
                    }
                });
            }
        }



        function CountPendingOrders() {
            const pendingDiv = document.getElementById('pending');
            const orderCards = pendingDiv.getElementsByClassName('order-card');

            // alert(orderCards.length);
            $('#pending-status-number').text(orderCards.length);

        }

        function CountInProgressOrders() {
            const pendingDiv = document.getElementById('progress');
            const orderCards = pendingDiv.getElementsByClassName('order-card');

            $('#process-status-number').text(orderCards.length);
        }

        function CountCompletedOrders() {
            const pendingDiv = document.getElementById('completed');
            const orderCards = pendingDiv.getElementsByClassName('order-card');

            $('#complete-status-number').text(orderCards.length);
        }
    </script>
@endsection