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

@section('style')
    <link href="{{ asset('assets/plugins/custom/datatables/datatables.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">
                <!-- Company Info Card -->
                <div class="col-xl-12 d-none">
                    <div class="card card-flush h-xl-100">
                        <div class="card-header">
                            <h3 class="card-title">Company Information</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="d-flex align-items-center mb-7">
                                        <div class="d-flex flex-column">
                                            <span class="fw-bold text-gray-800 fs-4">{{ $company->name }}</span>
                                            <span class="text-gray-500 fw-semibold">{{ $company->code }}</span>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-column mt-3">
                                        <span class="text-gray-500 fw-semibold mb-1">Address</span>
                                        <span class="fw-bold text-gray-800">{{ $company->address }}</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex flex-column">
                                        <span class="text-gray-500 fw-semibold mb-1">Contact</span>
                                        <span class="fw-bold text-gray-800">{{ $company->contact }}</span>
                                    </div>
                                    <div class="d-flex flex-column mt-3">
                                        <span class="text-gray-500 fw-semibold mb-1">Email</span>
                                        <span class="fw-bold text-gray-800">{{ $company->email }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Statistics Cards -->
                <div class="col-xl-12">
                    <div class="row g-5 g-xl-10">
                        <!-- Total Orders -->
                        <div class="col-xl-6">
                            <div class="card card-flush h-xl-100">
                                <div class="card-body">
                                    <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">Total Orders</span>
                                            </div>
                                            <div class="symbol symbol-40px ms-3">
                                                <span class="symbol-label bg-primary bg-opacity-10">
                                                    <i class="fas fa-shopping-cart text-primary fs-2"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Total Order Containers -->
                        <div class="col-xl-6">
                            <div class="card card-flush h-xl-100">
                                <div class="card-body">
                                    <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">{{ $totalOrderContainers }}</span>
                                            <span class="text-gray-500 fw-bold fs-6">Total Order Containers</span>
                                        </div>
                                        <div class="symbol symbol-40px ms-3">
                                            <span class="symbol-label bg-success bg-opacity-10">
                                                <i class="fas fa-boxes text-success fs-2"></i>
                                            </span>
                                        </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>

                <!-- Charts -->
                <div class="col-xl-12">
                    <div class="row">
                        <!-- Order Status Chart -->
                        <div class="col-lg-6">
                            <div class="card card-flush h-xl-100">
                                <div class="card-header">
                                    <h3 class="card-title">Order Status Distribution</h3>
                                </div>
                                <div class="card-body">
                                    <canvas id="orderStatusChart" width="100%" height="100%"></canvas>
                                </div>
                            </div>
                        </div>

                        <!-- Weekly Completed Orders Chart -->
                        <div class="col-lg-6">
                            <div class="card card-flush h-xl-100">
                                <div class="card-header">
                                    <h3 class="card-title">Weekly Completed Orders</h3>
                                </div>
                                <div class="card-body">
                                    <canvas id="weeklyOrdersChart" width="100%" height="100%"></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">
                                        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>Date Placed</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody class="fw-bold text-gray-600">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                

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

    <div class="modal fade" id="orderModal" tabindex="-1" aria-labelledby="orderModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="orderModalLabel">Order Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Order Status Chart
            const statusCtx = document.getElementById('orderStatusChart').getContext('2d');
            const statusCounts = @json($statusCounts);
            
            const statusLabels = statusCounts.map(status => status.name);
            const statusData = statusCounts.map(status => status.count);
            
            const statusColors = [
                '#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
            ];

            new Chart(statusCtx, {
                type: 'pie',
                data: {
                    labels: statusLabels,
                    datasets: [{
                        data: statusData,
                        backgroundColor: statusColors,
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(tooltipItem) {
                                    const value = tooltipItem.raw;
                                    const label = tooltipItem.label;
                                    return `${label}: ${value}`;
                                }
                            }
                        }
                    }
                }
            });

            // Weekly Orders Chart
            const weeklyCtx = document.getElementById('weeklyOrdersChart').getContext('2d');
            const weeklyData = @json($chartData);
            
            const weeklyLabels = Object.keys(weeklyData[Object.keys(weeklyData)[0]]).map((_, index) => {
                const startOfWeek = moment().startOf('isoWeek').subtract(index, 'weeks');
                return startOfWeek.format('YYYY-MM-DD');
            }).reverse();

            const weeklyDatasets = Object.keys(weeklyData).map((status, index) => {
                return {
                    label: status,
                    data: weeklyData[status],
                    backgroundColor: '#36A2EB',
                    borderColor: '#36A2EB',
                    borderWidth: 1
                };
            });

            new Chart(weeklyCtx, {
                type: 'bar',
                data: {
                    labels: weeklyLabels,
                    datasets: weeklyDatasets
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(tooltipItem) {
                                    const value = tooltipItem.raw;
                                    return `${tooltipItem.dataset.label}: ${value}`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Weeks'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Order Counts'
                            },
                            beginAtZero: true
                        }
                    }
                }
            });
        });


        $(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, #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 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('company_recent_order_datatable') }}',
                    type: "GET",
                    data: {
                        start_date: start_date,
                        end_date: end_date,
                        status: status,
                        company_id: '{{ $company->id }}'
                    }
                },
                "columnDefs": [{
                    "orderable": false,
                    "targets": [3]
                }],
                "order": [
                    [1, 'desc']
                ],
            });
        }


        function open_order_modal(self) {
            let token = `{{ csrf_token() }}`;
            let order_unique_id = $(self).data('order_unique_id');
            // ajax call to get order details
            $.ajax({
                method: 'GET',
                url: "{{ route('getOrderDetailsForCompany') }}",
                data: {
                    order_unique_id: order_unique_id
                },
                headers: {
                    'x-csrf-token': token
                },
                success: function(result) {
                    console.log('Order Details:', result);
                    $('#orderModal .modal-body').html(result.html);
                    $('#orderModal').modal('show');
                },
                error: function(xhr) {
                    var errorMessage = 'An unexpected error occurred.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    console.log('Error Response:', xhr
                        .responseJSON); // Log the full error response for debugging
                    swal({
                        title: 'Error!',
                        text: errorMessage,
                        icon: 'error',
                    });
                }
            });
        }
    </script>
@endpush