File Manager

Editing:education.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-navy leading-tight">
            {{ __('Manage Education Materials') }}
        </h2>
    </x-slot>

<div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-8">
            
            {{-- Flash Messages --}}
            @if(session('success'))
                <div class="bg-green-50 border-l-4 border-green-400 p-4 rounded-r-lg shadow-sm">
                    <span class="text-green-700 font-medium">{{ session('success') }}</span>
                </div>
            @endif
            @if($errors->any())
                <div class="bg-red-50 border-l-4 border-red-400 p-4 rounded-r-lg shadow-sm">
                    <ul class="list-disc list-inside text-red-700 font-medium">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                {{-- Upload Form --}}
                <div class="md:col-span-1">
                    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="bg-gradient-to-r from-navy to-navy-dark px-6 py-4">
                            <h3 class="text-lg font-bold text-white">Upload Material</h3>
                        </div>
                        <div class="p-6">
                            <form action="{{ route('techlead.education.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                                @csrf
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700">Title <span class="text-red-500">*</span></label>
                                    <input type="text" name="title" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-navy focus:border-navy sm:text-sm">
                                </div>

<div>
                                    <label class="block text-sm font-medium text-gray-700">Description</label>
                                    <textarea name="description" rows="3" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-navy focus:border-navy sm:text-sm"></textarea>
                                </div>

<div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Material Type <span class="text-red-500">*</span></label>
                                    <div class="flex gap-4">
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="type" value="youtube" class="text-navy focus:ring-navy" checked onclick="document.getElementById('youtube_input').classList.remove('hidden'); document.getElementById('mp4_input').classList.add('hidden');">
                                            <span class="ml-2 text-sm text-gray-700">YouTube Link</span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="type" value="mp4" class="text-navy focus:ring-navy" onclick="document.getElementById('mp4_input').classList.remove('hidden'); document.getElementById('youtube_input').classList.add('hidden');">
                                            <span class="ml-2 text-sm text-gray-700">MP4 Video</span>
                                        </label>
                                    </div>
                                </div>

<div id="youtube_input" class="transition-all">
                                    <label class="block text-sm font-medium text-gray-700">YouTube URL</label>
                                    <input type="url" name="url" placeholder="https://youtube.com/watch?v=..." class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-navy focus:border-navy sm:text-sm">
                                </div>

<div id="mp4_input" class="hidden transition-all">
                                    <label class="block text-sm font-medium text-gray-700">Upload MP4 File</label>
                                    <input type="file" name="file" accept="video/mp4" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-navy/10 file:text-navy hover:file:bg-navy/20">
                                    <p class="text-xs text-gray-400 mt-1">Max size: 50MB</p>
                                </div>

<div class="pt-4 border-t border-gray-100">
                                    <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-navy hover:bg-navy-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-navy transition-colors">
                                        Upload Material
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

{{-- Uploaded Materials List --}}
                <div class="md:col-span-2">
                    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4 flex justify-between items-center">
                            <h3 class="text-lg font-bold text-white">Your Uploaded Materials</h3>
                            <span class="bg-white/20 text-white text-xs px-2 py-1 rounded-full font-bold">{{ $materials->count() }} Total</span>
                        </div>
                        <div class="p-6">
                            @if($materials->isEmpty())
                                <div class="text-center py-8">
                                    <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                                    <p class="mt-4 text-sm text-gray-500">You haven't uploaded any education materials yet.</p>
                                </div>
                            @else
                                <div class="space-y-4">
                                    @foreach($materials as $material)
                                        <div class="flex flex-col sm:flex-row gap-4 border border-gray-200 rounded-xl p-5 hover:shadow-md transition-shadow">
                                            <div class="flex-shrink-0 flex items-center justify-center w-16 h-16 rounded-lg {{ $material->type == 'youtube' ? 'bg-red-50 text-red-500' : 'bg-blue-50 text-blue-500' }}">
                                                @if($material->type == 'youtube')
                                                    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
                                                @else
                                                    <svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                                @endif
                                            </div>
                                            <div class="flex-1">
                                                <div class="flex justify-between items-start">
                                                    <div>
                                                        <h4 class="text-lg font-bold text-gray-900">{{ $material->title }}</h4>
                                                        <span class="text-xs text-gray-500">Uploaded on {{ $material->created_at->format('M d, Y') }}</span>
                                                    </div>
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium uppercase {{ $material->type == 'youtube' ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800' }}">
                                                        {{ $material->type }}
                                                    </span>
                                                </div>
                                                @if($material->description)
                                                    <p class="text-sm text-gray-600 mt-2">{{ $material->description }}</p>
                                                @endif
                                                <div class="mt-3 pt-3 border-t border-gray-100 flex gap-4">
                                                    @if($material->type == 'youtube')
                                                        <a href="{{ $material->url_or_path }}" target="_blank" class="text-sm font-medium text-red-600 hover:text-red-800 flex items-center">
                                                            View on YouTube <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                                        </a>
                                                    @else
                                                        <a href="{{ Storage::url($material->url_or_path) }}" target="_blank" class="text-sm font-medium text-blue-600 hover:text-blue-800 flex items-center">
                                                            View Video <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

</div>
        </div>
    </div>
</x-app-layout>

Cancel

🤩 File Manager - Mr.X

Editing:education.blade.php