@extends('layouts.app')

@section('title', 'Task Lists Management')

@push('styles')
<style>
    .badge { font-size: 0.85em; }
    .table th { border-top: none; }
    .progress { background-color: #e9ecef; }
    .progress-bar { background-color: #007bff; }
    .filterBlocks { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
    .filterBlocks li { margin-bottom: 0; }
    .btn-filter { background: #007bff; color: white; }
    .btn-filter:hover { background: #0056b3; }
    .active-filter { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
</style>
@endpush

@section('content')
<div class="loadPages01">
 @include('admin.tasks.task-lists.components.filter_1')

    <!-- DataTable -->
    <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 px-0 pd-t-6 pd-b-6 viewContainer">
        <div class="table-responsive">
            <table id="taskListsTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Title</th>
                        <th>Priority</th>
                        <th>Status</th>
                        <th>Category</th>
                        <th>Progress</th>
                        <th>Tasks</th>
                        <th>Due Date</th>
                        <th>Created By</th>
                        <th>Status</th>
                        <th>Created At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- DataTable will load data here -->
                </tbody>
            </table>
        </div>
    </div>
</div>
@include('admin.tasks.task-lists.components.filter')

@endsection

@push('scripts')
<script src="{{asset('modules/tasks/js/tasklist_filter.js')}}"></script>
<script src="{{asset('modules/common/common.js')}}"></script>
<script>
$(document).ready(function() {
    // Initialize DataTable
    var errorShown = false;
    var table = $('#taskListsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('task-lists.list') }}",
            type: "GET",
            data: function(d) {
                // Add filter parameters
                d.priority_id = $('#priority_id').val();
                d.status_id = $('#status_id').val();
                d.category_id = $('#category_id').val();
                d.is_template = $('#is_template').val();
                d.active = $('#active').val();
                d.type = $('#search_type').val();
                d.keyword = $('#keyword').val();
            },
            error: function(xhr, error, thrown) {
                if (errorShown) return;
                errorShown = true;

                if (xhr.status === 403) {
                    toastr.error(xhr.responseJSON?.message || 'Access denied: No permission');
                    table.clear().draw();
                    setTimeout(() => { errorShown = false; }, 5000);
                }
                else if (xhr.status === 401) {
                    toastr.error('Please login to access this page.');
                    window.location.href = "{{ route('admin.login') }}";
                }
                else if (xhr.status === 500) {
                    toastr.error('Server error. Please try again later.');
                    setTimeout(() => { errorShown = false; }, 10000);
                }
                else {
                    toastr.error('Failed to load task lists data.');
                    setTimeout(() => { errorShown = false; }, 5000);
                }
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'title', name: 'title' },
            { data: 'priority', name: 'priority' },
            { data: 'status', name: 'status' },
            { data: 'category', name: 'category' },
            { data: 'progress', name: 'progress' },
            { data: 'tasks_count', name: 'tasks_count' },
            { data: 'due_date', name: 'due_date' },
            { data: 'created_by', name: 'created_by' },
            { data: 'active', name: 'active' },
            { data: 'created_at', name: 'created_at' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[1, 'asc']],
        pageLength: 25,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]]
    });

    // Initialize select2 for filters
    $('.select2').select2({
        width: '100%',
        placeholder: "Select Option"
    });

    // Filter function
    window.filter = function() {
        table.ajax.reload();
        // Show clear filter button if any filter is applied
        if ($('#priority_id').val() || $('#status_id').val() || $('#category_id').val() || $('#is_template').val() !== '' || $('#active').val() !== '' || $('#keyword').val()) {
            $('#collapseFilter').show();
        }
    }

    // Reset filter function
    window.resetFilter = function() {
        $('#filterForm').trigger('reset');
        $('.select2').val('').trigger('change');
        $('#search_type').val('title');
        table.ajax.reload();
        $('#collapseFilter').hide();
    }

    // Enter key support for keyword search
    $('#keyword').on('keypress', function(e) {
        if (e.which === 13) {
            filter();
            e.preventDefault();
        }
    });

    // Delete task list
    $(document).on('click', '.btn-delete-tasklist', function() {
        var taskListId = $(this).data('id');
        
        swal({
            title: "Are you sure?",
            text: "Do you really want to delete this task list?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url: "{{ route('task-lists.delete') }}",
                    type: "DELETE",
                    data: {
                        id: taskListId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.status) {
                            toastr.success(response.message);
                            table.ajax.reload();
                        } else {
                            toastr.warning(response.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 403) {
                            const response = xhr.responseJSON;
                            toastr.error(response?.message || 'You do not have permission.');
                        } else if (xhr.status === 401) {
                            toastr.error('Please login to continue.');
                            window.location.href = "{{ route('admin.login') }}";
                        } else if (xhr.status === 404) {
                            toastr.error('Task list not found.');
                        } else if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            $.each(errors, function(key, value) {
                                toastr.error(value[0]);
                            });
                        } else {
                            toastr.error('An error occurred while deleting task list.');
                        }
                    }
                });
            }
        });
    });

    // Save as template
    $(document).on('click', '.btn-save-template', function() {
        var taskListId = $(this).data('id');
        
        swal({
            title: "Save as Template",
            text: "Enter template name:",
            content: {
                element: "input",
                attributes: {
                    placeholder: "Template name",
                    type: "text",
                },
            },
            buttons: true,
            dangerMode: false,
        }).then((templateName) => {
            if (templateName) {
                $.ajax({
                    url: "{{ route('task-lists.save-template') }}",
                    type: "POST",
                    data: {
                        id: taskListId,
                        template_name: templateName,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.status) {
                            toastr.success(response.message);
                            table.ajax.reload();
                        } else {
                            toastr.warning(response.message);
                        }
                    },
                    error: function(xhr) {
                        toastr.error('Failed to save template.');
                    }
                });
            }
        });
    });

    // Show/hide clear filter button based on active filters
});
</script>
@endpush