@extends('LifeAtGainup.Navbar.header')
{{-- @section('tittle')
    {{"Merchandiser Dashboard"}}
@endsection --}}

<div id="layout-wrapper">
@section('content')
<style>
    .select2-container .select2-selection--multiple .select2-selection__choice {
        color: #191818 !important;
    }
    #reportrange{
       width: 30%;
       margin-left: auto;

    
    }
        .daterangepicker {
            left:auto;
        }
    .chart-container {
        width: 600px;
        height: 400px;
        margin: 0 auto;
        justify-content: center;
    align-items: center;
    display: flex;
    cursor:grab;
    }
</style>

    <div class="main-content">
        <div class="page-content">

            <div class="container-fluid">
                <h1>Merchandiser Dashboard</h1>

                <div class="row">
                    <!-- Buyer Count -->
                    <div class="col-xl-6 col-md-6">
                        <a href="/merchandiserorder" style="text-decoration: none;">

                        <div class="card card-height-50 pt-4 pb-4">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm flex-shrink-0">
                                        <span class="avatar-title bg-info-subtle rounded fs-3">
                                            <i class="bx bx-wallet text-info"></i>
                                        </span>
                                    </div>

                                        <div class="flex-grow-1 ps-3">
                                            <h4 class="text-muted text-uppercase mb-0">Total Buyers</h4>
                                            <h3 id="buyer-count" class="text-muted text-uppercase mb-0"><br />
<b>Warning</b>:  Undefined variable $buyerCnt in <b>C:\Apache24\htdocs\kpiproject\resources\views\LifeAtGainup\Merchandiser\merchandiser.blade.php</b> on line <b>54</b><br />
</h3>
                                        </div>

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

                    <!-- Order Count -->
                    <div class="col-xl-6 col-md-6">
                        <a href="/merchandiserorder" style="text-decoration: none;">

                        <div class="card card-height-50 pt-4 pb-4">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm flex-shrink-0">
                                        <span class="avatar-title bg-info-subtle rounded fs-3">
                                            <i class="bx bx-wallet text-info"></i>
                                        </span>
                                    </div>
                                    <div class="flex-grow-1 ps-3">
                                        <h4 class="text-muted text-uppercase mb-0">Total Orders</h4>
                                        <h3 id="order-count" class="text-muted text-uppercase mb-0"><br />
<b>Warning</b>:  Undefined variable $Ocntotal in <b>C:\Apache24\htdocs\kpiproject\resources\views\LifeAtGainup\Merchandiser\merchandiser.blade.php</b> on line <b>77</b><br />
</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>
                </div>
                <input type="hidden" name="emp_id" id="emp_id"  value="{{$user = Session('empl_id')}}" >

            </div>

            <div class="row">
                <!-- Buyer Count -->
                <div class="col-xl-6 col-md-6">
                    <div class="card card-height-50 pt-4 pb-4">
                        <div class="card-body">
                            <figure class="highcharts-figure">
                                <div id="container"></div>
                                <p class="highcharts-description">
                                    
                                </p>
                            </figure>
                        </div>
                    </div>
                </div>
            
                <!-- Order Count -->
                <div class="col-xl-6 col-md-6">
                    <div class="card card-height-50 pt-4 pb-4">
                        <div class="card-body">
                            <figure class="highcharts-figure">
                                <div id="container1"></div>
                                <p class="highcharts-description">
                                    
                                </p>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>

            <div class = "row filter_row">

            <div class = "col-md-12 load_turnover" >
            <h6><span class = 'month_heder'></span></h6>
        
            <div class="row production_6 packing" >
                <div class="col-md-6">
                        <h6>Last 6 Month Packing</h6>
                        <table id="tableportalpacking" class="table table-bordered table_popup mt-3 mb-3" style="font-size:10px">
                            
                            <tbody></tbody>
                            
                        </table>
                    </div>
                <input type="hidden" name="emp_id" id="emp_id"  value="{{$user = Session('empl_id')}}" >

         

            <div class="col-md-6 "  style="font-size:10px" >
                        
                    </div>
        </div>
               

            
