@extends('layouts.app')

@section('title', 'Detail Katalog: ' . $katalog->nama_produk)
@section('page_title', 'Detail Katalog')

@section('content')
{{-- Gunakan max-w-6xl agar grid 3 kolom punya ruang bernapas --}}
<section class="bg-white text-sm  pt-6 max-w-2xl">
        
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        
        {{-- SISI KIRI (Col 4/12): Media & Bio --}}
        <div class="lg:col-span-4 space-y-6">
            {{-- Image Card --}}
            <div class="bg-white  overflow-hidden">
                <div class="relative group">
                    <img  src="{{ $katalog->gambar ? asset('images/'.$katalog->gambar) : 'https://via.placeholder.com/400x400?text=No+Image' }}" 
                            alt="{{ $katalog->nama_produk }}" 
                            class="w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105">
                    <div class="absolute top-4 right-4">
                        <span class="px-3 py-1   font-black uppercase tracking-widest 
                            {{ $katalog->status == 'aktif' ? 'bg-green-500 text-white' : 'bg-red-500 text-white' }}">
                            {{ $katalog->status }}
                        </span>
                    </div>
                    
                </div>
                
                <div class="pt-6">
                    <div class="grid grid-cols-2 gap-4 text-center divide-x divide-gray-100">
                        <div>
                            <p class=" uppercase font-bold tracking-wider">Dilihat</p>
                            <p class="font-bold ">{{ number_format($katalog->jumlah_dilihat) }}<span class="  ml-1">x</span></p>
                        </div>
                        <div>
                            <p class=" uppercase font-bold tracking-wider">Terjual</p>
                            <p class="font-bold text-green-600">{{ number_format($katalog->jumlah_terjual) }}</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Klasifikasi Card --}}
            <div class="bg-white  pt-6">
                <h3 class="text-sm font-bold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-sitemap mr-3"></i> Klasifikasi
                </h3>
                <div class="space-y-4">
                    <div class="flex justify-between items-center pb-3 ">
                        <span class=" ">Jenis Katalog</span>
                        <span class=" font-bold  px-2 py-1 rounded">{{ ucwords(str_replace('_', ' ', $katalog->jenis)) }}</span>
                    </div>
                    <div class="flex justify-between items-center pb-3 ">
                        <span class=" ">Parent / Induk</span>
                        <span class=" font-semibold text-gray-700">{{ $katalog->parent->nama_produk ?? '-' }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class=" ">Satuan Unit</span>
                        <span class=" font-semibold text-gray-700">{{ $katalog->satuan ?? 'N/A' }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- SISI KANAN (Col 8/12): Main Details --}}
        <div class="lg:col-span-8 space-y-6">
            
            {{-- Harga & Stok Widget --}}
            <div class="bg-white  pt-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                    <div>
                        <p class=" font-bold  uppercase tracking-widest mb-2">Harga Retail</p>
                        <div class="flex items-baseline space-x-2">
                            <span class="font-black text-gray-900">Rp {{ number_format($katalog->harga, 0, ',', '.') }}</span>
                            @if($katalog->harga_diskon)
                                <span class="text-sm text-red-500 line-through">Rp {{ number_format($katalog->harga_diskon, 0, ',', '.') }}</span>
                            @endif
                        </div>
                        @if($katalog->harga_grosir)
                            <div class="mt-4 inline-flex items-center px-3 py-1 rounded-md bg-yellow-50 border border-yellow-100 text-yellow-700 ">
                                <i class="fas fa-tags mr-2"></i> Grosir: <b>Rp {{ number_format($katalog->harga_grosir, 0, ',', '.') }}</b> <span class="mx-1 text-gray-300">|</span> Min: {{ $katalog->minimal_grosir }}
                            </div>
                        @endif
                    </div>
                    <div class="p- flex justify-between items-center">
                        <div>
                            <p class=" font-bold  uppercase tracking-widest mb-1">Stok Gudang</p>
                            <p class="font-black text-blue-600">{{ number_format($katalog->stok) }} <span class="text-sm font-medium ">{{ $katalog->satuan }}</span></p>
                        </div>
                        <div class="h-12 w-12 bg-blue-100  flex items-center justify-center text-blue-600">
                            <i class="fas fa-box-open text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tab Content Style: Deskripsi --}}
            <div class="bg-white  overflow-hidden">
                <div class="border-b border-gray-100 bg-gray-50/50 pt-6">
                    <h3 class="font-bold  flex items-center text-sm uppercase tracking-wider">
                        <i class="fas fa-align-left mr-3 text-blue-500"></i> Informasi Produk
                    </h3>
                </div>
                <div class="pt-6">
                    <div class="mb-8">
                        <h4 class=" font-black  uppercase tracking-[0.2em] mb-3">Ringkasan</h4>
                        <p class=" leading-relaxed italic text-sm">"{{ $katalog->deskripsi_pendek ?? 'Tidak ada ringkasan.' }}"</p>
                    </div>
                    <div>
                        <h4 class=" font-black  uppercase tracking-[0.2em] mb-3">Deskripsi Lengkap</h4>
                        <div class="text-gray-700 leading-loose text-sm prose prose-sm max-w-none">
                            {!! nl2br(e($katalog->deskripsi)) ?? '<span class="">Deskripsi belum ditambahkan.</span>' !!}
                        </div>
                    </div>
                </div>
            </div>

            {{-- Spesifikasi Card --}}
            <div class="bg-white  pt-6">
                <h3 class="text-sm font-bold text-gray-900 mb-6 flex items-center uppercase tracking-wider">
                    <i class="fas fa-microscope mr-3 text-purple-500"></i> Spesifikasi Teknis
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
                    <div class="group">
                        <label class=" font-bold  uppercase block mb-1">Bahan Aktif / Kandungan</label>
                        <p class="text-sm  font-semibold">{{ $katalog->bahan_aktif ?? '-' }}</p>
                    </div>
                    <div class="group">
                        <label class=" font-bold  uppercase block mb-1">Masa Simpan</label>
                        <p class="text-sm  font-semibold">{{ $katalog->masa_simpan ?? '-' }}</p>
                    </div>
                    <div class="group">
                        <label class=" font-bold  uppercase block mb-1">Dimensi & Berat</label>
                        <p class="text-sm  font-semibold">{{ $katalog->dimensi ?? '-' }} <span class=" font-normal">({{ number_format($katalog->berat, 2) }} kg)</span></p>
                    </div>
                    <div class="md:col-span-2 bg-purple-50/50 pt-4">
                        <label class=" font-bold text-purple-400 uppercase block mb-2">Instruksi Penggunaan</label>
                        <p class=" text-purple-900 leading-relaxed">{{ $katalog->cara_penggunaan ?? 'Informasi cara penggunaan tidak tersedia.' }}</p>
                    </div>
                </div>
            </div>

            {{-- SEO Accordion --}}
            <div x-data="{ open: false }" class="bg-white  overflow-hidden">
                <button @click="open = !open" class="w-full  py-5 flex justify-between items-center hover:bg-gray-50 transition-colors">
                    <span class="text-sm font-bold text-gray-700 uppercase tracking-wider"><i class="fas fa-search-plus mr-3 "></i> SEO & Metadata</span>
                    <i class="fas fa-chevron-down  transition-transform duration-300" :class="open ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="open" x-transition class="pt-6  space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class=" font-bold  uppercase block mb-1">Meta Title</label>
                            <p class="text-sm font-medium ">{{ $katalog->meta_title ?? '-' }}</p>
                        </div>
                        <div>
                            <label class=" font-bold  uppercase block mb-1">Meta Keywords</label>
                            <p class="text-sm font-medium text-blue-600">{{ $katalog->meta_keywords ?? '-' }}</p>
                        </div>
                        <div class="md:col-span-2">
                            <label class=" font-bold  uppercase block mb-1">Meta Description</label>
                            <p class="text-sm  leading-relaxed">{{ $katalog->meta_description ?? '-' }}</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- Header & Breadcrumb Style --}}
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
        
        <div class="flex items-center space-x-3">
            <a href="{{ route('katalog.edit', $katalog->id) }}" class="text-sm bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 px-6   transition-all duration-200 transform hover:scale-105">
                <i class="fas fa-edit mr-2"></i> Edit
            </a>
            <a href="{{ route('katalog.index') }}" class="bg-gray-800 text-white hover:bg-gray-900 font-bold py-2.5 px-6  transition-all duration-200 shadow-md">
                <i class="fas fa-arrow-left mr-2"></i> Back
            </a>
        </div>
    </div>
    
</section>
@endsection