@extends('Admin.layout')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-3">
    <div class="d-flex align-items-center gap-3">
        <button type="button" class="btn btn-icon bg-white waves-effect me-2"
            style="box-shadow: 0px 9px 12px -2px #66328E1F;">
            <a href="{{ route('project_table') }}">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                    fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </a>
        </button>
        <div>
            <h5 class="fw-bold mb-0">View PreTasks </span>
            </h5>
        </div>
    </div>
    <div class="d-flex gap-2">

        <a href="{{ route('assign_pretask') }}"
            class="btn btn-primary px-4">
            <i class="ti tabler-plus me-1"></i> Assign PreTask
        </a>
        <a href="{{ route('create_pretask') }}"
            class="btn btn-primary px-4">
            <i class="ti tabler-plus me-1"></i> Create PreTask
        </a>
    </div>
</div>

<div class="card shadow-sm border-0">
    <div class="card-header border-bottom d-flex justify-content-between align-items-center">
        <h6 class="mb-0 fw-bold">PreTask List</h6>
        <div class="d-flex align-items-center gap-2">

            <select id="taskTypeFilter" class="form-select" style="width: 220px;">
                <option value="">Search Types</option>

                @foreach($roles as $role)
                <option value="{{ $role->role }}">
                    {{ $role->role }}
                </option>
                @endforeach
            </select>

            <button id="exp" class="btn btn-outline-secondary">
                <i class="ti tabler-upload me-1"></i> Export
            </button>

        </div>

    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table id="dept" class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>SNO</th>
                        <th>Project</th>
                        <th>Task Type</th>
                        <th>Module</th>
                        <th>Task title</th>
                        <th>Description</th>
                        <th>Days</th>

                        <th class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
{{-- Delete Modal --}}
<div class="modal fade" id="delete" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-5">
                <h5>Confirm Delete</h5>
                <p>Are you sure delete this task?</p>
                <form action="{{ route('delete_pretask') }}" method="POST" id="deleteForm">
                    @csrf
                    <input type="hidden" name="id" id="deleteId">
                    <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="deleteBtn"
                        class="btn btn-danger">
                        Yes Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{{-- Task Description Modal --}}
<div class="modal fade" id="taskModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header">
                <h6 class="modal-title fw-bold">Task Description</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="modalTaskContent" class="text-muted mb-0"></p>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#task_description'))
        .catch(error => {
            console.error(error);
        });
</script>
<script>
   function setDeleteId(element)
{
    document.getElementById('deleteId').value =
        element.getAttribute('data-id');
}

    document.getElementById('deleteForm').addEventListener('submit', function() {
        let btn = document.getElementById('deleteBtn');
        btn.disabled = true;
        btn.innerHTML = 'Processing...';
    });
</script>
<script>
    $(document).ready(function() {
        var table = $('#dept').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('view_pretask_data') }}",
                data: function(d) {
                    d.task_type = $('#taskTypeFilter').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'project',
                    name: 'project'
                },
                {
                    data: 'task_type',
                    name: 'task_type'
                },
                {
                    data: 'module',
                    name: 'module'
                },
                {
                    data: 'task_title',
                    name: 'task_title'
                },
                {
                    data: 'task_description',
                    name: 'task_description'
                },
                {
                    data: 'days',
                    name: 'days'
                },
                {
                    data: 'Action',
                    name: 'Action',
                    orderable: false,
                    searchable: false
                },

            ],
            order: [
                [1, 'desc']
            ],
            lengthMenu: [
                [10, 25, 50, 100, -1],
                ["10", "25", "50", "100", "All"]
            ],
            language: {
                search: "",
                searchPlaceholder: "Search",
                lengthMenu: "_MENU_"
            }
        });
        $('#taskTypeFilter').on('change', function() {
            table.ajax.reload();
        });

    });
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    });


    document.getElementById("exp").addEventListener("click", function() {
        let table = document.getElementById("dept");
        if (!table) {
            alert("Table not found!");
            return;
        }
        let rows = Array.from(table.querySelectorAll("tr"));
        let csv = rows.map(row => {
            let cells = Array.from(row.querySelectorAll("th, td"));
            return cells.map(cell => {
                let text = cell.innerText.trim();
                text = text.replace(/"/g, '""');
                return `"${text}"`;
            }).join(",");
        }).join("\n");
        let blob = new Blob([csv], {
            type: "text/csv;charset=utf-8;"
        });
        let url = URL.createObjectURL(blob);
        let a = document.createElement("a");
        a.href = url;
        a.download = "tasks.csv";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    });
</script>


@endsection