@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">
                        <div class="card-body">
                            <div class="position-relative">
                                <div class="row g-3 g-lg-6">
                                    <!-- Total Companies -->
                                    <div class="col-3">
                                        <a href="{{ route('company.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">{{ $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>
                                        </a>
                                    </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">
                                        <a href="{{ route('labour.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">{{ $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>
                                        </a>
                                    </div>

                                    <!-- Total Mulajims -->
                                    <div class="col-3">
                                        <a href="{{ route('mulajim.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">{{ $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>
                                        </a>
                                    </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