@section('title', 'Dashboard')

@section('content')
    <style>
        .card {
            border-radius: 10px;
            border: none;
            position: relative;
            margin-bottom: 30px;
            box-shadow: 0 0.46875rem 2.1875rem rgba(90,97,105,0.1),
            0 0.9375rem 1.40625rem rgba(90,97,105,0.1),
            0 0.25rem 0.53125rem rgba(90,97,105,0.12),
            0 0.125rem 0.1875rem rgba(90,97,105,0.1);
        }
        .card .card-header {
            background-color: transparent;
            border-bottom: none;
            padding: 1rem;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .card .card-body {
            background-color: #fff;
            padding: 1.5rem;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .card .card-title {
            font-size: 20px;
            margin-bottom: 0;
        }
        .card .card-text-notbold {
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }
        .card .card-text {
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        .card .card-icon {
            font-size: 3rem;
            color: #6c757d;
            position: absolute;
            top: 90px;
            right: 20px;
        }
        .card.border-primary .card-header { background-color: #007bff; }
        .card.border-primary .card-icon { color: #007bff; }
        .card.border-success .card-header { background-color: #28a745; }
        .card.border-success .card-icon { color: #28a745; }
        .card.border-info .card-header { background-color: #17a2b8; }
        .card.border-info .card-icon { color: #17a2b8; }
        .card .card-header h5 {
            margin-bottom: 0;
            color: #fff;
        }
        .box.no-border {
            border: none;
            padding: 20px;
            margin-top: 20px;
            background-color: #f9f9f9;
            border-radius: 10px;
        }
        .table-responsive {
                 overflow-x: auto;
             }
        #vehicles-table {
            width: 100%;
            table-layout: auto;
        }
        #vehicles-table th, #vehicles-table td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
        <div class="container mt-4">
            <div class="row">
                <div class="col-md-3">
                    <div class="card border-success">
                        <div class="card-header">
                            <h5 class="card-title">
                                Balanço Geral
                            </h5>
                            <div class="date-info">Últimos 30 dias</div>
                            <i class="fas fa-balance-scale card-icon"></i>
                        </div>
                        <div class="card-body">
                            <p class="card-text-notbold">Margem: <span id="balancePercentage"></span>%</p>
                            <p class="card-text">Lucro: <span id="balanceTotal"></span>€</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-info">
                        <div class="card-header">
                            <h5 class="card-title">
                                Orçamentos
                            </h5>
                            <div class="date-info">Últimos 30 dias</div>
                            <i class="fas fa-car card-icon"></i>
                        </div>
                        <div class="card-body">
                            <p class="card-text-notbold"><span id="estimatesCount"></span> Documentos</p>
                            <p class="card-text">Total: <span id="estimatesTotal"></span>€</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-success">
                        <div class="card-header">
                            <h5 class="card-title">
                                Reparações
                            </h5>
                            <div class="date-info">Últimos 30 dias</div>
                            <i class="fas fa-wrench card-icon"></i>
                        </div>
                        <div class="card-body">
                            <p class="card-text-notbold"><span id="normalWorkOrdersCount"></span> Documentos</p>
                            <p class="card-text">Total: <span id="normalWorkOrdersTotal"></span>€</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-info">
                        <div class="card-header">
                            <h5 class="card-title">
                                Despesas
                            </h5>
                            <div class="date-info">Últimos 30 dias</div>
                            <i class="fas fa-shopping-cart card-icon"></i>
                        </div>
                        <div class="card-body">
                            <p class="card-text-notbold"><span id="purchasesCount"></span> Documentos</p>
                            <p class="card-text">Total: <span id="purchasesTotal"></span>€</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="col-6">
                    <h2>Taxa de Produtividade de Mão de Obra</h2>
                    <canvas id="hoursComparisonChart"></canvas>
                    <p class="card-text">Percentagem: <span id="productax"></span>%</p>
                </div>
                    <div class="col-6">
                        <h2>Peças e Serviços mais utilizados</h2>
                        <canvas id="piecesServicesChart"></canvas>
                    </div>
            </div>
            <div class="col-md-6">
                <h2>Estado Atual de agendamentos</h2>
                <canvas id="statusChart"></canvas>
            </div>
        </div>
            <div class="box no-border">
                <div class="container-fluid">
                    <h2>Veiculos para levantamento:</h2>
                    <div class="table-responsive">
                        <table id="vehicles-table" class="table table-striped">
                            <thead>
                            <tr>
                                <th class="header panel-blue w-4">Veiculo</th>
                                <th class="header panel-blue w-2">Matricula</th>
                                <th class="header panel-blue w-5">Proprietário</th>
                                <th class="header panel-blue w-3">Telemóvel</th>
                                <th class="header panel-blue w-3">NIF</th>
                                <th class="header panel-blue w-4">Ações</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                </div>
        </div>
        </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $(document).ready(function() {
            $('#vehicles-table').on('click', '.register-pickup', function() {
                var vehicleId = $(this).data('id');

                $.ajax({
                    url: '{{ route('admin.vehicles.pickup') }}',
                    method: 'POST',
                    data: {
                        id_vehicle: vehicleId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        vehiclesTable.ajax.reload();
                        toastr.success(response.message, 'Success', {timeOut: 5000});
                    },
                    error: function(xhr) {
                        var response = xhr.responseJSON;
                        toastr.error(response.message, 'Error', {timeOut: 5000});
                    }
                });
            });

            var vehiclesTable = $('#vehicles-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.reporting.datatable') }}",
                columns: [
                    { data: 'v_model.name', name: 'v_model.name', searchable: false, orderable:false },
                    { data: 'licenseplate', name: 'licenseplate', searchable: false, orderable:false },
                    { data: 'v_owner.name', name: 'v_owner.name', searchable: false, orderable:false },
                    { data: 'v_owner.mobile', name: 'v_owner.mobile', searchable: false, orderable:false },
                    { data: 'v_owner.vat', name: 'v_owner.vat', searchable: false, orderable:false },
                    { data: 'actions', name: 'actions', searchable: false, orderable:false },
                ],
                order: [
                    [0, 'asc']
                ]
            });
            $('.filter-datatable').on('change', function (e) {
                vehiclesTable.draw();
                e.preventDefault();
            });
            function updateCards(response) {
                $('#estimatesCount').text(response.estimates_count);
                $('#estimatesTotal').text(response.estimates_total.toFixed(2).replace('.', ','));
                $('#normalWorkOrdersCount').text(response.normal_work_orders_count);
                $('#normalWorkOrdersTotal').text(response.normal_work_orders_total.toFixed(2).replace('.', ','));
                $('#purchasesCount').text(response.purchases_count);
                $('#purchasesTotal').text(response.purchases_total.toFixed(2).replace('.', ','));
                $('#productax').text((response.total_estimate_hours/response.total_actual_hours*100).toFixed(2));
            }
            function updateBalance(response) {
                var totalWorkOrders = response.normal_work_orders_total;
                var totalPurchases = response.purchases_total;
                var balanceTotal = totalWorkOrders - totalPurchases;
                let balancePercentage = (totalWorkOrders > 0) ? (balanceTotal / totalWorkOrders * 100).toFixed(2) : '';
                $('#balancePercentage').text(balancePercentage);
                $('#balanceTotal').text(balanceTotal.toFixed(2).replace('.', ','));
            }

            function updateChart(data) {
                var ctx2 = document.getElementById('hoursComparisonChart').getContext('2d');
                var chart = new Chart(ctx2, {
                    type: 'bar',
                    data: {
                        labels: ['Total de horas orçamentadas', 'Total de horas utilizadas'],
                        datasets: [{
                            label: 'Horas',
                            data: [data.total_estimate_hours, data.total_actual_hours],
                            backgroundColor: [
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 99, 132, 0.2)',
                            ],
                            borderColor: [
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 99, 132, 1)',
                            ],
                            borderWidth: 1

                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });

            var ctx = document.getElementById('statusChart').getContext('2d');
                var labels = [];
                var values = [];

                for (var i = 0; i < data.values.length; i++) {
                    labels.push(data.values[i].name);
                    values.push(data.values[i].count);
                }
            var chart = new Chart(ctx, {
                type: 'pie',  // Or any other chart type you prefer (bar, doughnut, etc.)
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Distribuição de estados de agendamentos',
                        data: values,
                        backgroundColor: [
                            'rgba(92, 97, 242, 0.2)', // Light blue for "blue" status
                            'rgba(81, 187, 37, 0.2)',   // Light green for "green" status
                            'rgba(255, 151, 102, 0.2)', // Light orange for "orange" status
                            'rgba(128, 128, 128, 0.2)', // Grey for "grey" status
                            'rgba(0, 255, 0, 0.2)',    // Lime green for "lgreen" status
                        ],
                        borderColor: [
                            'rgba(92, 97, 242, 1)',   // Same as background color for blue
                            'rgba(81, 187, 37, 1)',   // Same as background color for green
                            'rgba(255, 151, 102, 1)', // Same as background color for orange
                            'rgba(128, 128, 128, 1)', // Same as background color for grey
                            'rgba(0, 255, 0, 1)',    // Same as background color for lgreen

                        ],
                        borderWidth: 1
                    }]
                }
            });
                $('#vehicles-table').on('click', '.register-pickup', function() {
                    var vehicleId = $(this).data('id');

                    $.ajax({
                        url: '{{ route('admin.vehicles.pickup') }}',
                        method: 'POST',
                        data: {
                            id_vehicle: vehicleId,
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            vehiclesTable.ajax.reload();
                        },
                        error: function(xhr, status, error) {
                            alert("Ocorreu um erro ao registar levantamento.");
                        }
                    });
                });

                const ctx3 = document.getElementById('piecesServicesChart').getContext('2d');
                var labels2 = [];
                var values2 = [];
                var colors2 = [];
                data.uniquePartsAndServices.sort((a, b) => b.quantity - a.quantity);
                // console.log(data.uniquePartsAndServices[1]);
                for (var ii = 0; ii < data.uniquePartsAndServices.length; ii++) {
                    labels2.push(data.uniquePartsAndServices[ii].name);
                    values2.push(data.uniquePartsAndServices[ii].quantity);
                    colors2.push(data.uniquePartsAndServices[ii].service === 0 ? 'rgba(255, 99, 132, 0.2)' : 'rgba(54, 162, 235, 0.2)');
                }
                const data3 = {
                    labels: labels2,
                    datasets: [
                        {
                            label: 'Unidades/Horas',
                            data: values2,  // Values for each bar
                            backgroundColor: colors2,
                            borderColor: colors2,
                            borderWidth: 1,
                        },
                    ],
                };
                // Create and initialize the Chart.js instance
                new Chart(ctx3, {
                    type: 'bar',
                    data: data3,
                    options: {
                        indexAxis: 'y',
                }
                });
            }
            function fetchDataAndUpdate() {
                $.ajax({
                    url: '{{ route('admin.getRepairData') }}',
                    method: 'GET',
                    success: function(response) {
                        try {
                            updateCards(response);
                            updateChart(response);
                            updateBalance(response);
                        } catch (error) {
                            console.error('Error processing response:', error);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching data:', error);
                    }
                });
            }
            fetchDataAndUpdate();
            setInterval(fetchDataAndUpdate, 60000);
        });
    </script>
@endsection