@extends('layout.master', ['headerTitle' => 'Dashboard'])

@section('style')
    <link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/plugins/custom/vis-timeline/vis-timeline.bundle.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('body')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="container-xxl" id="kt_content_container">
            <div class="row g-5 g-xl-10">
                <div class="col-xl-12">
                    <div class="card card-flush h-xl-100">
                        <div class="card-body">
                            <div class="position-relative">
                                <div class="row g-3 g-lg-6">
                                    <!-- Total Companies -->
                                    <div class="col-3">
                                        <div class="d-flex align-items-center bg-gray-100 bg-opacity-70 rounded-2 px-4 py-3">
                                            <div class="flex-grow-1">
                                                <span class="text-gray-700 fw-boldest d-block fs-2qx lh-1 ls-n1">{{ $totalCompanies }}</span>
                                                <span class="text-gray-500 fw-bold fs-6">Companies</span>
                                            </div>
                                            <div class="symbol symbol-40px ms-3">
                                                <span class="symbol-label bg-primary bg-opacity-10">
                                                    <i class="fas fa-building text-primary fs-2"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                        
                                    <!-- Total Orders -->
                                    <div class="col-3">
                                        <a href="{{ route('order.index') }}" class="text-decoration-none">
                                            <div class="d-flex align-items-center bg-gray-100 bg-opacity-70 rounded-2 px-4 py-3">
                                                <div class="flex-grow-1">
                                                    <span class="text-gray-700 fw-boldest d-block fs-2qx lh-1 ls-n1">{{ $totalOrders }}</span>
                                                    <span class="text-gray-500 fw-bold fs-6">Orders</span>
                                                </div>
                                                <div class="symbol symbol-40px ms-3">
                                                    <span class="symbol-label bg-success bg-opacity-10">
                                                        <i class="fas fa-shopping-cart text-success fs-2"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                        
                                    <!-- Total Labours -->
                                    <div class="col-3">
                                        <div class="d-flex align-items-center bg-gray-100 bg-opacity-70 rounded-2 px-4 py-3">
                                            <div class="flex-grow-1">
                                                <span class="text-gray-700 fw-boldest d-block fs-2qx lh-1 ls-n1">{{ $totalLabours }}</span>
                                                <span class="text-gray-500 fw-bold fs-6">Labours</span>
                                            </div>
                                            <div class="symbol symbol-40px ms-3">
                                                <span class="symbol-label bg-warning bg-opacity-10">
                                                    <i class="fas fa-users text-warning fs-2"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                        
                                    <!-- Total Mulajims -->
                                    <div class="col-3">
                                        <div class="d-flex align-items-center bg-gray-100 bg-opacity-70 rounded-2 px-4 py-3">
                                            <div class="flex-grow-1">
                                                <span class="text-gray-700 fw-boldest d-block fs-2qx lh-1 ls-n1">{{ $totalMulajims }}</span>
                                                <span class="text-gray-500 fw-bold fs-6">Mulajims</span>
                                            </div>
                                            <div class="symbol symbol-40px ms-3">
                                                <span class="symbol-label bg-danger bg-opacity-10">
                                                    <i class="fas fa-user-tie text-danger fs-2"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Order Status Counts -->
                <div class="col-xl-12 mt-5">
                    <div class="card card-flush h-xl-100">
                        <div class="card-header">
                            <h3 class="card-title">Order Status</h3>
                        </div>
                        <div class="card-body">
                            <div class="row g-3 g-lg-6">
                                @foreach($orderStatusCounts as $status)
                                <div class="col-3">
                                    <a href="{{ route('order.index', ['status' => $status['id']]) }}" class="text-decoration-none">
                                        <div class="d-flex align-items-center bg-gray-100 bg-opacity-70 rounded-2 px-4 py-3">
                                            <div class="flex-grow-1">
                                                <span class="text-gray-700 fw-boldest d-block fs-2qx lh-1 ls-n1">{{ $status['count'] }}</span>
                                                <span class="text-gray-500 fw-bold fs-6">{{ $status['name'] }}</span>
                                            </div>
                                            <div class="symbol symbol-40px ms-3">
                                                <span class="symbol-label bg-{{ $status['id'] == 0 ? 'warning' : ($status['id'] == 1 ? 'info' : ($status['id'] == 2 ? 'success' : 'danger')) }} bg-opacity-10">
                                                    <i class="fas fa-{{ $status['id'] == 0 ? 'clock' : ($status['id'] == 1 ? 'spinner' : ($status['id'] == 2 ? 'check-circle' : 'exclamation-triangle')) }} text-{{ $status['id'] == 0 ? 'warning' : ($status['id'] == 1 ? 'info' : ($status['id'] == 2 ? 'success' : 'danger')) }} fs-2"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-6">
                            <div class="card card-flush h-xl-100">
                                <div class="card-header">
                                    <h3 class="card-title">Users</h3>
                                </div>
                                <div class="card-body">
                                    <canvas id="userChart" width="100%" height="100%" class=""></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-6">
                            <div class="card card-flush h-xl-100">
                                <div class="card-header">
                                    <h3 class="card-title">Order Containers</h3>
                                </div>
                                <div class="card-body">
                                    <canvas id="orderContainerStatusChart" width="100%" height="100%"
                                        class=""></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-6">
                            <div class="card card-flush h-xl-100">
                                <div class="card-header">
                                    <h3 class="card-title">Weekly Report</h3>
                                </div>
                                <div class="card-body">
                                    <canvas id="myBarChart" width="100%" height="100%" class=""></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12">
                    <div class="card card-flush h-xl-100">
                        <div class="card-header">
                            <h3 class="card-title">Recent Orders</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-3">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        Start Date
                                    </label>
                                    <input type="date" id="start_date" class="form-control" name="start_date" />
                                </div>
                                <div class="col-3">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        End Date
                                    </label>
                                    <input type="date" id="end_date" class="form-control" name="start_date" />
                                </div>
                                <div class="col-3">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        Company
                                    </label>
                                    <select class="form-select form-select-solid" id="company_id" name="company_id">
                                        <option value="">Select Company</option>
                                        @foreach ($companies as $company)
                                            <option value="{{ $company->id }}">{{ $company->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-3">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        Status
                                    </label>
                                    <select class="form-select form-select-solid" id="status" name="status">
                                        <option value="">Select Status</option>
                                        @php
                                            $statuses = [
                                                ['id' => 0, 'name' => 'Pending'],
                                                ['id' => 1, 'name' => 'In progress'],
                                                ['id' => 2, 'name' => 'Completed'],
                                                ['id' => 3, 'name' => 'Disputed'],
                                            ];
                                        @endphp
                                        @foreach ($statuses as $status)
                                            <option value="{{ $status['id'] }}">{{ $status['name'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <table class="table align-middle table-row-dashed fs-6 gy-5" id="listDataTable">
                                <thead>
                                    <tr
                                        class="text-start
                                text-muted fw-bolder fs-7 text-uppercase gs-0">
                                        <th>Order ID</th>
                                        <th>Company Name</th>
                                        <th>Date Placed</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody class="fw-bold text-gray-600">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/vis-timeline/vis-timeline.bundle.js') }}"></script>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <script src="{{ asset('assets/js/widgets.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/custom/widgets.js') }}"></script>

    {{-- For Pie Chart --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Order Container Status Chart
            const ctx = document.getElementById('orderContainerStatusChart').getContext('2d');

            // Data from the controller
            const statusCounts = @json($statusCounts);

            // Extract labels and data
            const orderContainerLabels = statusCounts.map(status => status.name); // Renamed to avoid conflict
            const orderContainerData = statusCounts.map(status => status.count);

            // Define colors for each status
            const orderContainerBackgroundColors = [
                '#FF6384', // Pending
                '#36A2EB', // Accepted
                '#FFCE56', // Started
                '#4BC0C0', // In Transit
                '#9966FF', // Review
                '#FF9F40', // Dispute
                '#E7E9ED', // Hold
                '#FF6384', // Billing
                '#36A2EB', // Payment Review
                '#FFCE56', // Payment Admin
                '#4BC0C0', // Completed
            ];

            // Create the pie chart
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: orderContainerLabels,
                    datasets: [{
                        data: orderContainerData,
                        backgroundColor: orderContainerBackgroundColors,
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(tooltipItem) {
                                    const value = tooltipItem.raw;
                                    const label = tooltipItem.label;
                                    return `${label}: ${value}`;
                                }
                            }
                        }
                    }
                }
            });

            // User Chart
            const userCtx = document.getElementById('userChart').getContext('2d');
            const totalCompanies = {{ $totalCompanies }};
            const totalLabours = {{ $totalLabours }};
            const totalMulajims = {{ $totalMulajims }};

            const userData = {
                labels: ['Companies', 'Labours', 'Mulajims'], // These will appear in the legend and tooltips
                datasets: [{
                    data: [totalCompanies, totalLabours, totalMulajims],
                    backgroundColor: [
                        '#FF6384', // Companies
                        '#36A2EB', // Labours
                        '#FFCE56' // Mulajims
                    ],
                    borderColor: [
                        '#FF6384',
                        '#36A2EB',
                        '#FFCE56'
                    ],
                    borderWidth: 1
                }]
            };

            const userOptions = {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom', // Legend will display the labels from the `labels` array
                    },
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                const value = tooltipItem.raw; // Value of the data point
                                const label = userData.labels[tooltipItem
                                    .dataIndex]; // Correct label from the `labels` array
                                return `${label}: ${value}`;
                            }
                        }
                    }
                }
            };

            new Chart(userCtx, {
                type: 'pie',
                data: userData,
                options: userOptions
            });

            // Weekly Orders Chart
            const weeklyOrdersCtx = document.getElementById('myBarChart').getContext('2d');

            // Data from the controller
            const weeklyChartData = @json($chartData); // Renamed to avoid conflict

            // Generate labels for the last 4 weeks (starting from this week)
            const weeklyLabels = Object.keys(weeklyChartData[Object.keys(weeklyChartData)[0]]).map((_, index) => {
                const startOfWeek = moment().startOf('isoWeek').subtract(index, 'weeks');
                return startOfWeek.format('YYYY-MM-DD');
            }).reverse(); // Reverse the order to show recent weeks first

            // Prepare datasets for the bar chart (only the "Completed" status)
            const weeklyDatasets = Object.keys(weeklyChartData).map((status, index) => {
                // You can check the status and filter only "Completed"
                if (status !== 'Completed') return null;

                const colors = [
                    '#36A2EB', // Color for the "Completed" status
                ];

                return {
                    label: status, // Status name (e.g., "Completed")
                    data: weeklyChartData[status], // Weekly counts for this status
                    backgroundColor: colors[index % colors.length], // Assign the color
                    borderColor: colors[index % colors.length],
                    borderWidth: 1
                };
            }).filter(dataset => dataset !== null); // Filter out any non "Completed" datasets

            // Chart configuration
            const weeklyOrdersOptions = {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top', // Position of the legend
                    },
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                const value = tooltipItem.raw; // Value of the data point
                                return `${tooltipItem.dataset.label}: ${value}`; // Show status and value
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        stacked: true, // Stack bars horizontally
                        title: {
                            display: true,
                            text: 'Weeks'
                        }
                    },
                    y: {
                        stacked: true, // Stack bars vertically
                        title: {
                            display: true,
                            text: 'Order Counts'
                        },
                        beginAtZero: true
                    }
                }
            };

            // Create the bar chart
            new Chart(weeklyOrdersCtx, {
                type: 'bar',
                data: {
                    labels: weeklyLabels, // Week labels
                    datasets: weeklyDatasets // Only "Completed" status dataset
                },
                options: weeklyOrdersOptions
            });



        });



        $(document).ready(function() {
            load_datatable();
        });

        function clear_data_table(ele) {
            $(ele).DataTable().clear().destroy();
        }

        function reload_data_table(ele) {
            $(ele).DataTable().ajax.reload();
        }

        $('#start_date, #end_date, #company_id, #status').on('change', function() {
            clear_data_table("#listDataTable");
            setTimeout(() => {
                load_datatable();
            }, 500);
        });

        function load_datatable() {
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            var company_id = $('#company_id').val();
            var status = $('#status').val();

            $('#listDataTable').DataTable({
                "pageLength": 50,
                "lengthMenu": [10, 20, 50, 100, 200],
                "language": {
                    "lengthMenu": '_MENU_',
                    "sSearch": "",
                    "searchPlaceholder": "Search records"
                },
                "processing": true,
                "serverSide": true,
                "ajax": {
                    url: '{{ route('recent_order_datatable') }}',
                    type: "GET",
                    data: {
                        start_date: start_date,
                        end_date: end_date,
                        company_id: company_id,
                        status: status
                    }
                },
                "columnDefs": [{
                    "orderable": false,
                    "targets": [3]
                }],
                "order": [
                    [1, 'desc']
                ],
            });
        }
    </script>
@endpush