@extends('teacher.layouts.layouts')

@section('content')
    <style>
        .form-group {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        .group-header {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
        }

        .session-item {
            position: relative;
            padding: 10px;
            border: 1px solid #ccc;
            margin-top: 10px;
            border-radius: 5px;
        }

        .info-label {
            font-weight: bold;
        }
    </style>

    <div class="mt-5 d-flex justify-content-center">
        <div class="w-50">
            <h1 class="mt-5 mb-4 text-center">Appointments for {{ $teacher->name }}</h1>

            <div class="form-group">
                <label for="curriculum">Curriculum</label>
                <p>{{ $appointment->curriculum->name ?? 'No curriculum assigned' }}</p>
            </div>

            <div class="form-group">
                <label class="group-header">Appointments</label>
                <div id="dynamic-groups-container">
                    @if ($appointment)
                        <div class="session-item">
                            <div class="row">
                                <div class="col-md-4">
                                    <p><span class="info-label">Day:</span> {{ ucfirst($appointment->day) }}</p>
                                </div>
                                <div class="col-md-4">
                                    <p><span class="info-label">Time From:</span> {{ $appointment->time_from }}</p>
                                </div>
                                <div class="col-md-4">
                                    <p><span class="info-label">Time To:</span> {{ $appointment->time_to }}</p>
                                </div>
                            </div>
                        </div>
                    @else
                        <p>No appointments available.</p>
                    @endif
                </div>
            </div>

            <a href="{{ route('teacher.appointments.index') }}" class="btn btn-primary">Go to Back</a>
        </div>
    </div>
@endsection