@use('Illuminate\Support\Facades\Storage')
<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Dettaglio Articolo') }}: {{ $articolo->codice_articolo }}
            </h2>
            <div class="space-x-2">
                <a href="{{ route('admin.articoli.edit', $articolo) }}" class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                    Modifica
                </a>
                <a href="{{ route('admin.articoli.index') }}" class="text-gray-600 hover:text-gray-900">
                    &larr; Torna alla lista
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-12" x-data="{ modalImg: null }">
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            @if (session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                    {{ session('success') }}
                </div>
            @endif

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Dettagli Articolo -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- Sezione Ubicazione -->
                    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="p-6">
                            <h3 class="text-lg font-medium text-gray-900 mb-4 pb-2 border-b">Ubicazione</h3>
                            <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Codice Articolo</dt>
                                    <dd class="mt-1 text-sm text-gray-900 font-semibold">{{ $articolo->codice_articolo }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Ciclo</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->ciclo ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Hole Diameter</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->hole_diameter ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Diametro</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->diametro ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Posizione</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->posizione ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Quantita</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->quantita }}</dd>
                                </div>
                                <div class="md:col-span-2">
                                    <dt class="text-sm font-medium text-gray-500">Descrizione</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->descrizione ?? '-' }}</dd>
                                </div>
                                @if ($articolo->immagine_articolo)
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Immagine Articolo</dt>
                                    <dd class="mt-2">
                                        <img src="{{ Storage::url($articolo->immagine_articolo) }}" alt="Immagine Articolo"
                                             class="h-16 w-16 object-cover rounded border cursor-pointer hover:opacity-80 transition-opacity"
                                             @click="modalImg = '{{ Storage::url($articolo->immagine_articolo) }}'">
                                    </dd>
                                </div>
                                @endif
                            </dl>
                        </div>
                    </div>

                    <!-- Sezione Parametri Tecnologici -->
                    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="p-6">
                            <h3 class="text-lg font-medium text-gray-900 mb-4 pb-2 border-b">Parametri Tecnologici</h3>
                            <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Tipo di Lavorazione</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->tipo_lavorazione ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Materiale da Lavorare</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->materiale_lavorare ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Maximum Thickness</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->maximum_thickness ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Speed (RPM)</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->speed_rpm ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Feed</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->feed ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Max Thrust (A)</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->max_thrust_a ?? '-' }}</dd>
                                </div>
                                @if ($articolo->immagine_thrust)
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Immagine Thrust</dt>
                                    <dd class="mt-2">
                                        <img src="{{ Storage::url($articolo->immagine_thrust) }}" alt="Immagine Thrust"
                                             class="h-16 w-16 object-cover rounded border cursor-pointer hover:opacity-80 transition-opacity"
                                             @click="modalImg = '{{ Storage::url($articolo->immagine_thrust) }}'">
                                    </dd>
                                </div>
                                @endif
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Min Torque (A)</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->min_torque_a ?? '-' }}</dd>
                                </div>
                                @if ($articolo->immagine_tourque)
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Immagine Tourque</dt>
                                    <dd class="mt-2">
                                        <img src="{{ Storage::url($articolo->immagine_tourque) }}" alt="Immagine Tourque"
                                             class="h-16 w-16 object-cover rounded border cursor-pointer hover:opacity-80 transition-opacity"
                                             @click="modalImg = '{{ Storage::url($articolo->immagine_tourque) }}'">
                                    </dd>
                                </div>
                                @endif
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Quantita Fori</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->quantita_fori ?? '-' }}</dd>
                                </div>
                            </dl>
                        </div>
                    </div>
                </div>

                <!-- Sezione QR Code -->
                <div class="lg:col-span-1">
                    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="p-6">
                            <h3 class="text-lg font-medium text-gray-900 mb-4 pb-2 border-b">QR Code</h3>
                            <div class="flex flex-col items-center">
                                <div class="bg-white p-4 border rounded-lg mb-4">
                                    <img src="{{ route('admin.articoli.qrcode', $articolo) }}" alt="QR Code" class="w-48 h-48">
                                </div>
                                <p class="text-xs text-gray-500 mb-4 text-center break-all">
                                    {{ $articolo->qr_url }}
                                </p>
                                <div class="space-y-2 w-full">
                                    <a href="{{ route('admin.articoli.qrcode.download', $articolo) }}"
                                       class="block w-full text-center bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                                        Scarica QR Code
                                    </a>
                                    <button onclick="window.print()"
                                            class="block w-full text-center bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                                        Stampa
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Info -->
                    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mt-6">
                        <div class="p-6">
                            <h3 class="text-lg font-medium text-gray-900 mb-4 pb-2 border-b">Informazioni</h3>
                            <dl class="space-y-2">
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Creato il</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->created_at->format('d/m/Y H:i') }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Ultima modifica</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $articolo->updated_at->format('d/m/Y H:i') }}</dd>
                                </div>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Image Modal -->
        <div x-show="modalImg" x-cloak
             class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4"
             @click="modalImg = null"
             @keydown.escape.window="modalImg = null">
            <img :src="modalImg" @click.stop class="max-h-[90vh] max-w-full rounded-lg shadow-2xl">
        </div>
    </div>
</x-app-layout>