@extends('layouts.app')

@section('title', 'Books Catalog')

@section('styles')
<style>
    /* Thumbnail styling */
    .book-thumb {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #dee2e6;
    }

    /* Toast notification */
    .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        min-width: 280px;
    }

    /* Tab styling */
    .nav-tabs .nav-link.active {
        font-weight: 600;
    }

    /* Table hover */
    .table tbody tr:hover {
        background-color: #f1f3f5;
    }

    /* History tab badge */
    .history-count {
        font-size: 0.75rem;
    }

    /* Image preview in edit modal */
    #currentCoverPreview {
        max-width: 80px;
        max-height: 80px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #dee2e6;
    }
</style>
@endsection

@section('content')
<div class="container">

    {{-- ===== Page Header ===== --}}
    <div class="row mb-4 align-items-center">
        <div class="col-md-8">
            <h2 class="fw-bold"><i class="fas fa-book-open text-primary"></i> Books Catalog</h2>
        </div>
        <div class="col-md-4 text-end">
            <a href="{{ route('books.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Add New Book
            </a>
        </div>
    </div>

    @if($search !== '')
        <div class="alert alert-info py-2">
            Showing books matching <strong>{{ $search }}</strong>.
            <a href="{{ route('books.index') }}" class="alert-link ms-1">Clear search</a>
        </div>
    @endif

    {{-- ===== Toast Notifications ===== --}}
    <div class="toast-container">
        <div id="toastSuccess" class="toast align-items-center text-white bg-success border-0" role="alert">
            <div class="d-flex">
                <div class="toast-body" id="toastSuccessMsg">Action completed!</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
        <div id="toastError" class="toast align-items-center text-white bg-danger border-0" role="alert">
            <div class="d-flex">
                <div class="toast-body" id="toastErrorMsg">Something went wrong.</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>

    {{-- ===== Tabs: Active Books | Backup/History ===== --}}
    <ul class="nav nav-tabs mb-3" id="bookTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="active-tab" data-bs-toggle="tab"
                    data-bs-target="#activeBooks" type="button" role="tab">
                <i class="fas fa-list text-primary"></i>
                Active Books
                <span class="badge bg-primary ms-1">{{ count($books) }}</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="history-tab" data-bs-toggle="tab"
                    data-bs-target="#historyBooks" type="button" role="tab">
                <i class="fas fa-archive text-secondary"></i>
                Backup / History
                @if(count($deletedBooks) > 0)
                    <span class="badge bg-secondary ms-1 history-count">{{ count($deletedBooks) }}</span>
                @endif
            </button>
        </li>
    </ul>

    <div class="tab-content" id="bookTabsContent">

        {{-- ===================================== --}}
        {{--   TAB 1: ACTIVE BOOKS                  --}}
        {{-- ===================================== --}}
        <div class="tab-pane fade show active" id="activeBooks" role="tabpanel">
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th style="width:70px;">Cover</th>
                            <th>Book Title</th>
                            <th>Author</th>
                            <th>Category</th>
                            <th class="text-center">Qty</th>
                            <th class="text-center">Available</th>
                            <th class="text-center" style="width:130px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($books as $book)
                        <tr id="row-{{ $book->id }}">
                            {{-- Thumbnail (50x50) --}}
                            <td class="text-center">
                                @if($book->book_cover)
                                    <img src="{{ asset($book->book_cover) }}"
                                         alt="Cover"
                                         class="book-thumb">
                                @else
                                    <span class="badge bg-secondary">No Image</span>
                                @endif
                            </td>

                            {{-- Title + subtitle --}}
                            <td>
                                <strong>{{ $book->title }}</strong>
                                @if($book->subtitle)
                                    <br><small class="text-muted">{{ $book->subtitle }}</small>
                                @endif
                            </td>

                            <td>{{ $book->author }}</td>

                            <td>
                                <span class="badge bg-info text-dark">{{ $book->category }}</span>
                            </td>

                            <td class="text-center">{{ $book->quantity }}</td>

                            <td class="text-center">
                                <span class="badge {{ $book->available_copies > 0 ? 'bg-success' : 'bg-danger' }}">
                                    {{ $book->available_copies }}
                                </span>
                            </td>

                            {{-- Actions: Edit & Delete --}}
                            <td class="text-center">
                                <button class="btn btn-sm btn-warning me-1 edit-btn"
                                        data-id="{{ $book->id }}"
                                        title="Edit Book">
                                    <i class="fas fa-edit"></i> Edit
                                </button>
                                <button class="btn btn-sm btn-danger delete-btn"
                                        data-id="{{ $book->id }}"
                                        data-title="{{ $book->title }}"
                                        title="Delete Book">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-5">
                                <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                No books in the catalog.
                                <a href="{{ route('books.create') }}">Add your first book!</a>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- ===================================== --}}
        {{--   TAB 2: BACKUP / HISTORY             --}}
        {{-- ===================================== --}}
        <div class="tab-pane fade" id="historyBooks" role="tabpanel">
            <div class="alert alert-info py-2">
                <i class="fas fa-info-circle"></i>
                Books listed here have been <strong>soft-deleted</strong>.
                They are <strong>not</strong> permanently removed.
                You can restore them to the active catalog at any time.
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle">
                    <thead class="table-secondary">
                        <tr>
                            <th style="width:70px;">Cover</th>
                            <th>Book Title</th>
                            <th>Author</th>
                            <th>Category</th>
                            <th>Date Deleted</th>
                            <th class="text-center" style="width:120px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($deletedBooks as $book)
                        <tr id="history-row-{{ $book->id }}">
                            {{-- Thumbnail --}}
                            <td class="text-center">
                                @if($book->book_cover)
                                    <img src="{{ asset($book->book_cover) }}"
                                         alt="Cover"
                                         class="book-thumb"
                                         style="opacity:0.6;">
                                @else
                                    <span class="badge bg-secondary">No Image</span>
                                @endif
                            </td>

                            <td class="text-muted">
                                <strong>{{ $book->title }}</strong>
                                @if($book->subtitle)
                                    <br><small>{{ $book->subtitle }}</small>
                                @endif
                            </td>

                            <td class="text-muted">{{ $book->author }}</td>

                            <td>
                                <span class="badge bg-secondary">{{ $book->category }}</span>
                            </td>

                            {{-- Date when it was soft-deleted --}}
                            <td class="text-muted small">
                                {{ \Carbon\Carbon::parse($book->deleted_at)->format('d M Y, h:i A') }}
                            </td>

                            {{-- Restore action --}}
                            <td class="text-center">
                                <button class="btn btn-sm btn-success restore-btn"
                                        data-id="{{ $book->id }}"
                                        data-title="{{ $book->title }}"
                                        title="Restore Book">
                                    <i class="fas fa-undo"></i> Restore
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted py-5">
                                <i class="fas fa-check-circle fa-3x mb-3 d-block text-success"></i>
                                No deleted books. History is empty.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>{{-- /tab-content --}}
