@extends('layouts.admin')
@section('content')
    <div class="flex space-x-2 items-center">
        <span class="bi bi-bookmark-star-fill text-2xl"></span>
        <h2 class="text-xl">gallery</h2>
    </div>
    <div class="mt-4 bg-white">
        <div class="bg-blue-500  p-2 flex justify-between">
            <h2 class="text-white">gallery</h2>
            <a class="p-2 bg-white rounded-md text-xs" href="{{ route('gallery.create') }}">Add to gallery</a>
        </div>
        <div class="px-4 pb-2">
            <div class="overflow-x-auto mt-2">
                <table class="min-w-full divide-y divide-gray-200 table-striped table-bordered" id="dataTable">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Details </th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Images</th>
                            <th scope="col"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Action
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach ($collection as $item)
                            <tr class="border-b-2">
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">
                                   {{ $item->id }}</td>
                                <td class="">
                                    <img src="{{ $item->itemImages[0]->image ?? 'na' }}" class="w-10 h-10 rounded-full"
                                        alt="" srcset="">
                                </td>
                                <td class="flex space-x-1">
                                    
                                    
                                 <form action="{{ route('gallery.remove', $item->id) }}" method="POST">
                                        @csrf
                                        @method('PATCH')
                                        <button type="submit" class="p-2 bg-red-500 text-white rounded-md text-xs">
                                            Remove
                                        </button>
                                    </form>
                                    
                                    
                                    
                             {{--    <a href="{{ route('gallery.update', $item->id) }}"><span class="bi bi-trash"></span></a> --}}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection