@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Student Recognition'))
@section('page_heading', __('dashboard.Student Recognition'))
@section('page_subtitle', __('dashboard.Certificate albums description'))
@section('skip_page_hero', true)

@section('content')
<div class="space-y-8">
    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
            <div class="space-y-2">
                <h2 class="text-2xl font-black tracking-tight text-surface-900 dark:text-white">
                    {{ __('dashboard.Student Recognition') }}
                </h2>
                <p class="max-w-2xl text-sm leading-7 text-surface-500 dark:text-surface-400">
                    {{ __('dashboard.Certificate albums description') }}
                </p>
            </div>

            <div class="flex flex-wrap gap-3">
                <button type="button" data-bs-toggle="modal" data-bs-target="#createAlbumModal" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                    <i class="fa-solid fa-plus text-xs"></i>
                    <span>{{ __('dashboard.Create Album') }}</span>
                </button>
            </div>
        </div>
    </section>

    <section class="grid gap-4 md:grid-cols-3">
        <article class="rounded-xl border border-surface-200 bg-white px-5 py-4 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Total Albums') }}</p>
            <p class="mt-2 text-2xl font-black leading-none text-surface-900 dark:text-white">{{ $albums->total() }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white px-5 py-4 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Visible') }}</p>
            <p class="mt-2 text-2xl font-black leading-none text-surface-900 dark:text-white">{{ $albums->count() }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white px-5 py-4 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-xs font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Issued Certificates') }}</p>
            <p class="mt-2 text-2xl font-black leading-none text-surface-900 dark:text-white">{{ $albums->sum('certificates_count') }}</p>
        </article>
    </section>

    @if($albums->isEmpty())
        <section class="rounded-xl border border-dashed border-brand-200 bg-white px-6 py-16 text-center dark:border-brand-500/20 dark:bg-surface-900">
            <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-300">
                <i class="fa-solid fa-award text-3xl"></i>
            </div>
            <h3 class="mt-6 text-2xl font-black text-surface-900 dark:text-white">{{ __('dashboard.No Albums Found') }}</h3>
            <p class="mx-auto mt-3 max-w-xl text-sm leading-7 text-surface-500 dark:text-surface-400">{{ __('dashboard.Start by creating your first certificate album to capture issuance and attachments.') }}</p>
        </section>
    @else
        <section class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            @foreach($albums as $album)
                <article class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm transition hover:-translate-y-1 hover:border-brand-200 hover:shadow-md dark:border-surface-800 dark:bg-surface-900 dark:hover:border-brand-500/20">
                    <div class="aspect-[16/10] overflow-hidden bg-surface-100 dark:bg-surface-800">
                        <img src="{{ $album->cover_url }}" alt="{{ $album->title }}" class="h-full w-full object-cover">
                    </div>

                    <div class="space-y-5 p-5">
                        <div class="flex items-start justify-between gap-4">
                            <div class="min-w-0">
                                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $album->title }}</h2>
                                <p class="mt-2 text-sm leading-7 text-surface-500 dark:text-surface-400">{{ \Illuminate\Support\Str::limit($album->description, 100) ?: __('dashboard.No description added') }}</p>
                            </div>

                            <div class="dropdown shrink-0">
                                <button class="flex h-10 w-10 items-center justify-center rounded-xl border border-surface-200 bg-white text-surface-600 transition hover:border-brand-300 hover:text-brand-600 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-300" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fa-solid fa-ellipsis"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li>
                                        <button type="button"
                                                class="dropdown-item"
                                                data-bs-toggle="modal"
                                                data-bs-target="#editAlbumModal"
                                                data-id="{{ $album->id }}"
                                                data-title="{{ $album->title }}"
                                                data-date="{{ $album->date->format('Y-m-d') }}"
                                                data-desc="{{ $album->description }}"
                                                onclick="populateEditModal(this)">
                                            Edit
                                        </button>
                                    </li>
                                    <li>
                                        <form action="{{ route('admin.certificates.albums.delete', $album->id) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="dropdown-item text-danger" onclick="return confirm('Delete this album? This will delete all issued certificates inside it.')">Delete</button>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <div class="rounded-xl border border-surface-200 bg-surface-50 px-4 py-3 dark:border-surface-800 dark:bg-surface-950">
                                <p class="text-[11px] font-bold text-surface-400">{{ __('dashboard.Date') }}</p>
                                <p class="mt-2 text-sm font-bold text-surface-900 dark:text-white">{{ $album->date->format('M d, Y') }}</p>
                            </div>
                            <div class="rounded-xl border border-surface-200 bg-surface-50 px-4 py-3 dark:border-surface-800 dark:bg-surface-950">
                                <p class="text-[11px] font-bold text-surface-400">{{ __('dashboard.Issued') }}</p>
                                <p class="mt-2 text-sm font-bold text-surface-900 dark:text-white">{{ $album->certificates_count }}</p>
                            </div>
                        </div>

                        <a href="{{ route('admin.certificates.albums.show', $album->id) }}" class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-brand-600 px-4 py-3 text-sm font-bold text-white transition hover:bg-brand-700">
                            <i class="fa-solid fa-folder-open"></i>
                            <span>{{ __('dashboard.Manage Certificates') }}</span>
                        </a>
                    </div>
                </article>
            @endforeach
        </section>

        <section class="border-t border-surface-200 px-2 pt-2 dark:border-surface-800">
            {{ $albums->links() }}
        </section>
    @endif
