@extends('master')
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">

@section('content')
    <!-- Loader overlay -->
    <div id="loader" class="fixed inset-0 z-50 flex items-center justify-center bg-white opacity-75" style="display: none;">
        <div class="text-center">
            <svg class="animate-spin h-10 w-10 text-blue-500 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none"
                 viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor"
                      d="M4 12a8 8 0 018-8v8z"></path>
            </svg>
            <p class="mt-4 font-medium">Loading, please wait...</p>
        </div>
    </div>

    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.ProductionOrderDashboard') }}</h4>
                    <h6>{{ __('sitelabel.MonitorYourProductionOrder') }}</h6>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <form method="post" id="frmDashboard">
                        @csrf
                        <div class="row">
                            <div class="col-lg-2 col-md-3 col-sm-12">
                                <label for="cmbDepartment" class="form-label">{{ __('sitelabel.Department') }}</label>
                            </div>
                            <div class="col-lg-8 col-md-6 col-sm-12">
                                <select id="cmbDepartment" name="departmentId" class="form-select">
                                    <option value="">{{ __('sitelabel.AllDepartments') }}</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->Id }}">{{ $department->Name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-2 col-md-3 col-sm-12">
                                <button type="button" class="btn btn-primary form-control"
                                    onclick="LoadDashboard()">{{ __('sitelabel.Search') }}</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="card-body">
                    <div class="flex justify-center items-center gap-4">
                        @php
                            $cards = [
                                [
                                    'route' => '#',
                                    'amount' => $pendingCount,
                                    'label' => __('sitelabel.Pending'),
                                    'icon' => 'fa-clock',
                                    'bg_color' => 'bg-danger',
                                ],
                                [
                                    'route' => '#',
                                    'amount' => $inProgressCount,
                                    'label' => __('sitelabel.InProgress'),
                                    'icon' => 'fa-spinner fa-spin',
                                    'bg_color' => 'bg-warning',
                                ],
                                [
                                    'route' => '#',
                                    'amount' => $completedCount,
                                    'label' => __('sitelabel.Completed'),
                                    'icon' => 'fa-check-circle',
                                    'bg_color' => 'bg-success',
                                ],
                            ];
                        @endphp

                        @foreach ($cards as $card)
                            <a href="{{ url('/') }}/{{ $card['route'] }}" class="text-white no-underline">
                                <div class="card card-hover rounded-lg p-6 {{ $card['bg_color'] }} w-72">
                                    <div class="flex flex-col items-center justify-center">
                                        <div class="text-2xl font-bold mb-2">
                                            <span id="sp{{ str_replace(' ', '', $card['label']) }}">{{ $card['amount'] }}</span>
                                        </div>
                                        <div class="text-lg">{{ $card['label'] }}</div>
                                        <div class="card-icon mt-2">
                                            <i class="fas {{ $card['icon'] }} fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>

            </div>
            <br>
            <div class="row">
                <div class="col-lg-6 col-md-12 mb-4">
                    <div class="card">
                        <div class="card-header">
                            <h5>{{ __('sitelabel.HighAccuracyOrders') }} (>110% {{ __('sitelabel.Completion') }})</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="highAccuracyTable" class="table">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.SerialNumber') }}</th>
                                            <th>{{ __('sitelabel.Item') }}</th>
                                            <th>{{ __('sitelabel.Quantity') }}</th>
                                            <th>{{ __('sitelabel.ProductionQuantity') }}</th>
                                            <th>{{ __('sitelabel.Difference') }}</th>
                                            <th>{{ __('sitelabel.CompletionPercentage') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbHighAccuracy">
                                        @foreach ($highAccuracyOrders as $index => $order)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $order['ItemName'] }}</td>
                                                <td>{{ number_format($order['Quantity'], 2) }}</td>
                                                <td>{{ number_format($order['ProductionQuantity'], 2) }}</td>
                                                <td>{{ number_format($order['Difference'], 2) }}</td>
                                                <td>{{ number_format($order['DifferencePercentage'], 1) }}%</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 mb-4">
                    <div class="card">
                        <div class="card-header">
                            <h5>{{ __('sitelabel.LowAccuracyOrders') }} (<90% {{ __('sitelabel.Completion') }})</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="lowAccuracyTable" class="table">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.SerialNumber') }}</th>
                                            <th>{{ __('sitelabel.Item') }}</th>
                                            <th>{{ __('sitelabel.Quantity') }}</th>
                                            <th>{{ __('sitelabel.ProductionQuantity') }}</th>
                                            <th>{{ __('sitelabel.Difference') }}</th>
                                            <th>{{ __('sitelabel.CompletionPercentage') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbLowAccuracy">
                                        @foreach ($lowAccuracyOrders as $index => $order)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $order['ItemName'] }}</td>
                                                <td>{{ number_format($order['Quantity'], 2) }}</td>
                                                <td>{{ number_format($order['ProductionQuantity'], 2) }}</td>
                                                <td>{{ number_format($order['Difference'], 2) }}</td>
                                                <td>{{ number_format($order['DifferencePercentage'], 1) }}%</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        let highAccuracyTable;
        let lowAccuracyTable;

        $(document).ready(function() {
            // Initialize DataTables only if they haven't been initialized already
            if (!$.fn.DataTable.isDataTable('#highAccuracyTable')) {
                highAccuracyTable = $('#highAccuracyTable').DataTable({
                    pageLength: 10,
                    lengthMenu: [
                        [10, 25, 50, -1],
                        [10, 25, 50, "All"]
                    ],
                    order: [
                        [5, 'desc'] // Sort by completion percentage by default
                    ],
                    language: {
                        emptyTable: "{{ __('sitelabel.NoRecordsFound') }}"
                    }
                });
            }

            if (!$.fn.DataTable.isDataTable('#lowAccuracyTable')) {
                lowAccuracyTable = $('#lowAccuracyTable').DataTable({
                    pageLength: 10,
                    lengthMenu: [
                        [10, 25, 50, -1],
                        [10, 25, 50, "All"]
                    ],
                    order: [
                        [5, 'asc'] // Sort by completion percentage by default
                    ],
                    language: {
                        emptyTable: "{{ __('sitelabel.NoRecordsFound') }}"
                    }
                });
            }

            // Optional: Trigger search when department is changed
            $('#cmbDepartment').change(function() {
                LoadDashboard();
            });
        });

        function LoadDashboard() {
            // Show full-page loader immediately
            $("#loader").show();

            // Wait for 8 seconds before sending the AJAX request
            setTimeout(function() {
                var departmentId = $("#cmbDepartment").val();

                // Show spinner icons in counters
                $("#spPending").html('<i class="fa fa-spinner fa-spin"></i>');
                $("#spInProgress").html('<i class="fa fa-spinner fa-spin"></i>');
                $("#spCompleted").html('<i class="fa fa-spinner fa-spin"></i>');

                $.ajax({
                    url: '{{ route('production.getFilteredDashboard') }}',
                    type: 'POST',
                    data: {
                        departmentId: departmentId ? parseInt(departmentId) : null,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(result) {
                        // Update counts
                        $("#spPending").text(result.pendingCount);
                        $("#spInProgress").text(result.inProgressCount);
                        $("#spCompleted").text(result.completedCount);

                        // Update tables
                        updateAccuracyTables(result.lowAccuracyOrders, result.highAccuracyOrders);
                    },
                    error: function(xhr, status, error) {
                        console.error('Error loading dashboard:', error);
                        alert("{{ __('sitelabel.ErrorLoadingDashboard') }}");

                        // Reset counters on error
                        $("#spPending").text("0");
                        $("#spInProgress").text("0");
                        $("#spCompleted").text("0");
                    },
                    complete: function() {
                        // Hide loader once AJAX call is complete
                        $("#loader").hide();
                    }
                });
            }, 8000);
        }

        function updateAccuracyTables(lowAccuracyOrders, highAccuracyOrders) {
            // Clear existing table data
            if (highAccuracyTable) {
                highAccuracyTable.clear();
            }
            if (lowAccuracyTable) {
                lowAccuracyTable.clear();
            }

            // Add data to high accuracy table
            if (highAccuracyOrders && highAccuracyOrders.length > 0) {
                highAccuracyOrders.forEach((order, index) => {
                    highAccuracyTable.row.add([
                        index + 1,
                        order.ItemName,
                        parseFloat(order.Quantity).toFixed(2),
                        parseFloat(order.ProductionQuantity).toFixed(2),
                        parseFloat(order.Difference).toFixed(2),
                        parseFloat(order.DifferencePercentage).toFixed(1) + '%'
                    ]);
                });
            }

            // Add data to low accuracy table
            if (lowAccuracyOrders && lowAccuracyOrders.length > 0) {
                lowAccuracyOrders.forEach((order, index) => {
                    lowAccuracyTable.row.add([
                        index + 1,
                        order.ItemName,
                        parseFloat(order.Quantity).toFixed(2),
                        parseFloat(order.ProductionQuantity).toFixed(2),
                        parseFloat(order.Difference).toFixed(2),
                        parseFloat(order.DifferencePercentage).toFixed(1) + '%'
                    ]);
                });
            }

            // Draw the tables with the new data
            if (highAccuracyTable) {
                highAccuracyTable.draw();
            }
            if (lowAccuracyTable) {
                lowAccuracyTable.draw();
            }
        }
    </script>
@endsection