@extends('admin.layout')

@section('content')
<div class="page-header">
    <div>
        <h1 class="text-3xl font-bold text-gray-800 page-title">eBooks</h1>
        <p class="text-gray-600 mt-1">Manage your digital book collection</p>
    </div>
    <a href="{{ route('ebooks.create') }}" style="background-color: #2563eb;" class="inline-flex items-center text-white px-5 py-2.5 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
        <svg class="w-5 h-5 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
        </svg>
        Add eBook
    </a>
</div>

@if(session('success'))
    <div class="mb-6 bg-green-50 border-l-4 border-green-500 text-green-800 px-6 py-4 rounded-lg shadow-sm flex items-center">
        <svg class="w-6 h-6 mr-3" style="fill: #059669;" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-medium">{{ session('success') }}</span>
    </div>
@endif

<div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="overflow-x-auto table-container">
        <table class="w-full">
        <thead style="background-color: #f9fafb;">
            <tr>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-600">Title</th>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-600">Featured Image</th>
                <th class="px-6 py-3 text-left text-sm font-medium text-gray-600">Download Link</th>
                <th class="px-6 py-3 text-center text-sm font-medium text-gray-600">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($ebooks as $ebook)
            <tr class="hover:bg-gray-50 border-b border-gray-100">
                <td class="px-6 py-4 text-sm text-gray-800 font-medium">{{ $ebook->title }}</td>
                <td class="px-6 py-4 text-sm text-gray-800">
                    @if ($ebook->featured_image)
                    <img src="{{ $ebook->featured_image }}" alt="Featured Image" style="width: 160px; height: 160px; object-fit: cover; border-radius: 0.5rem; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);">
                    @else
                    <span class="text-gray-400 text-xs">No image</span>
                    @endif
                </td>
                <td class="px-6 py-4 text-sm text-gray-800">
                    <a href="{{ $ebook->download_link }}" target="_blank" style="background-color: #10b981;" class="inline-flex items-center px-3 py-1.5 rounded-md text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200">
                        <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                        Download
                    </a>
                </td>
                <td class="px-6 py-4 text-sm">
                    <div class="flex items-center justify-center space-x-3 mobile-actions sm:flex-row flex-col">
                        {{-- Edit Button --}}
                        <a href="{{ route('ebooks.edit', $ebook) }}" style="background-color: #3b82f6;" class="inline-flex items-center px-3 py-1.5 rounded-md text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                            <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                            </svg>
                            Edit
                        </a>

                        {{-- Delete Button --}}
                        <form action="{{ route('ebooks.destroy', $ebook) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this eBook?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" style="background-color: #ef4444;" class="inline-flex items-center px-3 py-1.5 rounded-md text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                                <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                </svg>
                                Delete
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="px-6 py-12 text-center text-gray-500">
                    <svg class="w-16 h-16 mx-auto mb-4" style="fill: #d1d5db;" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
                    </svg>
                    <p class="text-lg font-medium">No eBooks found</p>
                    <p class="text-sm mt-1">Get started by adding your first eBook</p>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    </div>
</div>
@endsection