</div>

<div class="modal fade" id="createAlbumModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <form action="{{ route('admin.certificates.albums.store') }}" method="POST" enctype="multipart/form-data" class="modal-content overflow-hidden rounded-xl border-0 bg-white shadow-2xl dark:bg-surface-900">
            @csrf
            <div class="border-b border-surface-200 bg-surface-50 px-6 py-5 dark:border-surface-800 dark:bg-surface-950/80">
                <div class="flex items-start justify-between gap-4">
                    <div class="space-y-2">
                        <div class="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-300">
                            <i class="fa-solid fa-award"></i>
                        </div>
                        <div>
                            <h5 class="text-xl font-black text-surface-900 dark:text-white">{{ __('dashboard.Create New Album') }}</h5>
                            <p class="mt-1 text-sm leading-6 text-surface-500 dark:text-surface-400">
                                {{ app()->getLocale() === 'ar' ? 'أنشئ ألبومًا جديدًا لتنظيم شهادات التكريم والاحتفاظ بسجل الإصدارات في مكان واحد.' : 'Create a new album to organize recognition certificates and keep issuance records in one place.' }}
                            </p>
                        </div>
                    </div>

                    <button type="button" data-bs-dismiss="modal" class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-surface-200 bg-white text-surface-500 transition hover:border-surface-300 hover:text-surface-900 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-300 dark:hover:border-surface-600 dark:hover:text-white">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
            </div>
            <div class="space-y-6 px-6 py-6">
                <div class="grid gap-5 md:grid-cols-2">
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Album Title') }}</label>
                        <input type="text" name="title" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-900 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required>
                    </div>
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Date') }}</label>
                        <input type="date" name="date" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-900 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required>
                    </div>
                </div>

                <div class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_220px]">
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Description') }}</label>
                        <textarea name="description" rows="5" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-900 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100"></textarea>
                    </div>

                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Cover Image') }}</label>
                        <label class="flex min-h-[156px] cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-surface-300 bg-surface-50 px-4 py-5 text-center transition hover:border-brand-300 hover:bg-brand-50/40 dark:border-surface-700 dark:bg-surface-950 dark:hover:border-brand-500/30 dark:hover:bg-brand-500/5">
                            <span class="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-white text-brand-600 shadow-sm dark:bg-surface-900 dark:text-brand-300">
                                <i class="fa-solid fa-image"></i>
                            </span>
                            <span class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ app()->getLocale() === 'ar' ? 'اختر غلاف الألبوم' : 'Choose album cover' }}</span>
                            <span class="text-xs leading-5 text-surface-500 dark:text-surface-400">{{ app()->getLocale() === 'ar' ? 'ملف صورة اختياري لواجهة الألبوم' : 'Optional image for the album cover.' }}</span>
                            <input type="file" name="cover_image" class="hidden" accept="image/*">
                        </label>
                    </div>
                </div>
            </div>

            <div class="flex flex-col-reverse gap-3 border-t border-surface-200 bg-surface-50 px-6 py-5 sm:flex-row sm:items-center sm:justify-end dark:border-surface-800 dark:bg-surface-950/80">
                <button type="button" data-bs-dismiss="modal" class="inline-flex items-center justify-center rounded-xl border border-surface-200 bg-white px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:hover:bg-surface-800">
                    {{ __('dashboard.Cancel') }}
                </button>
                <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                    <i class="fa-solid fa-floppy-disk text-xs"></i>
                    <span>{{ __('dashboard.Save Album') }}</span>
                </button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="editAlbumModal" tabindex="-1">
    <div class="modal-dialog">
        <form id="editAlbumForm" method="POST" enctype="multipart/form-data" class="modal-content">
            @csrf
            @method('PUT')
            <div class="modal-header">
                <h5 class="modal-title">{{ __('dashboard.Edit Album') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body space-y-4">
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700">{{ __('dashboard.Album Title') }}</label>
                    <input type="text" name="title" id="edit_title" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700">{{ __('dashboard.Date') }}</label>
                    <input type="date" name="date" id="edit_date" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700">{{ __('dashboard.Cover Image') }}</label>
                    <input type="file" name="cover_image" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" accept="image/*">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700">{{ __('dashboard.Description') }}</label>
                    <textarea name="description" id="edit_desc" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-2 text-sm font-bold text-zinc-700 hover:bg-zinc-100" data-bs-dismiss="modal">{{ __('dashboard.Cancel') }}</button>
                <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700">{{ __('dashboard.Update Album') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function populateEditModal(element) {
        const id = element.getAttribute('data-id');
        document.getElementById('edit_title').value = element.getAttribute('data-title');
        document.getElementById('edit_date').value = element.getAttribute('data-date');
        document.getElementById('edit_desc').value = element.getAttribute('data-desc');

        let url = "{{ route('admin.certificates.albums.update', ':id') }}";
        document.getElementById('editAlbumForm').action = url.replace(':id', id);
    }
</script>
@endsection