@extends('layouts.admin.index')

@section('content')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Books - <span class="fw-normal">All Books</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>

            <div class="collapse d-lg-block my-lg-auto ms-lg-auto" id="page_header">
                <div class="d-sm-flex align-items-center mb-3 mb-lg-0 ms-lg-3">
                    <div class="d-inline-flex mt-3 mt-sm-0">
                        <a href="{{ route('admin.books.create') }}"
                            class="status-indicator-container ms-1 btn btn-primary rounded-pill">
                            <i class="ph-plus me-2"></i>Add Book
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item">Home</a>
                    <span class="breadcrumb-item active">Books</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="content">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="ph-check-circle me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="ph-warning-circle me-2"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-bottom">
                <h5 class="mb-0 fw-bold">
                    <i class="ph-book me-2"></i>Books List
                </h5>
            </div>
            <div class="card-body">
                <!-- Filters -->
                <form method="GET" action="{{ route('admin.books.index') }}" class="mb-4">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <input type="text" name="search" class="form-control" placeholder="Search by title, author, ISBN..." value="{{ request('search') }}">
                        </div>
                        <div class="col-md-3">
                            <select name="category_id" class="form-select">
                                <option value="">All Categories</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select name="status" class="form-select">
                                <option value="">All Status</option>
                                <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ request('status') == '0' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="ph-magnifying-glass me-1"></i>Filter
                            </button>
                        </div>
                    </div>
                </form>

                <!-- Books Table -->
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 80px;">Image</th>
                                <th>Title</th>
                                <th>Author</th>
                                <th>Category</th>
                                <th>Price</th>
                                <th>Stock</th>
                                <th>Status</th>
                                <th style="width: 150px;" class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($books as $book)
                            <tr>
                                <td>
                                    <img src="{{ $book->cover_image ?: asset('images/books/small/pic1.jpg') }}" 
                                         alt="{{ $book->title }}" 
                                         style="width: 60px; height: 80px; object-fit: cover; border-radius: 4px;">
                                </td>
                                <td>
                                    <strong>{{ $book->title }}</strong>
                                    @if($book->is_featured)
                                        <span class="badge bg-primary ms-2">Featured</span>
                                    @endif
                                </td>
                                <td>{{ $book->author }}</td>
                                <td>{{ $book->category->name ?? 'N/A' }}</td>
                                <td>
                                    @if($book->is_on_sale)
                                        <span class="text-danger fw-bold">₹{{ number_format($book->sale_price, 2) }}</span>
                                        <small class="text-muted text-decoration-line-through">₹{{ number_format($book->price, 2) }}</small>
                                    @else
                                        <span class="fw-bold">₹{{ number_format($book->price, 2) }}</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge {{ $book->stock_quantity > 0 ? 'bg-success' : 'bg-danger' }}">
                                        {{ $book->stock_quantity }}
                                    </span>
                                </td>
                                <td>
                                    <form action="{{ route('admin.books.toggle-status', $book) }}" method="POST" class="d-inline">
                                        @csrf
                                        <button type="submit" class="btn btn-sm {{ $book->is_active ? 'btn-success' : 'btn-secondary' }}">
                                            {{ $book->is_active ? 'Active' : 'Inactive' }}
                                        </button>
                                    </form>
                                </td>
                                <td>
                                    <div class="d-flex gap-1">
                                        <a href="{{ route('admin.books.show', $book) }}" class="btn btn-sm btn-info" title="View">
                                            <i class="ph-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.books.edit', $book) }}" class="btn btn-sm btn-primary" title="Edit">
                                            <i class="ph-pencil"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-danger" title="Delete" onclick="deleteBook({{ $book->id }}, '{{ $book->title }}')">
                                            <i class="ph-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center py-5">
                                    <i class="ph-book-open" style="font-size: 48px; opacity: 0.3;"></i>
                                    <p class="mt-3 mb-0 text-muted">No books found</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if($books->hasPages())
                <div class="mt-4">
                    {{ $books->appends(request()->query())->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Delete Form (Hidden) -->
    <form id="delete-book-form" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>
@endsection

<script>
function deleteBook(bookId, bookTitle) {
    if (confirm('Are you sure you want to delete "' + bookTitle + '"?\n\nThis action cannot be undone!')) {
        const form = document.getElementById('delete-book-form');
        form.action = '{{ url("admin/books") }}/' + bookId;
        form.submit();
    }
}
</script>