</div>{{-- /container --}}


{{-- ============================================================ --}}
{{--   EDIT BOOK MODAL                                            --}}
{{-- ============================================================ --}}
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title fw-bold">
                    <i class="fas fa-edit"></i> Edit Book
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <form id="editForm" enctype="multipart/form-data">
                <div class="modal-body">

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="title" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Subtitle</label>
                            <input type="text" class="form-control" name="subtitle">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Author <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="author" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">ISBN <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="isbn" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Category <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="category" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Language <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="language" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Publisher <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="publisher" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Publish Year <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="publish_year" min="1000" max="{{ date('Y') }}" required>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Edition</label>
                            <input type="text" class="form-control" name="edition">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">DDC</label>
                            <input type="text" class="form-control" name="ddc">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Pages <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="number_of_pages" min="1" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Book Format <span class="text-danger">*</span></label>
                            <select class="form-control" name="book_format" required>
                                <option value="Hardcover">Hardcover</option>
                                <option value="Paperback">Paperback</option>
                                <option value="eBook">eBook</option>
                                <option value="Audiobook">Audiobook</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Quantity <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="quantity" min="1" required>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Shelf Location <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="shelf_location" required>
                    </div>

                    {{-- Book Cover Image --}}
                    <div class="mb-3">
                        <label class="form-label">
                            Book Cover Image
                            <span class="text-danger" id="editImageRequired">*</span>
                        </label>

                        {{-- Show current cover if exists --}}
                        <div id="currentCoverBox" class="mb-2" style="display:none;">
                            <p class="mb-1 small text-muted">Current cover:</p>
                            <img id="currentCoverPreview" src="" alt="Current Cover">
                            <p class="mt-1 small text-info">
                                <i class="fas fa-info-circle"></i>
                                Upload a new image to replace it (max 2MB). Leave empty to keep current.
                            </p>
                        </div>

                        <input type="file" class="form-control" name="book_cover"
                               id="editCoverInput" accept="image/*">
                           <small class="text-muted">Optional. Max size: <strong>2MB</strong> - JPEG, PNG, JPG, GIF only.</small>
                        <div id="editImageError" class="text-danger small mt-1" style="display:none;"></div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-save"></i> Update Book
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


{{-- ============================================================ --}}
{{--   DELETE CONFIRMATION MODAL                                   --}}
{{-- ============================================================ --}}
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="fas fa-exclamation-triangle"></i> Confirm Delete</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this book?</p>
                <p class="fw-bold fs-5" id="deleteBookTitle"></p>
                <p class="text-muted small">
                    <i class="fas fa-info-circle"></i>
                    This book will be moved to the <strong>Backup / History</strong> tab.
                    It will NOT be permanently removed.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash"></i> Yes, Delete
                </button>
            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts')
<script>
// ================================================================
//   UTILITY: Show toast notification (success or error)
// ================================================================
function showToast(type, message) {
    if (type === 'success') {
        $('#toastSuccessMsg').text(message);
        new bootstrap.Toast(document.getElementById('toastSuccess'), { delay: 3500 }).show();
    } else {
        $('#toastErrorMsg').text(message);
        new bootstrap.Toast(document.getElementById('toastError'), { delay: 5000 }).show();
    }
}

// ================================================================
//   EDIT BUTTON — Load book data and open the Edit Modal
// ================================================================
let editBookId = null;

$(document).on('click', '.edit-btn', function () {
    editBookId = $(this).data('id');

    // Fetch book data from server
    $.get(`/books/get/${editBookId}`, function (book) {

        // Fill in all text fields
        const f = $('#editForm');
        f.find('[name="title"]').val(book.title);
        f.find('[name="subtitle"]').val(book.subtitle || '');
        f.find('[name="author"]').val(book.author);
        f.find('[name="isbn"]').val(book.isbn);
        f.find('[name="category"]').val(book.category);
        f.find('[name="language"]').val(book.language);
        f.find('[name="publisher"]').val(book.publisher);
        f.find('[name="publish_year"]').val(book.publish_year);
        f.find('[name="edition"]').val(book.edition || '');
        f.find('[name="ddc"]').val(book.ddc || '');
        f.find('[name="number_of_pages"]').val(book.number_of_pages);
        f.find('[name="book_format"]').val(book.book_format);
        f.find('[name="shelf_location"]').val(book.shelf_location);
        f.find('[name="quantity"]').val(book.quantity);

        // Handle cover image preview
        if (book.book_cover) {
            // Show current cover thumbnail
            $('#currentCoverPreview').attr('src', '/' + book.book_cover);
            $('#currentCoverBox').show();
            // A new image is optional
            $('#editCoverInput').prop('required', false);
            $('#editImageRequired').hide();
        } else {
            $('#currentCoverBox').hide();
            $('#editCoverInput').prop('required', false);
            $('#editImageRequired').hide();
        }

        // Reset file input and any previous errors
        $('#editCoverInput').val('');
        $('#editImageError').hide();

        // Open the modal
        new bootstrap.Modal(document.getElementById('editModal')).show();

    }).fail(function () {
        showToast('error', 'Failed to load book data. Please try again.');
    });
});

