@extends('layouts.app')

@section('title', 'Carte de membre | EasyMutuelle')
@section('page_title', 'Carte de membre')

@section('content')
<div class="space-y-4">
    <div class="relative z-20 flex flex-wrap items-center justify-center gap-2 print:hidden" role="toolbar" aria-label="Contrôles de zoom de la carte">
        <button type="button" data-card-zoom="out" class="btn-secondary" aria-label="Réduire la carte">−</button>
        <span id="card-zoom-level" class="min-w-16 text-center text-sm font-semibold text-slate-600">100 %</span>
        <button type="button" data-card-zoom="in" class="btn-secondary" aria-label="Agrandir la carte">+</button>
        <button type="button" data-card-zoom="fit" class="btn-secondary">Ajuster</button>
    </div>
    <div id="card-preview" class="flex min-h-[10cm] items-center justify-center overflow-auto bg-slate-100 p-6 print:min-h-0 print:bg-white print:p-0">
    <div id="member-card" class="relative grid h-[5.4cm] w-[8.5cm] shrink-0 grid-cols-[70%_30%] overflow-hidden rounded-[0.16cm] border border-[#d7d7d2] bg-[#fffdf4] text-slate-900 shadow-xl print:shadow-none">
        <div class="pointer-events-none absolute inset-0 opacity-10"><div class="absolute -bottom-8 left-8 h-20 w-72 rotate-[-8deg] bg-[#f4c21f]"></div><div class="absolute -bottom-10 left-20 h-16 w-72 rotate-[-8deg] bg-[#0b8f3c]"></div><div class="absolute -bottom-12 -left-4 h-16 w-64 rotate-[-8deg] bg-[#ef321b]"></div><div class="absolute left-1/2 top-1/2 h-28 w-28 -translate-x-1/2 -translate-y-1/2 rounded-full border-[10px] border-[#f0b51b]"></div></div>
        <div class="relative flex min-w-0 flex-col p-[0.22cm]">
            <div class="flex items-center gap-1.5 border-b border-[#edbd25]/70 pb-1.5">
                <img src="{{ asset('logo.jpg') }}" alt="MUACE" class="h-8 w-8 rounded-full object-cover">
                <div class="min-w-0"><p class="truncate text-[7px] font-black uppercase tracking-[0.1em] text-slate-900">MUACE</p><p class="text-[5px] font-semibold leading-tight text-slate-700">Mutuelle des Agents du Conseil d’Etat</p></div>
            </div>
            <div class="mt-1.5 rounded-r-[0.12cm] bg-gradient-to-r from-[#ff7a00] via-[#eeb31b] to-[#0b8f3c] px-2 py-1 text-white shadow-sm">
                <p class="text-[7px] font-bold">Carte de membre</p><p class="text-[12px] font-black leading-none tracking-[0.08em]">ADHÉRENT</p>
            </div>
            <div class="mt-1.5 min-w-0"><p class="text-[6px] font-bold uppercase tracking-[0.08em] text-slate-500">Nom</p><p class="truncate text-[11px] font-black leading-tight">{{ $member->fullName() }}</p></div>
            <dl class="mt-1 grid gap-0 text-[6px] leading-tight">
                <div class="grid grid-cols-[30%_70%] border-t border-[#efb51b]/60 py-[0.07cm]"><dt class="font-bold text-slate-600">Code membre</dt><dd class="truncate font-bold">{{ $member->code }}</dd></div>
                <div class="grid grid-cols-[30%_70%] border-t border-[#efb51b]/60 py-[0.07cm]"><dt class="font-bold text-slate-600">Matricule</dt><dd class="truncate font-bold">{{ $member->matricule ?: 'Non renseigné' }}</dd></div>
                <div class="grid grid-cols-[30%_70%] border-t border-[#0b8f3c]/50 py-[0.07cm]"><dt class="font-bold text-slate-600">Catégorie</dt><dd class="truncate font-bold">{{ $member->category }}</dd></div>
                <div class="grid grid-cols-[30%_70%] border-t border-[#0b8f3c]/50 py-[0.07cm]"><dt class="font-bold text-slate-600">Adhésion</dt><dd class="font-bold">{{ $member->membership_date?->format('d/m/Y') ?? 'Non renseignée' }}</dd></div>
                <div class="grid grid-cols-[30%_70%] border-t border-[#efb51b]/60 py-[0.07cm]"><dt class="font-bold text-slate-600">Téléphone</dt><dd class="truncate font-bold">{{ $member->phone ?: 'Non renseigné' }}</dd></div>
                <div class="grid grid-cols-[30%_70%] border-t border-[#0b8f3c]/50 py-[0.07cm]"><dt class="font-bold text-slate-600">Statut</dt><dd class="font-bold text-[#0b8f3c]">● {{ $member->status }}</dd></div>
            </dl>
        </div>
        <div class="relative flex min-w-0 flex-col items-center gap-[0.12cm] border-l-2 border-[#f2b817] bg-[#fffdf4]/90 p-[0.14cm] pt-[0.38cm]">
            @if($member->photo_path)<img src="{{ asset('storage/'.$member->photo_path) }}" alt="Photo de {{ $member->fullName() }}" class="h-[2.1cm] w-[1.72cm] rounded-[0.1cm] border-2 border-[#f2b817] object-cover">@else<div class="flex h-[2.1cm] w-[1.72cm] items-center justify-center rounded-[0.1cm] border-2 border-[#f2b817] bg-slate-100 text-center text-[6px] leading-tight text-slate-400">Photo non disponible</div>@endif
            <img src="https://quickchart.io/qr?size=180&text={{ urlencode($verificationUrl) }}" alt="QR code de vérification de la carte" class="h-[1.55cm] w-[1.55cm] rounded-[0.08cm] border-2 border-[#0b8f3c] bg-white p-[0.04cm]">
            <p class="text-center text-[5px] font-semibold italic leading-tight text-slate-700">Scannez pour vérifier<br>la validité de la carte</p>
        </div>
    </div>
</div>
<style>
    @media print {
        #member-card { transform: none !important; }
    }
</style>
<script>
    (() => {
        const card = document.getElementById('member-card');
        const level = document.getElementById('card-zoom-level');
        let zoom = 1;

        const renderZoom = () => {
            card.style.transform = `scale(${zoom})`;
            card.style.transformOrigin = 'center top';
            level.textContent = `${Math.round(zoom * 100)} %`;
        };

        document.querySelector('[data-card-zoom="out"]').addEventListener('click', () => {
            zoom = Math.max(0.75, Number((zoom - 0.25).toFixed(2)));
            renderZoom();
        });
        document.querySelector('[data-card-zoom="in"]').addEventListener('click', () => {
            zoom = Math.min(3, Number((zoom + 0.25).toFixed(2)));
            renderZoom();
        });
        document.querySelector('[data-card-zoom="fit"]').addEventListener('click', () => {
            const preview = document.getElementById('card-preview');
            zoom = Math.min(3, Math.max(1, (preview.clientWidth - 48) / card.offsetWidth));
            renderZoom();
        });
    })();
</script>
@endsection