@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Courses')

@push('styles')
    <!-- Load DataTables CSS -->
    <link href="{{ asset('backend/assets/css/jquery.dataTables.min.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Course Management</h1>
        <a href="{{ route('admin.course.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Add New Course
        </a>
    </div>

    <div class="card">
        <div class="card-header">
            <h5>Filters</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <select class="form-select" id="status-filter">
                        <option value="">All Statuses</option>
                        <option value="published">Published</option>
                        <option value="draft">Draft</option>
                        <option value="scheduled">Scheduled</option>
                        <option value="archived">Archived</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <select class="form-select" id="language-filter">
                        <option value="">All Languages</option>
                        @foreach ($languages as $language)
                            <option value="{{ $language->code }}">{{ $language->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <select class="form-select" id="category-filter">
                        <option value="">All Categories</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @foreach ($category->children as $child)
                                <option value="{{ $child->id }}">— {{ $child->name }}</option>
                            @endforeach
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Courses</h5>
                <button class="btn btn-secondary" id="bulk-actions-btn" disabled>
                    Bulk Actions
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped" id="courses-table">
                    <thead>
                        <tr>
                            <th>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="select-all">
                                </div>
                            </th>
                            <th>Title</th>
                            <th>Status</th>
                            <th>Price</th>
                            <th>Level</th>
                            <th>Duration</th>
                            <th>Language</th>
                            <th>Author</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <!-- Bulk Actions Modal -->
    <div class="modal fade" id="bulkActionsModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bulk Actions</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="bulk-actions-form">
                        <div class="mb-3">
                            <label class="form-label">Select Action</label>
                            <select class="form-select" name="action" required>
                                <option value="">Choose action...</option>
                                <option value="publish">Publish</option>
                                <option value="unpublish">Unpublish</option>
                                <option value="trash">Move to Trash</option>
                                <option value="delete">Delete Permanently</option>
                            </select>
                        </div>
                        <input type="hidden" name="ids" id="selected-ids">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="execute-bulk-action">Execute</button>
                </div>
            </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">
                    <h5 class="modal-title">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this course? This action cannot be undone.</p>
                    <input type="hidden" id="delete-id">
                </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="confirm-delete">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <!-- Load jQuery -->
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>

    <!-- Load DataTables JS -->
    <script src="{{ asset('backend/assets/js/jquery.dataTables.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            var table = $('#courses-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.course.index') }}',
                    data: function(d) {
                        d.status = $('#status-filter').val();
                        d.language = $('#language-filter').val();
                        d.category = $('#category-filter').val();
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data) {
                            return '<div class="form-check"><input class="form-check-input course-checkbox" type="checkbox" value="' +
                                data + '"></div>';
                        }
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'price',
                        name: 'price'
                    },
                    {
                        data: 'level',
                        name: 'level',
                        render: function(data) {
                            return data ? data.charAt(0).toUpperCase() + data.slice(1) : 'N/A';
                        }
                    },
                    {
                        data: 'duration',
                        name: 'duration',
                        render: function(data, type, row) {
                            if (!data) return 'N/A';
                            return data + ' ' + (row.duration_unit || 'hours');
                        }
                    },
                    {
                        data: 'language.name',
                        name: 'language.name'
                    },
                    {
                        data: 'author.name',
                        name: 'author.name'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [8, 'desc']
                ]
            });

            // Filter functionality
            $('#status-filter, #language-filter, #category-filter').change(function() {
                table.draw();
            });

            // Select all checkboxes
            $('#select-all').change(function() {
                $('.course-checkbox').prop('checked', $(this).prop('checked'));
                updateBulkActionsButton();
            });

            // Update bulk actions button state
            $(document).on('change', '.course-checkbox', function() {
                updateBulkActionsButton();
            });

            function updateBulkActionsButton() {
                var checkedCount = $('.course-checkbox:checked').length;
                $('#bulk-actions-btn').prop('disabled', checkedCount === 0);
            }

            // Open bulk actions modal
            $('#bulk-actions-btn').click(function() {
                var selectedIds = [];
                $('.course-checkbox:checked').each(function() {
                    selectedIds.push($(this).val());
                });
                $('#selected-ids').val(selectedIds.join(','));
                $('#bulkActionsModal').modal('show');
            });

            // Execute bulk action
            $('#execute-bulk-action').click(function() {
                var formData = $('#bulk-actions-form').serialize();

                $.ajax({
                    url: '{{ route('admin.course.bulk-action') }}',
                    type: 'POST',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#bulkActionsModal').modal('hide');
                            table.draw();
                            $('#select-all').prop('checked', false);
                            updateBulkActionsButton();
                        }
                    }
                });
            });

            // Delete course
            $(document).on('click', '.delete-btn', function() {
                var id = $(this).data('id');
                $('#delete-id').val(id);
                $('#deleteModal').modal('show');
            });

            $('#confirm-delete').click(function() {
                var id = $('#delete-id').val();

                $.ajax({
                    url: '{{ url('admin/course') }}/' + id,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#deleteModal').modal('hide');
                            table.draw();
                        }
                    }
                });
            });
        });
    </script>
@endpush