@extends('layout.layout')
@section('content')
    <div class="container py-5">
        <div class="mb-3">
            <p class="fw-bold">Today And Upcoming Sessions</p>
            <hr>
        </div>
        <div class="d-flex justify-content-between align-items-center mb-3">
            <p class="fw-bold mb-0">Today Sessions</p>
            @if ($add_feedback)
                <button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#feedbackModal">
                    Add Feedback
                </button>
            @endif
        </div>
        <hr>
        @if ($todaySessions->count())
            <div class="table-responsive mb-4 text-center">
                <table class="table table-bordered table-sm mb-0">
                    <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th class="text-center">Session Date</th>
                            <th class="text-center">Start Time</th>
                            <th class="text-center">End Time</th>
                            <th class="text-center">Session Number</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($todaySessions as $index => $sessionGroup)
                            @foreach ($sessionGroup->scheduled_sessions as $session)
                                <tr>
                                    <td>{{ $loop->parent->iteration }}.{{ $loop->iteration }}</td>
                                    <td>{{ $session->session_date }}</td>
                                    <td>{{ $session->start_time }}</td>
                                    <td>{{ $session->end_time }}</td>
                                    <td>{{ $session->session_number }}</td>
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p>No sessions scheduled for today.</p>
        @endif
        {{-- === UPCOMING SESSIONS === --}}
        <div class="my-3">
            <p class="fw-bold">Upcoming Sessions</p>
            <hr>
        </div>
        @if ($upcomingSessions->count())
            <div class="table-responsive text-center">
                <table class="table table-bordered table-sm mb-0">
                    <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th class="text-center">Session Date</th>
                            <th class="text-center">Start Time</th>
                            <th class="text-center">End Time</th>
                            <th class="text-center">Session Number</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($upcomingSessions as $index => $sessionGroup)
                            @foreach ($sessionGroup->scheduled_sessions as $session)
                                <tr>
                                    <td>{{ $loop->parent->iteration }}.{{ $loop->iteration }}</td>
                                    <td>{{ $session->session_date }}</td>
                                    <td>{{ $session->start_time }}</td>
                                    <td>{{ $session->end_time }}</td>
                                    <td>{{ $session->session_number }}</td>
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p>No upcoming sessions scheduled.</p>
        @endif
    </div>
    <!-- Feedback Modal -->
    <div class="modal fade" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form action="{{ route('feedback.store') }}" method="POST">
                    @csrf

                    <div class="modal-header">
                        <h5 class="modal-title" id="feedbackModalLabel">Add Feedback</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <!-- 1. Admin's Response -->
                        <div class="mb-3">
                            <label class="form-label fw-bold">Admin's Response</label>
                            <select name="admin_response_rating" class="form-select" required>
                                <option value="">Select Rating</option>
                                <option value="1">1 - Poor</option>
                                <option value="2">2 - Fair</option>
                                <option value="3">3 - Good</option>
                                <option value="4">4 - Very Good</option>
                                <option value="5">5 - Excellent</option>
                            </select>
                            <textarea name="admin_response_comment" class="form-control mt-3" placeholder="Comment (optional)"></textarea>
                        </div>

                        <!-- 2. Quality of the Session -->
                        <div class="mb-3">
                            <label class="form-label fw-bold">Quality of the Session</label>
                            <select name="quality_rating" class="form-select" required>
                                <option value="">Select Rating</option>
                                <option value="1">1 - Poor</option>
                                <option value="2">2 - Fair</option>
                                <option value="3">3 - Good</option>
                                <option value="4">4 - Very Good</option>
                                <option value="5">5 - Excellent</option>
                            </select>
                            <textarea name="quality_comment" class="form-control mt-3" placeholder="Comment (optional)"></textarea>
                        </div>

                        <!-- 3. Benefit of the Session -->
                        <div class="mb-3">
                            <label class="form-label fw-bold">Benefit of the Session</label>
                            <select name="benefit_rating" class="form-select" required>
                                <option value="">Select Rating</option>
                                <option value="1">1 - Not Useful</option>
                                <option value="2">2 - Slightly Useful</option>
                                <option value="3">3 - Useful</option>
                                <option value="4">4 - Very Useful</option>
                                <option value="5">5 - Extremely Useful</option>
                            </select>
                            <textarea name="benefit_comment" class="form-control mt-3" placeholder="Comment (optional)"></textarea>
                        </div>

                        <!-- 4. Recommendation for Yourself -->
                        <div class="mb-3">
                            <label class="form-label fw-bold">Recommendation for Yourself</label>
                            <textarea name="recommendation" placeholder="What can you do to improve your performance in future sessions" class="form-control" required></textarea>
                        </div>

                        <!-- 5. Error Correction -->
                        <div class="mb-3">
                            <label class="form-label fw-bold">Error Correction</label>
                            <select name="error_correction_rating" class="form-select" required>
                                <option value="">Select Rating</option>
                                <option value="1">1 - Poor</option>
                                <option value="2">2 - Fair</option>
                                <option value="3">3 - Good</option>
                                <option value="4">4 - Very Good</option>
                                <option value="5">5 - Excellent</option>
                            </select>
                            <textarea name="error_correction_comment" class="form-control mt-3" placeholder="Comment (optional)"></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Submit Feedback</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection