@extends('admin.layout.master')
@section('title', __('admin.dashboard'))
@section('styles')

@endsection
@section('scripts')
    <script src="{{ asset('admin') }}/assets/vendor/libs/chartjs/chartjs.js"></script>
    <script>
        // Existing configuration...
        const barChart = document.getElementById('barServiceOrder');
        if (barChart) {
            const barChartVar = new Chart(barChart, {
                type: 'bar',
                data: {
                    labels: [
                        // 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        // 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                    ],
                    datasets: [{
                        data: [], // Empty initially
                        backgroundColor: '{{ App\Models\Setting::first()->color ?? '#0d6efd' }}',
                        borderColor: 'transparent',
                        maxBarThickness: 15,
                        borderRadius: {
                            topRight: 15,
                            topLeft: 15
                        }
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,

                    animation: {
                        duration: 500
                    },
                    plugins: {
                        tooltip: {
                            rtl: isRtl,
                            borderWidth: 1,
                        },
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                drawBorder: false,
                                display: false
                            },

                        },
                        y: {
                            min: 0,
                            grid: {
                                drawBorder: false,
                            },
                            ticks: {
                                stepSize: 100,
                            }
                        }
                    }
                }
            });
            const currentYear = new Date().getFullYear();
            // Fetch data and update chart
            fetch(`{{ route('admin.order.services.year', '') }}/${currentYear}`)
                .then(response => response.json())
                .then(data => {
                    // تحويل البيانات إلى مصفوفة لسهولة المعالجة
                    const dataArray = Object.entries(data).map(([month, value]) => {
                        return {
                            month,
                            value
                        };
                    });

                    // ترتيب البيانات تصاعديًا بناءً على القيم
                    const sortedData = dataArray.sort((a, b) => a.month - b.month);

                    // استخراج التسميات والقيم
                    const sortedLabels = sortedData.map(item => item.month); // الشهور
                    const sortedValues = sortedData.map(item => item.value); // القيم

                    // تحديث الرسم البياني
                    barChartVar.data.labels = sortedLabels; // التسميات المرتبة
                    barChartVar.data.datasets[0].data = sortedValues; // القيم المرتبة
                    barChartVar.update();
                })
                .catch(error => console.error('Error fetching data:', error));

            document.querySelectorAll('.service-order').forEach(item => {
                item.addEventListener('click', function() {
                    const selectedYear = this.getAttribute('data-year');
                    fetch(`{{ route('admin.order.services.year', '') }}/${selectedYear}`).then(response =>
                        response.json()).then(data => {
                        // تحويل البيانات إلى مصفوفة لسهولة المعالجة
                        const dataArray = Object.entries(data).map(([month, value]) => {
                            return {
                                month,
                                value
                            };
                        });

                        // ترتيب البيانات تصاعديًا بناءً على القيم
                        const sortedData = dataArray.sort((a, b) => a.month - b.month);

                        // استخراج التسميات والقيم
                        const sortedLabels = sortedData.map(item => item.month); // الشهور
                        const sortedValues = sortedData.map(item => item.value); // القيم

                        // تحديث الرسم البياني
                        barChartVar.data.labels = sortedLabels; // التسميات المرتبة
                        barChartVar.data.datasets[0].data = sortedValues; // القيم المرتبة
                        barChartVar.update();
                    }).catch(error => console.error('Error fetching data:', error));
                });
            });

        }
    </script>


@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row g-6">

            <!-- Statistics -->
            <div class="col-xl-12 col-md-12">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between">
                        <h5 class="card-title mb-0">{{ __('admin.statistics') }}</h5>
                        {{-- <small class="text-muted">Updated 1 month ago</small> --}}
                    </div>
                    <div class="card-body d-flex align-items-end">
                        <div class="w-100">
                            <div class="row gy-3">
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="badge rounded bg-label-primary me-4 p-2">
                                            <i class="ti ti-chart-pie-2 ti-lg"></i>
                                        </div>
                                        <a href="{{ route('admin.service.order.index') }}" class="card-info text-black ">

                                            <h5 class="mb-0">{{ App\Models\ServiceOrder::count() }}</h5>
                                            <small>{{ __('admin.serviceOrder') }}</small>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="badge rounded bg-label-info me-4 p-2"><i class="ti ti-users ti-lg"></i>
                                        </div>
                                        <a href="{{ route('admin.users.index') }}" class="card-info text-black ">
                                            <h5 class="mb-0">{{ App\Models\User::count() }}</h5>
                                            <small>{{ __('admin.users') }}</small>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="badge rounded bg-label-danger me-4 p-2">
                                            <i class="ti ti-message ti-lg"></i>
                                        </div>
                                        <a href="{{ route('admin.posts.index') }}" class="card-info text-black ">
                                            <h5 class="mb-0">{{ App\Models\Post::count() }}</h5>
                                            <small>{{ __('admin.posts') }}</small>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-3 col-6">
                                    <div class="d-flex align-items-center">
                                        <div class="badge rounded bg-label-success me-4 p-2">
                                            <i class="ti ti-code ti-lg"></i>
                                        </div>
                                        <a href="{{ route('admin.permit.index') }}" class="card-info text-black ">
                                            <h5 class="mb-0">{{ App\Models\Permit::count() }}</h5>
                                            <small>{{ __('admin.permit') }}</small>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Statistics -->

            <div class="col-xxl-4 col-12">
                <div class="row g-6">
                    <div class="col-xl-6 col-sm-6">

                        <a href="{{ route('admin.complain.index') }}" class="card h-100 text-black">
                            <div class="card-header pb-0">
                                <h5 class="card-title mb-1">{{ __('admin.complain') }}</h5>
                                <small class="text-muted">{{ __('admin.lastMonth') }}</small>
                            </div>
                            <div class="card-body">
                                <div id="profitLastMonth"></div>
                                <div class="d-flex justify-content-between align-items-center mt-3 gap-3">
                                    <h4 class="mb-0">
                                        {{ App\Models\Complain::where('created_at', '>', Carbon\Carbon::now()->subDays(30))->count() }}
                                    </h4>
                                    <small
                                        class="text-success">+{{ App\Models\Complain::count() == 0 ? 100 : round((App\Models\Complain::where('created_at', '>', Carbon\Carbon::now()->subDays(30))->count() / App\Models\Complain::count()) * 100, 2) }}%</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col-xl-6 col-sm-6">
                        <a href="{{ route('admin.suggestion.index') }}" class="card h-100 text-black">
                            <div class="card-header pb-0">
                                <h5 class="card-title mb-1">{{ __('admin.suggestion') }}</h5>
                                <small class="text-muted">{{ __('admin.lastMonth') }}</small>
                            </div>
                            <div class="card-body">
                                <div id="profitLastMonth"></div>
                                <div class="d-flex justify-content-between align-items-center mt-3 gap-3">
                                    <h4 class="mb-0">
                                        {{ App\Models\Suggestion::where('created_at', '>', Carbon\Carbon::now()->subDays(30))->count() }}
                                    </h4>
                                    <small
                                        class="text-success">+{{ App\Models\Suggestion::count() == 0 ? 100 : round((App\Models\Suggestion::where('created_at', '>', Carbon\Carbon::now()->subDays(30))->count() / App\Models\Suggestion::count()) * 100, 2) }}%</small>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-xxl-8">
                <div class="card">
                    <div class="card-header header-elements p-3 my-n1">
                        <h5 class="card-title mb-0 pl-0 pl-sm-2 p-2">{{ __('admin.serviceOrder') }}</h5>
                        <div class="card-action-element ms-auto py-0">
                            <div class="dropdown">
                                <button type="button" class="btn dropdown-toggle p-0" data-bs-toggle="dropdown"
                                    aria-expanded="false"><i class="ti ti-calendar"></i></button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a href="javascript:void(0);"
                                            class="dropdown-item d-flex align-items-center service-order"
                                            data-year="{{ date('Y') }}">{{ __('admin.this_year') }}</a></li>
                                    <li><a href="javascript:void(0);"
                                            class="dropdown-item d-flex align-items-center service-order"
                                            data-year="{{ date('Y', strtotime('-1year')) }}">{{ date('Y', strtotime('-1year')) }}</a>
                                    </li>
                                    <li><a href="javascript:void(0);"
                                            class="dropdown-item d-flex align-items-center service-order"
                                            data-year="{{ date('Y', strtotime('-2year')) }}">{{ date('Y', strtotime('-2year')) }}</a>
                                    </li>


                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="barServiceOrder" class="chartjs" data-height="400"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-xxl-6 col-md-6">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title mb-0">
                            <h5 class="mb-1">{{ __('admin.last_complan') }}</h5>
                            <p class="card-subtitle">{{ __('admin.last_5_complan') }}</p>
                        </div>
                    </div>
                    <div class="card-body pb-0">
                        <ul class="list-unstyled p-0 m-0">
                            @foreach ($complains as $complain)
                                <li class=" mb-5">
                                    <a href="{{ route('admin.complain.show', $complain->id) }}"
                                        class="d-flex align-items-center">
                                        <div
                                            class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                            <div class="me-2">
                                                <h6 class="mb-0">{{ $complain->user->name }}</h6>
                                                <small
                                                    class="text-body">{{ \Illuminate\Support\Str::limit($complain->message, 100) }}</small>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            @endforeach


                        </ul>
                        <a href="{{ route('admin.complain.index') }}"
                            class="d-flex justify-content-center align-items-center">
                            <div class="me-5">
                                <h6 class="self-center">{{ __('admin.view_all') }}</h6>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-xxl-6 col-md-6">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title mb-0">
                            <h5 class="mb-1">{{ __('admin.last_suggestion') }}</h5>
                            <p class="card-subtitle">{{ __('admin.last_5_suggestion') }}</p>
                        </div>
                    </div>
                    <div class="card-body pb-0">
                        <ul class="list-unstyled p-0 m-0">
                            @foreach ($suggestions as $suggestion)
                                <li class="mb-5">
                                    <a href="{{ route('admin.suggestion.show', $suggestion->id) }}"
                                        class="d-flex align-items-center">
                                        <div
                                            class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                            <div class="me-2">
                                                <h6 class="mb-0">{{ $suggestion->user->name }}</h6>
                                                <small
                                                    class="text-body">{{ \Illuminate\Support\Str::limit($suggestion->message, 100) }}</small>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                        <a href="{{ route('admin.suggestion.index') }}"
                            class="d-flex justify-content-center align-items-center">
                            <div class="me-5">
                                <h6 class="self-center">{{ __('admin.view_all') }}</h6>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Invoice table -->
            <div class="col-xxl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title mb-0">
                            <h5 class="mb-1">{{ __('admin.serviceOrder') }}</h5>
                            <p class="card-subtitle">{{ __('admin.last_10_service_order') }}</p>
                        </div>
                    </div>
                    <div class="card-datatable table-responsive">
                        <div class="table-responsive">
                            <table class="table ">
                                <thead>
                                    <tr>
                                        <th scope="col">{{ __('admin.order_id') }}</th>
                                        <th scope="col">{{ __('admin.user') }}</th>
                                        <th scope="col">{{ __('admin.service') }}</th>
                                        <th scope="col">{{ __('admin.date') }}</th>
                                        <th scope="col">{{ __('admin.time') }}</th>
                                        <th scope="col">{{ __('admin.status') }}</th>
                                        <th scope="col">{{ __('admin.action') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($orders as $order)
                                        <tr>
                                            <td>{{ $order->id }}</td>
                                            <td>{{ $order->user->name }}</td>
                                            <td>{{ $order->service->title }}</td>
                                            <td>{{ $order->date }}</td>
                                            <td>{{ $order->time }}</td>
                                            <td>{{ __('admin.service_order_status.' . $statusArr[$order->status]) }}
                                            </td>
                                            <td>
                                                <a href="{{ route('admin.service.order.show', $order->id) }}"
                                                    class="btn btn-primary"><i class="fa fa-eye"></i></a>
                                            </td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                            <a href="{{ route('admin.service.order.index') }}"
                                class="d-flex justify-content-center align-items-center">
                                <div class="me-5">
                                    <h6 class="self-center">{{ __('admin.view_all') }}</h6>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Invoice table -->
        </div>
    </div>

@endsection