@extends('layouts.admin')

@section('title', 'مدیریت فایل‌های رسانه‌ای')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">مدیریت فایل‌های رسانه‌ای</h1>
        <a href="{{ route('admin.media.create') }}" class="btn btn-primary">
            <i class="fas fa-upload ms-2"></i>
            آپلود فایل جدید
        </a>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <form action="{{ route('admin.media.index') }}" method="GET" class="row g-3">
                <div class="col-md-4">
                    <input type="text" 
                           class="form-control" 
                           name="search" 
                           value="{{ request('search') }}" 
                           placeholder="جستجو در عنوان و توضیحات...">
                </div>
                <div class="col-md-3">
                    <select class="form-select" name="type">
                        <option value="">همه انواع</option>
                        @foreach($types as $type)
                            <option value="{{ $type }}" {{ request('type') == $type ? 'selected' : '' }}>
                                {{ $type }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select" name="category">
                        <option value="">همه دسته‌بندی‌ها</option>
                        @foreach($categories as $category)
                            <option value="{{ $category }}" {{ request('category') == $category ? 'selected' : '' }}>
                                {{ $category }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search ms-2"></i>
                        فیلتر
                    </button>
                </div>
            </form>
        </div>
    </div>

    @if($media->isEmpty())
        <div class="alert alert-info">
            هیچ فایلی یافت نشد.
        </div>
    @else
        <div class="row g-4">
            @foreach($media as $item)
                <div class="col-md-3 col-lg-2">
                    <div class="card h-100">
                        @if($item->type === 'image')
                            <img src="{{ Storage::url($item->path) }}" 
                                 class="card-img-top" 
                                 alt="{{ $item->alt_text ?? $item->title }}"
                                 style="height: 150px; object-fit: cover;">
                        @else
                            <div class="card-img-top bg-light d-flex align-items-center justify-content-center" 
                                 style="height: 150px;">
                                <i class="fas fa-file fa-3x text-secondary"></i>
                            </div>
                        @endif
                        <div class="card-body">
                            <h6 class="card-title text-truncate" title="{{ $item->title }}">
                                {{ $item->title }}
                            </h6>
                            <p class="card-text small text-muted mb-2">
                                <span class="badge bg-primary">{{ $item->type }}</span>
                                <span class="badge bg-secondary">{{ $item->category }}</span>
                            </p>
                            <p class="card-text small text-muted mb-2">
                                {{ number_format($item->size / 1024, 1) }} KB
                            </p>
                            <div class="btn-group w-100">
                                <a href="{{ Storage::url($item->path) }}" 
                                   class="btn btn-sm btn-outline-primary" 
                                   target="_blank"
                                   title="مشاهده">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('admin.media.edit', $item) }}" 
                                   class="btn btn-sm btn-outline-secondary"
                                   title="ویرایش">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('admin.media.destroy', $item) }}" 
                                      method="POST" 
                                      class="d-inline"
                                      onsubmit="return confirm('آیا از حذف این فایل اطمینان دارید؟');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            class="btn btn-sm btn-outline-danger"
                                            title="حذف">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="d-flex justify-content-center mt-4">
            {{ $media->withQueryString()->links() }}
        </div>
    @endif
</div>
@endsection