@extends('admin.layouts.admin')
<style>
    .chart-container {
        position: relative;
        height: 180px;
    }

    /* تنسيق FullCalendar للغة العربية */
    #calendar {
        direction: rtl;
        font-family: 'Cairo', sans-serif;
    }

    .fc-toolbar-title {
        font-size: 1.2em;
        font-weight: bold;
    }

    .fc-event {
        background-color: #007bff;
        border-color: #007bff;
        color: white;
        border-radius: 4px;
    }

    .fc-event:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

    .fc-daygrid-event {
        padding: 2px 4px;
        margin: 1px 0;
    }
</style>

<!-- FullCalendar CSS -->
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css' rel='stylesheet' />

@section('content')
    @can('read_admin_statistics')
        <div class="main-side">
            <div class="main-title">
                <div class="small">
                    الرئيسية
                </div>
                <div class="large">
                    لوحة التحكم
                </div>
            </div>
            <div class="row g-3 mb-5">
                <div class="col-12 col-md-12 col-lg-5">
                    <div class="box-content-white">
                        <div class="row">
                            <div class="col-12 col-md-12">
                                <!-- FullCalendar -->
                                <div id="calendar" style="height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-12 col-lg-7">
                    <div class="row g-3 mb-3">
                        @can('read_clients')
                            <div class="col-12 col-md-6 col-xl-4">
                                <div class="box-data box-blue">
                                    <div class="bar-name">
                                        <h5 class="name">كل العملاء</h5>
                                        <div class="box-icon">
                                            <img src="{{ asset('admin-asset/img') }}/icons/user-groub.png" alt="icon">
                                        </div>
                                    </div>
                                    <h4 class="amount">{{ \App\Models\Client::count() }}</h4>
                                    <a href="{{ route('admin.clients') }}" class="more">
                                        المزيد من المعلومات
                                        <img src="{{ asset('admin-asset/img') }}/icons/arrow.svg" alt="arrow icon">
                                    </a>
                                </div>
                            </div>
                        @endcan
                        @can('read_program')
                            <div class="col-12 col-md-6 col-xl-4">
                                <div class="box-data box-orange">
                                    <div class="bar-name">
                                        <h5 class="name">كل الخدمات</h5>
                                        <div class="box-icon">
                                            <i class="fa-solid fa-bars-progress"></i>
                                        </div>
                                    </div>
                                    <h4 class="amount">{{ \App\Models\Program::count() }}</h4>
                                    <a href="{{ route('admin.programs') }}" class="more">
                                        المزيد من المعلومات
                                        <img src="{{ asset('admin-asset/img') }}/icons/arrow.svg" alt="arrow icon">
                                    </a>
                                </div>
                            </div>
                        @endcan
                        @can('read_tasks')
                            <div class="col-12 col-md-6 col-xl-4">
                                <div class="box-data box-blue position-relative overflow-hidden">
                                    <div class="bar-name d-flex justify-content-between align-items-center">
                                        <h5 class="name mb-0">كل المهام</h5>
                                        <div class="box-icon">
                                            <i class="fas fa-tasks"></i>
                                        </div>
                                    </div>

                                    <h2 class="amount my-3 fw-bold text-center">{{ \App\Models\Task::count() }}</h2>

                                    <a href="{{ route('admin.tasks') }}"
                                        class="more d-flex align-items-center justify-content-between">
                                        المزيد من المعلومات
                                        <img src="{{ asset('admin-asset/img') }}/icons/arrow.svg" alt="arrow icon">
                                    </a>
                                </div>
                            </div>
                        @endcan
                        @can('read_reminders')
                            <!-- التذكيرات -->
                            <div class="col-12 col-md-6 col-xl-4">
                                <div class="box-data box-green">
                                    <div class="bar-name">
                                        <h5 class="name">التذكيرات</h5>
                                        <div class="box-icon">
                                            <i class="fas fa-bell"></i>
                                        </div>
                                    </div>
                                    <h4 class="amount">{{ \App\Models\Reminder::count() }}</h4>
                                    <a href="{{ route('admin.reminders') }}" class="more">
                                        المزيد من المعلومات
                                        <img src="{{ asset('admin-asset/img') }}/icons/arrow.svg" alt="arrow icon">
                                    </a>
                                </div>
                            </div>
                        @endcan
                        @can('read_users')
                            <!-- الموظفين -->
                            <div class="col-12 col-md-6 col-xl-4">
                                <div class="box-data box-red">
                                    <div class="bar-name">
                                        <h5 class="name">الموظفين</h5>
                                        <div class="box-icon">
                                            <i class="fas fa-users"></i>
                                        </div>
                                    </div>
                                    <h4 class="amount">{{ \App\Models\User::count() }}</h4>
                                    <a href="{{ route('admin.users') }}" class="more">
                                        المزيد من المعلومات
                                        <img src="{{ asset('admin-asset/img') }}/icons/arrow.svg" alt="arrow icon">
                                    </a>
                                </div>
                            </div>
                        @endcan
                        @can('read_projects')
                            <!-- المشاريع -->
                            <div class="col-12 col-md-6 col-xl-4">
                                <div class="box-data box-yellow">
                                    <div class="bar-name">
                                        <h5 class="name">المشاريع</h5>
                                        <div class="box-icon">
                                            <i class="fas fa-project-diagram"></i>
                                        </div>
                                    </div>
                                    <h4 class="amount">{{ \App\Models\Project::count() }}</h4>
                                    <a href="{{ route('admin.projects') }}" class="more">
                                        المزيد من المعلومات
                                        <img src="{{ asset('admin-asset/img') }}/icons/arrow.svg" alt="arrow icon">
                                    </a>
                                </div>
                            </div>
                        @endcan
                    </div>
                    <div class="content_view p-2">
                        <div class="row g-3">
                            @can('read_clients')
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="chart-container">
                                        <canvas id="clientsChart"></canvas>
                                    </div>
                                </div>
                            @endcan
                            @can('read_tasks')
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="chart-container">
                                        <canvas id="tasksChart"></canvas>
                                    </div>
                                </div>
                            @endcan
                            @can('read_projects')
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="chart-container">
                                        <canvas id="projectsChart"></canvas>
                                    </div>
                                </div>
                            @endcan
                        </div>
                    </div>
                </div>
                @can('read_reminders')
                    <div class="col-12">
                        <nav class="nav nav-tabs d-flex flex-wrap gap-2 align-items-center" id="nav-tab" role="tablist">
                            <button class="main-head btn-head active" id="nav-todayAlert-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-todayAlert" type="button" role="tab" aria-controls="nav-todayAlert"
                                aria-selected="true">
                                تذكيرات اليوم
                                <span class="badge-head">{{ $remindersTodayCount }}</span>
                            </button>
                            <button class="main-head btn-head" id="nav-tomorrowAlert-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-tomorrowAlert" type="button" role="tab"
                                aria-controls="nav-tomorrowAlert" aria-selected="false">
                                تذكيرات الغد
                                <span class="badge-head">{{ $remindersTomorrowCount }}</span>
                            </button>
                        </nav>
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-todayAlert" role="tabpanel"
                                aria-labelledby="nav-todayAlert-tab">
                                <div class="content-head">
                                    <div class="table-responsive">
                                        <table class="main-table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>العميل</th>
                                                    <th>الخدمة</th>
                                                    <th>العنوان</th>
                                                    <th>تاريخ الاضافه</th>
                                                    <th>تاريخ التذكير</th>
                                                    <th>التذكير القادم</th>
                                                    <th>الاجراء المتخذ</th>
                                                    <th>العمليات</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($remindersToday as $index => $reminder)
                                                    <tr>
                                                        <td>{{ $index + 1 }}</td>
                                                        <td>{{ $reminder->client->name }}</td>
                                                        <td>{{ $reminder->program?->name }}</td>
                                                        <td>{{ $reminder->title }}</td>
                                                        <td>{{ $reminder->created_at->format('Y-m-d') }}</td>
                                                        <td>{{ \Carbon\Carbon::parse($reminder->remind_at)->format('Y-m-d') }}
                                                        </td>
                                                        <td>{{ \Carbon\Carbon::parse($reminder->next_reminder)->format('Y-m-d') }}
                                                        </td>
                                                        <td>{{ $reminder->action }}</td>
                                                        <td>
                                                            <a href="{{ route('admin.clients.show', $reminder->client->id) }}"
                                                                class="btn-light-purple fs-12px">
                                                                <i class="fas fa-link"></i> صفحة العميل
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="22" class="text-center">لا توجد تذكيرات اليوم</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>

                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-tomorrowAlert" role="tabpanel"
                                aria-labelledby="nav-tomorrowAlert-tab">
                                <div class="content-head">
                                    <div class="table-responsive">
                                        <table class="main-table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>العميل</th>
                                                    <th>الخدمة</th>
                                                    <th>العنوان</th>
                                                    <th>تاريخ الاضافه</th>
                                                    <th>تاريخ التذكير</th>
                                                    <th>التذكير القادم</th>
                                                    <th>الاجراء المتخذ</th>
                                                    <th>العمليات</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($remindersTomorrow as $index => $reminder)
                                                    <tr>
                                                        <td>{{ $index + 1 }}</td>
                                                        <td>{{ $reminder->client->name }}</td>
                                                        <td>{{ $reminder->program?->name }}</td>
                                                        <td>{{ $reminder->title }}</td>
                                                        <td>{{ $reminder->created_at->format('Y-m-d') }}</td>
                                                        <td>{{ \Carbon\Carbon::parse($reminder->remind_at)->format('Y-m-d') }}
                                                        </td>
                                                        <td>{{ \Carbon\Carbon::parse($reminder->next_reminder)->format('Y-m-d') }}
                                                        </td>
                                                        <td>{{ $reminder->action }}</td>
                                                        <td>
                                                            <a href="{{ route('admin.clients.show', $reminder->client->id) }}"
                                                                class="btn-light-purple fs-12px">
                                                                <i class="fas fa-link"></i> صفحة العميل
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="22" class="text-center">لا توجد تذكيرات للغد</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>

                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endcan
            </div>
        </div>
    @endcan
@endsection

<!-- FullCalendar JS -->
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // إعداد FullCalendar
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'ar', // اللغة العربية
            direction: 'rtl', // من اليمين لليسار
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            buttonText: {
                today: 'اليوم',
                month: 'شهر',
                week: 'أسبوع',
                day: 'يوم'
            },
            initialView: 'dayGridMonth',
            height: 'auto',
            editable: false, // منع التحرير
            selectable: false, // منع التحديد
            selectMirror: false,
            eventDisplay: 'block',
            dayMaxEvents: true,
            eventTextColor: '#ffffff',

            // تحميل الأحداث من Laravel API
            events: function(fetchInfo, successCallback, failureCallback) {
                fetch('{{ route('reminders.json') }}')
                    .then(response => response.json())
                    .then(data => {
                        // تحويل البيانات لتتوافق مع FullCalendar
                        const events = data.map(event => ({
                            id: event.id,
                            title: event.title,
                            start: event.start,
                            end: event.end,
                            backgroundColor: event.backgroundColor || '#007bff',
                            borderColor: event.borderColor || '#007bff',
                            extendedProps: {
                                client: event.client,
                                program: event.program,
                                action: event.action
                            }
                        }));
                        successCallback(events);
                    })
                    .catch(error => {
                        console.error('Error loading events:', error);
                        failureCallback(error);
                    });
            },


            eventClick: function(info) {
                info.jsEvent.preventDefault();

                const event = info.event;
                const props = event.extendedProps;

                let details = `العنوان: ${event.title}\n`;
                details += `التاريخ: ${event.start.toLocaleDateString('ar-SA')}\n`;
                if (props.client) details += `العميل: ${props.client}\n`;
                if (props.program) details += `الخدمة: ${props.program}\n`;
                if (props.action) details += `الإجراء: ${props.action}`;

                alert(details);
            },

            eventDragStart: function(info) {
                info.jsEvent.preventDefault();
                return false;
            },

            eventResizeStart: function(info) {
                info.jsEvent.preventDefault();
                return false;
            }
        });

        calendar.render();
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // إعدادات عامة للرسوم البيانية
        Chart.defaults.font.family = "Cairo, sans-serif";
        Chart.defaults.font.size = 12;

        // دائرة العملاء
        const clientsCtx = document.getElementById('clientsChart').getContext('2d');
        new Chart(clientsCtx, {
            type: 'doughnut',
            data: {
                labels: ['عملاء محتملين', 'عملاء مهتمين', 'غير مهتمين', 'عملاء حقيقين'],
                datasets: [{
                    data: @json($clientData),
                    backgroundColor: [
                        '#4facfe',
                        '#a8e6cf',
                        '#ffb3ba',
                        '#ff677d'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 11,
                            font: {
                                size: 12
                            }
                        }
                    }
                },
                cutout: '50%'
            }
        });

        // دائرة المهام
        const tasksCtx = document.getElementById('tasksChart').getContext('2d');
        new Chart(tasksCtx, {
            type: 'doughnut',
            data: {
                labels: ['مكتملة', 'قيد التنفيذ', 'معلقة'],
                datasets: [{
                    data: @json($tasksData),

                    backgroundColor: [
                        '#4ecdc4',
                        '#45b7d1',
                        '#f9ca24'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 11,
                            font: {
                                size: 12
                            }
                        }
                    }
                },
                cutout: '50%'
            }
        });

        // دائرة المشاريع
        const projectsCtx = document.getElementById('projectsChart').getContext('2d');
        new Chart(projectsCtx, {
            type: 'doughnut',
            data: {
                labels: ['مشاريع نشطة', 'مكتملة', 'مؤجلة'],
                datasets: [{
                    data: @json($projectsData),
                    backgroundColor: [
                        '#ff6b6b',
                        '#feca57',
                        '#ff9ff3'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 11,
                            font: {
                                size: 12
                            }
                        }
                    }
                },
                cutout: '50%'
            }
        });
    });
</script>