@extends('layouts.app')

@section('content')
<div class="container-fluid py-5">
    <h3 class="mb-4 text-success fw-bold"><i class="bi bi-plus-lg me-2"></i>Add Mentorship Activity</h3>

    <div class="card shadow-sm rounded-4 p-4 nyota-card border-0">

        <form action="{{ route('mentor.activities.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <!-- Trainee Dropdown -->
            <div class="mb-3">
                <label for="trainee_id" class="form-label fw-bold">Trainee</label>
                <select id="trainee_id" name="trainee_id" class="form-select" required>
                    <option value="">Select Trainee</option>
                    @foreach($trainees as $trainee)
                        <option value="{{ $trainee->id }}" {{ old('trainee_id') == $trainee->id ? 'selected' : '' }}>
                            {{ $trainee->name }}
                        </option>
                    @endforeach
                </select>
                @error('trainee_id') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <!-- Session Number -->
            <div class="mb-3">
                <label for="session_number" class="form-label fw-bold">Session Number</label>
                <select id="session_number" name="session_number" class="form-select" required>
                    <option value="">Select Session</option>
                    @for($i=1; $i<=4; $i++)
                        @php
                            $disabled = '';
                            if(isset($existingSessions) && in_array($i, $existingSessions)) {
                                $disabled = 'disabled';
                            }
                        @endphp
                        <option value="{{ $i }}" {{ old('session_number') == $i ? 'selected' : '' }} {{ $disabled }}>
                            Session {{ $i }} @if($disabled) (Already logged) @endif
                        </option>
                    @endfor
                </select>
                @error('session_number') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <!-- Date -->
            <div class="mb-3">
                <label for="date" class="form-label fw-bold">Date</label>
                <input type="date" id="date" name="date" class="form-control" value="{{ old('date') }}" required>
                @error('date') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <!-- Discussion Points -->
            <div class="mb-3">
                <label for="discussion_points" class="form-label fw-bold">Discussion Points</label>
                <textarea id="discussion_points" name="discussion_points" class="form-control wysiwyg" rows="4" required>{{ old('discussion_points') }}</textarea>
                @error('discussion_points') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <!-- Progress Notes -->
            <div class="mb-3">
                <label for="progress_notes" class="form-label fw-bold">Progress Notes</label>
                <textarea id="progress_notes" name="progress_notes" class="form-control wysiwyg" rows="3">{{ old('progress_notes') }}</textarea>
            </div>

            <!-- Next Steps -->
            <div class="mb-3">
                <label for="next_steps" class="form-label fw-bold">Next Steps</label>
                <textarea id="next_steps" name="next_steps" class="form-control wysiwyg" rows="3">{{ old('next_steps') }}</textarea>
            </div>

            <!-- Media Upload -->
            <div class="mb-3">
                <label for="media_files" class="form-label fw-bold">Upload Photos/Videos/Docs</label>
                <input type="file" id="media_files" name="media_files[]" class="form-control" multiple accept=".jpg,.jpeg,.png,.webp,.gif,.mp4,.mov,.pdf,.ppt,.pptx">
                <small class="text-muted">You can upload multiple files (images, videos, PDFs, or presentations), max 10MB each.</small>
                @error('media_files.*') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <!-- Buttons -->
            <div class="mt-4 d-flex gap-2">
                <button type="submit" class="btn btn-success btn-lg"><i class="bi bi-check-lg me-1"></i> Save</button>
                <a href="{{ route('mentor.activities.index') }}" class="btn btn-secondary btn-lg">Cancel</a>
            </div>

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

<style>
.nyota-card { background-color: #ffffff; transition: box-shadow 0.3s ease-in-out; }
.nyota-card:hover { box-shadow: 0 12px 25px rgba(0,0,0,0.12); }
.wysiwyg { min-height: 80px; }
</style>
@endsection