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

<style>
   /*TAble popup*/
  
.status-container {
    display: flex;
    justify-content: flex-end; /* Pushes the status boxes to the end of the container */
    gap: 10px;
}

.status-box {
    width: 100px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
}

.pending {
    background-color: red;
}

.done {
    background-color: green;
}

.late {
    background-color: orange;
}


   @media screen and (min-device-width: 1000px) and (max-device-width: 2400px) {

   .modal-contentt {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-left: 25%;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
}
   }
   @media screen and (min-device-width: 3px) and (max-device-width: 900px) {
    .modal-contentt {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;

    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;

}
   }
   .countBadge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 0px 2px;
    font-size: 8px;
    font-weight: bold;
        }
.caro_wid{

    width: 500px;
    height: 300px;
}
.caro_wid_center{
    justify-content: center;
    align-items: center;
    display: flex;
}

   .carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: red; /* Sets the background color to red */
    /* If you want to change the icon color itself, you may need to use a different approach depending on your setup */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* For custom icons or to ensure proper visibility */
    background-size: 100%, 100%; /* Adjust if necessary */
    background-repeat: no-repeat;
    background-position: center;
}

.carousel-control-prev-icon:before,
.carousel-control-next-icon:before {
    /* Set a color for icons if they are font icons */
    color: red; /* This will work if icons are font icons like from FontAwesome */
}

   table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting_asc_disabled, table.dataTable thead>tr>th.sorting_desc_disabled, table.dataTable thead>tr>td.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting_asc_disabled, table.dataTable thead>tr>td.sorting_desc_disabled {

 padding-right: 17px;
}
.greencolor, .greencolor td{
    background-color: #ff0d0d33 !important;
}
   .header-fixed {
                            position: sticky;
                            top: 0px;
                            background-color: white;
                          }
   .table_popup{
        font-size: 11px !important;
    }
    .modal_popup{
        max-width: 1250px !important;
    }

    .ocrstatuscon {
        max-height: 400px;
        overflow-y: auto;
        overflow-x: auto;
    }

    .ocrstatus {
        width: 100%;
        border-collapse: collapse;
    }

    .ocrstatus thead th {
        position: sticky;
        top: 0;
        background-color: #fff;
        z-index: 10;
    }

    .ocrstatus th,
    .ocrstatus td {
        white-space: nowrap;
        text-align: center;
    }

    .sideallign{
        text-align: end !important;
    }

    .dt-button.buttons-pdf,
        .dt-button.buttons-html5 {
            padding: 2px 9px !important;
        }

    table.dataTable.no-footer{
        border-top: 1px solid rgba(0, 0, 0, 0.3);
    }
    table.dataTable{
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }


    table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting_asc_disabled, table.dataTable thead>tr>th.sorting_desc_disabled, table.dataTable thead>tr>td.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting_asc_disabled, table.dataTable thead>tr>td.sorting_desc_disabled {
        padding-right:17px !important;
    }

    .budget_abstract{
        width: 700px !important;
    font-size: 14px !important;
    }

    #noteText{
        color: blue !important;
    }
    .table_popup thead th {
    font-weight: bold;
}

.table_popup tfoot td {
    font-weight: bold;
}

.highlight-yellow {
    background-color: #deef636b !important; 
}

.highlight-green {
    background-color: #93ff8f45 !important; 
}

.highlight-red {
    background-color: #eea0936b !important; 
}

#dataTablee_wrapper .dt-buttons {
    margin-left: 15px;
    margin-top: 48px;
}

.centerallign{
    text-align: center !important;
}
#dataTablee td:nth-child(7) {
    text-align: right;
}
#dataTablee td:nth-child(8) {
    text-align: right;
}



    /* Your existing styles */
</style>

<div id="layout-wrapper">
@section('content')


<style>
    #reportrange{
       width: 30%;
       margin-left: auto;

    
    }

    #tableAppMonth{
        font-size: 12px;
    }

    #tableportaltvl{
        font-size: 12px;
    }
    #tableportalqty{
        font-size: 12px;
    }

    
        .daterangepicker {
            left:auto;
        }
    .chart-container {
        width: 600px;
        height: 400px;
        margin: 0 auto;
        justify-content: center;
    align-items: center;
    display: flex;
    cursor:grab;
    }
    /*#totalAppQtyStrike{text-align:right}
    #totalAppAmountStrike{text-align:right}
    #earnminis{text-align:right}
    #wip{text-align:right} */
    #tableAppMonth th {
        font-weight: bold;
    }

    #tableAppMonth tr:nth-child(7) {
        font-weight: bold;
    }
</style>

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

            <div class="container-fluid">
                <h1 style="text-align:center; margin-bottom:40px">Gainup Garments - Operations Report </h1>

<div class="row">
                <div id="preloder">
                    <div class="lds-hourglass">

                    </div>
                </div>
        <div class="col-md-3">
            <div class="mb-3">
                <label for="select_option" class="form-label">Select Option</label>
                <select class="form-control " name="select_option" id="select_option">
                    <option value="Tvl" Selected>Turn Over</option>
                    <option value="Tminis" >Earned Mins</option>
                    <option value="Tqty" >Production Qty</option>
                </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="mb-3">
                <label for="select_option" class="form-label">Select Month</label>
                <input type="text" id="monthYearPicker" class="form-control" placeholder="Select Month and Year">
            </div>
        </div>
<div class="container mt-5">
    
</div>
<h6> Month Wish Details:</h6>
    <div class = "col-md-12 load_turnover" >
   
   
    <table class="table table-bordered table_popup table_production" id="dynamicTable">
        <thead>
            <!-- Table headers will be inserted here dynamically -->
        </thead>
        <tbody>
            <!-- Table rows will be inserted here dynamically -->
        </tbody>
    </table>
    <table class="table table-bordered table_popup table_production" id="abstractTable">
        <thead>
            <!-- Table headers will be inserted here dynamically -->
        </thead>
        <tbody>
            <!-- Table rows will be inserted here dynamically -->
        </tbody>
    </table>
</div>
               

            <div class="col-md-12 "  >
           
           
            <canvas id="multipleLineChart" width="800" height="400"></canvas>

                    </div>
</div>



@endsection

@section('script')




<script>


