<?php $__env->startSection('title', 'Issued Books'); ?>
<?php $__env->startSection('content'); ?>
<div class="container py-4">
    <div class="card border-0 shadow-lg">
        <div class="card-header bg-gradient-primary text-white">
            <div class="d-flex justify-content-between align-items-center">
                <h4 class="mb-0"><i class="fas fa-list-check me-2"></i> Currently Issued Books</h4>
                <a href="<?php echo e(route('issues.create')); ?>" class="btn btn-light btn-sm">
                    <i class="fas fa-plus-circle me-1"></i> Issue New Book
                </a>
            </div>
        </div>

        <div class="card-body">
            <!-- Confirmation Modal -->
            <div class="modal fade" id="returnConfirmationModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header bg-primary text-white">
                            <h5 class="modal-title"><i class="fas fa-book me-2"></i>Confirm Return</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>Are you sure you want to mark this book as returned?</p>
                            <p class="text-muted small">Book: <span id="bookTitle"></span></p>
                            <p class="text-muted small">Student: <span id="studentName"></span></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <form id="returnForm" method="POST">
                                <?php echo csrf_field(); ?>
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-check me-1"></i> Confirm Return
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover" id="issuedBooksTable">
                    <thead class="table-light">
                        <tr>
                            <th>Student</th>
                            <th>Book</th>
                            <th>Issued On</th>
                            <th>Due Date</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__empty_1 = true; $__currentLoopData = $issuedBooks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $issue): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="<?php echo e($issue->isReturned() ? 'd-none' : ''); ?>" data-status="<?php echo e($issue->isReturned() ? 'returned' : 'issued'); ?>">
                            <td>
                                <span class="fw-bold"><?php echo e($issue->student_id); ?></span><br>
                                <small class="text-muted"><?php echo e($issue->sname); ?></small>
                            </td>
                            <td>
                                <span class="fw-bold"><?php echo e($issue->bookCopy->book->name); ?></span><br>
                                <small class="text-muted">Copy #<?php echo e($issue->bookCopy->id); ?> (<?php echo e($issue->bookCopy->barcode); ?>)</small>
                            </td>
                            <td><?php echo e($issue->issue_date->format('M d, Y')); ?></td>
                            <td class="<?php echo e($issue->isOverdue() ? 'text-danger fw-bold' : ''); ?>">
                                <?php echo e($issue->due_date->format('M d, Y')); ?>

                                <?php if($issue->isOverdue()): ?>
                                <span class="badge bg-danger ms-2">Overdue</span>
                                <?php endif; ?>
                            </td>
                            <td>
                                <?php if($issue->isReturned()): ?>
                                    <span class="badge bg-success">Returned</span>
                                <?php elseif($issue->isOverdue()): ?>
                                    <span class="badge bg-danger">Overdue</span>
                                <?php else: ?>
                                    <span class="badge bg-primary">Issued</span>
                                <?php endif; ?>
                            </td>
                            <td>
                                <?php if(!$issue->isReturned()): ?>
                                <button type="button" class="btn btn-sm btn-success return-btn"
                                    data-bs-toggle="modal"
                                    data-bs-target="#returnConfirmationModal"
                                    data-book="<?php echo e($issue->bookCopy->book->name); ?>"
                                    data-student="<?php echo e($issue->sname); ?>"
                                    data-url="<?php echo e(route('issues.return', $issue->id)); ?>">
                                    <i class="fas fa-undo me-1"></i> Return
                                </button>
                                <?php endif; ?>
                            </td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <i class="fas fa-book-open fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">No books currently issued</h5>
                                <p class="text-muted">All books are available in the library</p>
                            </td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    .bg-gradient-primary {
        background: linear-gradient(135deg, #4361ee, #3f37c9);
    }
    .card {
        border-radius: 12px;
    }
    .table th {
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.8rem;
    }
    .dataTables_filter input {
        border: 1px solid #dee2e6 !important;
        padding: 0.375rem 0.75rem !important;
        border-radius: 0.25rem !important;
    }
</style>

<!-- DataTables JS & CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize DataTable
    const table = $('#issuedBooksTable').DataTable({
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        dom: '<"top"<"row"<"col-md-6"l><"col-md-6"f>>>rt<"bottom"<"row"<"col-md-6"i><"col-md-6"p>>>',
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search issued books...",
            lengthMenu: "Show _MENU_ entries",
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
            infoEmpty: "No books issued",
            infoFiltered: "(filtered from _MAX_ total entries)",
            paginate: {
                first: "First",
                last: "Last",
                next: "Next",
                previous: "Previous"
            }
        },
        initComplete: function() {
            // Hide returned books by default
            this.api().columns(4).search('^((?!Returned).)*$', true, false).draw();
        }
    });

    // Handle return button clicks
    const returnButtons = document.querySelectorAll('.return-btn');
    const returnForm = document.getElementById('returnForm');
    const bookTitle = document.getElementById('bookTitle');
    const studentName = document.getElementById('studentName');

    returnButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Set the book and student details in the modal
            bookTitle.textContent = this.dataset.book;
            studentName.textContent = this.dataset.student;

            // Update the form action URL
            returnForm.action = this.dataset.url;
        });
    });

    // Show success message after return if exists
    <?php if(session('success')): ?>
        const toast = new bootstrap.Toast(document.getElementById('successToast'));
        toast.show();
    <?php endif; ?>
});
</script>

<!-- Success Toast Notification -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                <i class="fas fa-check-circle me-2"></i>
                <?php echo e(session('success')); ?>

            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\library\resources\views/issues/issue_index.blade.php ENDPATH**/ ?>