@extends('layouts.doctor')

@section('title', 'My Awards')
@section('header', 'Awards & Accreditations')

@section('content')
<div class="max-w-4xl mx-auto space-y-6" x-data="{ zoomImage: null }">
    <!-- Lightbox Modal -->
    <template x-if="zoomImage">
        <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/90 backdrop-blur-sm" 
             @click="zoomImage = null"
             @keydown.escape.window="zoomImage = null">
            <div class="relative max-w-5xl w-full h-full flex items-center justify-center">
                <img :src="zoomImage" class="max-h-full max-w-full rounded-2xl shadow-2xl object-contain animate-in zoom-in duration-300">
                <button @click="zoomImage = null" class="absolute top-0 right-0 m-4 p-3 bg-white/10 hover:bg-white/20 rounded-full text-white transition-all">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
        </div>
    </template>

    <div class="flex items-center justify-between bg-white p-8 rounded-3xl border border-slate-200 shadow-sm">
        <div>
            <h2 class="text-xl font-black text-slate-800 tracking-tight uppercase">Professional Recognition</h2>
            <p class="text-xs text-slate-500 font-medium mt-1">Manage your professional milestones and certificates.</p>
        </div>
        <a href="{{ route('doctor.awards.create') }}" class="px-6 py-3 bg-indigo-600 text-white text-[10px] font-black uppercase tracking-widest rounded-2xl hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100 flex items-center gap-2">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
            Add New Award
        </a>
    </div>

    <div class="space-y-4">
        @forelse($awards as $award)
            <div class="bg-white border border-slate-200 rounded-3xl p-8 flex items-start justify-between gap-6 hover:shadow-xl hover:shadow-indigo-100/30 transition-all group">
                <div class="flex gap-8 items-start">
                    <div class="flex-shrink-0 w-20 text-center">
                        <div class="text-2xl font-black text-indigo-600">{{ $award->year }}</div>
                        <div class="h-1 bg-indigo-100 w-full my-2 rounded-full opacity-50"></div>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="text-xl font-black text-slate-800 tracking-tight">{{ $award->name }}</h4>
                            <p class="text-sm text-slate-500 font-medium mt-2 leading-relaxed">{{ $award->description ?: 'No description provided.' }}</p>
                        </div>
                        
                        @if($award->images && count($award->images) > 0)
                            <div class="flex flex-wrap gap-3">
                                @foreach($award->images as $img)
                                    <div class="relative group/img" @click="zoomImage = '{{ asset('storage/' . $img) }}'">
                                        <img src="{{ asset('storage/' . $img) }}" class="h-20 w-20 rounded-2xl object-cover border border-slate-100 shadow-sm transition-transform hover:scale-110 cursor-zoom-in">
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>

                <div class="flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                    <a href="{{ route('doctor.awards.edit', $award->id) }}" class="p-3 bg-slate-50 text-slate-600 rounded-2xl hover:bg-indigo-50 hover:text-indigo-600 transition-colors border border-slate-100 shadow-sm" title="Edit Award">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-5M17.114 8.94a2.121 2.121 0 113 3L11.707 21l-4.141 1.035 1.035-4.142 8.414-8.414z"/></svg>
                    </a>
                    <form action="{{ route('doctor.awards.destroy', $award->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this award?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="p-3 bg-slate-50 text-rose-600 rounded-2xl hover:bg-rose-50 transition-colors border border-slate-100 shadow-sm" title="Delete Award">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        </button>
                    </form>
                </div>
            </div>
        @empty
            <div class="bg-white border border-dashed border-slate-300 rounded-[3rem] p-20 text-center">
                <div class="h-20 w-20 bg-slate-50 rounded-[2rem] flex items-center justify-center text-slate-300 mx-auto mb-6">
                    <svg class="h-10 w-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <h4 class="text-lg font-black text-slate-400 uppercase tracking-widest leading-none">No professional awards found</h4>
                <p class="text-xs text-slate-400 mt-2 font-bold uppercase tracking-widest">Add your certificates and recognitions to enhance your profile.</p>
            </div>
        @endforelse
    </div>
</div>
@endsection