$(document).ready(function() {

    $('#select_option').change(function() {
                // Get the selected value
                var selectedoption = $(this).val();
                
               
                var selectedValue = $('#monthYearPicker').val();  
                var parts = selectedValue.split('/');
                var month = parts[0];
                var year = parts[1];
    
                if(selectedoption == 'Tvl'){
                    updateChart(month, year); 

                }else if(selectedoption == 'Tminis'){
                    console.log(selectedValue);
                    updateChartTminis(month, year); 

                }else if(selectedoption == 'Tqty'){
                    updateChartTqty(month, year); 
                }
                
                // Display the selected value in the result div
                $('#result').text("Selected Value: " + selectedoption);
            });
    var chartInstance = null;
    let abstractTable = null;

    function formatCompactNumber(value) {
        if (value >= 1000000) {
            return (value / 1000000).toFixed(1) + 'M';
        } else if (value >= 1000) {
            return (value / 1000).toFixed(1) + 'K';
        } else if (value >= 100) {
            return (value / 100).toFixed(1) + 'H';
        } else {
            return value;
        }
    }

    // Store the chart instance

    // Function to fetch data and update the chart
    function updateChart(monthName, year) {
        // Convert month name (e.g., 'Jan') into month number (1-12)
        var monthNumber = getMonthNumber(monthName);
        $("#preloder").fadeIn();

       
        $.ajax({
            url: "{{ route('operationreport') }}", 
            data: { 'year': year, 'month': monthName }, 
            method: 'GET',
            success: function(response) {
                $("#preloder").fadeOut();
                if (response.success) {
                    
                    var tableData = response.data;
                    populateAbstractTable(tableData, monthNumber); 
                    
                 

                    // Filter data for chart (excluding 'Total' units)
                    const filteredData = tableData.filter(unitData => unitData.Unit !== "Total");

                    // Prepare the chart data dynamically
                    const labels = Object.keys(filteredData[0]).filter(key => key !== "Unit" && key !== "Total"); // Extract dates from the first unit's keys

                    const datasets = filteredData.map(unitData => ({
                        label: unitData.Unit,
                        data: labels.map(date => parseInt(unitData[date], 10)),
                        borderColor: getRandomColor(),  // You can customize the color for each line
                        backgroundColor: 'rgba(0, 0, 0, 0)', // Transparent background
                        fill: false,
                        lineTension: 0.1
                    }));

                    // Destroy the existing chart instance if it exists
                    if (chartInstance) {
                        chartInstance.destroy();  // Destroy the previous chart instance
                    }

                    // Create a new chart
                    const ctx = document.getElementById('multipleLineChart').getContext('2d');
                    chartInstance = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: datasets
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                legend: {
                                    position: 'top',
                                },
                                tooltip: {
                                    callbacks: {
                                        label: function(tooltipItem) {
                                            return 'Stock Value: ' + tooltipItem.raw.toLocaleString();
                                        }
                                    }
                                }
                            },
                            scales: {
                                x: {
                                    title: {
                                        display: true,
                                        text: 'Date'
                                    }
                                },
                                y: {
                                    title: {
                                        display: true,
                                        text: 'Stock Value'
                                    },
                                    ticks: {
                                        callback: function(value) {
                                            return value.toLocaleString();
                                        }
                                    }
                                }
                            }
                        }
                    });

                } else {
                    console.error("API returned success false.");
                }
            },
            error: function() {
                console.log("Error fetching data.");
            }
        });
    }
    function updateChartTminis(monthName, year) {
        // Convert month name (e.g., 'Jan') into month number (1-12)
        var monthNumber = getMonthNumber(monthName);
        $("#preloder").fadeIn();
       
        $.ajax({
            url: "{{ route('operationreporttmins') }}", 
            data: { 'year': year, 'month': monthName }, 
            method: 'GET',
            success: function(response) {
                $("#preloder").fadeOut();
                if (response.success) {
                    
                    var tableData = response.data;
                    populateAbstractTable(tableData, monthNumber); 
                    
                 

                    // Filter data for chart (excluding 'Total' units)
                    const filteredData = tableData.filter(unitData => unitData.Unit !== "Total");

                    // Prepare the chart data dynamically
                    const labels = Object.keys(filteredData[0]).filter(key => key !== "Unit" && key !== "Total"); // Extract dates from the first unit's keys

                    const datasets = filteredData.map(unitData => ({
                        label: unitData.Unit,
                        data: labels.map(date => parseInt(unitData[date], 10)),
                        borderColor: getRandomColor(),  // You can customize the color for each line
                        backgroundColor: 'rgba(0, 0, 0, 0)', // Transparent background
                        fill: false,
                        lineTension: 0.1
                    }));

                    // Destroy the existing chart instance if it exists
                    if (chartInstance) {
                        chartInstance.destroy();  // Destroy the previous chart instance
                    }

                    // Create a new chart
                    const ctx = document.getElementById('multipleLineChart').getContext('2d');
                    chartInstance = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: datasets
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                legend: {
                                    position: 'top',
                                },
                                tooltip: {
                                    callbacks: {
                                        label: function(tooltipItem) {
                                            return 'Stock Value: ' + tooltipItem.raw.toLocaleString();
                                        }
                                    }
                                }
                            },
                            scales: {
                                x: {
                                    title: {
                                        display: true,
                                        text: 'Date'
                                    }
                                },
                                y: {
                                    title: {
                                        display: true,
                                        text: 'Stock Value'
                                    },
                                    ticks: {
                                        callback: function(value) {
                                            return value.toLocaleString();
                                        }
                                    }
                                }
                            }
                        }
                    });

                } else {
                    console.error("API returned success false.");
                }
            },
            error: function() {
                console.log("Error fetching data.");
            }
        });
    }
    function updateChartTqty(monthName, year) {
        // Convert month name (e.g., 'Jan') into month number (1-12)
        var monthNumber = getMonthNumber(monthName);
        $("#preloder").fadeIn();
       
        $.ajax({
            url: "{{ route('operationreportqty') }}", 
            data: { 'year': year, 'month': monthName }, 
            method: 'GET',
            success: function(response) {
                $("#preloder").fadeOut();
                if (response.success) {
                    
                    var tableData = response.data;
                    populateAbstractTable(tableData, monthNumber); 
                    
                 

                    // Filter data for chart (excluding 'Total' units)
                    const filteredData = tableData.filter(unitData => unitData.Unit !== "Total");

                    // Prepare the chart data dynamically
                    const labels = Object.keys(filteredData[0]).filter(key => key !== "Unit" && key !== "Total"); // Extract dates from the first unit's keys

                    const datasets = filteredData.map(unitData => ({
                        label: unitData.Unit,
                        data: labels.map(date => parseInt(unitData[date], 10)),
                        borderColor: getRandomColor(),  // You can customize the color for each line
                        backgroundColor: 'rgba(0, 0, 0, 0)', // Transparent background
                        fill: false,
                        lineTension: 0.1
                    }));

                    // Destroy the existing chart instance if it exists
                    if (chartInstance) {
                        chartInstance.destroy();  // Destroy the previous chart instance
                    }

                    // Create a new chart
                    const ctx = document.getElementById('multipleLineChart').getContext('2d');
                    chartInstance = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: datasets
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                legend: {
                                    position: 'top',
                                },
                                tooltip: {
                                    callbacks: {
                                        label: function(tooltipItem) {
                                            return 'Stock Value: ' + tooltipItem.raw.toLocaleString();
                                        }
                                    }
                                }
                            },
                            scales: {
                                x: {
                                    title: {
                                        display: true,
                                        text: 'Date'
                                    }
                                },
                                y: {
                                    title: {
                                        display: true,
                                        text: 'Stock Value'
                                    },
                                    ticks: {
                                        callback: function(value) {
                                            return value.toLocaleString();
                                        }
                                    }
                                }
                            }
                        }
                    });

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

    
    var selectedValue = $('#monthYearPicker').val();  
    var parts = selectedValue.split('/');
    var month = parts[0];
    var year = parts[1];
    updateChart(month, year); 

   
    $('#monthYearPicker').on('change', function() {
        var selectedValue = $(this).val();
        var parts = selectedValue.split('/');
        var month = parts[0];  
        var year = parts[1]; 
        console.log(selectedValue);
        var selectedoption = $('#select_option').val();
        if(selectedoption == 'Tvl'){
                    updateChart(month, year); 

                }else if(selectedoption == 'Tminis'){
                   
                    updateChartTminis(month, year); 

                }else if(selectedoption == 'Tqty'){
                    updateChartTqty(month, year); 
                } 

        
        //updateChart(monthName, year);
    });

    
    function getMonthNumber(monthName) {
        var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        return monthNames.indexOf(monthName) + 1;
    }

    
    function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    // Function to populate Abstract Table
    function populateAbstractTable(data, orderNo) {
        const $tableBody = $('#abstractTable tbody');
        $tableBody.empty();

        if (!data || data.length === 0) {
            console.log("No data available to populate.");
            return;
        }

        var headers = Object.keys(data[0]);

        // Dynamically create table headers
        var thead = '<tr>';
        headers.forEach(function(header) {
            var dateFormatRegex = /^\d{4}_(0[1-9]|1[0-2])_(0[1-9]|[12][0-9]|3[01])$/;
            if (dateFormatRegex.test(header)) {
                var parts = header.split('_');
                var month = parts[0];
                var year = parts[1];
                var day = parts[2];
                var headercol = day ;

            }else{
                    var headercol = header ;
                }

            thead += '<th>' + headercol + '</th>';
        });
        thead += '</tr>';
        $('#abstractTable thead').html(thead);  // Insert headers into table

        // Dynamically create table rows
        var tbody = '';
        data.forEach(function(row) {
            tbody += '<tr>';
            headers.forEach(function(header) {
                if ($.isNumeric(row[header])) {
               
                     var tdata = formatCompactNumber(row[header]);
                    } else {
                         var tdata = row[header]  ;
                        }

                
                tbody += '<td>' + tdata+ '</td>';
            });
            tbody += '</tr>';
        });
        $('#abstractTable tbody').html(tbody); // Insert rows into abstract table

        
    }
});




    $(document).ready(function () {

       
        
    // Export chart as PNG
    $('#load-data').click(function () {
        $('.load_turnover').css('display', 'block');
    });

   
});



</script>








@endsection