@extends('public.layout.app')
@section('title', __('front.all_materials'))

@section('body')
<section class="pt-5" style="background-color: #f5f7fc;">
    <div class="container">

        @include('public.portals.teacher.partials.nav')

        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
            <h4 class="fw-bold mb-0">{{ __('front.all_course_materials') }}</h4>
            <form method="GET" action="" class="d-flex">
                <input type="text" name="q" class="form-control form-control-sm rounded-pill"
                       placeholder="{{ __('front.search_materials') }}" value="{{ request('q') }}" style="min-width: 200px;">
                <button class="btn btn-primary btn-sm rounded-pill ms-2" type="submit">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>

        <div class="card-soft p-4 shadow-soft">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="fw-bold mb-0"><i class="fas fa-file-alt me-2"></i> {{ __('front.materials') }}</h6>
                <span class="badge bg-primary rounded-pill">{{ $materials->count() }} Total</span>
            </div>

            @if($materials->isEmpty())
                <div class="text-center py-5">
                    <i class="fas fa-file-alt fa-3x text-muted mb-3 opacity-50"></i>
                    <p class="text-muted2 mb-2">{{ __('front.no_materials_found') }}</p>
                    <a href="{{ route('teacher.courses.index') }}" class="btn btn-primary btn-sm rounded-pill">
                        <i class="fas fa-plus me-1"></i> {{ __('front.add_material_to_a_course') }}
                    </a>
                </div>
            @else
                <div class="row g-4">
                    @foreach($materials as $material)
                        <div class="col-md-6 col-lg-4">
                            <div class="card-soft p-3 shadow-soft h-100 hover-lift">
                                <div class="d-flex align-items-start">
                                    <div class="flex-shrink-0 me-3">
                                        @if($material->type == 'video')
                                            <div class="bg-danger bg-opacity-10 rounded-circle p-3">
                                                <i class="fas fa-video text-danger fa-lg"></i>
                                            </div>
                                        @else
                                            <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                                                <i class="fas fa-file-pdf text-primary fa-lg"></i>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="fw-bold mb-1 text-truncate">{{ $material->title }}</h6>
                                        <p class="text-muted2 small mb-1">
                                            <span class="badge bg-secondary">{{ $material->course->code ?? '—' }}</span>
                                        </p>
                                        <p class="text-muted2 small mb-2">
                                            <i class="far fa-calendar me-1"></i> {{ $material->created_at->format('M d, Y') }}
                                        </p>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="badge {{ $material->type == 'video' ? 'bg-danger' : 'bg-primary' }}">
                                                {{ $material->type == 'video' ? 'Video' : 'Document' }}
                                            </span>
                                            <div class="btn-group btn-group-sm">
                                                <a href="{{ route('teacher.materials.show', $material->id) }}" class="btn btn-outline-primary">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('teacher.materials.edit', $material->id) }}" class="btn btn-outline-secondary">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button type="button" class="btn btn-outline-danger"
                                                        onclick="confirmDelete('delete-material-{{ $material->id }}')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                                <form id="delete-material-{{ $material->id }}"
                                                      action="{{ route('teacher.materials.destroy', $material->id) }}"
                                                      method="POST" class="d-none">
                                                    @csrf @method('DELETE')
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

    </div>
</section>

<script>
    function confirmDelete(formId) {
        if (confirm('{{ __('front.are_you_sure_you_want_to_delete_this_material') }}')) {
            document.getElementById(formId).submit();
        }
    }
</script>

<style>
    .hover-lift:hover {
        transform: translateY(-3px);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    }
</style>
@endsection