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

@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <a href="{{ route('all_disciplines') }}" class="btn btn-sm btn-default">{{ __('Back to list') }}</a>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <form method="post" enctype="multipart/form-data" action="{{ route('discipline.update', $discipline) }}" 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">person</i>
                                </div>
                                <h4 class="card-title">{{ __('Edit Discipline') }}</h4>
                            </div>
                            <div class="card-body ">
                                <div class="row">
                                    <label class="col-sm-2 col-form-label"></label>
                                    <div class="col-sm-7">
                                        <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
                                            <label>{{ __('Name') }}</label>
                                            <input class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" id="input-name" type="text" value="{{ old('name', $discipline->name) }}" required="true" aria-required="true"/>
                                            @include('alerts.feedback', ['field' => 'name'])
                                        </div>
                                    </div>
                                </div>
                            
                                <button type="submit" class="btn btn-primary pull-right">{{ __('Save') }}</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-md-8">
                    <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">{{ __('Assigned') }}</h4>
                        </div>
                        <div class="card-body ">
                            {{-- <div class="toolbar">
                                <form method="post" enctype="multipart/form-data" action="{{ route('project_assign_users', $project) }}" autocomplete="off" class="form-horizontal">
                                @csrf
                                @method('put')  
            
                                <div class="row">
                                    <label class="col-sm-2 col-form-label">{{ __('Assign Users') }}</label>
                                    <div class="col-sm-7">
                                    <select class="selectpicker" data-style="select-with-transition" multiple title="Assign Users" name="list_of_unassigned_users[]" id="list_of_unassigned_users" data-size="100">
                                        @foreach ($unassigned_users as $user)
                                            <option name="checkbox-Unassigned-User-{{ $user->name }}" value="{{ $user->id }}" onchange="enableAssignUsersSubmit()">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                    </div>
                                    <div class="col-sm-3">
                                    <button disabled type="submit" id="submit_assign_users" class="btn btn-primary pull-right">{{ __('Assign Users') }}</button>
                                    <div class="clearfix"></div>
                                    </div>
                                </div>
                                </form>
                                <!--        Here you can write extra buttons/actions for the toolbar              -->
                            </div> --}}
                            <div class="material-datatables">
                                {{-- Unassign Users --}}
                                <form method="post" enctype="multipart/form-data" action="{{ route('unassign_tasks', $discipline) }}" autocomplete="off" class="form-horizontal">
                                    @csrf
                                    @method('put')  
            
                                    <table id="list_of_tasks" class="table table-striped table-condensed table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                                        <thead>
                                            <tr>
                                              <th style="text-align: left">Tasks</th>
                                              <th class="disabled-sorting text-right">
                                                <div class="togglebutton">
                                                  <label>
                                                    <input type="checkbox" name="checkbox-all-disciplines" onclick="toggleAll(this)">
                                                    <span class="toggle"></span>
                                                    Select All
                                                  </label>
                                                </div>
                                              </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($discipline_tasks as $discipline_task)
                                                <tr>
                                                    <td style="text-align: left">{{ $discipline_task->task->name }}</td>
                                                    <td>
                                                        <div class="form-check text-right">
                                                        <label class="form-check-label">
                                                            <input class="form-check-input" type="checkbox" value="{{ $discipline_task->id }}" name="checkbox-discipline-task-{{ $discipline_task->task->name }}" onclick="enableSubmit()"> 
                                                            <span class="form-check-sign">
                                                            <span class="check"></span>
                                                            </span>
                                                        </label>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
            
                                    <button disabled type="submit" id="submit" class="btn btn-primary pull-right">{{ __('Unassign Tasks') }}</button>
                                    <div class="clearfix"></div>
                                </form>
                            </div>
                        </div>
                    </div>
                </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);
        });

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

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