@extends('layout.app')
@section('title')
    {{ __('تفاصيل التقويم الذاتي') }}
@stop

@section('css')
    <style>
        @import url('https://fonts.googleapis.com/css2?family=XBRiyaz&display=swap');

        body {
            font-family: 'XBRiyaz', Sans-Serif;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: right;
            vertical-align: middle;
        }

        th {
            background-color: #f4f4f4;
            font-weight: bold;
        }

        .section-header {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            padding: 10px 0;
            background-color: #FFA500;
            color: black;
        }

        .indicator-header {
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            padding: 10px 0;
            background-color: #007BFF;
            color: white;
        }

        .paragraph-row {
            background-color: #fff;
        }

        .table-header {
            background-color: #f4f4f4;
            color: black;
            font-weight: bold;
        }

        .file-upload {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #007BFF;
            color: white;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 5px;
        }

        .file-upload input[type="file"] {
            display: none;
        }

        .file-upload span {
            margin-left: 10px;
        }

        .uploaded-file {
            margin-top: 10px;
        }

        .upload-success {
            margin-top: 10px;
            color: green;
        }

        .school-details {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }

        .school-details img {
            height: 120px;
        }

        .school-details .ministry-logo {
            position: absolute;
            top: 0;
            right: 0;
        }

        .school-details .vision-logo {
            position: absolute;
            top: 0;
            left: 0;
        }

        .school-details .school-logo {
            margin-top: 20px;
        }

        .school-details .school-info {
            margin-top: 140px;
            font-size: 18px;
        }

        .school-details .school-info h2 {
            font-size: 24px;
            font-weight: bold;
        }

        .school-details .school-info h3,
        .school-details .school-info h4 {
            font-size: 20px;
            font-weight: bold;
        }

        .school-details .school-info p {
            font-size: 18px;
        }

        .chart-container {
            width: 100%;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .chart-card {
            border-radius: 5px;
            padding: 20px;
            margin: 20px;
            text-align: center;
            width: 250px;
            position: relative;
        }

        .chart-title {
            font-size: 16px;
            font-weight: bold;
            margin-top: 10px;
            color: #ffffff;
        }

        .chart-title-bg {
            background-color: #4a287e;
            padding: 10px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            margin: -20px -20px 20px -20px;
            color: #ffffff;
        }

        .chart-score {
            background-color: #4a287e;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            color: #ffffff;
        }

        .toggle-button {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }

        .btn-upload {
            background-color: #007BFF;
            color: white;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            border: none;
            outline: none;
            margin-bottom: 5px;
        }

        .btn-upload.success {
            background-color: green;
        }

        .btn-upload small {
            font-size: 12px;
        }
    </style>
@stop

@section('content')
    <div class="content-wrapper">
        <div class="content-body">
            <section class="app-user-edit">
                {{-- <x-alert /> --}}
                <div class="card">
                    <div class="card-body invoice-padding">
                        <div class="school-details">
                            <img src="{{ asset('storage/' . $settings->pdf_super_logo) }}" alt="شعار وزارة التربية والتعليم"
                                class="ministry-logo">
                            <img src="{{ asset('storage/' . $settings->pdf_vision_logo) }}" alt="شعار الرؤية"
                                class="vision-logo">
                            <img class="school-logo">
                        </div>
                        <div class="invoice-spacing mt-0">
                            <div class="row justify-content-between pb-2 align-items-center">
                                <div class="col-md-6 col-sm-6">
                                    {{-- <h5>{{ $settings->pdf_ministry_title ?? '' }}</h5>
                                    <h2>{{ $settings->pdf_manager_title ?? '' }}</h2>
                                    <h4>{{ $settings->pdf_office_title }}</h4> --}}
                                    <h2>{{ $settings->title }}</h2>
                                    <h3>{{ $selfcalender->name }}</h3>
                                </div>
                                <div class="col-md-6 text-md-right col-sm-6">
                                    <a href="{{ route('selfcalender.pdf', $selfcalender->id) }}" class="btn btn-primary"
                                        target="__blank">تصدير PDF</a>
                                </div>
                            </div>
                            <div class="row mt-50">
                                <div class="col-md-12">
                                    <div class="row-content" style="font-size: 16px;">
                                        {!! $selfcalender->discription !!}
                                    </div>
                                </div>
                                <div class="col-md-12" style="font-size: 16px;">
                                    <div class="row-title">
                                        <h3>{{ $selfcalender->date }}</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- الرسوم البيانية للمجالات والمعايير -->
                <div class="card">
                    <div class="card-body invoice-padding pb-0">
                        <div class="invoice-spacing mt-0 chart-container">
                            @php
                                $colors = [
                                    '#007BFF',
                                    '#28A745',
                                    '#FFC107',
                                    '#DC3545',
                                    '#6C757D',
                                    '#17A2B8',
                                    '#6610F2',
                                    '#E83E8C',
                                ];
                                $colorIndex = 0;
                            @endphp
                            @foreach ($departments as $department)
                                @php
                                    $departmentStandards = [];
                                    $totalDepartmentScore = 0;
                                    $totalStandards = $department->standards->count();
                                    foreach ($department->standards as $standard) {
                                        $totalIndicatorScore = 0;
                                        $totalIndicators = $standard->indicators->count();
                                        foreach ($standard->indicators as $indicator) {
                                            $totalScore = 0;
                                            $totalParagraphs = $indicator->paragraphs->count();
                                            foreach ($indicator->paragraphs as $paragraph) {
                                                $totalRequirementScore = 0;
                                                $requirementCount = count($paragraph->requirements ?? []);
                                                foreach ($paragraph->requirements ?? [] as $requirement) {
                                                    $document = $paragraph->files
                                                        ->where('school_id', auth()->user()->school_id)
                                                        ->where('requirement_id', $requirement->id)
                                                        ->first();
                                                    $totalRequirementScore += $document ? 4 : 0;
                                                }
                                                $paragraphScore =
                                                    $requirementCount > 0
                                                        ? $totalRequirementScore / $requirementCount
                                                        : 0;
                                                $totalScore += $paragraphScore;
                                            }
                                            $indicatorScore = $totalParagraphs > 0 ? $totalScore / $totalParagraphs : 0;
                                            $totalIndicatorScore += $indicatorScore;
                                        }
                                        $standardScore =
                                            $totalIndicators > 0 ? $totalIndicatorScore / $totalIndicators : 0;
                                        $departmentStandards[] = [
                                            'name' => $standard->standard_name,
                                            'score' => $standardScore,
                                        ];
                                        $totalDepartmentScore += $standardScore;
                                    }
                                    $departmentScore =
                                        $totalStandards > 0 ? $totalDepartmentScore / $totalStandards : 0;
                                @endphp
                                <div class="chart-card">
                                    <div class="chart-title-bg">
                                        <span>{{ $department->name }}</span>
                                    </div>
                                    <canvas id="department-chart-{{ $department->id }}"></canvas>
                                    <div class="chart-score">درجة المجال: {{ number_format($departmentScore, 2) }} / 4</div>
                                </div>
                                @php
                                    $colorIndex = ($colorIndex + 1) % count($colors);
                                @endphp
                            @endforeach
                        </div>
                        <div>&nbsp;</div>
                    </div>
                </div>

                <!-- الجدول الرئيسي للبيانات التفصيلية -->
                <div class="card">
                    <div class="card-body invoice-padding pb-0">
                        <div class="invoice-spacing mt-0">
                            <div class="row">
                                @php
                                    $id = 1;
                                @endphp
                                <div class="col-md-12 mb-2">
                                    @foreach ($departments as $department)
                                        @foreach ($department->standards as $standard)
                                            <div class="section-header">{{ $department->name }}:
                                                {{ $standard->standard_name }}</div>
                                            @php
                                                $totalStandardScore = 0;
                                                $totalIndicators = $standard->indicators->count();
                                            @endphp
                                            @foreach ($standard->indicators as $indicator)
                                                @php
                                                    $totalIndicatorScore = 0;
                                                    $totalParagraphs = $indicator->paragraphs->count();
                                                @endphp
                                                <table class="table">
                                                    <thead>
                                                        <tr class="indicator-header">
                                                            <th colspan="100%"
                                                                style="background-color: #007BFF; color: white;">
                                                                {{ $id++ }} - {{ $indicator->name }}
                                                                @php
                                                                    $totalScore = 0;
                                                                @endphp
                                                                @foreach ($indicator->paragraphs as $paragraph)
                                                                    @php
                                                                        $totalRequirementScore = 0;
                                                                        $requirementCount = count(
                                                                            $paragraph->requirements ?? [],
                                                                        );
                                                                        foreach (
                                                                            $paragraph->requirements ?? []
                                                                            as $requirement
                                                                        ) {
                                                                            $document = $paragraph->files
                                                                                ->where(
                                                                                    'school_id',
                                                                                    auth()->user()->school_id,
                                                                                )
                                                                                ->where(
                                                                                    'requirement_id',
                                                                                    $requirement->id,
                                                                                )
                                                                                ->first();
                                                                            $totalRequirementScore += $document ? 4 : 0;
                                                                        }
                                                                        $paragraphScore =
                                                                            $requirementCount > 0
                                                                                ? $totalRequirementScore /
                                                                                    $requirementCount
                                                                                : 0;
                                                                        $totalScore += $paragraphScore;
                                                                    @endphp
                                                                @endforeach
                                                                @php
                                                                    $indicatorScore =
                                                                        $totalParagraphs > 0
                                                                            ? $totalScore / $totalParagraphs
                                                                            : 0;
                                                                    $totalStandardScore += $indicatorScore;
                                                                @endphp
                                                                <span style="font-weight: normal; font-size: 14px;">(درجة
                                                                    المؤشر: {{ number_format($indicatorScore, 2) }} /
                                                                    4)</span>
                                                            </th>
                                                        </tr>
                                                        <tr class="table-header">
                                                            <th>الفقرة</th>
                                                            @foreach ($paragraph->requirements ?? [] as $requirement)
                                                                <th></th>
                                                            @endforeach
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($indicator->paragraphs as $paragraph)
                                                            <tr class="paragraph-row">
                                                                <td>{{ $paragraph->id }} - {{ $paragraph->name }}</td>
                                                                @foreach ($paragraph->requirements ?? [] as $requirement)
                                                                    <td>
                                                                        @php
                                                                            $document = $paragraph->files
                                                                                ->where(
                                                                                    'school_id',
                                                                                    auth()->user()->school_id,
                                                                                )
                                                                                ->where(
                                                                                    'requirement_id',
                                                                                    $requirement->id,
                                                                                )
                                                                                ->first();
                                                                        @endphp
                                                                        @if ($document)
                                                                            <div class="uploaded-file">
                                                                                <a href="{{ asset('storage/' . $document->file) }}"
                                                                                    target="_blank">عرض الوثيقة</a>
                                                                            </div>
                                                                            <div class="upload-success">
                                                                                <span>✔ تم الرفع بنجاح -
                                                                                    {{ $requirement->requirement }}</span>
                                                                            </div>
                                                                        @else
                                                                            <button class="btn-upload"
                                                                                data-paragraph-id="{{ $paragraph->id }}"
                                                                                data-requirement-id="{{ $requirement->id }}">{{ $requirement->requirement }}</button>
                                                                            <input type="file" name="documents"
                                                                                class="document-upload"
                                                                                style="display: none;"
                                                                                data-paragraph-id="{{ $paragraph->id }}"
                                                                                data-requirement-id="{{ $requirement->id }}">
                                                                            <div class="upload-success"
                                                                                style="display: none;">
                                                                                <span>✔ تم الرفع بنجاح -
                                                                                    {{ $requirement->requirement }}</span>
                                                                            </div>
                                                                            <div class="uploaded-file"
                                                                                style="display: none;">
                                                                                <a href="" target="_blank">عرض
                                                                                    الوثيقة</a>
                                                                            </div>
                                                                        @endif
                                                                    </td>
                                                                @endforeach
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            @endforeach
                                            {{-- <div style="font-weight: normal; font-size: 14px;">(درجة المعيار: {{ number_format($totalStandardScore / $totalIndicators, 2) }} / 4)</div> --}}
                                        @endforeach
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const colors = ['#007BFF', '#28A745', '#FFC107', '#DC3545', '#6C757D', '#17A2B8', '#6610F2', '#E83E8C'];
            let colorIndex = 0;

            @foreach ($departments as $department)
                var ctx = document.getElementById('department-chart-{{ $department->id }}').getContext('2d');
                var departmentStandards = @json(
                    $department->standards->map(function ($standard) {
                        $totalIndicatorScore = 0;
                        $totalIndicators = $standard->indicators->count();
                        foreach ($standard->indicators as $indicator) {
                            $totalScore = 0;
                            $totalParagraphs = $indicator->paragraphs->count();
                            foreach ($indicator->paragraphs as $paragraph) {
                                $documentExists = $paragraph->files->where('school_id', auth()->user()->school_id)->first() ? 1 : 0;
                                $score = $documentExists ? 4 : 0;
                                $totalScore += $score;
                            }
                            $indicatorScore = $totalParagraphs > 0 ? $totalScore / $totalParagraphs : 0;
                            $totalIndicatorScore += $indicatorScore;
                        }
                        $standardScore = $totalIndicators > 0 ? $totalIndicatorScore / $totalIndicators : 0;
                        return [
                            'name' => $standard->standard_name,
                            'score' => $standardScore,
                        ];
                    }));
                var standardNames = departmentStandards.map(function(standard) {
                    return standard.name;
                });
                var standardScores = departmentStandards.map(function(standard) {
                    return standard.score;
                });

                new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        labels: standardNames,
                        datasets: [{
                            data: standardScores,
                            backgroundColor: standardNames.length === 1 ? ['#4a287e', '#6C757D'] :
                                colors.slice(0, standardNames.length),
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                display: true,
                                position: 'bottom',
                                labels: {
                                    font: {
                                        family: 'XBRiyaz',
                                    }
                                }
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return context.raw + ' / 4';
                                    }
                                }
                            }
                        },
                        cutout: '70%'
                    }
                });
                colorIndex = (colorIndex + 1) % colors.length;
            @endforeach

            document.querySelectorAll('.btn-upload').forEach(function(button) {
                button.addEventListener('click', function() {
                    const input = button.nextElementSibling;
                    input.click();
                });
            });

            document.querySelectorAll('.document-upload').forEach(function(input) {
                input.addEventListener('change', function() {
                    const formData = new FormData();
                    formData.append('documents', this.files[0]);
                    formData.append('paragraphs_id', this.getAttribute('data-paragraph-id'));
                    formData.append('requirement_id', this.getAttribute('data-requirement-id'));
                    formData.append('_token', '{{ csrf_token() }}');

                    fetch('{{ route('documents.upload') }}', {
                            method: 'POST',
                            body: formData,
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                const uploadContainer = this.closest('td');
                                const uploadButton = uploadContainer.querySelector(
                                    '.btn-upload');
                                uploadButton.classList.add('success');
                                uploadButton.textContent = 'تم رفع ' + this.getAttribute(
                                    'data-requirement-id');
                                const uploadSuccess = uploadContainer.querySelector(
                                    '.upload-success');
                                const uploadedFile = uploadContainer.querySelector(
                                    '.uploaded-file');
                                uploadSuccess.style.display = 'block';
                                uploadedFile.style.display = 'block';
                                uploadedFile.querySelector('a').setAttribute('href',
                                    '{{ asset('storage/') }}/' + data.file);
                            }
                        })
                        .catch(error => console.error('Error:', error));
                });
            });
        });
    </script>
@stop