@extends('public.layout.app')
@section('title', $material->title)

@section('body')
<section class="pt-5" style="background-color: #f5f7fc;">
    <div class="container">
        @include('public.portals.teacher.partials.nav')

        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold mb-1">{{ $material->title }}</h4>
                <p class="text-muted2 mb-0">
                    <i class="fas fa-book me-1"></i> {{ $material->course->title }} ({{ $material->course->code }})
                </p>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('teacher.courses.show', $material->course_id) }}" class="btn btn-outline-secondary btn-rounded">
                    <i class="fas fa-arrow-left me-2"></i> {{ __('front.back_to_course') }}
                </a>
                <a href="{{ route('teacher.materials.edit', $material->id) }}" class="btn btn-primary btn-rounded">
                    <i class="fas fa-edit me-2"></i> {{ __('front.edit') }}
                </a>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-4">
                <div class="card-soft p-4 shadow-soft">
                    <h6 class="fw-bold mb-3"><i class="fas fa-info-circle me-2"></i> {{ __('front.material_details') }}</h6>
                    <table class="table table-borderless">
                        <tr>
                            <td class="text-muted2">{{ __('front.type') }}</td>
                            <td>
                                @if($material->type == 'video')
                                    <span class="badge bg-danger"><i class="fas fa-video me-1"></i> {{ __('front.video') }}</span>
                                @else
                                    <span class="badge bg-primary"><i class="fas fa-file-alt me-1"></i> {{ __('front.document') }}</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted2">{{ __('front.uploaded_by') }}</td>
                            <td class="fw-semibold">{{ $material->uploader->name ?? '—' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted2">{{ __('front.uploaded_at') }}</td>
                            <td>{{ $material->created_at->format('M d, Y h:i A') }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted2">{{ __('front.last_updated') }}</td>
                            <td>{{ $material->updated_at->format('M d, Y h:i A') }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="card-soft p-4 shadow-soft">
                    <h6 class="fw-bold mb-3">
                        @if($material->type == 'video')
                            <i class="fas fa-play me-2 text-danger"></i> Video Preview
                        @else
                            <i class="fas fa-file-pdf me-2 text-primary"></i> Document Preview
                        @endif
                    </h6>

                    @if($material->type == 'video' && $material->video_url)
                        <div class="ratio ratio-16x9">
                            <iframe src="{{ $material->video_url }}" title="{{ $material->title }}"
                                    allowfullscreen style="border-radius: 0.5rem;"></iframe>
                        </div>
                        <div class="mt-3 text-center">
                            <a href="{{ $material->video_url }}" target="_blank" class="btn btn-danger rounded-pill">
                                <i class="fas fa-external-link-alt me-2"></i> {{ __('front.open_video') }}
                            </a>
                        </div>
                    @elseif($material->file_path && Storage::disk('public')->exists($material->file_path))
                        @php
                            $extension = pathinfo($material->file_path, PATHINFO_EXTENSION);
                            $isImage = in_array(strtolower($extension), ['jpg','jpeg','png','gif','webp']);
                            $isPdf = strtolower($extension) == 'pdf';
                        @endphp

                        @if($isImage)
                            <div class="text-center">
                                <img src="{{ Storage::url($material->file_path) }}" alt="{{ $material->title }}"
                                     class="img-fluid rounded-3" style="max-height: 400px;">
                            </div>
                        @elseif($isPdf)
                            <div class="ratio ratio-16x9">
                                <iframe src="{{ Storage::url($material->file_path) }}" style="border-radius: 0.5rem;"></iframe>
                            </div>
                        @else
                            <div class="text-center py-5 bg-light rounded-3">
                                <i class="fas fa-file fa-4x text-muted mb-3"></i>
                                <p class="mb-2">{{ __('front.preview_not_available_for_this_file_type') }}</p>
                            </div>
                        @endif

                        <div class="mt-3 text-center">
                            <a href="{{ Storage::url($material->file_path) }}" class="btn btn-primary rounded-pill" download>
                                <i class="fas fa-download me-2"></i> {{ __('front.download_file') }}
                            </a>
                        </div>
                    @else
                        <div class="text-center py-5 bg-light rounded-3">
                            <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                            <p class="mb-0">{{ __('front.file_not_found_or_unavailable') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
@endsection