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

@section('css')
    <style>
        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;
        }
    </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="invoice-spacing mt-0">
                            <div class="row justify-content-between pb-2 align-items-center">
                                <div class="col-md-6 col-sm-6">
                                    <h2 class="text-primary invoice-logo">{{ $selfcalender->name }}</h2>
                                </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">العام الدراسي : {{ $selfcalender->date }} </div>
                                </div>
                            </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>
                                                @foreach ($standard->indicators as $indicator)
                                                    <table class="table">
                                                        <thead>
                                                            <tr class="indicator-header">
                                                                <th colspan="2"
                                                                    style="background-color: #007BFF; color: white;">
                                                                    {{ $id++ }} - {{ $indicator->name }}
                                                                </th>
                                                            </tr>
                                                            <tr class="table-header">
                                                                <th>الفقرة</th>
                                                                <th>الوثائق</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($indicator->paragraphs as $paragraph)
                                                                <tr class="paragraph-row">
                                                                    <td>{{ $paragraph->id }} - {{ $paragraph->name }}</td>
                                                                    <td>{{ $paragraph->documents }}</td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                @endforeach
                                            @endforeach
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </section>
        </div>
    </div>
@stop