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

<div id="layout-wrapper">
@section('content')
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<style>

    
    /* #reportrange{
       width: 30%;
       margin-left: auto;

    
    } */

    .select2-container .select2-selection--multiple .select2-selection__choice {
        color: #191818 !important;
    }
        .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 style="text-align:center; margin-bottom:40px">Gainup Technotek Merchandiser Dashboard</h1>

                <div class="row">
                    <!-- Buyer Count -->
                    <div class="col-xl-3 col-md-3"></div>
                    <div class="col-xl-6 col-md-6">
                        <a href="/merchandiserordertechnotek" 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">10</h3>
                                        </div>

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

                    <!-- Order Count -->
                    <!-- <div class="col-xl-6 col-md-6">
                        <a href="/merchandiserordertechnotek" 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">50</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">
            <div class="col-6">
            <div class="card">
                <div class="card-header">
                    <h1 class="card-title">Live Season</h1>
                </div>
                
                <div class="card-body">
                
                    <div class="table-responsive  table-card">
                        <table class="table table-hover table-centered align-middle" id="season_master">
                            <thead class="text-muted table-light" style="font-size: 11px;">
                                <tr>
                                    <th style="width: 50px;">SNO</th>
                                    <th>Name</th>
                                    
                                </tr>
                            </thead>
                            <tr>
                            <td>1</td>
                            <td>Rajkumar</td>
                            
                            </tr>
                            <tbody style="font-size: 11px">

                                <!-- Data will be loaded here via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
                </div>
            
                <div class="col-6">
                <h1 class="card-title">Work Analysis</h1>
                <div class="row">
                <div class="col-md-4">
                    <div class="mb-3">
                         <label for="Season " class="form-label">Season </label>
                         <select class="form-control select2" name="Season[] " id="Season"  multiple="multiple">
                            <option value="Season" >Season </option>
                            season
                           
                         </select>
                     </div>
                 </div>
                 <div class="col-md-5">
                                            <div class="mb-6">
                                            <label for="Season " class="form-label">Date Selection </label>
                                            <div id="reportrange" class="mb-2" style="padding: 5px 10px; background: #fff; cursor: pointer;  border: 1px solid #ccc;">
                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                <span></span> <b class="caret"></b>
            </div>
                                            </div>

                                        </div>
                                        
                                        <div class="col-md-1">
                                       <br>
                                            <button type="submit" id ="user_select" class="btn btn-primary">Filter</button>
                                            
                                            </div>
</div>
               
                
                    <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 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>
                            <tr>
                            <td>1</td>
                            <td>Rajkumar</td>
                            <td>2024-10-08 </td>
                            </tr>
                            <tbody style="font-size: 11px">

                                <!-- Data will be loaded here via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
                </div>
    </div>

    

@endsection

@section('script')

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script>


  
    




$(document).ready(function() {
  
    $('#Season').select2({
        placeholder: "Select Season", // Placeholder text
        allowClear: true // Allows clearing the selection
    });
});
    $(document).ready(function() {


        $.ajax({
            url: "{{ route('mddashboardtechnotek') }}",
            method: 'GET',
            success: function(apiData) {
                if (apiData.success) {
                    const totalPendingOrders = apiData.data.total;
                    const pendingBuyerCount = apiData.data.buyer;
                    const seasonarr = apiData.data.season;

                    $('#order-count').text(totalPendingOrders);
                    $('#buyer-count').text(pendingBuyerCount);
                    var $select = $('#Season');
                    $.each(seasonarr, function(index, season) {
            var $option = $('<option>', {
                value: season, // Set the value to the season name
                text: season   // Set the text to the season name
            });

            // Append the option to the dropdown
            $select.append($option);
        });
        
        var seasontable = $('#season_master').DataTable({
            paging: false,
            searching: false,
            ordering: true,
            order: [[0, 'asc']],
            // dom: 'Bfrtip',

        });
        seasontable.clear();

        apiData.data.season.forEach(function(item, index) {
            seasontable.row.add([
        index + 1,                 // SNO
        item || '-',       // Name
       
    ]);
});

// Redraw the table with the new data
seasontable.draw();

                    
                } 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_tek') }}`;

        $.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('MMM-DD-YY') + ' - ' + end.format('MMM-DD-YY'));
        }

        $('#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,season) {
            var emp_id = $('#emp_id').val();
            $('.loader').show();
            $.ajax({
                url: "{{ route('dashboardanaly') }}",
                method: 'GET',
                data: {
                    start_date: startDate,
                    end_date: endDate,
                    season : season,
                    emp_id : emp_id
                },
                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 delayOrders = [];

                    // 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);
                        delayOrders.push(item.delay_qty);
                    });

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

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

        function updateChart(labels, totalorder_qty, totalshipped_qty,delayOrders) {
    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
                },
                {
                    label: 'Delayed Qty',
                    data: delayOrders,
                    backgroundColor: 'rgba(255, 0, 0, 0.5)', // Customize the color as needed
                    borderColor: 'rgba(255, 0, 0, 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'
                }
            }
        }
    });
}
  
$('#user_select').click(function() {
        console.log(typeof fetchDashboardData);
        var dateRange = $('#reportrange span').text(); 
       
        var dateParts = dateRange.split(' - ');
        var startDate = moment(dateParts[0], 'MMM-DD-YY').format('YYYY-MM-DD');
        var endDate = moment(dateParts[1], 'MMM-DD-YY').format('YYYY-MM-DD');
        var selectedValues = $('#Season').val();
        var season = selectedValues && selectedValues.length > 0 ? selectedValues.join(', ') : '';
        fetchDashboardData(startDate,endDate,season);
        
    });
    });
    </script>

@endsection