@extends('teacher.layouts.layouts')

@section('content')
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

        body {
            font-family: 'Roboto', sans-serif;
        }

        .custom-mt {
            margin-top: 5rem;
        }

        .profile-img {
            width: 150px;
            height: 150px;
            border-radius: 15px;
            object-fit: cover;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .card-custom {
            border: none;
            border-radius: 10px;
            background-color: #f8f9fa;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .card-body-custom {
            padding: 2rem;
            background-color: #ffffff;
            border-radius: 10px;
        }

        .btn-edit {
            border-radius: 10px;
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            border: none;
            transition: background-color 0.3s ease;
        }

        .btn-edit:hover {
            background-color: #218838;
        }

        .accordion-button {
            background-color: #343a40;
            color: white;
            font-size: 1rem;
            font-weight: bold;
            padding: 10px;
            border-radius: 5px;
            border: none;
            transition: background-color 0.3s ease;
        }

        .accordion-button:hover {
            background-color: #495057;
        }

        .accordion-button.collapsed {
            background-color: #6c757d;
            color: white;
        }

        .accordion-item {
            border: none;
            margin-bottom: 10px;
            border-radius: 5px;
            overflow: hidden;
            background-color: #f8f9fa;
        }

        .accordion-body {
            background-color: #e9ecef;
            color: #212529;
            padding: 20px;
            border-left: 5px solid #343a40;
            border-radius: 0 0 10px 10px;
        }

        .accordion-body h5 {
            color: #343a40;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }

        .accordion-body ul {
            list-style-type: none;
            padding-left: 0;
        }

        .accordion-body ul li {
            padding: 8px 0;
            font-size: 1rem;
        }

        .accordion-body ul li::before {
            content: "•";
            color: #343a40;
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }

        h3.section-title {
            color: #343a40;
            font-weight: bold;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-container {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
            max-width: 900px;
            margin: auto;
        }

        .form-header {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 25px;
            text-align: center;
            color: #333;
        }

        .card {
            border: none;
            border-radius: 8px;
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            background-color: #007bff;
            color: #fff;
            border-bottom: none;
            border-radius: 8px 8px 0 0;
        }

        .card-body {
            padding: 20px;
        }

        .teacher-details-card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .teacher-details-card .row {
            margin: 0;
        }

        .teacher-details-card .col-md-6 {
            padding: 0 15px;
        }

        .teacher-details-card p {
            margin-bottom: 12px;
            font-size: 16px;
            color: #333;
        }

        .teacher-details-card strong {
            color: #007bff;
            font-weight: 600;
        }

        .teacher-details-card .email {
            color: #007bff;
        }

        .teacher-details-card .age {
            color: #6c757d;
        }

        .teacher-details-card .phone {
            color: #28a745;
        }

        .teacher-details-card .address {
            color: #343a40;
        }

        .btn-info {
            background-color: #007bff;
            border-color: #007bff;
            padding: 12px 24px;
            font-size: 18px;
            border-radius: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #fff;
            text-decoration: none;
        }

        .btn-info:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }

        .form-section {
            margin-bottom: 40px;
        }

        .form-section h5 {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 15px;
            color: #007bff;
        }

        .form-section .card-body {
            padding: 15px;
        }

        .curriculum-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .curriculum-item {
            flex: 1;
            box-sizing: border-box;
            min-width: 30%;
        }
    </style>

    <div class="container custom-mt">
        <div class="row">
            <!-- Teacher Profile Section -->
            <div class="col-md-4">
                <div class="card card-custom">
                    <img src="{{ empty($teacher->image) ? asset('web/assets/images/default.jpg') : Storage::url($teacher->image) }}"
                        alt="Teacher Image" class="card-img-top profile-img">
                </div>
            </div>
            <div class="col-md-8">
                <div class="card card-custom">
                    <div class="card-body card-body-custom">
                        <h2 class="mb-4 card-title">{{ $teacher->name }}</h2>
                        <div class="mb-4">
                            <p class="mb-2"><strong>Email:</strong> {{ $teacher->email ?? 'None' }}</p>
                            <p class="mb-2"><strong>Phone:</strong> {{ $teacher->phone ?? 'None' }}</p>
                            <p class="mb-2"><strong>Address:</strong> {{ $teacher->address ?? 'None' }}</p>
                            <p class="mb-2"><strong>Age:</strong> {{ $teacher->age ?? 'None' }}</p>
                            <p class="mb-2"><strong>Zoom Link:</strong> <a href="{{ $teacher->zoom_link ?? '#' }}"
                                    target="_blank" class="text-primary">{{ $teacher->zoom_link ?? 'None' }}</a></p>
                            <p class="mb-2"><strong>Extra Zoom Link:</strong> <a
                                    href="{{ $teacher->extra_zoom_link ?? '#' }}" target="_blank"
                                    class="text-primary">{{ $teacher->extra_zoom_link ?? 'None' }}</a></p>
                            <p class="mb-2"><strong>Title:</strong> {{ $teacher->title ?? 'None' }}</p>
                            <p class="mb-2"><strong>Description:</strong> {{ $teacher->description ?? 'None' }}</p>
                            <p class="mb-2"><strong>Experience:</strong> {{ $teacher->experience ?? 'None' }}</p>
                            <p class="mb-2"><strong>CV:</strong>
                                @if ($teacher->cv)
                                    <a href="{{ Storage::url($teacher->cv) }}" target="_blank"
                                        class="text-primary">Download CV</a>
                                @else
                                    None
                                @endif
                            </p>
                            <p class="mb-2"><strong>Channel Link:</strong>
                                @if ($teacher->channel_link)
                                    <a href="{{ $teacher->channel_link }}" target="_blank"
                                        class="text-primary">{{ $teacher->channel_link }}</a>
                                @else
                                    None
                                @endif
                            </p>
                        </div>
                        <a href="{{ route('teacher.profile.edit') }}" class="btn btn-edit">Edit Profile</a>
                    </div>

                </div>
            </div>
        </div>

        <div class="form-section">
            <div class="curriculum-row">
                <div class="curriculum-item">
                    <h5>Educational Stages</h5>
                    <div class="card">
                        <div class="card-body">
                            @if ($teacherEducationalStages->isNotEmpty())
                                @foreach ($teacherEducationalStages as $stage)
                                    <div><strong>{{ $stage->educationalStage->name }}</strong></div>
                                @endforeach
                            @else
                                <p>No Educational Stages Assigned</p>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="curriculum-item">
                    <h5>Stage Years</h5>
                    <div class="card">
                        <div class="card-body">
                            @if ($teacherEducationalStages->isNotEmpty())
                                @foreach ($teacherEducationalStages as $stage)
                                    @if ($stage->stageYear)
                                        <div class="ml-3">{{ $stage->stageYear->name }}</div>
                                    @else
                                        <p>No Stage Years Assigned for Educational Stage ID
                                            {{ $stage->educational_stage_id }}</p>
                                    @endif
                                @endforeach
                            @else
                                <p>No Stage Years Assigned</p>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="curriculum-item">
                    <h5>Curriculum</h5>
                    <div class="card">
                        <div class="card-body">
                            @if ($teacherEducationalStages->isNotEmpty())
                                @foreach ($teacherEducationalStages as $stage)
                                    @if ($stage->curriculum)
                                        <div class="ml-3">{{ $stage->curriculum->name }}</div>
                                    @else
                                        <p>No Curriculum Assigned for Educational Stage ID
                                            {{ $stage->educational_stage_id }}</p>
                                    @endif
                                @endforeach
                            @else
                                <p>No Curriculum Assigned</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection