@extends('layouts.admin')

@section('title','Course List')

@section('content')
<div class="container-fluid p-0">

    <!--title-->
    <div class="mb-3 d-flex align-items-center justify-content-between">
        <h1 class="h3 mb-0">Courses</h1>
        <a href="{{ route('admin.courses.create') }}" class="btn btn-primary">
            Create Course
        </a>
    </div>
    <!--title-->

    <div class="col-md-6">
        <br>
        <form class="d-flex ms-auto" action="{{ route('admin.courses.index') }}" method="GET" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" name="search" value="{{ $search }}" aria-label="Search">
            <button class="btn btn-outline-primary" type="submit">Search</button>
        </form>
    </div>

    <!--content-->
    <br>
    <div class="row">
        <div class="col-12 col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Course Name</th>
                                    <th>Code</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($courses as $course)
                                    <tr>
                                        <td>{{ $loop->iteration + ($courses->currentPage() - 1) * $courses->perPage() }}</td>
                                        <td>{{ $course->course_name }}</td>
                                        <td>{{ $course->code }}</td>
                                        <td>
                                            <span class="badge {{ $course->status ? 'bg-success' : 'bg-danger' }} status-badge"
                                                  data-id="{{ $course->id }}">
                                                {{ $course->status ? 'Active' : 'Inactive' }}
                                            </span>
                                        </td>
                                        <td>
                                            <a href="{{ route('admin.courses.edit', $course->id) }}"
                                               class="btn btn-sm btn-outline-primary me-1">
                                                Edit
                                            </a>
                                            <button type="button"
                                                    class="btn btn-sm btn-outline-danger delete-course"
                                                    data-id="{{ $course->id }}">
                                                Delete
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No courses found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>

                        <div class="d-flex justify-content-center">
                            {{ $courses->links('pagination::bootstrap-5') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--content-->

</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {

        // Delete course
        $(document).on('click', '.delete-course', function () {
            let courseId = $(this).data('id');
            let row = $(this).closest('tr');

            Swal.fire({
                title: 'Are you sure?',
                text: 'This course will be permanently deleted.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ url('admin/courses') }}/" + courseId,
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            _method: 'DELETE'
                        },
                        success: function (response) {
                            if (response.success) {
                                Swal.fire('Deleted!', response.message, 'success')
                                    .then(() => location.reload());
                            }
                        },
                        error: function () {
                            Swal.fire('Error', 'Something went wrong while deleting.', 'error');
                        }
                    });
                }
            });
        });

        // Toggle status
        $(document).on('click', '.status-badge', function () {
            let badge = $(this);
            let courseId = badge.data('id');

            $.ajax({
                url: "{{ url('admin/courses') }}/" + courseId + "/toggle-status",
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'PATCH'
                },
                success: function (response) {
                    if (response.success) {
                        if (response.status) {
                            badge.removeClass('bg-danger').addClass('bg-success').text('Active');
                        } else {
                            badge.removeClass('bg-success').addClass('bg-danger').text('Inactive');
                        }
                    }
                },
                error: function () {
                    Swal.fire('Error', 'Something went wrong while updating status.', 'error');
                }
            });
        });

    });
</script>
@endpush