</div>

            
            <div id="reportrange" class="pull-left mb-2" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;">
                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                <span></span> <b class="caret"></b>
            </div>

            <div class="row">
            <div class="col-6">
            <div class="card">
                <div class="card-header">
                    <h1 class="card-title">Usage Analysis</h1>
                </div>
                <div class="card-body">
                    <div class="table-responsive  table-card">
                        <table class="table table-hover table-centered align-middle" id="userlogaudit">
                            <thead class="text-muted table-light" style="font-size: 11px;">
                                <tr>
                                    <th style="width: 50px;">SNO</th>
                                    <th>Name</th>
                                    {{-- <th>IP address</th> --}}
                                    <th>Last Login</th>
                                </tr>
                            </thead>
                            <tbody style="font-size: 11px">
                                <!-- Data will be loaded here via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
                </div>
                <div class="col-6">
                    <div class="chart-container">
                        <div class="loader"></div>
                        <canvas id="myChart"></canvas>
                    </div>
                </div>
            </div>
           
            <input type="hidden" name="emp_id" id="emp_id"  value="{{$user = Session('empl_id')}}" >

        </div>

    </div>

@endsection

@section('script')

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
    // $(document).ready(function() {


    //     $.ajax({
    //         url: "{{ route('merchandiserdashboard') }}",
    //         method: 'GET',
    //         success: function(apiData) {
    //           //  console.log(apiData);

    //             if (apiData.success) {
    //                 const totalPendingOrders = apiData.data.total;
    //                 const pendingBuyerCount = apiData.data.buyer;

    //                 $('#order-count').text(totalPendingOrders);
    //                 $('#buyer-count').text(pendingBuyerCount);
    //             } else {

    //                 console.error("API returned success false.");
    //             }
    //         },
    //         error: function() {
    //             console.log("Error fetching data.");
    //         }
    //     });
    // });
</script>

<script>
    $(document).ready(function() {
        var table = $('#userlogaudit').DataTable({
            paging: false,
            searching: false,
            ordering: true,
            order: [[0, 'asc']],
            // dom: 'Bfrtip',

        });

        var emp_id = $('#emp_id').val();
    //console.log(emp_id);
    // var emp_id = '5545';
        const apiUrl = `{{ route('userlogmerch') }}`;

        $.ajax({
            url: apiUrl,
            method: 'GET',
            data: {
                emp_id: emp_id
                },
            success: function(response) {
               console.log(response);

                if (response.success && response.data) {
                    // Clear any existing rows in the DataTable
                    table.clear();

                    response.data.forEach(function(item, index) {
                        table.row.add([
                            index + 1,                 // SNO
                            item.employee || '-',       // Name
                            // item.EmpCode || '-',        // Emp Code (mapped as IP Address)
                            item.LastLoginDateTime || '-',        // Date
                        ]);
                    });

                    // Redraw the table with the new data
                    table.draw();
                } else {
                    // If no data found
                    $('#userlogaudit tbody').append('<tr><td colspan="5">No data found</td></tr>');
                }
            },
            error: function() {
                console.log("Error fetching data.");
                $('#userlogaudit tbody').append('<tr><td colspan="5">Error fetching data</td></tr>');
            }
        });
    });
</script>

