{% extends "admin/dashboard.html" %}
{% load static %}

{% block title %}
    <title>Admin | Book List</title>
{% endblock title %}

{% block content %}
<style>
    /* Custom styles for image and PDF preview */
    .avatar-md {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 5px;
    }
    .pdf-preview {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        border-radius: 5px;
        border: 1px solid #ddd;
    }
    .pdf-preview i {
        font-size: 24px;
        color: #555;
    }
</style>

<div class="page-content">
    <div class="container-xxl">
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center gap-1">
                        <h4 class="card-title flex-grow-1">All Book List</h4>
                        <a href="{% url 'book_create' %}" class="btn btn-sm btn-primary">Add Book</a>
                    </div>
                    <div>
                        <div class="table-responsive">
                            <table class="table align-middle mb-0 table-hover table-centered">
                                <thead class="bg-light-subtle">
                                    <tr>
                                        <th>ID</th>
                                        <th>Title</th>
                                        <th>Author</th>
                                        <th>Cover Image</th>
                                        {% comment %} <th>Book File</th> {% endcomment %}
                                        <th>Status</th>
                                        <th>Created At</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for book in books %}
                                    <tr>
                                        <td>{{ book.id }}</td>
                                        <td>{{ book.title }}</td>
                                        <td>{{ book.author_name }}</td>
                                        <td>
                                            {% if book.cover_image %}
                                                <img src="{{ book.cover_image.url }}" alt="Cover" class="avatar-md">
                                            {% else %}
                                                <span class="text-muted">No Image</span>
                                            {% endif %}
                                        </td>
                                        {% comment %} <td>
                                            {% if book.book_file %}
                                                <div class="pdf-preview">
                                                    <a href="{{ book.book_file.url }}" target="_blank">
                                                        <i class="fas fa-file-pdf"></i>
                                                    </a>
                                                </div>
                                            {% else %}
                                                <span class="text-muted">No File</span>
                                            {% endif %}
                                        </td> {% endcomment %}
                                        <td>
                                            {% if book.status == 1 %}
                                                <span class="badge bg-success">Published</span>
                                            {% else %}
                                                <span class="badge bg-danger">Unpublished</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ book.created_at|date:"d M Y H:i" }}</td>
                                        <td>
                                            <div class="d-flex gap-2">
                                                <a href="{% url 'book_edit' book.id %}" class="btn btn-soft-primary btn-sm">
                                                    <iconify-icon icon="solar:pen-2-broken" class="align-middle fs-18"></iconify-icon>
                                                </a>
                                                <a href="javascript:void(0);" class="btn btn-soft-danger btn-sm delete-button" data-url="{% url 'book_delete' book.id %}">
                                                    <iconify-icon icon="solar:trash-bin-minimalistic-2-broken" class="align-middle fs-18"></iconify-icon>
                                                </a>
                                            </div>
                                        </td>
                                        
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="8" class="text-center text-warning fw-bold p-5">No books available</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer border-top">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-end mb-0">
                                {% if books.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ books.previous_page_number }}">Previous</a>
                                    </li>
                                {% else %}
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#">Previous</a>
                                    </li>
                                {% endif %}

                                {% for page_num in books.paginator.page_range %}
                                    {% if books.number == page_num %}
                                        <li class="page-item active">
                                            <a class="page-link" href="#">{{ page_num }}</a>
                                        </li>
                                    {% else %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}

                                {% if books.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ books.next_page_number }}">Next</a>
                                    </li>
                                {% else %}
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#">Next</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 text-center">
                    <script>document.write(new Date().getFullYear())</script> &copy; Book Manager. Developed by 
                    <a href="https://geegatechnologies.com/" class="fw-bold footer-text" target="_blank">Geega Technologies</a>
                </div>
            </div>
        </div>
    </footer>
</div>

<script>
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    document.querySelectorAll(".delete-button").forEach(function (button) {
        button.addEventListener("click", function (event) {
            event.preventDefault();
            let deleteUrl = this.getAttribute('data-url');

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, cancel!',
                confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
                cancelButtonClass: 'btn btn-danger w-xs mt-2',
                buttonsStyling: false
            }).then(function (result) {
                if (result.value) {
                    fetch(deleteUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': csrfToken,
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire('Deleted!', 'Your book has been deleted.', 'success').then(() => location.reload());
                        } else {
                            Swal.fire('Error!', data.message, 'error');
                        }
                    })
                    .catch(() => Swal.fire('Error!', 'An error occurred.', 'error'));
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    Swal.fire('Cancelled', 'Your book is safe :)', 'error');
                }
            });
        });
    });
</script>




{% endblock content %}