// ================================================================
//   EDIT COVER - client-side 2MB size check
// ================================================================
$('#editCoverInput').on('change', function () {
    const file = this.files[0];
    if (file) {
        if (file.size > 2 * 1024 * 1024) {
            $('#editImageError').text(
            'Image is too large! Max allowed: 2MB. ' +
                'Your file is ' + (file.size / 1024).toFixed(2) + 'KB.'
            ).show();
            this.value = ''; // clear the selected file
        } else {
            $('#editImageError').hide();
        }
    }
});

// ================================================================
//   EDIT FORM SUBMIT — Send updated book data via AJAX
// ================================================================
$('#editForm').on('submit', function (e) {
    e.preventDefault();

    // Block submit if image error is showing
    if ($('#editImageError').is(':visible')) {
        showToast('error', 'Please fix the image error before submitting.');
        return;
    }

    const formData = new FormData(this);

    $.ajax({
        url: `/books/${editBookId}`,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-HTTP-Method-Override': 'PUT'
        },
        success: function (res) {
            if (res.success) {
                showToast('success', res.message);
                bootstrap.Modal.getInstance(document.getElementById('editModal')).hide();
                // Reload to reflect updated data
                setTimeout(() => location.reload(), 1000);
            } else {
                showToast('error', res.message);
            }
        },
        error: function (xhr) {
            let msg = 'Update failed.';
            if (xhr.responseJSON) {
                if (xhr.responseJSON.message) msg = xhr.responseJSON.message;
                if (xhr.responseJSON.errors) {
                    msg = Object.values(xhr.responseJSON.errors).flat().join(' | ');
                }
            }
            showToast('error', msg);
        }
    });
});

// ================================================================
//   DELETE BUTTON — Show confirmation modal
// ================================================================
let deleteBookId = null;

$(document).on('click', '.delete-btn', function () {
    deleteBookId = $(this).data('id');
    const title    = $(this).data('title');
    $('#deleteBookTitle').text('"' + title + '"');
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
});

// ================================================================
//   CONFIRM DELETE — Soft delete via AJAX
// ================================================================
$('#confirmDeleteBtn').on('click', function () {
    bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();

    $.ajax({
        url: `/books/${deleteBookId}`,
        type: 'POST',
        data: { '_method': 'DELETE' },
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        success: function (res) {
            if (res.success) {
                showToast('success', res.message);
                // Fade out and remove the table row
                $(`#row-${deleteBookId}`).fadeOut(400, function () {
                    $(this).remove();
                });
                // Reload after short delay to update History tab count
                setTimeout(() => location.reload(), 1500);
            } else {
                showToast('error', res.message);
            }
        },
        error: function () {
            showToast('error', 'Failed to delete the book.');
        }
    });
});

// ================================================================
//   RESTORE BUTTON — Restore soft-deleted book via AJAX
// ================================================================
$(document).on('click', '.restore-btn', function () {
    const bookId = $(this).data('id');
    const title  = $(this).data('title');

    if (!confirm(`Restore "${title}" back to the active catalog?`)) return;

    $.ajax({
        url: `/books/${bookId}/restore`,
        type: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        success: function (res) {
            if (res.success) {
                showToast('success', res.message);
                $(`#history-row-${bookId}`).fadeOut(400, function () {
                    $(this).remove();
                });
                // Reload to show restored book in Active tab
                setTimeout(() => location.reload(), 1500);
            } else {
                showToast('error', res.message);
            }
        },
        error: function () {
            showToast('error', 'Failed to restore the book.');
        }
    });
});
</script>
@endsection