@extends('layouts.app', ['activePage' => 'task-management', 'menuParent' => 'laravel', 'titlePage' => __('Task Management')])

@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <a href="{{ route('all_tasks') }}" class="btn btn-sm btn-default">{{ __('Back to list') }}</a>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <form method="post" enctype="multipart/form-data" action="{{ route('create_discipline_task') }}" autocomplete="off" class="form-horizontal">
                        @csrf
                        @method('put')  

                        <div class="card ">
                            <div class="card-header card-header-primary card-header-icon">
                                <div class="card-icon">
                                    <i class="material-icons">domain</i>
                                </div>
                                <h4 class="card-title">{{ __('Assign Tasks') }}</h4>
                            </div>
                            <div class="card-body ">
                                <div class="row">
                                    <label class="col-sm-2 col-form-label"></label>
                                    <div class="col-sm-7">
                                        <label class="col-sm-12">{{ __('Disciplines') }}</label>
                                        <select class="selectpicker col-sm-12" data-style="select-with-transition" title="Select a Discipline" name="list_of_disciplines" id="list_of_disciplines" data-size="100">
                                            @foreach ($disciplines as $discipline)
                                                <option name="option-discipline-{{ $discipline->name }}" value="{{ $discipline->id }}">{{ $discipline->name }}</option>
                                            @endforeach
                                            <option name="select_none" value="0">{{ 'None' }}</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="row" style="display: none" id="all_tasks">
                                    <table id="list_of_tasks" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                                        <thead>
                                          <tr>
                                            <th>Tasks</th>
                                            <th class="disabled-sorting text-right">
                                              <div class="togglebutton">
                                                <label>
                                                  <input type="checkbox" name="checkbox-all-users" onclick="toggleAll(this)">
                                                  <span class="toggle"></span>
                                                  Select All
                                                </label>
                                              </div>
                                            </th>
                                          </tr>
                                        </thead>
                                        <tfoot>
                                          <tr>
                                            <th>Name</th>
                                            <th class="text-right">Actions</th>
                                          </tr>
                                        </tfoot>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>

                                <button disabled type="submit" id="submit" class="btn btn-primary pull-right">{{ __('Assign Tasks') }}</button>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {            
            $('#list_of_tasks').DataTable({
                "targets": 'no-sort',
                "bSort": false,
                "order": []
            });
            $('#list_of_tasks').fadeIn(1100);

            $('.selectpicker').selectpicker();

            $('select.selectpicker').on('change', function(){
                var disciplineId = $('.selectpicker option:selected').val();
                
                $("#list_of_tasks").DataTable().clear().draw();

                if (disciplineId > 0) {
                    document.getElementById("all_tasks").style.display = "block";
                } else {
                    document.getElementById("all_tasks").style.display = "none";
                }
                
                $.ajax({
                    url: "{{ route('datatable_tasks') }}",
                    type: 'GET',
                    data:{
                        id: disciplineId
                    },
                    success: function (results) {
                        $("#list_of_tasks").DataTable().clear().draw();
                        $("#list_of_tasks").DataTable().destroy();

                        jQuery.each(results, function(index, item) {
                            //now you can access properties using dot notation
                            $("#list_of_tasks > tbody").append(
                                "<tr>"
                                    + "<td>" + item.name + "</td>"
                                    + "<td>"
                                        + "<div class='form-check text-right'>"
                                        + "<label class='form-check-label'>"
                                            + "<input class='form-check-input' type='checkbox' value='" + item.id + "' name='checkbox-task-" + item.name + "' onclick='enableSubmit()'>" 
                                            + "<span class='form-check-sign'>"
                                            + "<span class='check'></span>"
                                            + "</span>"
                                        + "</label>"
                                        + "</div>"
                                    + "</td>"
                                + "</tr>"
                            );
                        });

                        $('#list_of_tasks').DataTable({
                            "targets": 'no-sort',
                            "bSort": false,
                            "order": []
                        });
                        $('#list_of_tasks').fadeIn(1100);
                        $('#submit').prop('disabled', true);
                    }
                });
            });
        });

        function toggleAll(source) {
            var checkboxes = document.querySelectorAll("[name^='checkbox-task']");
            for (i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = source.checked;
            }
            enableSubmit();
        }

        function enableSubmit() {
            var numberOfCheckedTasks = 0;
            var checkboxes = document.querySelectorAll("[name^='checkbox-task']");
            for (i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    numberOfCheckedTasks++;
                }
            }
            if (numberOfCheckedTasks > 0) {
                $('#submit').prop('disabled', false);
            } else {
                $('#submit').prop('disabled', true);
            }
        }
    </script>
@endpush