@extends('layouts.main')
@section('title', $data['title'])
@section('content')

    <style type="text/css">
        @media print {

            thead,
            tfoot {
                display: none !important
            }

            @page {
                size: 'a4';
                margin: 0mm;
            }
        }

        li.list-inline-item.px-2 {
            padding-left: 0 !important;
        }

        #div_start_end_datepicker .form-group.col-6:first-child {
            padding-right: 30px;
        }

        .order-detail {
            text-align: center;
            vertical-align: middle;
        }

        .order-detail .mb-0.mt-1.fw-bold {
            line-height: 1;
        }

        .input-group.date .input-group-text {
            height: 100%;
            /* Match the height of the input box */
            display: flex;
            align-items: center;
            /* Center the icon vertically */
            padding: 0 10px;
            /* Add padding to make it look consistent */
            border-radius: 0 0.25rem 0.25rem 0;
            /* Optional: Make sure it matches input's border-radius */
            cursor: pointer;
            /* Indicate the icon is clickable */
        }

        .input-group.date .form-control {
            border-radius: 0.25rem 0 0 0.25rem;
            /* Adjust input's border-radius for consistency */
        }

        #datePickerModal {
            align-content: center;
        }

        /* .page-content {
                                                                                                                                                                                                                                                                                                                                                                                     padding: calc(50px + 24px) calc(24px / 2) 60px calc(24px / 2)
                                                                                                                                                                                                                                                                                                                                                                                            } */

        .datepicker table {
            /* font-family: Arial, Helvetica, sans-serif; */
            font-family: 'Montserrat', sans-serif !important;
            width: 100%;
            color: #495057;
            border-spacing: 0;
            border-collapse: collapse;
            font-size: 14px;
        }



        #datatable thead th:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        #datatable thead th:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;

        }

        #datatable thead th {
            color: #000;
            font-size: 13px;
            text-align: center;
            padding: 12px;
            font-weight: 600;
            /* font-family: 'Almarose Semibold', sans-serif; */
            font-family: 'Montserrat', sans-serif !important;
            /* background-color: rgb(225 232 242) !important; */
            background-color: #F1F4F9;
            border-bottom: none;
        }

        #datatable tbody td {
            font-size: 14px;
            font-family: 'Montserrat', sans-serif !important;
            text-align: center;
            background-color: #fff !important;
            color: #000;
            /* border-top: 1px solid #e5e9f2; */
        }

        #datatable_filter input {
            height: 36px;
            font-size: 12px;
        }

        .title-row {
            font-size: 22px;
            font-weight: bold;
            color: #333;
        }

        .form-control-sm {
            padding: 0px 11px !important;

        }

        @media (max-width:1743px) {
            #datatable_filter input {
                width: 360px;
            }


        }

        @media (max-width:1643px) {
            #datatable_filter input {
                width: 400px;
            }


        }

        @media (max-width:1543px) {
            #datatable_filter input {
                width: 340px;
            }


        }

        @media (max-width:1384px) {
            #datatable_filter input {
                width: 270px;
            }


        }

        @media (max-width:1343px) {
            #datatable_filter input {
                width: 254px;
            }


        }

        @media (max-width:1283px) {
            #datatable_filter input {
                width: 240px;
            }


        }

        @media (max-width:1264px) {
            #datatable_filter input {
                width: 200px;
            }


        }

        @media (max-width:1223px) {
            #datatable_filter input {
                width: 200px;
            }


        }

        @media (max-width:1184px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: 16px !important; */

            }

        }

        @media (max-width:1156px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: 5px !important; */

            }

        }

        @media (max-width:1134px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: -10px !important; */

            }

        }


        @media (max-width:1106px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: -20px !important; */

            }

        }

        @media (max-width:1084px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: -30px !important; */

            }

        }


        @media (max-width:1063px) {
            #datatable_filter input {
                width: 220px;
                /* margin-left: -40px !important; */

            }

        }

        @media (max-width:1043px) {
            #datatable_filter input {
                width: 200px;
                /* margin-left: 2px !important; */

            }

        }



        @media (max-width: 992px) {
            {{--  .vertical-menu {
                transform: translateX(-100%);
            }  --}} .vertical-menu.open {
                transform: translateX(0);
            }
        }

        .btn-primary {
            background-color: #408dfb;
            border: none;
            border-radius: 10px;
            line-height: 28px;
        }

        .clicked-border {
            animation: pulse 0.5s ease-in-out;
        }

        .clicked-border {
            border: 3px solid #dadada !important;
            border-radius: 5px;
            transform: scale(0.98);
            transition: transform 0.2s ease, border-color 0.2s ease;
        }

        #modal-title {
            color: #3751A1;
            font-weight: bold;
        }

        #calendar-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            color: #3751A1;
            pointer-events: none;
        }

        #datatable_wrapper .row {
            align-items: center;
        }

        .ag-input-field-input.ag-checkbox-input {
            margin: 0 !important;
        }

        @media (min-width: 768px) and (max-width: 1023px) {

            .row.live-order-report-responsive {
                padding-left: 3.2rem !important;
            }

        }


        .ag-header-row {
            height: 50px !important;
            line-height: 50px !important;
            text-align: center;
            background-color: #fff !important;
        }

        [data-theme-mode="blue"] {
            --ag-premium-bg: #f4f6fb;
            /* soft blue-gray */
            --ag-super-bg: #f6f4fb;
            /* soft violet-gray */
            --ag-comm-bg: #f1f8f4;
            /* light mint (success) */
            --ag-eco-bg: #fefbe6;
            /* pale yellow */
        }


        .ag-header-group-text {
            font-size: 15px !important;
            /*color: black;*/
            color: #757383;
        }

        .selectiotextbox {
            height: 30px;
            color: red;
            background-color: palegoldenrod !important;
            border-color: grey;
            border-radius: 0;
            font-weight: 700;
        }

        /*.clsFontRed, .clsFontRed>*, .clsFontRed .ag-cell-value {
                        color: red !important;
                    }*/

        .ag-center-cols-clipper .ag-row {
            white-space: nowrap;
            width: 100%;
            --ag-cell-horizontal-padding: 5PX;
        }

        .ag-body-viewport>div .ag-row.ag-row-selected,
        .ag-body-viewport>div .ag-row.ag-row-selected>div,
        .ag-center-cols-clipper .ag-row.ag-row-focus,
        .ag-center-cols-clipper .ag-row.ag-row-focus>div {
            /*background-color: #c7deff !important;*/
            /*background-color: #f2f0fa !important;*/
        }

        .btn-label {
            position: relative;
            left: -12px;
            display: inline-block;
            padding: 6px 12px;
            background: rgba(0, 0, 0, 0.15);
            border-radius: 3px 0 0 3px;
        }

        .btn-labeled {
            padding-top: 0;
            padding-bottom: 0;
        }

        .ag-theme-balham .ag-row-odd {
            background-color: #ffffff;
        }

        .ag-header-cell-label .ag-header-cell-text {
            white-space: nowrap !important;
            font-weight: bold;
            color: black;
        }

        .ag-cell-value {
            white-space: pre-wrap;
            font-weight: 400;
            color: black;
            padding-top: 2px;
            padding-bottom: 2px;
        }

        .ag-theme-balham .ag-cell input.numeric-input {
            outline: 0;
            /*height: inherit;*/
            width: inherit;
            border: 0;
            text-align: end;
        }

        .ag-cell.align-rgt {
            text-align: end;
            justify-content: flex-end;
        }

        .align-rgt input {
            text-align: end;
        }

        .ag-theme-balham .ag-input-wrapper input[type=date] {
            padding: 2px;
            padding-left: 6px;
        }

        .ag-theme-balham .ag-ltr .ag-floating-filter-button {
            margin-left: 5px !important;
        }

        .ag-theme-balham .ag-ltr .ag-cell {
            border-right: 1px solid #d5cdcd !important;
            border-bottom: 1px solid #d5cdcd !important;
        }

        .ag-theme-balham .ag-ltr .ag-cell.ag-non-edit-cust {
            color: black;
            /*background-color: #efefef;*/
        }

        .ag-theme-balham .ag-header-row {
            background-color: gainsboro;
        }

        .mainbtn .btn-label {
            padding: 12px 12px;
        }

        .ag-theme-balham div.ag-root-wrapper.ag-layout-normal {
            --calc-scale: 85%;
            --calc-wh: calc(100% - calc(var(--calc-scale) - 102.5%));
            transform: scale(var(--calc-scale));
            width: var(--calc-wh);
            height: var(--calc-wh);
            transform-origin: 0 0;
        }

        .ag-cell {
            overflow: visible !important;
        }

        .ag-root.ag-layout-auto-height,
        .ag-body-viewport.ag-layout-auto-height,
        .ag-body-viewport-wrapper.ag-layout-auto-height {
            overflow: visible !important;
        }
        .ag-header-cell-text {
            white-space: nowrap !important;
        }

        .ag-header-group-cell-label:not([aria-colindex="3"]) {
            justify-content: center;
        }

        .ag-cell-wrapper .ag-cell-value,
        .ag-cell-wrapper .ag-group-value {
            font-weight: 500;
            color: #000000d1;
            /*text-transform: uppercase;*/
        }

        .ag-theme-balham .ag-header-cell,
        .ag-theme-balham .ag-header-group-cell {
            border-right: 1px solid #dee2e6;
        }

        .ag-header-cell-label .ag-header-cell-text {
            font-weight: bold;
            color: black;
        }

        .ag-theme-balham .ag-ltr .ag-cell {
            border-right: 1px solid #dee2e6;
        }

        .ag-theme-balham .ag-header-row {
            background-color: gainsboro;
        }

        [col-id*="Pre"],
        [col-id*="pre"],
        .Premium {
            /*background-color: #c2bee0 !important;*/
            /*background-color: #d0e2ff !important;*/
            /*background-color: #EAF4FB !important;*/
            background-color: var(--ag-premium-bg) !important;
        }

        [col-id*="Sup"],
        [col-id*="sup"],
        .Super {
            /*background-color: #f8e1ba !important;*/
            /*background-color: #F4ECF7 !important;*/
            background-color: var(--ag-super-bg) !important;
        }

        [col-id*="Com"],
        [col-id*="com"],
        .Commerce {
            /*background-color: #c3dfc6 !important;*/
            /*background-color: #e4e9f0 !important;*/
            background-color: var(--ag-comm-bg) !important;
        }

        [col-id*="Ech"],
        [col-id*="Eco"],
        [col-id*="eco"],
        .Eco {
            /*background-color: #a3e3ef !important;*/
            /*background-color: #fff2cc !important;*/
            background-color: var(--ag-eco-bg) !important;
        }

        [col-id*="Cancel"] {
            background-color: #f6d6e0 !important;
            /*background-color: #e9aabf !important;*/
            /*background-color: #d06b8d !important;*/
        }

        [col-id*="diff"] {
            /*background-color: lightyellow !important;*/
            /*background-color: #FFF6D1 !important;*/
            background-color: #FFE2D1 !important;
        }


        /*.ag-theme-balham .ag-cell:not([col-id="Remark"]) input[class^=ag-], .ag-theme-balham select[class^=ag-], .ag-theme-balham textarea[class^=ag-],*/
        [col-id*="Qty"],
        [col-id*="Premium"],
        [col-id*="Super"],
        [col-id*="Commerce"],
        [col-id*="Eco"],
        [col-id*="Qty"] [ref="eInput"],
        [col-id*="diff"],
        [col-id*="Cancel"] [ref="eInput"],
        [col-id*="diff"],
        [col-id*="Weight"],
        [col-id*="TotalOrderQty"],
        [col-id*="TotalReserveQty"],
        [col-id*="TotalLoadingQty"],
        .ag-theme-balham .ag-cell[col-id="diff"] .ag-theme-balham .ag-cell:not([col-id="Remark"]):not([col-id*="Item"]) input[class^=ag-],
        .ag-theme-balham select[class^=ag-],
        .ag-theme-balham textarea[class^=ag-] {
            text-align: end;
        }

        .ag-theme-balham .ag-ltr .ag-cell {
            border-right: 1px solid #dee2e6 !important;
        }

        .ag-theme-balham .ag-header-row:first-child .ag-header-cell,
        .ag-theme-balham .ag-header-row:first-child .ag-header-group-cell {
            border-right: 1px solid #dee2e6;
        }

        .ag-header-cell[col-id*="Premium"] .ag-header-cell-label,
        .ag-header-cell[col-id*="Super"] .ag-header-cell-label,
        .ag-header-cell[col-id*="Commerce"] .ag-header-cell-label,
        .ag-header-cell[col-id*="Eco"] .ag-header-cell-label,
        .ag-header-cell[col-id*="Qty"] .ag-header-cell-label {
            justify-content: center
        }


        /*.ag-theme-balham .ag-header-row:first-child .ag-header-cell, .ag-theme-balham .ag-header-row:first-child .ag-header-group-cell {
                    }*/

        .ag-theme-balham .ag-header-row .ag-header-cell {
            font-weight: 800;
        }

        .ag-theme-balham>* {
            /*--ag-font: 0.94rem;*/
            /*--ag-font: 0.875rem;*/
            font-family: "Poppins", sans-serif !important;
            font-size: 0.94rem;
            font-weight: 400 !important;
        }

        .ag-theme-balham .ag-body-viewport .ag-cell:not(.ag-edit-cust) {
            padding: 5px 10px;
            /* padding-top: 2px;
                        padding-bottom: 2px;*/
            font-weight: 400 !important;
            overflow: hidden !important;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: var(--ag-font);
        }

        .ag-header-cell-label .ag-header-cell-text {
            font-size: var(--ag-font);
        }

        .ag-header-viewport {
            background-color: #e8e8e8;
        }

        .ag-theme-balham .ag-header-row {
            background-color: #e8e8e8;
        }


        /* Boot Box*/

        .bootbox.my-alert .modal-body {
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            justify-content: space-between;
        }

        .bootbox.my-alert .bootbox-close-button {
            transform: scale(1.5);
        }

        .bootbox.my-alert .bootbox-close-button:hover {
            transform: scale(1.8);
        }


        /*Auto complite*/

        .innerAutoComplete {
            width: 100%;
            border: none;
        }

        .innerAutoComplete:focus {
            outline: none;
            box-shadow: 0 0 2px 1px #719ece;
            /*border-color: #719ece;*/
            /*border-color: var(--ag-input-focus-border-color, #719ece);*/
        }

        .ag-theme-balham .ag-row {
            /*border-bottom: 1px solid gray !important;*/
            /*border-bottom: 1px solid #cacaca !important;*/
        }

        .ag-theme-balham .ag-header-cell,
        .ag-theme-balham .ag-header-group-cell {
            padding: 0 5px !important;
        }


        /*.ag-cell .ag-cell-not-inline-editing .ag-cell-auto-height .ag-cell-value .ag-cell-range-left{
                        width:400px!important;*/


        /*font-size:12px!important;*/


        /*}*/

        .ag-floating-bottom {
            user-select: none;
            pointer-events: none;
        }

        .ag-theme-balham .ag-floating-bottom {
            /*border-top: 2px solid #000000 !important;*/
            /*border-top-color: #000000 !important;*/
            /* border-top: 2px solid #cacaca !important;
                        border-top-color: #cacaca !important;*/
            box-sizing: border-box !important;
        }

        .ag-pinned-right-floating-bottom button {
            display: none;
        }

        .ag-theme-balham .ag-header-row:not(:first-child) .ag-header-cell,
        .ag-theme-balham .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group,
        .ag-theme-balham .ag-header-cell,
        .ag-theme-balham .ag-header-group-cell {
            /*border-color: #515050 !important;*/
            /*border-color: #cacaca !important;*/
        }

        .ag-theme-balham .ag-body-viewport.ag-layout-normal {
            /*border-color: #515050 !important;*/
            /*border-color: #cacaca!important;*/
            /*border-top: 1px solid;*/
        }


        /*.table-custom thead th{
                        border-top:1px solid black;
                        border-bottom:1px solid black;
                    }*/

        .sorting {
            border: 1px inherit black;
            border-top: 1px inherit black;
            padding: 10px 16px !important;
        }

        .table> :not(caption)>*>* {
            /* border-width: 0.1px;
                        border-color: #ebeaf2;
                        border-right: 0;*/
        }

        tbody,
        td,
        tfoot,
        th,
        thead,
        tr {
            /*border-style: inherit;*/
        }

        .ag-row-no-animation .ag-cell-inline-editing .ag-cell-wrapper {
            display: inline-block;
        }

        .ag-header-cell:after,
        .ag-header-group-cell:after {
            right: -1px !important;
        }

        .ag-floating-bottom .ag-floating-bottom-viewport span button,
        .ag-floating-bottom [role="gridcell"][col-id*="Date"] span {
            display: none;
        }

        div.ag-cell.ag-edit-cust {
            /*background-color: #f8f9fa;*/
            color: black;
        }

        .ag-theme-balham .ag-icon {
            font-family: agGridBalham;
            font-size: 10px;
            /*line-height: 6px;*/
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .ag-floating-bottom [role="gridcell"][col-id*="Weight"] span {
            /*display: none*/
        }

        /*.ag-center-cols-clipper [ref="eViewport"] {
                        overflow-x: hidden !important;
                    }
                    */

        [col-id*="ToLoading"] .ag-header-cell-label .ag-header-cell-text {
            /*color: white;*/
            /*color: #4A148C;*/
            color: #3751A1;
            font-weight: 400;
        }

        [col-id*="ToLoading"] {
            /*background-color: #8e5ba2 !important;*/
            /*background-color: #D1C4E9 !important;*/
            background-color: #a9b5dc !important;
            /*color: #4A148C !important;*/
            color: #3751A1 !important;
        }

        [col-id*="ToLoading"]:focus {
            color: #2e2040 !important;
        }

        div.ag-row-selected.ag-row-focus [col-id*="ToLoading"] {
            /* color: black !important;*/
        }

        .role-center {
            text-align: center;
        }

        .roleheader.View {
            background: #eeeeff;
        }

        .roleheader.Insert {
            background: #e3ffe3;
        }

        .roleheader.Update {
            background: #ffffd6;
        }

        .roleheader.Delete {
            background: #ffa2a2;
        }

        .ag-row.rag-reserve {
            background-color: #ececec;
        }

        .ag-row.rag-fresh {
            /*background-color: orange;*/
        }



        .ag-row.rag-order {
            background-color: whitesmoke;
        }

        .ag-row.rag-loaded {
            background-color: #ffdde3;
        }

        .ag-row.rag-draft {
            background-color: hsl(33 100% 91% / 1);
        }

        .ag-row.rag-red,
        .ag-cell.rag-red {
            background-color: #ffd2d2;
        }

        .ag-row.rag-app {
            background-color: lightcyan;
        }

        .ag-row.less-stock {
            background-color: red !important;
        }

        .ag-row.rag-green,
        .ag-cell.rag-green {
            background-color: #d2ffda;
        }

        /*.ag-row.rag-blue-1 {
                        background-color: hsl(125 100% 91% / 1);
                    }*/

        .ag-row.rag-blue-1 {
            /*background-color: #e6f4ec;*/
            background-color: #c7f3da;
        }

        .ag-row.rag-draft div.clsFontRed {
            /*color:white !important;*/
        }

        /*
                        #region loading
                    */
        /*.ag-cell.PendingOrders {*/
        /*background-color: #ffff9d !important;*/
        /*background-color: #D7D8FF !important;
                    }
                    .PendingOrders .ag-cell-wrapper .ag-cell-value {*/
        /*color: green;*/
        /*color: #3B3B6D;
                    }*/

        .ag-cell.PendingOrders {
            background-color: #FFF6D1 !important;
            /* soft pending yellow */
        }

        .PendingOrders .ag-cell-wrapper .ag-cell-value {
            color: #A67C00;
            /* warm golden-brown for good contrast */
        }

        #rolediv .ag-header-cell.role-center .ag-cell-label-container .ag-header-cell-label {
            display: flex;
            justify-content: center;
        }

        .ag-paging-panel>*,
        .ag-theme-balham .ag-icon {
            color: black
        }

        .ag-body-horizontal-scroll,
        .ag-body-horizontal-scroll-container,
        .ag-body-horizontal-scroll-viewport {
        }

        #ag-page-size {
            display: none;
        }

        .ag-root-wrapper .ag-paging-panel.ag-unselectable #ag-page-size {
            display: block;
        }
        .ag-cell-wrapper> :not(.ag-cell-value):not(.ag-group-value) {
            width: 100%;
        }

        .ag-cell.ag-cell-not-inline-editing.ag-cell-with-height.ag-cell-value[col-id*="0___"],
        .ag-cell.ag-cell-not-inline-editing.ag-cell-with-height.ag-cell-value[col-id*="Amt"] {
            text-align: right;
        }

        .ag-row.rep-add-stock {
            box-shadow: inset 1px 1px 20px #ddffe2;
        }

        .ag-row.rep-less-stock {
            box-shadow: inset 1px 1px 20px #ffeded;
        }

        .ag-cell.ag-cell-value.Update-cell {
            box-shadow: rgb(255 253 237) 1px 1px 20px inset;
            background-color: yellow !important;
        }

        .ag-theme-balham .ag-row-even {
            box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
        }

        .ag-row {
            min-height: 40px !important;
            height: 40px !important;
        }
    </style>

    <div class="page-content">
        <div class="container-fluid">
            <div class="row live-order-report-responsive">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <!-- Filter Section -->
                            <div class="row g-3 pb-3 align-items-end border-bottom" id="filter_div">
                                <div class="col-12 col-md-6 col-lg-3">
                                    <div class="ajax-select">
                                        <label for="group_id" class="form-label">Group</label>
                                        <select class="form-select" id="group_id" name="group_id" required></select>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-3">
                                    <div class="ajax-select">
                                        <label for="category_id" class="form-label">Category</label>
                                        <select class="form-select" id="category_id" name="category_id" required></select>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-3">
                                    <label class="form-label invisible">Action</label>
                                    <div class="d-flex gap-2">
                                        <a href="javascript:void(0)" class="btn btn-primary flex-fill text-nowrap"
                                            onclick="createPurchaseOrder()">Purchase Order</a>
                                        <a href="javascript:void(0)" class="btn btn-primary flex-fill text-nowrap"
                                            onclick="createSalesOrder()">Sales Order</a>
                                    </div>
                                </div>
                            </div>

                            <div class="row pt-4">
                                <div class="col-12">

                                    <div id="Grid" class="ag-theme-balham" style="height: 580px;"></div>
                                </div>

                            </div>
                            <button class="btn btn-primary floating-report-btn mt-3 float-end" type="button"
                                data-bs-toggle="offcanvas" data-bs-target="#reportCanvas">Category And Group Wise Report
                                Summary</button>
                            <div class="offcanvas offcanvas-end" tabindex="-1" id="reportCanvas" style="min-width: 700px;">
                                <div class="offcanvas-header">
                                    <h5 class="offcanvas-title">Live Reports</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                                </div>

                                <div class="offcanvas-body">

                                    <!-- Group Wise Report -->
                                    <div class="text-center bg-light">
                                        <h5 class="mb-0 p-2">Group Wise Report</h5>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-hover border border-dark rounded" id="datatable2"
                                            style="width: 100%; !important;">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Group</th>
                                                    <th class="text-center">Weight</th>
                                                    <th class="text-center">Amount</th>
                                                    <th class="text-center">Qty</th>
                                                    <th class="text-center">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>

                                    <!-- Category Wise Report -->
                                    <div class="text-center bg-light mt-4">
                                        <h5 class="mb-0 p-2">Category Wise Report</h5>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-hover border border-dark rounded" id="datatable1"
                                            style="width: 100%; !important;">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Category</th>
                                                    <th class="text-center">Weight</th>
                                                    <th class="text-center">Amount</th>
                                                    <th class="text-center">Qty</th>
                                                    <th class="text-center">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- end row -->
    </div> <!-- container-fluid -->
    </div> <!-- page-content -->

    <!-- End Page-content -->

@endsection('content')
@section('custom-scripts')

    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    <script src="{{ asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/libs/kendo/kendo.all.min.js') }}"></script>

    <script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@29.0.0/dist/ag-grid-enterprise.min.js"></script>

    <script type="text/javascript">
        var order_id = 0;
        var ajaxURLSearchGroup = "{{ route('search.group') }}";
        var ajaxURLSearchCategory = "{{ route('search.category') }}";
        var ajaxLiveStockData = @json(route('live.stock.report.data'));
        var ajaxCategoryWiseLiveStockData = "{{ route('category.wise.live.stock.report') }}";
        var ajaxGroupWiseLiveStockData = "{{ route('group.wise.live.stock.report') }}";
        var ajaxDataStoreInSession = "{{ route('data.store.in.session') }}";
        var csrfToken = $("[name=_token]").val();
        var usersPageLength = getCookie('usersPageLength') !== undefined ? getCookie('usersPageLength') : 10;
        var selectedRows = [];
        var gridApi;
        var columnApi;

        $(document).ready(function() {
            // Set AG-Grid license
            agGrid.LicenseManager.setLicenseKey(
                "For_Trialing_ag-Grid_Only-Not_For_Real_Development_Or_Production_Projects-Valid_Until-23_February_2023_[v2]_MTY3NzExMDQwMDAwMA==61661d3a8e9969a62c14a9a993913301"
            );

            const gridDiv = document.querySelector("#Grid");
            new agGrid.Grid(gridDiv, gridOptions);

            // Select all checkbox logic
            $('#select_all').on('click', function() {
                var isChecked = $(this).is(':checked');
                $('.row-checkbox').each(function() {
                    var rowId = $(this).val();
                    $(this).prop('checked', isChecked);
                    if (isChecked && !selectedRows.includes(rowId)) {
                        selectedRows.push(rowId);
                    } else if (!isChecked) {
                        selectedRows = selectedRows.filter(id => id !== rowId);
                    }
                });
            });

            // Individual row checkbox logic
            $('#Grid').on('change', '.row-checkbox', function() {
                var rowId = $(this).val();
                if ($(this).is(':checked')) {
                    if (!selectedRows.includes(rowId)) selectedRows.push(rowId);
                } else {
                    selectedRows = selectedRows.filter(id => id !== rowId);
                    $('#select_all').prop('checked', false);
                }

                if ($('.row-checkbox:checked').length === $('.row-checkbox').length) {
                    $('#select_all').prop('checked', true);
                }
            });
        });
        const filterParams = {
            comparator: (a, b) => {
                const valA = a == null ? 0 : parseFloat(a);
                const valB = b == null ? 0 : parseFloat(b);
                return valA - valB;
            }
        };

        // Column definitions
        function getColumnDefs() {
            return [{
                    headerName: '',
                    field: "checkbox",
                    width: 30,
                    headerComponent: function() {
                        function CustomHeaderCheckbox() {}
                        CustomHeaderCheckbox.prototype.init = function(params) {
                            this.params = params;
                            this.eGui = document.createElement('div');
                            this.eGui.innerHTML =
                                `<input type="checkbox" id="select_all" class="form-check-input" />`;
                        };
                        CustomHeaderCheckbox.prototype.getGui = function() {
                            return this.eGui;
                        };
                        return new CustomHeaderCheckbox();
                    },
                    cellRenderer: (params) => {
                        const row = params.data;
                        if (!row || !row.item_id) return '';
                        const isChecked = selectedRows.includes(row.label_no) ? 'checked' : '';
                        return `
                        <input type="checkbox"
                        class="form-check-input row-checkbox"
                        data-id="${row.label_no}"
                        data-item-name="${row.item_name}"
                        data-item-wt="${row.gross_weight}"
                        id="checkbox_${row.label_no}"
                        value="${row.item_id}"
                        ${isChecked} />`;
                    },
                    minWidth: 50,
                    maxWidth: 50,
                    suppressSizeToFit: true,
                    sortable: true,
                    filter: true,
                    resizable: true
                },
                {
                    headerName: "Label",
                    field: "label_no",
                    filter: "agSetColumnFilter",
                    filterParams,
                    minWidth: 50,
                    maxWidth: 150,
                    suppressSizeToFit: true,
                    resizable: true,
                    sortable: true
                },
                {
                    headerName: "Group",
                    field: "group_name",
                    filter: "agSetColumnFilter",
                    filterParams,
                    resizable: true,
                    suppressSizeToFit: true,
                    sortable: true,
                },
                {
                    headerName: "Category",
                    field: "category_name",
                    filter: "agSetColumnFilter",
                    filterParams,
                    resizable: true,
                    suppressSizeToFit: true,
                    sortable: true,
                },
                {
                    headerName: "Item Name",
                    field: "item_name",
                    filter: "agSetColumnFilter",
                    filterParams,
                    resizable: true,
                    suppressSizeToFit: true,
                    sortable: true,
                },
                {
                    headerName: "Status",
                    field: "status",
                    filter: "agSetColumnFilter",
                    cellRenderer: (params) => params.value || '',
                    filterValueGetter: (params) => {
                        if (!params.data?.status) return "";
                        return params.data.status.replace(/<[^>]*>?/gm, '');
                    },
                    resizable: true,
                    suppressSizeToFit: true,
                    sortable: true,
                },
                {
                    headerName: "Dia. Cut",
                    field: "diamond_cut_name",
                    filter: "agNumberColumnFilter",
                    filterParams,
                    resizable: true,
                    width: 120,
                    suppressSizeToFit: true,
                    sortable: true,
                },
                {
                    headerName: "Dia. Type",
                    field: "diamond_type_name",
                    filter: "agNumberColumnFilter",
                    filterParams,
                    width: 120,
                    resizable: true,
                    suppressSizeToFit: true,
                    sortable: true,
                },
                {
                    headerName: "Dia. Color",
                    field: "diamond_color_name",
                    filter: "agNumberColumnFilter",
                    filterParams,
                    resizable: true,
                    suppressSizeToFit: true,
                    width: 120,
                    sortable: true,
                },
                {
                    headerName: "Dia. Shape",
                    field: "diamond_shape_name",
                    filter: "agNumberColumnFilter",
                    filterParams,
                    resizable: true,
                    suppressSizeToFit: true,
                    width: 120,
                    sortable: true,
                },
                  {
                    headerName: "Dia. Clarity",
                    field: "diamond_clarity_name",
                    filter: "agNumberColumnFilter",
                    filterParams,
                    resizable: true,
                    suppressSizeToFit: true,
                    width: 120,
                    sortable: true,
                },
                {
                    headerName: "Dia. Certificate",
                    field: "diamond_certification_name",
                    filter: "agNumberColumnFilter",
                    filterParams,
                    resizable: true,
                    suppressSizeToFit: true,
                    width: 120,
                    sortable: true,
                },
                {
                    headerName: "Weight",
                    field: "gross_weight",
                    filter: "agNumberColumnFilter",
                    filterParams,
                    resizable: true,
                    suppressSizeToFit: true,
                    sortable: true,
                },
                {
                    headerName: "Amount",
                    field: "net_amount",
                    filter: "agNumberColumnFilter",
                    filterParams,
                    cellRenderer: (params) => params.value || '',
                    cellRendererParams: {
                        suppressHtmlEscaping: true
                    },
                    resizable: true,
                    suppressSizeToFit: true,
                    sortable: true,
                },
            ];
        }

        // Grid options
        const gridOptions = {
            columnDefs: getColumnDefs(),
            defaultColDef: {
                filter: true,
                floatingFilter: false,
                resizable: true,
            },
            rowData: null,
            onGridReady: function(params) {
                gridApi = params.api;
                columnApi = params.columnApi;
                params.api.sizeColumnsToFit();
                loadData();
            },
            onFilterChanged: updateTotalRow,
            onModelUpdated: updateTotalRow,
            getRowStyle: params => {
                if (
                    params.data?.group_name === "Total" ||
                    params.data?.category_name === "Total" ||
                    params.data?.item_name === "Total"
                ) {
                    return {
                        fontWeight: 'bold',
                        backgroundColor: '#f8f9fa',
                        borderTop: '2px solid #dee2e6',
                    };
                }
                return null;
            },
        };

        // Load data via AJAX
        function loadData() {
            const postData = {
                group_id: $('#group_id').val(),
                category_id: $('#category_id').val(),
            };

            fetch(ajaxLiveStockData, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify(postData)
                })
                .then(res => res.json())
                .then(res => {
                    const rowData = res.data;
                    gridApi.setRowData(rowData);
                    updateTotalRow();
                })
                .catch(error => console.error("Data load failed", error));
        }

        // Calculate totals
        function updateTotalRow() {
            if (!gridApi) return;
            const numericFields = ["gross_weight", "net_amount"];
            const filteredRows = [];
            gridApi.forEachNodeAfterFilterAndSort((node) => {
                if (!node.data?.isTotal) filteredRows.push(node.data);
            });

            const totalRow = {
                isTotal: true,
                group_name: "Total"
            };
            numericFields.forEach(field => {
                const total = filteredRows.reduce((sum, row) => {
                    let value = row[field];
                    if (typeof value === 'string') value = value.replace(/,/g, '');
                    const num = parseFloat(value);
                    return sum + (isNaN(num) ? 0 : num);
                }, 0);
                totalRow[field] = total.toFixed(2);
            });

            gridApi.setPinnedBottomRowData([totalRow]);
        }
        let tableCategory, tableGroup;
        tableCategory = $("#datatable1").DataTable({
            processing: true,
            serverSide: true,
            paging: false,
            searching: false,
            info: false,
            ajax: {
                url: ajaxCategoryWiseLiveStockData,
                type: "POST",
                data: function(d) {
                    d._token = csrfToken;
                },
                dataSrc: function(json) {
                    return json.data || [];
                }
            },
            columns: [{
                    data: 'category_name',
                },
                {
                    data: 'gross_weight',
                },
                {
                    data: 'net_amount',
                },
                {
                    data: 'total_available',
                },
                {
                    data: 'status',
                }
            ],
            order: [
                [0, 'desc']
            ],
        });

        tableGroup = $("#datatable2").DataTable({
            processing: true,
            serverSide: true,
            paging: false,
            searching: false,
            info: false,
            ajax: {
                url: ajaxGroupWiseLiveStockData,
                type: "POST",
                data: function(d) {
                    d._token = csrfToken;
                },
                dataSrc: function(json) {
                    return json.data || [];
                }
            },
            columns: [{
                    data: 'group_name',
                },
                {
                    data: 'gross_weight',
                },
                {
                    data: 'net_amount',
                },
                {
                    data: 'total_available',
                },
                {
                    data: 'status',
                }
            ],
            order: [
                [0, 'desc']
            ],
        });

        $('#reportCanvas').on('shown.bs.offcanvas', function() {
            tableCategory.ajax.reload(null, false);
            tableGroup.ajax.reload(null, false);
        });

        $("#category_id").select2({
            allowClear: true,
            ajax: {
                url: ajaxURLSearchCategory,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    var results = data.results.map(function(company) {
                        return {
                            id: company.id,
                            text: company.text
                        };
                    });
                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Select Category',
        }).on('change', function(e) {
            loadData();
        });

        $("#group_id").select2({
            allowClear: true,
            ajax: {
                url: ajaxURLSearchGroup,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        q: params.term,
                        page: params.page,
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    var results = data.results.map(function(company) {
                        return {
                            id: company.id,
                            text: company.text
                        };
                    });
                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Select Group',
        }).on('change', function(e) {
            loadData();
        });

        function createPurchaseOrder() {
            var selectedItems = [];

            $('.row-checkbox:checked').each(function() {
                var row = $(this).closest('tr');
                var labelNo = row.find('td:nth-child(2)').text().trim();
                var itemId = $(this).val();
                var itemName = $(this).data('item-name');
                var weight = $(this).data('item-wt');
                var labelNo = $(this).data('id');
                var qty = 1

                if (!isNaN(qty)) {
                    var existingItem = selectedItems.find(item => item.item_id === itemId);
                    if (existingItem) {
                        existingItem.qty += qty;
                    } else {
                        selectedItems.push({
                            item_id: itemId,
                            item_name: itemName,
                            pcs: qty,
                            gross_weight: weight,
                            net_weight: weight,
                            label_no: labelNo,
                        });
                    }
                }
            });

            if (selectedItems.length === 0) {
                toastr["error"]('Please select at least one item to create a purchase order.');
            }
            $.ajax({
                url: "{{ route('purchase.item.details.stock.report') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    items: selectedItems
                },
                success: function(response) {

                    selectedItems.forEach(function(item) {
                        var r = response.find(x => x.item_id == item.item_id && x.label_no == item
                            .label_no);

                        if (r) {
                            item.material_rate = r.material_rate;
                            item.material_id = r.material_id ?? 0;
                            item.purity_name = r.purity_name ?? null;
                            item.hsn_code = r.hsn_code ?? 0;
                            if (item.label_no != 0) {
                                item.label_details = {
                                    diamond_cut: r.diamond_cut ?? 0,
                                    diamond_type: r.diamond_type ?? 0,
                                    diamond_color: r.diamond_color ?? 0,
                                    diamond_shape: r.diamond_shape ?? 0,
                                    diamond_clarity: r.diamond_clarity ?? 0,
                                    diamond_certification: r.diamond_certification ?? 0,
                                    certificate_no: r.certificate_no ?? 0,
                                    diamond_type_name: r.diamond_type_name ?? null,
                                    diamond_cut_name: r.diamond_cut_name ?? null,
                                    diamond_color_name: r.diamond_color_name ?? null,
                                    diamond_shape_name: r.diamond_shape_name ?? null,
                                    diamond_clarity_name: r.diamond_clarity_name ?? null,
                                    diamond_certification_name: r.diamond_certification_name ??
                                        null,
                                };
                            }
                            item.tax_id = r.tax_id ?? 0;
                            item.tax_name = r.tax_name ?? null;
                            item.tax_per = r.tax_value ?? null;
                            item.type = r.type ?? 0;
                            item.type_name = r.item_type ?? null;
                            item.group_name = r.group_name ?? null;
                        }
                    });
                    localStorage.clear();
                    localStorage.setItem("selectedItems", JSON.stringify(selectedItems));

                    window.location.href = "{{ route('purchase.add') }}";
                }
            });
        }

        function createSalesOrder() {
            var selectedRows = [];
            var hasUnavailableItems = false;

            $('.row-checkbox:checked').each(function() {
                const $checkbox = $(this);
                const itemId = $checkbox.val();
                const itemName = $checkbox.data('item-name');
                const labelNo = $checkbox.data('id');

                // Use ag-Grid API to get the actual row data by label or item ID
                const rowNode = gridApi.getDisplayedRowAtIndex(
                    $checkbox.closest('.ag-row').index()
                );
                const rowData = rowNode?.data;

                if (!rowData) return;

                // Convert HTML status to plain text safely
                const statusText = $('<div>').html(rowData.status).text().trim().toLowerCase();

                if (statusText === 'available') {
                    selectedRows.push({
                        item_id: itemId,
                        item_name: itemName,
                        label_no: labelNo,
                        qty: 1
                    });
                } else {
                    hasUnavailableItems = true;
                }
            });

            if (hasUnavailableItems) {
                toastr["error"](
                    'Some selected items have a status of "sold". Please select only items with "available" status.'
                );
                return;
            }

            if (selectedRows.length === 0) {
                toastr["error"]('Please select at least one item with "available" status to create a sales order.');
            } else {
                localStorage.clear();
                localStorage.setItem("salesItem", JSON.stringify(selectedRows));
                console.log(JSON.parse(localStorage.getItem("salesItem")));
                window.location.href = "{{ route('sales.order.add') }}";
            }
        }
    </script>
@endsection