<script>
    $(function() {
        var start = moment().subtract(29, 'days');
        var end = moment();

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }

        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);

        cb(start, end);
        fetchDashboardData(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));

        $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
            var startDate = picker.startDate.format('YYYY-MM-DD');
            var endDate = picker.endDate.format('YYYY-MM-DD');
            console.log("Selected date range: " + startDate + " - " + endDate);

            fetchDashboardData(startDate, endDate);
        });

        var myChart;

        function fetchDashboardData(startDate, endDate) {
            $('.loader').show();
            $.ajax({
                url: "{{ route('mddashboard') }}",
                method: 'GET',
                data: {
                    start_date: startDate,
                    end_date: endDate
                },
                success: function(mddata) {
                    console.log(mddata);

                    // Check if data is valid and extract merch_buyers
                    var merchBuyers = mddata.success && mddata.data ? mddata.data.merch_buyers : [];

                    if (merchBuyers.length === 0) {
                        console.log("No data found, showing default empty chart.");

                        merchBuyers = [{
                            merch: "No Data",
                            order_qty: 0,
                            shipped_qty: 0
                          
                        }];
                    }

                    var labels = [];
                    // var totalBuyers = [];
                    var totalorder_qty = [];
                    var totalshipped_qty = [];
                    // var pendingOrders = [];

                    // Use the correct merchBuyers variable
                    merchBuyers.forEach(function(item) {
                        console.log(item); // Optional: for debugging purposes
                        labels.push(item.merch);
                        // totalBuyers.push(item.buyers);
                        totalorder_qty.push(item.order_qty);
                        totalshipped_qty.push(item.shipped_qty);
                        // pendingOrders.push(item.pending);
                    });

                    if (myChart) {
                        myChart.destroy();
                    }

                    updateChart(labels, totalorder_qty, totalshipped_qty);
                    $('.loader').hide();
                },
                error: function() {
                    console.log("Error fetching data.");
                }
            });
        }

        function updateChart(labels, totalorder_qty, totalshipped_qty) {
    const ctx = document.getElementById('myChart').getContext('2d');
    myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Shipped Qty',
                    data: totalshipped_qty,
                    backgroundColor: 'rgba(153, 102, 255, 0.6)', // Customize the color as needed
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Orders Qty',
                    data: totalorder_qty,
                    backgroundColor: 'rgba(75, 192, 192, 0.6)', // Customize the color as needed
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }
              
            ]
        },
        options: {
            responsive: true,
            scales: {
                x: {
                    stacked: true // Enable stacking on X-axis
                },
                y: {
                    stacked: true, // Enable stacking on Y-axis
                    beginAtZero: true,
                    ticks: {
                        stepSize: 5000 // Adjust this according to your data range
                    }
                }
            },
            plugins: {
                legend: {
                    position: 'top'
                }
            }
        }
    });
}

    });
    </script>
    <!-- Capacity Qty -->
    <script>
        //Capacity Qty
        // Original userData
        var capacityQtyArr = @json($capacityQtyArr);
        // Filter out the "Total" entry
        var filteredQtyData = capacityQtyArr.filter(item => item.Buyer !== "Total");

        // Dynamically get all month columns from the first data object
        var Qtycolumns = Object.keys(filteredQtyData[0]).filter(key => key.match(/^[A-Za-z]{3}_\d{4}$/));

        // Simplify the column names for the x-axis (e.g., 'Jan_2025' -> 'Jan')
        var Qtycategories = Qtycolumns.map(col => col.split('_')[0]);

        // Format the data to match Highcharts' series structure
        var formattedQtyData = filteredQtyData.map(item => ({
            name: item.Buyer,
            data: Qtycolumns.map(col => parseInt(item[col]) || 0)
        }));
        
        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Capacity Planning (Qty)',
                align: 'center'
            },
            xAxis: {
                categories: Qtycategories
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Booked Qty'
                },
                stackLabels: {
                    enabled: true
                }
            },
            exporting: {
                enabled: false
            },
            legend: {
                
                backgroundColor:
                    Highcharts.defaultOptions.legend.backgroundColor || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{category}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            series: formattedQtyData
        });
    </script>
    <!-- Capacity Mins -->
    <script>

        // Original userData
        var capacityMinsArr = @json($capacityMinsArr);

        // Filter out the "Total" entry
        var filteredMinsData = capacityMinsArr.filter(item => item.Buyer !== "Total");

        // Dynamically get all month columns from the first data object
        var Minscolumns = Object.keys(filteredMinsData[0]).filter(key => key.match(/^[A-Za-z]{3}_\d{4}$/));

        // Simplify the column names for the x-axis (e.g., 'Jan_2025' -> 'Jan')
        var Minscategories = Minscolumns.map(col => col.split('_')[0]);

        // Format the data to match Highcharts' series structure
        var formattedMinsData = filteredMinsData.map(item => ({
            name: item.Buyer,
            data: Minscolumns.map(col => parseInt(item[col]) || 0)
        }));

        Highcharts.chart('container1', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Capacity Planning (Mins)',
                align: 'center'
            },
            xAxis: {
                categories: Minscategories
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Booked Mins'
                },
                stackLabels: {
                    enabled: true
                }
            },
            exporting: {
                enabled: false
            },
            legend: {
                
                backgroundColor:
                    Highcharts.defaultOptions.legend.backgroundColor || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{category}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            series:formattedMinsData
                
        });
    </script>

@endsection