@extends('layouts.admin')

@section('title', 'الإيموجي والملصقات')

@section('content')
<div class="container-fluid">
    <div class="row">
        @include('components.admin-sidebar')
        <div class="col-md-9 col-lg-10">
            <div class="row mb-4">
                <div class="col-md-6">
                    <h2 class="fw-bold">الإيموجي والملصقات</h2>
                </div>
                <div class="col-md-6 text-end">
                    <a href="{{ route('admin.emojis.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> إضافة إيموجي
                    </a>
                </div>
            </div>

    <!-- Statistics -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-gradient-primary text-white">
                <div class="card-body">
                    <h6 class="mb-0">إجمالي الإيموجي</h6>
                    <h3 class="mb-0 mt-2">{{ number_format($stats->total_emojis) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-gradient-success text-white">
                <div class="card-body">
                    <h6 class="mb-0">إجمالي الملصقات</h6>
                    <h3 class="mb-0 mt-2">{{ number_format($stats->total_stickers) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm bg-gradient-info text-white">
                <div class="card-body">
                    <h6 class="mb-0">الأقسام</h6>
                    <h3 class="mb-0 mt-2">{{ number_format($stats->total_categories) }}</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Emojis Grid -->
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <div class="row g-3">
                @forelse($emojis as $emoji)
                <div class="col-md-2">
                    <div class="card border">
                        <div class="card-body text-center">
                            @if($emoji->icon)
                            <img src="{{ asset($emoji->icon) }}" alt="{{ $emoji->name_ar }}" class="img-fluid mb-2" style="max-height: 60px;">
                            @else
                            <div class="bg-light p-3 mb-2">
                                <i class="fas fa-image fa-2x text-muted"></i>
                            </div>
                            @endif
                            <div class="fw-bold small">{{ $emoji->name_ar }}</div>
                            <small class="text-muted">{{ $emoji->category_name ?? 'N/A' }}</small>
                            <div class="mt-2">
                                <form method="POST" action="{{ route('admin.emojis.destroy', $emoji->id) }}" class="d-inline" onsubmit="return confirm('هل أنت متأكد؟')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="col-12 text-center py-5">
                    <i class="fas fa-smile fa-3x text-muted mb-3"></i>
                    <p class="text-muted">لا توجد إيموجي</p>
                </div>
                @endforelse
            </div>

            @if($emojis->hasPages())
            <div class="mt-4">
                {{ $emojis->links('vendor.pagination.bootstrap-5') }}
            </div>
            @endif
        </div>
    </div>
        </div>
    </div>
</div>
@endsection