@extends('layouts.app')

@section('title', 'Edit Mentorship Activity')

@section('content')
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="text-primary mb-0">
            <i class="bi bi-journal-text me-2"></i>Edit Mentorship Activity
        </h2>
        <a href="{{ route('mentor.activities.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Back
        </a>
    </div>

    <!-- Validation Errors -->
    @if ($errors->any())
        <div class="alert alert-danger shadow-sm rounded">
            <strong>There were some issues with your submission:</strong>
            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Edit Form Card -->
    <div class="card shadow-sm border-0 rounded-4">
        <div class="card-body p-4">
            <form action="{{ route('mentor.activities.update', $mentorship->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <!-- Trainee -->
                <div class="mb-3">
                    <label for="trainee_id" class="form-label fw-semibold">Trainee</label>
                    <select name="trainee_id" id="trainee_id" class="form-select" required>
                        <option value="">-- Select Trainee --</option>
                        @foreach ($trainees as $trainee)
                            <option value="{{ $trainee->id }}" {{ $mentorship->trainee_id == $trainee->id ? 'selected' : '' }}>
                                {{ $trainee->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Session Number -->
                <div class="mb-3">
                    <label for="session_number" class="form-label fw-semibold">Session Number</label>
                    <select name="session_number" id="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) && $mentorship->session_number != $i) {
                                    $disabled = 'disabled';
                                }
                            @endphp
                            <option value="{{ $i }}" {{ $mentorship->session_number == $i ? 'selected' : '' }} {{ $disabled }}>
                                Session {{ $i }} @if($disabled) (Already logged) @endif
                            </option>
                        @endfor
                    </select>
                </div>

                <!-- Date -->
                <div class="mb-3">
                    <label for="date" class="form-label fw-semibold">Date</label>
                    <input 
                        type="date" 
                        name="date" 
                        id="date" 
                        class="form-control"
                        value="{{ optional($mentorship->date)->format('Y-m-d') }}" 
                        required
                    >
                </div>

                <!-- Discussion Points -->
                <div class="mb-3">
                    <label for="discussion_points" class="form-label fw-semibold">Discussion Points</label>
                    <textarea 
                        name="discussion_points" 
                        id="discussion_points" 
                        class="form-control wysiwyg" 
                        rows="4" 
                        required
                    >{{ old('discussion_points', $mentorship->discussion_points) }}</textarea>
                </div>

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

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

                <!-- Media Upload -->
                <div class="mb-3">
                    <label class="form-label fw-semibold">Upload Photos/Videos/Docs</label>
                    <input type="file" name="media_files[]" class="form-control" multiple>
                    <small class="text-muted">You can upload multiple files (images, videos, PDFs, or presentations), max 10MB each.</small>

                    @if($mentorship->media && count($mentorship->media))
                        <div class="mt-3 d-flex flex-wrap gap-3">
                            @foreach($mentorship->media as $file)
                                <div class="position-relative border rounded-3 p-1 shadow-sm" style="width:130px;">
                                    @php $ext = pathinfo($file->filename, PATHINFO_EXTENSION); @endphp

                                    @if(in_array(strtolower($ext), ['jpg','jpeg','png','webp','gif']))
                                        <img src="{{ asset('storage/'.$file->filepath) }}" class="img-fluid rounded" style="height:90px; width:100%; object-fit:cover;">
                                    @elseif(in_array(strtolower($ext), ['mp4','mov']))
                                        <video src="{{ asset('storage/'.$file->filepath) }}" style="height:90px; width:100%" controls></video>
                                    @else
                                        <div class="text-center small p-2">{{ $file->filename }}</div>
                                    @endif

                                    <!-- AJAX Delete Button -->
                                    <button 
                                        type="button"
                                        class="btn btn-sm btn-danger p-0 position-absolute top-0 end-0 m-1 delete-media-btn"
                                        data-id="{{ $file->id }}"
                                        title="Delete"
                                    >
                                        <i class="bi bi-x-circle-fill"></i>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    @endif
                    @error('media_files.*') 
                        <small class="text-danger">{{ $message }}</small> 
                    @enderror
                </div>

                <!-- Buttons -->
                <div class="d-flex justify-content-end gap-2 mt-4">
                    <button type="submit" class="btn btn-success px-4">
                        <i class="bi bi-check2-circle"></i> Update Activity
                    </button>
                    <a href="{{ route('mentor.activities.index') }}" class="btn btn-secondary px-4">
                        <i class="bi bi-x-circle"></i> Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- AJAX Delete Script -->
<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.delete-media-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            if (!confirm('Are you sure you want to delete this file?')) return;

            const fileId = this.dataset.id;
            fetch(`/mentor/media/${fileId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json'
                }
            }).then(res => {
                if (res.ok) {
                    this.closest('.position-relative').remove();
                } else {
                    alert('Failed to delete file.');
                }
            }).catch(() => alert('An error occurred while deleting the file.'));
        });
    });
});
</script>

<!-- Styles -->
<style>
    .form-label {
        color: #2c3e50;
    }
    .card {
        border-radius: 12px;
    }
    .wysiwyg {
        min-height: 80px;
    }
    .position-relative {
        transition: transform 0.2s ease-in-out;
    }
    .position-relative:hover {
        transform: scale(1.02);
    }
    .btn-danger i {
        font-size: 1.1rem;
    }
</style>
@endsection