@extends('admin.admin_dashboard')

@section('admin')
<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Academics</a></li>
                <li class="breadcrumb-item"><a href="javascript:void(0)">Academic Sessions</a></li>
            </ol>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="card-title">Academic Sessions</h4>
                        <a href="{{ route('admin.session.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> Add New Session
                        </a>
                    </div>
                    <div class="card-body">
                        <!-- Data Summary -->
                        <div class="mb-3">
                            <p class="text-muted">
                                Showing {{ $sessions->firstItem() ?? 0 }} to {{ $sessions->lastItem() ?? 0 }} of {{ $sessions->total() }} entries
                            </p>
                        </div>

                        <div class="table-responsive" id="sessionsTable">
                            <table class="table table-bordered table-striped">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Session Year</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($sessions as $session)
                                    <tr>
                                        <td><strong>{{ $session->name }}</strong></td>
                                        <td>{{ \Carbon\Carbon::parse($session->start_date)->format('d M, Y') }}</td>
                                        <td>{{ \Carbon\Carbon::parse($session->end_date)->format('d M, Y') }}</td>
                                        <td>
                                            @if($session->is_current)
                                                <span class="badge badge-success">
                                                    <i class="fas fa-check-circle"></i> Current Session
                                                </span>
                                            @else
                                                <form method="POST" action="{{ route('admin.session.mark.current', $session->id) }}" style="display:inline;">
                                                    @csrf
                                                    <button class="btn btn-sm btn-outline-success" type="submit">
                                                        <i class="fas fa-check"></i> Make Current
                                                    </button>
                                                </form>
                                            @endif
                                        </td>
                                        <td>
                                            <form method="POST" action="{{ route('admin.session.delete', $session->id) }}" style="display:inline;" class="delete-form">
                                                @csrf @method('DELETE')
                                                <button type="button" class="btn btn-sm btn-danger delete-btn">
                                                    <i class="fas fa-trash"></i> Delete
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <div class="dataTables_info">
                                Showing {{ $sessions->firstItem() ?? 0 }} to {{ $sessions->lastItem() ?? 0 }} of {{ $sessions->total() }} entries
                            </div>
                            <div id="paginationLinks">
                                {{ $sessions->links('pagination::bootstrap-4') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Custom Pagination Styling - content.html design */
    .dataTables_info {
        font-size: 14px;
        color: #6c757d;
    }
    .pagination {
        margin: 0;
    }
    .pagination .page-link {
        color: #333;
        border: 1px solid #dee2e6;
        padding: 0.5rem 0.75rem;
        margin: 0 2px;
        border-radius: 4px;
        font-size: 14px;
    }
    .pagination .page-item.active .page-link {
        background-color: #007bff;
        border-color: #007bff;
        color: white;
        font-weight: 600;
    }
    .pagination .page-link:hover {
        background-color: #e9ecef;
        color: #0056b3;
    }
    .pagination .page-item.disabled .page-link {
        color: #6c757d;
        pointer-events: none;
        background-color: #fff;
        border-color: #dee2e6;
    }
    .table-responsive {
        position: relative;
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    // AJAX Pagination
    $(document).on('click', '.pagination a', function(e) {
        e.preventDefault();
        var page = $(this).attr('href').split('page=')[1];
        fetchSessions(page);
    });

    function fetchSessions(page) {
        $.ajax({
            url: "{{ route('admin.session.index') }}?page=" + page,
            success: function(data) {
                $('#sessionsTable').html($(data).find('#sessionsTable').html());
                $('#paginationLinks').html($(data).find('#paginationLinks').html());
                $('.dataTables_info').html($(data).find('.dataTables_info').html());
            }
        });
    }

    // Delete confirmation with SweetAlert
    $(document).on('click', '.delete-btn', function(e) {
        e.preventDefault();
        const form = $(this).closest('form');
        const url = form.attr('action');
        
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        _method: 'DELETE'
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire(
                                'Deleted!',
                                response.message,
                                'success'
                            ).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire('Error!', response.message, 'error');
                        }
                    },
                    error: function(xhr) {
                        Swal.fire('Error!', 'Failed to delete session', 'error');
                    }
                });
            }
        });
    });
});
</script>
@endsection