@extends('backend.app')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">QR Codes</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                        <li class="breadcrumb-item active">Family Memorials QR Codes</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>


    <!-- Search & Filter bar -->
    <div class="row mb-4">
        <div class="col-md-6 col-lg-4">
            <form action="{{ route('admin.qr-codes.family') }}" method="GET">
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0">
                        <i class="ri-search-line text-muted"></i>
                    </span>
                    <input type="text" name="search" class="form-control border-start-0 ps-0" placeholder="Search family account..." value="{{ $search ?? '' }}">
                    <button class="btn btn-primary" type="submit">Search</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Cards Grid -->
    <div class="row">
        @forelse ($memorials as $memorial)
            @php
                $familyName = $memorial->familyAccount->{'name/en'} ?? $memorial->familyAccount->{'name/fr'} ?? $memorial->familyAccount->{'name/gr'} ?? 'Family';
                $titleName = "Memorials of " . $familyName;
                $url = url("/family/{$memorial->family_account_id}");
            @endphp
            <div class="col-sm-6 col-md-4 col-xl-3 mb-4">
                <div class="card h-100 border-0 shadow-sm qr-memorial-card" style="background-color: #f7f4ec; border-radius: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease;">
                    <div class="card-body text-center d-flex flex-column justify-content-between p-4">

                        <div>
                            <!-- Brand Title -->
                            <p class="text-uppercase tracking-wider mb-1" style="font-size: 0.75rem; font-weight: 700; color: #bca075; letter-spacing: 0.15em;">Memorialis</p>
                            <!-- Name -->
                            <h5 class="card-title mb-3" style="color: #1a2536; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.25rem; min-height: 48px; display: flex; align-items: center; justify-content: center;">
                                {{ $titleName }}
                            </h5>
                            <!-- Divider -->
                            <div class="mx-auto my-3" style="width: 40px; height: 1.5px; background-color: #d1c8b9;"></div>
                        </div>

                        <!-- QR Code Container -->
                        <div class="qr-container mx-auto p-4 mb-3 d-flex align-items-center justify-content-center" style="background-color: #eee9dd; border-radius: 16px; width: 100%; max-width: 200px; aspect-ratio: 1/1;">
                            {!! QrCode::size(150)->margin(0)->backgroundColor(238, 233, 221)->color(26, 37, 54)->generate($url) !!}
                        </div>

                        <div>
                            <!-- Tagline -->
                            <p class="fst-italic text-muted mb-4" style="font-size: 0.75rem; color: #8e8573 !important;">"Scan to remember."</p>

                            <!-- Actions -->
                            <div class="row g-2 mb-2">
                                <div class="col-6">
                                    <a href="{{ route('admin.qr-codes.download', ['type' => 'family', 'id' => $memorial->id, 'format' => 'png']) }}" class="btn btn-white w-100 border text-dark btn-sm d-flex align-items-center justify-content-center gap-1" style="background: #ffffff; border-color: #e2d9c9 !important;">
                                        <i class="ri-image-line"></i> PNG
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="{{ route('admin.qr-codes.print', ['type' => 'family', 'id' => $memorial->id]) }}" target="_blank" class="btn btn-white w-100 border text-dark btn-sm d-flex align-items-center justify-content-center gap-1" style="background: #ffffff; border-color: #e2d9c9 !important;">
                                        <i class="ri-file-pdf-line"></i> PDF
                                    </a>
                                </div>
                            </div>
                            <a href="{{ route('admin.qr-codes.download', ['type' => 'family', 'id' => $memorial->id, 'format' => 'svg']) }}" class="btn w-100 text-white btn-sm d-flex align-items-center justify-content-center gap-1" style="background-color: #1a2536; border-radius: 6px;">
                                <i class="ri-download-2-line"></i> Engraving-ready export
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center py-5">
                <div class="text-muted">
                    <i class="ri-qr-code-line fs-1 text-muted d-block mb-2"></i>
                    No family memorials found matching your query.
                </div>
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    <div class="row mt-3">
        <div class="col-12 d-flex justify-content-center">
            {{ $memorials->links() }}
        </div>
    </div>

    <style>
        .qr-memorial-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
        }
    </style>
@endsection