@extends('business.layouts.app')

@section('title', 'Ürünlerim - İşletme Paneli')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.css"/>
@endpush

@section('content')
    <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
        <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Ürünlerim</h1>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Ürünlerinizi listeleyin ve yönetin.</p>
            </div>
            <a href="{{ route('business.products.create') }}"
               class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Yeni Ürün Ekle
            </a>
        </div>

        @if(session('success'))
            <div class="mb-4 rounded-lg border-l-4 border-green-500 bg-green-50 p-4 dark:bg-green-500/10">
                <p class="text-sm text-green-700 dark:text-green-300">{{ session('success') }}</p>
            </div>
        @endif

        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] overflow-hidden">
            @if($products->isEmpty())
                <div class="p-12 text-center">
                    <p class="text-gray-500 dark:text-gray-400">Henüz ürün eklenmemiş.</p>
                    <a href="{{ route('business.products.create') }}" class="mt-4 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
                        İlk ürünü ekle
                    </a>
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="w-full text-left text-sm">
                        <thead class="border-b border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/50">
                        <tr>
                            <th class="w-16 px-2 py-3 font-medium text-gray-700 dark:text-gray-300">Görsel</th>
                            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">Ürün</th>
                            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">Kategori</th>
                            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">Fiyat</th>
                            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">Durum</th>
                            <th class="px-4 py-3 font-medium text-gray-700 dark:text-gray-300 text-right">İşlem</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($products as $product)
                            @php $mainImage = $product->galleryMedia->first(); @endphp
                            <tr class="border-b border-gray-100 dark:border-gray-700/50 hover:bg-gray-50/50 dark:hover:bg-gray-800/30">
                                <td class="px-2 py-3">
                                    @if($mainImage)
                                        @php $imgUrl = asset('storage/' . $mainImage->file_path); @endphp
                                        <a href="{{ $imgUrl }}" data-fancybox data-caption="{{ $product->name }}" class="block rounded-lg border border-gray-200 overflow-hidden bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700" title="Büyütmek için tıklayın">
                                            <img src="{{ $imgUrl }}" alt="{{ $product->name }}" class="h-12 w-12 object-cover" loading="lazy"/>
                                        </a>
                                    @else
                                        <div class="flex h-12 w-12 items-center justify-center rounded-lg border border-gray-200 bg-gray-100 text-gray-400 dark:border-gray-600 dark:bg-gray-700" title="Görsel yok">
                                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
                                        </div>
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    <div class="font-medium text-gray-900 dark:text-white">{{ $product->name }}</div>
                                    @if($product->slug)
                                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $product->slug }}</div>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-gray-600 dark:text-gray-400">{{ $product->productCategory->name ?? '-' }}</td>
                                <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                                    @if($product->price_from !== null)
                                        {{ number_format($product->price_from, 0, ',', '.') }} TL
                                    @else
                                        -
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    @if($product->is_active)
                                        <span class="inline-flex rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900/30 dark:text-green-400">Yayında</span>
                                    @else
                                        <span class="inline-flex rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-400">Taslak</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-right">
                                    <a href="{{ route('business.products.edit', $product) }}"
                                       class="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                                        Düzenle
                                    </a>
                                    <form action="{{ route('business.products.destroy', $product) }}" method="post" class="inline ml-1" onsubmit="return confirm('Bu ürünü silmek (çöp kutusuna taşımak) istediğinize emin misiniz?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="rounded-lg border border-red-300 bg-white px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-50 dark:border-red-800 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-red-900/20">Sil</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                @if($products->hasPages())
                    <div class="border-t border-gray-200 px-4 py-3 dark:border-gray-700">
                        {{ $products->links() }}
                    </div>
                @endif
            @endif
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.umd.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Fancybox.bind('[data-fancybox]', {});
        });
    </script>
@endpush