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

@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
          <a href="{{ route('all_projects') }}" 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('project.update', $project) }}" 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">{{ __('Edit Project') }}</h4>
              </div>
              <div class="card-body ">
                <div class="row">
                    <h4 class="card-title">{{ __('Client') }}</h4>
                </div>    

                <div class="row">
                    <label class="col-sm-12 col-form-label text-center">{{ $project->client->name }}</label>
                </div>

                @if($project->client->logo)
                  <div class="row">
                    <img src="{{ $project->client->logo }}" alt="...">
                  </div>
                @endif
              
                <div class="row">
                    <label class="col-sm-12"></label>
                    <div class="col-sm-12">
                        <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', $project->name) }}" required="true" aria-required="true"/>
                          @include('alerts.feedback', ['field' => 'name'])
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                  <label class="col-sm-12">{{ __('') }}</label>
                  <div class="col-sm-12">
                      <div class="form-group{{ $errors->has('number') ? ' has-danger' : '' }}">
                        <label>{{ __('Number') }}</label>
                        <input class="form-control{{ $errors->has('number') ? ' is-invalid' : '' }}" name="number" id="input-number" type="number" value="{{ old('number', $project->number) }}" required="true" aria-required="true"/>
                        @include('alerts.feedback', ['field' => 'number'])
                      </div>
                  </div>
                </div>
                <br>
                <div class="row">
                  <label class="col-sm-12">{{ __('') }}</label>
                    <div class="col-sm-12">
                        <label for="input-description">{{ __('Description') }}</label>
                        {{-- <input class="form-control{{ $errors->has('description') ? ' is-invalid' : '' }}" name="description" id="input-description" type="text" placeholder="{{ __('Description') }}" value="{{ old('description', $project->description) }}" required="true" aria-required="true"/> --}}
                        <textarea cols="1" rows ="4" class="form-control{{ $errors->has('description') ? ' is-invalid' : '' }}" name="description" id="input-description" type="text" required="true" aria-required="true">{{ $project->description }}</textarea>
                        @include('alerts.feedback', ['field' => 'description'])
                    </div>
                </div>

                <br>
                <div class="row pull-left">
                    <div class="togglebutton">
                    <label>
                        @if ($project->is_active)
                            <input type="checkbox"  name="is_active" checked="">
                        @else
                            <input type="checkbox" name="is_active">
                        @endif
                        <span class="toggle"></span>
                        Active
                    </label>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary pull-right">{{ __('Save') }}</button>
                <div class="clearfix"></div>
              </div>
            </div>
          </form>
        </div>

        <div class="col-md-8">
          <div class="card ">
            <div class="card-header card-header-tabs card-header-primary">
              <div class="nav-tabs-navigation">
                <div class="nav-tabs-wrapper">
                  <ul class="nav nav-tabs" data-tabs="tabs">
                    <li class="nav-item">
                      <a class="nav-link active" href="#unassign-users" data-toggle="tab">
                        <i class="material-icons">people</i> Users
                        <div class="ripple-container"></div>
                      </a>
                    </li>
      
                    <li class="nav-item">
                      <a class="nav-link" href="#systems" data-toggle="tab">
                        <i class="material-icons">mediation</i> Systems
                        <div class="ripple-container"></div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="card-body ">
              {{-- Users --}}
              <div class="tab-content">
                <div class="tab-pane active" id="unassign-users">
                  <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">
                        <div class="col-sm-12">
                          <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>
                          <button disabled type="submit" id="submit_assign_users" class="btn btn-primary pull-right">{{ __('Assign Users') }}</button>
                        </div>
                      </div>
                    </form>
                    <!--        Here you can write extra buttons/actions for the toolbar              -->
                  </div>
                  <br>
                  <div class="material-datatables">
                    {{-- Unassign Users --}}
                    <form method="post" enctype="multipart/form-data" action="{{ route('project_remove_assigned_users', $project) }}" autocomplete="off" class="form-horizontal">
                      @csrf
                      @method('put')  

                        <table id="list_of_users" 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">Users</th>
                              <th class="disabled-sorting text-right">
                                <div class="togglebutton">
                                  <label>
                                    <input type="checkbox" name="checkbox-all-users" onclick="toggleAllUsers(this)">
                                    <span class="toggle"></span>
                                    Select All
                                  </label>
                                </div>
                              </th>
                            </tr>
                          </thead>
                          <tfoot>
                            <tr>
                              <th style="text-align: left">Name</th>
                              <th class="text-right">Actions</th>
                            </tr>
                          </tfoot>
                          <tbody>
                            @foreach($assigned_users as $user)
                                <tr>
                                    <td style="text-align: left">{{ $user->name }}</td>
                                    <td>
                                        <div class="form-check text-right">
                                          <label class="form-check-label">
                                            <input class="form-check-input" type="checkbox" value="{{ $user->id }}" name="checkbox-User-{{ $user->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_unassign_users" class="btn btn-primary pull-right">{{ __('Unassign Users') }}</button>
                        <div class="clearfix"></div>
                    </form>
                  </div>
                </div>

                {{-- Systems --}}
                <div class="tab-pane" id="systems">
                  <div class="toolbar">
                    <!--        Here you can write extra buttons/actions for the toolbar              -->
                    <div class="row">
                      <div class="col-md-12 text-right">
                          <a href="{{ route('system.create', $project) }}" class="btn btn-sm btn-primary">{{ __('Add System') }}</a>
                      </div>
                    </div>
                  </div>
                  <div class="material-datatables">
                    <table id="list_of_systems_assigned" 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">Systems</th>
                          <th></th>
                        </tr>
                      </thead>
                      <tfoot>
                        <tr>
                          <th style="text-align: left">Systems</th>
                          <th></th>
                        </tr>
                      </tfoot>
                      <tbody>
                        @foreach($systems as $system)
                          <tr>
                            <td style="text-align: left">{{ $system->name }}</td>
                            <td style="text-align: right">
                                <a rel="tooltip" class="btn btn-success btn-link" href="{{ route('system.edit', $system) }}" data-original-title="" title="">
                                  <i class="material-icons">edit</i>
                                </a>
                            </td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

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

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

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

        $('select.selectpicker').on('change', function(){
          var selected = $('.selectpicker option:selected').val();

          if (selected) {
            $('#submit_assign_users').prop('disabled', false);
          } else {
            $('#submit_assign_users').prop('disabled', true);
          }
        });
    });

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

    function enableSubmit() {
      var numberOfCheckedProjects = 0;
      var checkboxes = document.querySelectorAll("[name^='checkbox-User']");
      for (i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
          numberOfCheckedProjects++;
        }
      }
      if (numberOfCheckedProjects > 0) {
        $('#submit_unassign_users').prop('disabled', false);
      } else {
        $('#submit_unassign_users').prop('disabled', true);
      }
    }

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

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