@extends('layouts.app')

@section('title', 'محصولات')

@section('content')

<div class="flex justify-between items-center mb-6">
    <h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2">☕ محصولات</h2>
    <a href="{{ route('products.create') }}"
       class="inline-flex items-center gap-2 px-5 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl shadow hover:scale-105 hover:shadow-lg transition">
        ➕ Create
    </a>
</div>

{{-- Desktop Table --}}
<div class="hidden md:block bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100">
    <table class="min-w-full text-sm text-gray-700">
        <thead class="bg-gray-50 text-gray-600 uppercase text-xs">
            <tr>
                <th class="p-3 text-center">عکس</th>
                <th class="p-3 text-center">نام</th>
                <th class="p-3 text-center">توضیحات</th>
                <th class="p-3 text-center">قیمت</th>
                <th class="p-3 text-center">دسته بندی</th>
                <th class="p-3 text-center">وضعیت</th>
                <th class="p-3 text-center">عملیات</th>
            </tr>
        </thead>
        <tbody class="divide-y">
            @forelse($products as $product)
            <tr class="hover:bg-gray-50 transition {{ $product->is_disabled ? 'opacity-60' : '' }}">
                <td class="p-3 text-center">
                    @if($product->image)
                        <img src="{{ asset('storage/' . $product->image) }}" 
                             alt="{{ $product->name }}" 
                             class="h-10 w-10 object-cover rounded-full mx-auto">
                    @else
                        <span class="text-gray-400 text-xs">بدون عکس</span>
                    @endif
                </td>
                <td class="p-3 font-medium">{{ $product->name }}</td>
                <td class="p-3 text-gray-500">{{ Str::limit($product->description, 60) }}</td>
                @if($product->price > 0)
                <td class="p-3">{{ number_format($product->price, 2) }} <span class="text-xs text-gray-400">تومان</span></td>
                @else
                <td class="p-3"><span class="text-xs text-gray-400">متغیر</span></td>
                @endif
                <td class="p-3 font-medium">{{ $product->category->name}}</td>

                <td class="p-3 text-center">
                    @if($product->is_disabled)
                        <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-semibold">Disabled</span>
                    @else
                        <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-semibold">Active</span>
                    @endif
                </td>
                <td class="p-3 text-center">
                    <div class="flex items-center justify-center gap-2">
                        <a href="{{ route('products.edit', $product) }}"
                           class="px-3 py-1.5 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-xs shadow transition">Edit</a>

                        <form action="{{ route('products.toggle-disable', $product) }}" method="POST" class="inline">
                            @csrf
                            @method('PATCH')
                            <button type="submit"
                                    class="px-3 py-1.5 rounded-lg bg-yellow-500 hover:bg-yellow-600 text-white text-xs shadow transition">
                                {{ $product->is_disabled ? 'Enable' : 'Disable' }}
                            </button>
                        </form>

                        <form action="{{ route('products.destroy', $product) }}" method="POST" class="inline"
                              onsubmit="return confirm('آیا مطمئن هستید؟');">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                    class="px-3 py-1.5 rounded-lg bg-red-500 hover:bg-red-600 text-white text-xs shadow transition">
                                Delete
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7" class="p-6 text-center text-gray-500 italic">محصولی وجود ندارد.</td>
            </tr>
            @endforelse
        </tbody>
    </table>

    <div class="p-4 border-t">{{ $products->links() }}</div>
</div>

{{-- Mobile Cards --}}
<div class="space-y-4 md:hidden">
    @forelse($products as $product)
        <div class="bg-white shadow-md rounded-xl p-4 border {{ $product->is_disabled ? 'opacity-60' : '' }}">
            @if($product->image)
                <img src="{{ asset('storage/'.$product->image) }}" 
                     alt="{{ $product->name }}" 
                     class="h-20 w-20 object-cover rounded-full mb-3 mx-auto">
            @endif
            <h3 class="text-lg font-bold text-gray-800 text-center">{{ $product->name }}</h3>
            <p class="text-sm text-gray-500 mb-2">{{ Str::limit($product->description, 80) }}</p>
            <p class="text-gray-700 font-medium">{{ number_format($product->price, 2) }} تومان</p>
            <p class="mt-2 text-center">
                @if($product->is_disabled)
                    <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-semibold">Disabled</span>
                @else
                    <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-semibold">Active</span>
                @endif
            </p>
            <div class="mt-3 flex flex-wrap gap-2">
                <a href="{{ route('products.edit', $product) }}"
                   class="flex-1 px-3 py-2 text-center rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-xs shadow transition">Edit</a>

                <form action="{{ route('products.toggle-disable', $product) }}" method="POST" class="flex-1">
                    @csrf
                    @method('PATCH')
                    <button type="submit"
                            class="w-full px-3 py-2 rounded-lg bg-yellow-500 hover:bg-yellow-600 text-white text-xs shadow transition">
                        {{ $product->is_disabled ? 'Enable' : 'Disable' }}
                    </button>
                </form>

                <form action="{{ route('products.destroy', $product) }}" method="POST" class="flex-1"
                      onsubmit="return confirm('آیا مطمئن هستید؟');">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            class="w-full px-3 py-2 rounded-lg bg-red-500 hover:bg-red-600 text-white text-xs shadow transition">
                        Delete
                    </button>
                </form>
            </div>
        </div>
    @empty
        <p class="text-center text-gray-500 italic">محصولی وجود ندارد.</p>
    @endforelse
</div>

@endsection