@extends('teacher.layouts.layouts')

@section('content')
    <style>
        .custom-mt {
            margin-top: 5rem;
        }

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

        .card-custom {
            border: none;
            border-radius: 20px;
            background-color: #ffffff;
            overflow: hidden;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .card-custom:hover {
            transform: translateY(-10px);
        }

        .card-body-custom {
            padding: 2rem;
            border-radius: 20px;
        }

        .btn-submit {
            border-radius: 8px;
            background-color: #007bff;
            color: white;
            padding: 10px 30px;
            border: none;
            transition: background-color 0.3s ease;
        }

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

        .form-group {
            /* margin-bottom: 1.5rem; */
        }

        .form-group label {
            font-weight: 600;
            color: #343a40;
        }

        .form-control {
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .form-control-file {
            border-radius: 5px;
        }

        #dynamic-selects .input-group {
            /* margin-bottom: 1.5rem; */
            align-items: center;
        }

        #add-selects {
            margin-top: 2rem;
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            transition: background-color 0.3s ease;
        }

        #add-selects:hover {
            background-color: #218838;
        }

        .remove-selects {
            color: #dc3545;
            border: none;
            background: none;
            font-size: 1.25rem;
        }

        .remove-selects:hover {
            color: #c82333;
        }
    </style>

    <div class="container custom-mt">
        <div class="row justify-content-center">
            <div class="col-lg-12 col-md-7">
                <div class="card card-custom">
                    <div class="card-body card-body-custom">
                        <h2 class="mb-4 text-center card-title">Edit Profile</h2>
                        <div class="text-center card card-custom">
                            <img src="{{ empty($teacher->image) ? asset('web/assets/images/default.jpg') : Storage::url($teacher->image) }}"
                                alt="Teacher Image" class="mx-auto mt-4 card-img-top profile-img">
                        </div>
                        <form action="{{ route('teacher.profile.update', ['teacher' => Auth::guard('teacher')->id()]) }}"
                            method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control" id="name" name="name"
                                    value="{{ old('name', $teacher->name) }}" required>
                            </div>

                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" class="form-control" id="email" name="email"
                                    value="{{ $teacher->email }}" required>
                            </div>

                            <div class="form-group">
                                <label for="phone">Phone</label>
                                <input type="text" class="form-control" id="phone" name="phone"
                                    value="{{ old('phone', $teacher->phone) }}">
                            </div>

                            <div class="form-group">
                                <label for="address">Address</label>
                                <input type="text" class="form-control" id="address" name="address"
                                    value="{{ old('address', $teacher->address) }}">
                            </div>

                            <div class="form-group">
                                <label for="age">Age</label>
                                <input type="number" class="form-control" id="age" name="age"
                                    value="{{ old('age', $teacher->age) }}">
                            </div>

                            <div class="form-group">
                                <label for="zoom_link">Zoom Link</label>
                                <input type="url" class="form-control" id="zoom_link" name="zoom_link"
                                    value="{{ old('zoom_link', $teacher->zoom_link) }}">
                            </div>
                            <div class="form-group">
                                <label for="extra_zoom_link">Extra Zoom Link</label>
                                <input type="url" class="form-control" id="extra_zoom_link" name="extra_zoom_link"
                                    value="{{ old('extra_zoom_link', $teacher->extra_zoom_link) }}">
                            </div>

                            <div class="form-group">
                                <label for="title">Title</label>
                                <input type="text" class="form-control" id="title" name="title"
                                    value="{{ old('title', $teacher->title) }}">
                            </div>

                            <div class="form-group">
                                <label for="description">Description</label>
                                <textarea class="form-control" id="description" name="description" rows="4">{{ old('description', $teacher->description) }}</textarea>
                            </div>

                            <div class="form-group">
                                <label for="experience">Experience</label>
                                <input type="number" class="form-control" id="experience" name="experience"
                                    value="{{ old('experience', $teacher->experience) }}" min="0">
                            </div>

                            <div class="form-group">
                                <label for="image">Profile Image</label>
                                <input type="file" class="form-control-file" id="image" name="image">
                            </div>
                            <div class="form-group">
                                <label for="cv">CV</label>
                                <input type="file" class="form-control" id="cv" name="cv">

                                @if (isset($teacher) && $teacher->cv)
                                    <div class="mt-2">
                                        <a href="{{ Storage::url($teacher->cv) }}" target="_blank" class="btn btn-info">
                                            Download Current CV
                                        </a>
                                    </div>
                                @endif
                            </div>
                            <div class="form-group">
                                <label for="channel_link">Channel Link</label>
                                <input type="url" class="form-control" id="channel_link" name="channel_link"
                                    value="{{ old('channel_link', $teacher->channel_link) }}">
                            </div>

                            <div id="dynamic-selects">
                                @forelse ($teacher->educationalStages as $stage)
                                    @php
                                        $stageYear = $stage->pivot->stage_year_id;
                                        $curriculumId = $stage->pivot->curriculum_id;
                                    @endphp
                                    <div class="mt-5 input-group">
                                        <select name="educational_stage_id[]" class="form-control educationalStageId">
                                            <option value="">Select Educational Stage</option>
                                            @foreach ($stages as $s)
                                                <option value="{{ $s->id }}"
                                                    {{ $s->id == $stage->id ? 'selected' : '' }}>
                                                    {{ $s->name }}
                                                </option>
                                            @endforeach
                                        </select>

                                        <select name="stage_year_id[]" class="form-control stageYear">
                                            <option value="">Select Stage Year</option>
                                            @forelse ($stage->stageYears as $sy)
                                                <option value="{{ $sy->id }}"
                                                    {{ $sy->id == $stageYear ? 'selected' : '' }}>
                                                    {{ $sy->name }}
                                                </option>
                                            @empty
                                                <option value="">No Stage Years Available</option>
                                            @endforelse
                                        </select>

                                        <select name="curriculum_id[]" class="form-control curriculumId">
                                            <option value="">Select Curriculum</option>
                                            @forelse ($curricula as $curriculum)
                                                <option value="{{ $curriculum->id }}"
                                                    {{ $curriculum->id == $curriculumId ? 'selected' : '' }}>
                                                    {{ $curriculum->name }}
                                                </option>
                                            @empty
                                                <option value="">No Curricula Available</option>
                                            @endforelse
                                        </select>
                                        <input type="hidden" class="Educational" name="educational_data[]"
                                            value="{{ json_encode(['educationalStageId' => $stage->id, 'stageYear' => $stageYear, 'curriculumId' => $curriculumId]) }}">
                                        <button type="button" class="btn remove-selects"><i
                                                class="fas fa-trash-alt"></i></button>
                                    </div>
                                @empty
                                    <div class="mt-5 input-group">
                                        <select name="educational_stage_id[]" class="form-control educationalStageId"
                                            id="educationalStageId">
                                            <option value="">Select Educational Stage</option>
                                            @foreach ($stages as $stage)
                                                <option value="{{ $stage->id }}">{{ $stage->name }}</option>
                                            @endforeach
                                        </select>
                                        <select name="stage_year_id[]" class="form-control stageYear" id="stageYear">
                                            <option value="">Select Stage Year</option>
                                        </select>
                                        <select name="curriculum_id[]" class="form-control curriculumId"
                                            id="curriculumId">
                                            <option value="">Select Curriculum</option>
                                        </select>
                                        <input type="hidden" id="Educational" class="Educational"
                                            name="educational_data[]">
                                        <button type="button" class="btn remove-selects"><i
                                                class="fas fa-trash-alt"></i></button>
                                    </div>
                                @endforelse
                            </div>

                            <button type="button" id="add-selects" class="btn btn-secondary">Add More</button>

                            <div class="mt-4 text-center">
                                <button type="submit" class="btn btn-submit">Update Profile</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    @include('teacher.profile.shared.input_group');
@endpush