@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 {
            width: 500px;
            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: 450px;
            }
        }

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

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

        @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;
        }

        .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-header {
            padding: 0px 7px;
        }

        #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;
            /* Prevents icon from being clickable */
        }

        li.nav-item {
            cursor: pointer;
        }
    </style>

    <div class="page-content">
        <div class="container-fluid">
            <div class="row align-items-center mb-2 mt-2">

            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card-header">
                        <div class="d-flex flex-column flex-md-row justify-content-between w-100">
                            <ul class="nav nav-pills mb-3 justify-content-center justify-content-md-start">
                                <li class="nav-item">
                                    <a class="nav-link active report-btn" data-bs-toggle="pill" data-type="1">Sales Order
                                        Wise</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link report-btn" data-bs-toggle="pill" data-type="2">Item Wise</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-end">
                            <div class="ajax-select col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
                                <label for="q_start_date" class="form-labels">Start Date:</label>
                                <div class="input-group" id="div_start_date">
                                    <input type="text" class="form-control" placeholder="dd-mm-yyyy"
                                        style="border-radius: 7px;" data-date-format="dd-mm-yyyy"
                                        data-date-container='#div_start_date' data-provide="datepicker"
                                        data-date-autoclose="true" required name="q_start_date" id="q_start_date"
                                        autocomplete="off">
                                    <i class="bx bx-calendar-alt" id="calendar-icon"></i>
                                </div>
                            </div>

                            <div class="ajax-select col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
                                <label for="q_end_date" class="form-labels">End Date:</label>
                                <div class="input-group" id="div_end_date">
                                    <input type="text" class="form-control" placeholder="dd-mm-yyyy"
                                        style="border-radius: 7px;" data-date-format="dd-mm-yyyy"
                                        data-date-container='#div_end_date' data-provide="datepicker"
                                        data-date-autoclose="true" required name="q_end_date" id="q_end_date"
                                        autocomplete="off">
                                    <i class="bx bx-calendar-alt" id="calendar-icon"></i>
                                </div>
                            </div>

                            <div class="col-12 col-md-4 col-sm-6 text-center text-md-end mb-3 col-lg-3">
                                <a class="btn btn-warning btn-sm me-2" title="Search" onclick="SearchValue()"><i
                                        class="bx bxs-search font-size-20"></i></a>
                                <a class="btn btn-danger btn-sm" title="Reload" href="{{ route('profit.loss.report') }}"><i
                                        class="bx bx-reset font-size-20"></i></a>
                            </div>
                        </div>

                        <div id="myGrid" class="ag-theme-quartz" style="height: 580px;"></div>
                    </div>
                </div>
            </div>
            <!-- end row -->
        </div>
        <!-- container-fluid -->
    </div>
    <!-- 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="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@33.2.1/dist/ag-grid-enterprise.min.js"></script>
    {{-- <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script> --}}
    {{--
    <script src="{{ asset('assets/css/font.css') }}"></script> --}}
    <script src="{{ asset('assets/libs/kendo/kendo.all.min.js') }}"></script>

    <script type="text/javascript">
        var order_id = 0;
        var ajaxURL = @json(route('profit.loss.report.ajax'));
        var csrfToken = $("[name=_token").val();
        var usersPageLength = getCookie('usersPageLength') !== undefined ? getCookie('usersPageLength') : 10;
        var ajaxURLCustomerSearch = "{{ route('profit.loss.report') }}";
        var salesOrderBaseUrl = "{{ route('sales.order.table') }}";

        var reportType = 1;

        function getColumnDefs(type) {
            const columns = [];

            if (type == 2) {
                columns.push({
                    headerName: "Product Name",
                    field: "item_name",
                    filter: "agTextColumnFilter"
                });
            }

            columns.push({
                headerName: "Date",
                field: "created_date",
                filter: "agDateColumnFilter",
                filterParams: {
                    comparator: function(filterLocalDateAtMidnight, cellValue) {
                        if (!cellValue) return -1;
                        const cellDateParts = cellValue.split('-');
                        const cellDate = new Date(
                            parseInt(cellDateParts[0]),
                            parseInt(cellDateParts[1]) - 1,
                            parseInt(cellDateParts[2])
                        );

                        if (cellDate < filterLocalDateAtMidnight) return -1;
                        if (cellDate > filterLocalDateAtMidnight) return 1;
                        return 0;
                    },
                    browserDatePicker: true,
                }
            }, {
                headerName: "Order No",
                field: "order_no",
                filter: "agTextColumnFilter",
                cellRenderer: (params) => {
                    if (!params.value || !params.data?.order_id) return '';
                    return `<a href="${salesOrderBaseUrl}?id=${params.data.order_id}" target="_blank">SO-${params.value}</a>`;
                }
            }, {
                headerName: "Total Item",
                field: "total_qty",
                filter: "agNumberColumnFilter"
            }, {
                headerName: "Total Amount",
                field: "total_sale_price",
                filter: "agNumberColumnFilter"
            }, {
                headerName: "Total Profit",
                field: "profit_price",
                filter: "agNumberColumnFilter",
                cellStyle: params => {
                    const val = parseFloat(params.value);
                    return val < 0 ? {
                        backgroundColor: 'rgb(255, 230, 230)'
                    } : {
                        backgroundColor: 'rgb(230, 255, 230)'
                    };
                }
            });

            return columns;
        }

        const gridOptions = {
            columnDefs: getColumnDefs(reportType),
            defaultColDef: {
                flex: 1,
                floatingFilter: true,
                minWidth: 200,
                filter: true,
                resizable: true,
                sortable: true
            },
            rowData: null,
            sideBar: "filters",
            onGridReady: (params) => {
                gridApi = params.api;
                params.api.closeToolPanel();
                loadData(reportType);
            },
            getRowStyle: params => {
                if (params.data?.created_date === "Total" || params.data?.isTotal) {
                    return {
                        fontWeight: 'bold',
                        backgroundColor: '#f8f9fa',
                        borderTop: '2px solid #dee2e6',
                    };
                }
                return null;
            }
        };

        function loadData(type) {
            gridApi.setGridOption("columnDefs", getColumnDefs(type));

            const postData = {
                report_type: type,
                start_date: $("#q_start_date").val(),
                end_date: $("#q_end_date").val(),
            };

            fetch(ajaxURL, {
                    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;

                    const totalRow = {
                        isTotal: true,
                        created_date: "Total"
                    };

                    ["total_qty", "total_sale_price", "profit_price"].forEach(field => {
                        const total = rowData.reduce((sum, row) => sum + (parseFloat(row[field]) || 0), 0);
                        totalRow[field] = total.toFixed(2);
                    });

                    const combinedData = [...rowData, totalRow];
                    gridApi.setGridOption('rowData', combinedData);
                })
                .catch(error => console.error("Data load failed", error));
        }

        function SearchValue() {
            loadData(reportType);
        }

        $(".report-btn").on("click", function() {
            reportType = $(this).data("type");
            loadData(reportType);
        });

        document.addEventListener('DOMContentLoaded', () => {
            const gridDiv = document.querySelector("#myGrid");
            agGrid.createGrid(gridDiv, gridOptions);
        });
    </script>
@endsection