@extends('website.layouts.master')

@section('title') أبنائي @endsection

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/@fullcalendar/core/main.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid/main.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid/main.css" rel="stylesheet" />
    @component('website.common-components.breadcrumb')
        @slot('title')  أبنائي   @endslot
        @slot('li_1') Pages  @endslot
    @endcomponent
    <!-- Start Card Style -->
    <div class="rbt-dashboard-area  rbt-section-gapBottom">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- Start Dashboard Top  -->

                    <!-- End Dashboard Top  -->

                    <div class="row g-5">

                        @component('website.parents.common-components.student-sidebar')
                        @endcomponent
                            <div class="col-lg-9">
                                @if(session('success'))
                                    <div class="alert alert-success">{{ session('success') }}</div>
                                @endif
                                @if(session('error'))
                                    <div class="alert alert-danger">{{ session('error') }}</div>
                                @endif


                                <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--60">
                                    <div class="content">
                                        <div class="section-title">
                                            <h4 class="rbt-title-style-3"> التواصل مع الإدارة</h4>

                                        </div>
                                        <nav class="mb-2">
                                            <div class="nav nav-tabs justify-content-center" id="nav-tab" role="tablist">
                                                <button class="nav-link active" id="nav-profile-tab" data-bs-toggle="tab"
                                                        data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="true">رسائل الادارة</button>
                                                <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab"
                                                        data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">تواصل مع الإدارة</button>
                                                {{--                                                <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab"--}}
                                                {{--                                                        data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">الانذارات</button>--}}
                                            </div>
                                        </nav>
                                        <div class="tab-content" id="nav-tabContent">

                                            <div class="tab-pane fade show active" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">

                                                @if($complaints->isEmpty())
                                                    <p class="text-center text-muted">لا توجد شكاوى حتى الآن.</p>
                                                @else
                                                    <div class="table-responsive">
                                                        <table class="table table-bordered text-center align-middle">
                                                            <thead class="table-light">
                                                            <tr>
                                                                <th>#</th>
                                                                <th>الموضوع</th>
                                                                <th>تاريخ الإرسال</th>
                                                                <th>الطالب</th>
                                                                <th>الحالة</th>
                                                                <th>الرد الإداري</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            @foreach($complaints as $index => $complaint)
                                                                <tr>
                                                                    <td>{{ $index + 1 }}</td>
                                                                    <td class="text-start">{{ $complaint->subject }}</td>
                                                                    <td>{{ $complaint->created_at->format('Y-m-d') }}</td>
                                                                    <td>{{ $complaint->student?->name }}  </td>
                                                                    <td>
                                                                        @if($complaint->status === 'pending')
                                                                            <span class="badge bg-warning text-dark">قيد المراجعة</span>
                                                                        @elseif($complaint->status === 'replied')
                                                                            <span class="badge bg-success">تم الرد</span>
                                                                        @else
                                                                            <span class="badge bg-secondary">مغلقة</span>
                                                                        @endif
                                                                    </td>
                                                                    <td class="text-start">
                                                                        @if($complaint->admin_reply)
                                                                            <div class="p-2 bg-light border rounded text-success">
                                                                                {{ $complaint->admin_reply }}
                                                                            </div>
                                                                        @else
                                                                            <span class="text-muted">لم يتم الرد بعد</span>
                                                                        @endif
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                                                <form action="{{ route('parent.complaints.store') }}" method="POST">
                                                    @csrf
                                                    <div class="mb-3">
                                                        <label>الطالب</label>
                                                        <select name="student_id" class="">
                                                            <option value="">بدون تحديد</option>
                                                            @foreach($students as $student)
                                                                <option value="{{ $student->id }}">{{ $student->name }} </option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label>الموضوع</label>
                                                        <input type="text" name="subject" class="form-control" required>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label>الرسالة</label>
                                                        <textarea name="message" class="" rows="5" required></textarea>
                                                    </div>

                                                    <button class="rbt-btn">إرسال</button>
                                                </form>
                                            </div>
                                        </div>
                                        <style>
                                            /* Tabs container */
                                            .nav-tabs {
                                                border-bottom: 2px solid #dee2e6;
                                                gap: 10px;
                                            }

                                            /* Tab buttons */
                                            .nav-tabs .nav-link {
                                                border: none;
                                                border-bottom: 3px solid transparent;
                                                padding: 12px 20px;
                                                color: #495057;
                                                font-weight: 500;
                                                transition: all 0.3s ease;
                                                background-color: #f8f9fa;
                                                border-radius: 0;
                                            }

                                            /* Hover effect */
                                            .nav-tabs .nav-link:hover {
                                                border-color: #0d6efd;
                                                color: #0d6efd;
                                                background-color: #e9ecef;
                                            }

                                            /* Active tab */
                                            .nav-tabs .nav-link.active {
                                                border-color: #0d6efd;
                                                color: #0d6efd;
                                                background-color: #fff;
                                                font-weight: 600;
                                            }

                                            /* Card header styling */




                                            /* Badges */
                                            .badge {
                                                font-size: 0.85rem;
                                                padding: 0.5em 0.75em;
                                            }

                                            /* Responsive tweaks */
                                            @media (max-width: 768px) {
                                                .nav-tabs {
                                                    flex-direction: column;
                                                    align-items: stretch;
                                                }
                                                .nav-tabs .nav-link {
                                                    text-align: center;
                                                    border-left: 3px solid transparent;
                                                    border-bottom: none;
                                                }
                                                .nav-tabs .nav-link.active {
                                                    border-left: 3px solid #0d6efd;
                                                    border-bottom: none;
                                                }
                                            }
                                        </style>







                                    </div>
                                </div>

                            </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .fc-scroller{
            overflow: hidden!important;
        }
    </style>
    <!-- End Card Style -->
    <div class="rbt-separator-mid">
        <div class="container">
            <hr class="rbt-separator m-0">
        </div>
    </div>


@endsection

@section('script')

@endsection