@extends('layouts.app')

@section('title', 'Issue History')

@section('content')
<div class="container">
    <div class="row mb-4">
        <div class="col-md-8">
            <h2><i class="fas fa-history"></i> Book Issues History</h2>
        </div>
        <div class="col-md-4 text-end">
            <a href="{{ route('issues.create') }}" class="btn btn-success">
                <i class="fas fa-plus"></i> Issue New Book
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <strong>Success!</strong> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Tabs for filtering -->
    <ul class="nav nav-tabs mb-4" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#allIssues">
                All Issues
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="active-tab" data-bs-toggle="tab" data-bs-target="#activeIssues">
                Active Issues
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="returned-tab" data-bs-toggle="tab" data-bs-target="#returnedIssues">
                Returned Issues
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content">
        <!-- All Issues -->
        <div class="tab-pane fade show active" id="allIssues">
            <div class="table-responsive">
                <table class="table table-hover table-striped">
                    <thead class="table-dark">
                        <tr>
                            <th>Book</th>
                            <th>Student</th>
                            <th>Issue Date</th>
                            <th>Return Date</th>
                            <th>Actual Return</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($issues as $issue)
                            <tr id="issue-row-{{ $issue->id }}">
                                <td>
                                    <strong>{{ $issue->book_title }}</strong>
                                    <br>
                                    <small class="text-muted">by {{ $issue->book_author }}</small>
                                </td>
                                <td>
                                    {{ $issue->student_name }}
                                    @if($issue->student_roll_no)
                                        <br><small class="text-muted">Roll No: {{ $issue->student_roll_no }}</small>
                                    @endif
                                    @if($issue->student_email)
                                        <br><small class="text-muted">{{ $issue->student_email }}</small>
                                    @endif
                                </td>
                                <td>{{ \Carbon\Carbon::parse($issue->issue_date)->format('d M Y') }}</td>
                                <td>{{ \Carbon\Carbon::parse($issue->return_date)->format('d M Y') }}</td>
                                <td>
                                    @if($issue->actual_return_date)
                                        {{ \Carbon\Carbon::parse($issue->actual_return_date)->format('d M Y') }}
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @if($issue->status === 'issued')
                                        <span class="badge bg-warning text-dark">Issued</span>
                                    @else
                                        <span class="badge bg-success">Returned</span>
                                    @endif
                                </td>
                                <td>
                                    @if($issue->status === 'issued')
                                        <button class="btn btn-sm btn-info return-btn" data-id="{{ $issue->id }}" data-bs-toggle="tooltip" title="Mark as Returned">
                                            <i class="fas fa-undo"></i> Return
                                        </button>
                                    @else
                                        <span class="badge bg-secondary">Completed</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">
                                    <i class="fas fa-inbox fa-2x mb-3"></i>
                                    <p>No issues found.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Active Issues -->
        <div class="tab-pane fade" id="activeIssues">
            <div class="table-responsive">
                <table class="table table-hover table-striped">
                    <thead class="table-dark">
                        <tr>
                            <th>Book</th>
                            <th>Student</th>
                            <th>Issue Date</th>
                            <th>Return Date</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $activeIssues = $issues->where('status', 'issued');
                        @endphp
                        @forelse($activeIssues as $issue)
                            <tr id="issue-row-{{ $issue->id }}">
                                <td>
                                    <strong>{{ $issue->book_title }}</strong>
                                    <br>
                                    <small class="text-muted">by {{ $issue->book_author }}</small>
                                </td>
                                <td>
                                    {{ $issue->student_name }}
                                    @if($issue->student_roll_no)
                                        <br><small class="text-muted">Roll No: {{ $issue->student_roll_no }}</small>
                                    @endif
                                    @if($issue->student_email)
                                        <br><small class="text-muted">{{ $issue->student_email }}</small>
                                    @endif
                                </td>
                                <td>{{ \Carbon\Carbon::parse($issue->issue_date)->format('d M Y') }}</td>
                                <td>
                                    {{ \Carbon\Carbon::parse($issue->return_date)->format('d M Y') }}
                                    @if(\Carbon\Carbon::parse($issue->return_date)->isPast())
                                        <br><span class="badge bg-danger">OVERDUE</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge bg-warning text-dark">Active</span>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-info return-btn" data-id="{{ $issue->id }}" data-bs-toggle="tooltip" title="Mark as Returned">
                                        <i class="fas fa-undo"></i> Return
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">
                                    No active issues.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Returned Issues -->
        <div class="tab-pane fade" id="returnedIssues">
            <div class="table-responsive">
                <table class="table table-hover table-striped">
                    <thead class="table-dark">
                        <tr>
                            <th>Book</th>
                            <th>Student</th>
                            <th>Issue Date</th>
                            <th>Return Date</th>
                            <th>Actual Return</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $returnedIssues = $issues->where('status', 'returned');
                        @endphp
                        @forelse($returnedIssues as $issue)
                            <tr>
                                <td>
                                    <strong>{{ $issue->book_title }}</strong>
                                    <br>
                                    <small class="text-muted">by {{ $issue->book_author }}</small>
                                </td>
                                <td>
                                    {{ $issue->student_name }}
                                    @if($issue->student_roll_no)
                                        <br><small class="text-muted">Roll No: {{ $issue->student_roll_no }}</small>
                                    @endif
                                    @if($issue->student_email)
                                        <br><small class="text-muted">{{ $issue->student_email }}</small>
                                    @endif
                                </td>
                                <td>{{ \Carbon\Carbon::parse($issue->issue_date)->format('d M Y') }}</td>
                                <td>{{ \Carbon\Carbon::parse($issue->return_date)->format('d M Y') }}</td>
                                <td>{{ \Carbon\Carbon::parse($issue->actual_return_date)->format('d M Y') }}</td>
                                <td>
                                    <span class="badge bg-success">Returned</span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">
                                    No returned issues.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Success Alert -->
<div id="successAlert" class="alert alert-success alert-dismissible fade show position-fixed" role="alert" style="top: 20px; right: 20px; display: none; z-index: 9999;">
    <strong id="successMessage"></strong>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Error Alert -->
<div id="errorAlert" class="alert alert-danger alert-dismissible fade show position-fixed" role="alert" style="top: 20px; right: 20px; display: none; z-index: 9999;">
    <strong id="errorMessage"></strong>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endsection

@section('scripts')
<script>
    // Return Book Button
    $(document).on('click', '.return-btn', function() {
        const issueId = $(this).data('id');
        if (confirm('Are you sure you want to mark this book as returned?')) {
            $.ajax({
                url: `/issues/${issueId}/return`,
                type: 'POST',
                data: {
                    '_method': 'PUT',
                },
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        $('#successMessage').text(response.message);
                        $('#successAlert').slideDown().delay(3000).slideUp();
                        
                        setTimeout(function() {
                            location.reload();
                        }, 1500);
                    } else {
                        showError(response.message);
                    }
                },
                error: function(xhr) {
                    let message = 'Error returning book';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                    showError(message);
                }
            });
        }
    });

    function showError(message) {
        $('#errorMessage').text(message);
        $('#errorAlert').slideDown().delay(5000).slideUp();
    }
</script>
@endsection