@extends('admin.layouts.admin')

@section('title', 'قائمة الحلول المتكاملة')

@section('content')
<div class="bg-white p-6 rounded-lg shadow-md" dir="rtl">
    <div class="flex justify-between items-center mb-6 border-b pb-4">
        <h2 class="text-2xl font-bold text-gray-800">الحلول المتكاملة</h2>
        <a href="{{ route('admin.solutions.create') }}" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">
            <i class="fa-solid fa-plus ml-2"></i> إضافة حل جديد
        </a>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-right border-collapse">
            <thead>
                <tr class="bg-gray-50 text-gray-700 border-b">
                    <th class="p-4 border-b">الأيقونة</th>
                    <th class="p-4 border-b">العنوان</th>
                    <th class="p-4 border-b">النوع</th>
                    <th class="p-4 border-b">السعر / التواصل</th>
                    <th class="p-4 border-b">العمليات</th>
                </tr>
            </thead>
            <tbody>
                @foreach($solutions as $solution)
                <tr class="hover:bg-gray-50 transition border-b">
                    <td class="p-4">
                        <div class="w-10 h-10 flex items-center justify-center bg-blue-100 text-blue-600 rounded text-xl">
                            <i class="{{ $solution->main_icon }}"></i>
                        </div>
                    </td>
                    <td class="p-4">
                        <div class="font-bold">{{ $solution->title }}</div>
                        <div class="text-xs text-gray-500">{{ $solution->feature_tag }}</div>
                    </td>
                    <td class="p-4">
                        @if($solution->is_business_plan)
                            <span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-xs font-bold">خطة أعمال</span>
                        @else
                            <span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-xs font-bold">خطة أفراد</span>
                        @endif
                        
                        @if($solution->is_featured)
                            <span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-xs font-bold mr-1">مميز ⭐</span>
                        @endif
                    </td>
                    <td class="p-4">
                        @if($solution->is_business_plan)
                            <span class="text-xs text-red-600 font-bold truncate block max-w-[150px]">{{ $solution->contact_link }}</span>
                        @else
                            <span class="font-bold text-green-600">{{ $solution->price }} {{ $solution->duration }}</span>
                        @endif
                    </td>
                    <td class="p-4">
                        <div class="flex gap-3">
                            <a href="{{ route('admin.solutions.edit', $solution->id) }}" class="text-blue-600 hover:text-blue-800" title="تعديل">
                                <i class="fa-solid fa-pen-to-square text-lg"></i>
                            </a>
                            <form action="{{ route('admin.solutions.destroy', $solution->id) }}" method="POST" onsubmit="return confirm('هل أنت متأكد من الحذف؟')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-600 hover:text-red-800" title="حذف">
                                    <i class="fa-solid fa-trash-can text-lg"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection