@extends('layouts.app')

@section('title', 'Edit Study Material')
@section('page-title', 'Edit Study Material')

@section('header-buttons')
    <div class="btn-group">
        <a href="{{ route('materials.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Materials
        </a>
        <a href="{{ route('materials.show', $material) }}" class="btn btn-outline-primary">
            <i class="fas fa-eye me-2"></i>View Material
        </a>
    </div>
@endsection

@section('content')
<div class="row">
    <div class="col-lg-8">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-transparent py-3">
                <h5 class="card-title mb-0 text-dark">
                    <i class="fas fa-edit text-primary me-2"></i>Edit Material Details
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('materials.update', $material) }}" method="POST" id="editMaterialForm" enctype="multipart/form-data" class="needs-validation" novalidate>
                    @csrf
                    @method('PUT')
                    
                    <!-- Class Selection -->
                    @if(auth()->user()->teacher && $material->uploaded_by_teacher_id == auth()->user()->teacher->id)
                        <div class="mb-4">
                            <label for="class_id" class="form-label fw-semibold text-dark">Class Assignment <span class="text-danger">*</span></label>
                            <select name="class_id" id="class_id" class="form-select form-select-lg @error('class_id') is-invalid @enderror" required>
                                <option value="">Select a Class</option>
                                @foreach($classes as $class)
                                    <option value="{{ $class->id }}" {{ old('class_id', $material->class_id) == $class->id ? 'selected' : '' }}>
                                        {{ $class->batch->name }} - {{ $class->subject->title }} 
                                        ({{ $class->teacher->user->username }})
                                    </option>
                                @endforeach
                            </select>
                            @error('class_id')
                                <div class="invalid-feedback d-flex align-items-center">
                                    <i class="fas fa-exclamation-circle me-2"></i>{{ $message }}
                                </div>
                            @enderror
                            <div class="form-text text-muted">
                                <i class="fas fa-info-circle me-1"></i>Select the class this material belongs to
                            </div>
                        </div>
                    @else
                        <div class="mb-4">
                            <label class="form-label fw-semibold text-dark">Class Assignment</label>
                            <div class="p-3 border rounded bg-light">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-chalkboard-teacher text-primary me-3 fs-5"></i>
                                    <div>
                                        <h6 class="mb-1 text-dark">{{ $material->class->batch->name }} - {{ $material->class->subject->title }}</h6>
                                        <small class="text-muted">Instructor: {{ $material->class->teacher->user->username }}</small>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="class_id" value="{{ $material->class_id }}">
                        </div>
                    @endif

                    <!-- Material Title -->
                    <div class="mb-4">
                        <label for="title" class="form-label fw-semibold text-dark">Material Title <span class="text-danger">*</span></label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text bg-light border-end-0">
                                <i class="fas fa-heading text-muted"></i>
                            </span>
                            <input type="text" name="title" id="title" class="form-control border-start-0 @error('title') is-invalid @enderror" 
                                   value="{{ old('title', $material->title) }}" placeholder="Enter a descriptive title for this material" required>
                        </div>
                        @error('title')
                            <div class="invalid-feedback d-flex align-items-center">
                                <i class="fas fa-exclamation-circle me-2"></i>{{ $message }}
                            </div>
                        @enderror
                    </div>

                    <!-- File Management Section -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold text-dark">File Management</label>
                        
                        <!-- Current File Display -->
                        <div class="card border-0 bg-light mb-3">
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <div class="file-icon-wrapper me-3">
                                            @if($material->isPdf())
                                                <i class="fas fa-file-pdf text-danger fa-2x"></i>
                                            @elseif($material->isImage())
                                                <i class="fas fa-file-image text-success fa-2x"></i>
                                            @elseif($material->isVideo())
                                                <i class="fas fa-file-video text-warning fa-2x"></i>
                                            @else
                                                <i class="fas fa-file text-primary fa-2x"></i>
                                            @endif
                                        </div>
                                        <div>
                                            <h6 class="mb-1 text-dark">{{ $material->file_name }}</h6>
                                            <div class="d-flex gap-2">
                                                <span class="badge bg-secondary">{{ strtoupper($material->file_extension) }}</span>
                                                <span class="badge bg-light text-dark">{{ $material->file_size_formatted }}</span>
                                                <span class="badge bg-{{ $material->published ? 'success' : 'warning' }}">
                                                    {{ $material->published ? 'Published' : 'Draft' }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="{{ route('materials.download', $material) }}" class="btn btn-primary btn-sm">
                                        <i class="fas fa-download me-1"></i>Download
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- File Replacement (for owners only) -->
                        @if(auth()->user()->teacher && $material->uploaded_by_teacher_id == auth()->user()->teacher->id)
                            <div class="card border-dashed">
                                <div class="card-body">
                                    <label for="file" class="form-label fw-semibold text-dark">Replace File <span class="text-muted">(Optional)</span></label>
                                    <div class="file-upload-area">
                                        <input type="file" name="file" id="file" class="form-control @error('file') is-invalid @enderror" 
                                               accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.jpg,.jpeg,.png,.mp4,.avi,.txt,.zip,.rar">
                                        <div class="form-text text-muted">
                                            <i class="fas fa-info-circle me-1"></i>
                                            Leave empty to keep current file. Maximum file size: 50MB. Supported formats: Documents, Images, Videos, Archives
                                        </div>
                                        @error('file')
                                            <div class="invalid-feedback d-flex align-items-center">
                                                <i class="fas fa-exclamation-circle me-2"></i>{{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- Publication Status -->
                    @if(auth()->user()->teacher && $material->uploaded_by_teacher_id == auth()->user()->teacher->id)
                        <div class="mb-4">
                            <div class="card border-0 bg-light">
                                <div class="card-body">
                                    <div class="form-check form-switch form-switch-lg">
                                        <input class="form-check-input" type="checkbox" name="published" id="published" value="1" 
                                               {{ old('published', $material->published) ? 'checked' : '' }}>
                                        <label class="form-check-label fw-semibold text-dark" for="published">
                                            <i class="fas fa-globe me-2"></i>Publish Material
                                        </label>
                                    </div>
                                    <div class="form-text text-muted ms-4">
                                        Published materials are visible to students enrolled in the class
                                    </div>
                                    @error('published')
                                        <div class="invalid-feedback d-flex align-items-center mt-2">
                                            <i class="fas fa-exclamation-circle me-2"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="mb-4">
                            <label class="form-label fw-semibold text-dark">Publication Status</label>
                            <div class="p-3 border rounded bg-light">
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-{{ $material->published ? 'success' : 'warning' }} fs-6 me-3">
                                        <i class="fas fa-{{ $material->published ? 'eye' : 'eye-slash' }} me-1"></i>
                                        {{ $material->published ? 'Published' : 'Unpublished' }}
                                    </span>
                                    <small class="text-muted">
                                        {{ $material->published ? 'Visible to students' : 'Not visible to students' }}
                                    </small>
                                </div>
                            </div>
                            <input type="hidden" name="published" value="{{ $material->published }}">
                        </div>
                    @endif

                    <!-- Form Actions -->
                    <div class="d-flex justify-content-between align-items-center pt-3 border-top">
                        <a href="{{ route('materials.show', $material) }}" class="btn btn-outline-secondary btn-lg">
                            <i class="fas fa-times me-2"></i>Cancel
                        </a>
                        <button type="submit" class="btn btn-primary btn-lg px-4" id="submitBtn">
                            <i class="fas fa-save me-2"></i>Update Material
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Sidebar -->
    <div class="col-lg-4">
        <!-- Quick Actions -->
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-transparent py-3">
                <h6 class="card-title mb-0 text-dark">
                    <i class="fas fa-bolt text-warning me-2"></i>Quick Actions
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-3">
                    <a href="{{ route('materials.show', $material) }}" class="btn btn-outline-primary btn-lg text-start">
                        <i class="fas fa-eye me-2"></i>View Material Details
                    </a>
                    
                    @if(auth()->user()->teacher && $material->uploaded_by_teacher_id == auth()->user()->teacher->id)
                        <form action="{{ route('materials.toggle-publish', $material) }}" method="POST" class="d-grid">
                            @csrf
                            <button type="submit" class="btn btn-{{ $material->published ? 'outline-warning' : 'outline-success' }} btn-lg text-start">
                                <i class="fas fa-{{ $material->published ? 'eye-slash' : 'eye' }} me-2"></i>
                                {{ $material->published ? 'Unpublish Material' : 'Publish Material' }}
                            </button>
                        </form>

                        <form action="{{ route('materials.destroy', $material) }}" method="POST" class="d-grid">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-outline-danger btn-lg text-start" 
                                    onclick="return confirm('⚠️ Are you sure you want to delete this material?\n\nThis action cannot be undone and students will lose access to this resource.')">
                                <i class="fas fa-trash-alt me-2"></i>Delete Material
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        </div>

        <!-- Material Information -->
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-transparent py-3">
                <h6 class="card-title mb-0 text-dark">
                    <i class="fas fa-info-circle text-info me-2"></i>Material Information
                </h6>
            </div>
            <div class="card-body">
                <div class="info-list">
                    <div class="info-item d-flex align-items-center mb-3">
                        <div class="info-icon bg-primary bg-opacity-10 rounded-circle p-2 me-3">
                            <i class="fas fa-user text-primary"></i>
                        </div>
                        <div>
                            <small class="text-muted d-block">Uploaded By</small>
                            <strong class="text-dark">{{ $material->teacher->user->username }}</strong>
                        </div>
                    </div>
                    <div class="info-item d-flex align-items-center mb-3">
                        <div class="info-icon bg-success bg-opacity-10 rounded-circle p-2 me-3">
                            <i class="fas fa-calendar-plus text-success"></i>
                        </div>
                        <div>
                            <small class="text-muted d-block">Upload Date</small>
                            <strong class="text-dark">{{ $material->created_at->format('F j, Y') }}</strong>
                        </div>
                    </div>
                    <div class="info-item d-flex align-items-center mb-3">
                        <div class="info-icon bg-warning bg-opacity-10 rounded-circle p-2 me-3">
                            <i class="fas fa-calendar-check text-warning"></i>
                        </div>
                        <div>
                            <small class="text-muted d-block">Last Updated</small>
                            <strong class="text-dark">{{ $material->updated_at->format('F j, Y') }}</strong>
                        </div>
                    </div>
                    <div class="info-item d-flex align-items-center">
                        <div class="info-icon bg-info bg-opacity-10 rounded-circle p-2 me-3">
                            <i class="fas fa-file-alt text-info"></i>
                        </div>
                        <div>
                            <small class="text-muted d-block">File Type</small>
                            <strong class="text-dark text-uppercase">{{ $material->file_type }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Class Information (for owners only) -->
        @if(auth()->user()->teacher && $material->uploaded_by_teacher_id == auth()->user()->teacher->id)
            <div class="card shadow-sm border-0">
                <div class="card-header bg-transparent py-3">
                    <h6 class="card-title mb-0 text-dark">
                        <i class="fas fa-chalkboard text-success me-2"></i>Class Information
                    </h6>
                </div>
                <div class="card-body">
                    <div class="class-info">
                        <div class="info-item mb-3">
                            <small class="text-muted d-block">Batch</small>
                            <strong class="text-dark">{{ $material->class->batch->name }}</strong>
                        </div>
                        <div class="info-item mb-3">
                            <small class="text-muted d-block">Subject</small>
                            <strong class="text-dark">{{ $material->class->subject->title }}</strong>
                        </div>
                        <div class="info-item mb-3">
                            <small class="text-muted d-block">Instructor</small>
                            <strong class="text-dark">{{ $material->class->teacher->user->username }}</strong>
                        </div>
                        <div class="info-item">
                            <small class="text-muted d-block">Status</small>
                            <span class="badge bg-{{ $material->class->active ? 'success' : 'secondary' }}">
                                <i class="fas fa-{{ $material->class->active ? 'check-circle' : 'pause-circle' }} me-1"></i>
                                {{ $material->class->active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@section('styles')
<style>
    .border-dashed {
        border: 2px dashed #dee2e6 !important;
    }
    
    .file-upload-area {
        transition: all 0.3s ease;
    }
    
    .file-upload-area:hover {
        transform: translateY(-2px);
    }
    
    .file-icon-wrapper {
        transition: transform 0.3s ease;
    }
    
    .file-icon-wrapper:hover {
        transform: scale(1.1);
    }
    
    .info-list .info-item {
        transition: transform 0.2s ease;
    }
    
    .info-list .info-item:hover {
        transform: translateX(5px);
    }
    
    .form-switch-lg .form-check-input {
        height: 1.5rem;
        width: 3rem;
    }
    
    .card {
        transition: box-shadow 0.3s ease;
    }
    
    .card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    
    .btn {
        transition: all 0.3s ease;
    }
    
    .btn:hover {
        transform: translateY(-1px);
    }
</style>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Form submission handling
    $('#editMaterialForm').on('submit', function(e) {
        if (this.checkValidity() === false) {
            e.preventDefault();
            e.stopPropagation();
        } else {
            $('#submitBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Updating...');
        }
        this.classList.add('was-validated');
    });

    // File size validation with better UX
    $('#file').change(function() {
        const file = this.files[0];
        const fileSizeMB = file ? (file.size / 1024 / 1024).toFixed(2) : 0;
        
        if (file && fileSizeMB > 50) {
            // Show sweet alert or custom modal
            showAlert('File Size Exceeded', `File size (${fileSizeMB}MB) exceeds the 50MB limit. Please choose a smaller file.`, 'error');
            this.value = '';
            return;
        }
        
        // Show file info
        if (file) {
            const fileExtension = file.name.split('.').pop().toUpperCase();
            showAlert('File Selected', `Ready to upload: ${file.name} (${fileExtension}, ${fileSizeMB}MB)`, 'success', 3000);
        }
    });

    // Real-time title validation
    $('#title').on('input', function() {
        const title = $(this).val();
        const charCount = title.length;
        const maxChars = 180;
        
        if (charCount > maxChars) {
            $(this).addClass('is-invalid');
            showAlert('Title Too Long', `Title cannot exceed ${maxChars} characters. Current: ${charCount}`, 'warning', 2000);
        } else {
            $(this).removeClass('is-invalid');
        }
    });

    // Enhanced confirmation for delete
    $('form[action*="destroy"]').on('submit', function(e) {
        if (!confirm('⚠️ Are you sure you want to delete this material?\n\nThis action cannot be undone and students will lose access to this resource.')) {
            e.preventDefault();
        }
    });

    // Helper function for alerts
    function showAlert(title, message, type, duration = 5000) {
        // You can integrate with SweetAlert2 or use Bootstrap toasts
        const alertClass = type === 'error' ? 'danger' : type;
        const alertHtml = `
            <div class="alert alert-${alertClass} alert-dismissible fade show" role="alert">
                <strong>${title}</strong> ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        $('#editMaterialForm').prepend(alertHtml);
        
        // Auto remove after duration
        setTimeout(() => {
            $('.alert').alert('close');
        }, duration);
    }

    // Prevent form submission on enter key
    $('#title').on('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
        }
    });
});
</script>
@endsection