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

@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <a href="{{ route('user.index') }}" class="btn btn-sm btn-default">{{ __('Back to list') }}</a>
      </div>

      <div class="row">
        {{-- Left --}}
        <div class="col-md-4">
          <form method="post" enctype="multipart/form-data" action="{{ route('user.update', $user) }}" 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 User') }}</h4>
                
              </div>
              <div class="card-body ">
                {{-- Picture --}}
                <div class="row text-center">
                  <label class="col-sm-12">{{ __('Profile photo') }}</label>
                  <div class="col-sm-12">
                    <div class="fileinput fileinput-new text-center" data-provides="fileinput">
                      <div class="fileinput-new thumbnail img-circle">
                        @if ($user->picture)
                          <img src="{{ $user->profilePicture() }}" alt="...">
                        @else
                          <img src="{{ asset('material') }}/img/placeholder.jpg" alt="...">
                        @endif
                      </div>
                      <div class="fileinput-preview fileinput-exists thumbnail img-circle"></div>
                      <div>
                        <span class="btn btn-primary btn-file">
                          <span class="fileinput-new">{{ __('Select image') }}</span>
                          <span class="fileinput-exists">{{ __('Change') }}</span>
                          <input type="file" name="photo" id = "input-picture" />
                        </span>
                          <a href="#pablo" class="btn btn-danger fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> {{ __('Remove') }}</a>
                      </div>
                      @include('alerts.feedback', ['field' => 'photo'])
                    </div>
                  </div>
                </div>

                {{-- First Name --}}
                <div class="row">
                  <div class="col-sm-12">
                    <div class="form-group{{ $errors->has('first_name') ? ' has-danger' : '' }}">
                      <label>{{ __('First Name') }}</label>
                      <input style="" class="form-control{{ $errors->has('first_name') ? ' is-invalid' : '' }}" name="first_name" id="input-first-name" type="text" value="{{ old('name', $user->first_name) }}" required="true" aria-required="true"/>
                      @include('alerts.feedback', ['field' => 'first_name'])
                    </div>
                  </div>
                </div>
                <br>
                {{-- Last Name --}}
                <div class="row">
                  <div class="col-sm-12">
                    <div class="form-group{{ $errors->has('last_name') ? ' has-danger' : '' }}">
                      <label>{{ __('Last Name') }}</label>
                      <input style="" class="form-control{{ $errors->has('last_name') ? ' is-invalid' : '' }}" name="last_name" id="input-last-name" type="text" value="{{ old('name', $user->last_name) }}" required="true" aria-required="true"/>
                      @include('alerts.feedback', ['field' => 'last_name'])
                    </div>
                  </div>
                </div>
                <br>
                {{-- Email --}}
                <div class="row">
                  <div class="col-sm-12">
                    <div class="form-group{{ $errors->has('email') ? ' has-danger' : '' }}">
                      <label>{{ __('Email') }}</label>
                      <input style="" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" id="input-email" type="email" value="{{ old('email', $user->email) }}" required />
                      @include('alerts.feedback', ['field' => 'email'])
                    </div>
                  </div>
                </div>
                <br>
                {{-- Role --}}
                <div class="row">
                  <div class="col-sm-12">
                    <div class="form-group{{ $errors->has('role_id') ? ' has-danger' : '' }}">
                      <label>{{ __('Role') }}</label>
                      <select class="selectpicker col-sm-12 pl-0 pr-0" name="role_id" data-style="select-with-transition" title="" data-size="100">
                        <option value="1" @if (old('role_id', $user->role_id) == '1') selected="selected" @endif>{{ __('Admin') }}</option>
                        <option value="2" @if (old('role_id', $user->role_id) == '2') selected="selected" @endif>{{ __('Creator') }}</option>
                        <option value="3" @if (old('role_id', $user->role_id) == '3') selected="selected" @endif>{{ __('Member') }}</option>
                      </select>
                      @include('alerts.feedback', ['field' => 'role_id'])
                    </div>
                  </div>
                </div>

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

          {{-- Edit Password --}}
          <div class="card">
            <div class="card-header card-header-icon card-header-primary">
              <div class="card-icon">
                <i class="material-icons">lock</i>
              </div>
              <h4 class="card-title">{{ __('Change password') }}</h4>
            </div>
            <div class="card-body">
              <form method="post" action="{{ route('user_update_password', $user) }}" class="form-horizontal">
                @csrf
                @method('put')

                <div class="row">
                  <label class="col-sm-12" for="input-password">{{ __('New Password') }}</label>
                  <div class="col-sm-12">
                    <div class="form-group{{ $errors->has('password') ? ' has-danger' : '' }}">
                      <input class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" id="input-password" type="password" placeholder="{{ __('*********') }}" value="" required />
                      @include('alerts.feedback', ['field' => 'password'])
                    </div>
                  </div>
                </div>
                <div class="row">
                  <label class="col-sm-12" for="input-password-confirmation">{{ __('Confirm New Password') }}</label>
                  <div class="col-sm-12">
                    <div class="form-group">
                      <input class="form-control" name="password_confirmation" id="input-password-confirmation" type="password" placeholder="{{ __('*********') }}" value="" required />
                    </div>
                  </div>
                </div>
                <button type="submit" class="btn btn-primary pull-right">{{ __('Change password') }}</button>
                <div class="clearfix"></div>
              </form>
            </div>
          </div>
        </div>

        {{-- Right --}}
        <div class="col-md-8">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header card-header-primary card-header-icon">
                <div class="card-icon">
                  <i class="material-icons">device_hub</i>
                </div>
                <h4 class="card-title">Applications</h4>
              </div>
              <div class="card-body">
                <table id="datatables" class="table table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                  <tbody>                      
                    <div class="row" >
                      @foreach ($apps as $app)
                          <div class="col-sm-2 text-center">
                            <h4>{{ $app->application_id }}</h4>
                            <i class="material-icons col-sm-12">arrow_circle_up</i>
                          </div>
                      @endforeach
                    </div>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="col-md-12">
            <div class="card">
              <div class="card-header card-header-primary card-header-icon">
                <div class="card-icon">
                  <i class="material-icons">work_outline</i>
                </div>
                <h4 class="card-title">Projects</h4>
              </div>
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                  {{-- Assign Projects --}}
                  <form method="post" enctype="multipart/form-data" action="{{ route('user_assign_projects', $user) }}" 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 Projects" name="list_of_projects[]" id="list_of_projects" data-size="100">
                          @foreach ($unassigned_projects as $project)
                              <option value="{{ $project->id }}">{{ $project->name }}</option>
                          @endforeach
                        </select>
                        <button disabled type="submit" id="assign-projects-submit" class="btn btn-primary pull-right">{{ __('Assign Projects') }}</button>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="material-datatables">
                  {{-- Unassign Projects --}}
                  <form method="post" enctype="multipart/form-data" action="{{ route('user_remove_assigned_projects', $user) }}" autocomplete="off" class="form-horizontal">
                    @csrf
                    @method('put')  
                           
                    <br>
                    <table id="datatables" class="table table-no-bordered table-striped table-condensed table-hover" cellspacing="0" width="100%" style="width:100%">
                      <thead>
                        <tr>
                          <th style="text-align:left">Project</th>
                          <th style="text-align:left" class="disabled-sorting text-right">
                            <div class="togglebutton">
                              <label>
                                <input type="checkbox" name="checkbox-all-projects" onclick="toggle(this)">
                                <span class="toggle"></span>
                                Select All
                              </label>
                            </div>
                          </th>
                        </tr>
                      </thead>
                      <tfoot>
                        <tr>
                          <th style="text-align:left">Project</th>
                          <th style="text-align:left" class="text-right">Unassign</th>
                        </tr>
                      </tfoot>
                      <tbody>
                        @foreach ($projects as $project)
                          @if ($project->is_active)
                            <tr>
                              <td style="text-align:left">{{ $project->name }} - {{ $project->client()->first()->name }}</td>
                              <td style="text-align:left">
                                <div class="form-check text-right">
                                  <label class="form-check-label">
                                    <input class="form-check-input" type="checkbox" value="{{ $project->id }}" name="checkbox-Project-{{ $project->name }}" onclick="enableSubmit()"> 
                                    <span class="form-check-sign">
                                      <span class="check"></span>
                                    </span>
                                  </label>
                                </div>
                              </td>
                            </tr>
                          @else
                            <tr class="table-danger">
                              <td style="text-align:left">{{ $project->name }} - {{ $project->client()->first()->name }} <span class="text-danger">INACTIVE</span></td>
                              <td style="text-align:left">
                                <div class="form-check text-right">
                                  <label class="form-check-label">
                                    <input class="form-check-input" type="checkbox" value="{{ $project->id }}" name="checkbox-Project-{{ $project->name }}" onclick="enableSubmit()"> 
                                    <span class="form-check-sign">
                                      <span class="check"></span>
                                    </span>
                                  </label>
                                </div>
                              </td>
                            </tr>
                          @endif
                        @endforeach
                      </tbody>
                    </table>

                    <button disabled id="submit_unassign_projects" type="submit" class="btn btn-primary pull-right">{{ __('Unassign Projects') }}</button>
                    <div class="clearfix"></div>
                  </form>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-12">
            <div class="card">
              <div class="card-header card-header-primary card-header-icon">
                <div class="card-icon">
                  <i class="material-icons">assignment_ind</i>
                </div>
                <h4 class="card-title">Disciplines</h4>
              </div>
              <div class="card-body">
                <div class="toolbar">
                  <!--        Here you can write extra buttons/actions for the toolbar              -->
                  {{-- Assign Disciplines --}}
                  <form method="post" enctype="multipart/form-data" action="{{ route('user_assign_disciplines', $user) }}" 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 Disciplines" name="list_of_disciplines[]" id="list_of_disciplines" data-size="100">
                          @foreach ($unassigned_disciplines as $discipline)
                              <option value="{{ $discipline->id }}">{{ $discipline->name }}</option>
                          @endforeach
                        </select>
                        <button disabled type="submit" id="assign-disciplines-submit" class="btn btn-primary pull-right">{{ __('Assign Disciplines') }}</button>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="material-datatables">
                  {{-- Unassign Disciplines --}}
                  <form method="post" enctype="multipart/form-data" action="{{ route('user_remove_assigned_disciplines', $user) }}" autocomplete="off" class="form-horizontal">
                    @csrf
                    @method('put')  

                    <br>
                    <table id="datatables" class="table table-no-bordered table-striped table-condensed table-hover" cellspacing="0" width="100%" style="width:100%">
                      <thead>
                        <tr>
                          <th style="text-align:left">Discipline</th>
                          <th class="disabled-sorting text-right">
                            <div class="togglebutton">
                              <label>
                                <input type="checkbox" name="checkbox-all-disciplines" onclick="toggleDisciplines(this)">
                                <span class="toggle"></span>
                                Select All
                              </label>
                            </div>
                          </th>
                        </tr>
                      </thead>
                      <tfoot>
                        <tr>
                          <th style="text-align:left">Discipline</th>
                          <th class="text-right">Unassign</th>
                        </tr>
                      </tfoot>
                      <tbody>
                        @foreach ($disciplines as $discipline)
                          <tr>
                            <td style="text-align:left">{{ $discipline->name }}</td>
                            <td style="text-align:left">
                              <div class="form-check text-right">
                                <label class="form-check-label">
                                  <input class="form-check-input" type="checkbox" value="{{ $discipline->id }}" name="checkbox-Discipline-{{ $discipline->name }}" onclick="enableDisciplineSubmit()"> 
                                  <span class="form-check-sign">
                                    <span class="check"></span>
                                  </span>
                                </label>
                              </div>
                            </td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>

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

@push('js')
  <script>
    $(document).ready(function() {
      $('#list_of_projects').selectpicker();
        // $('#assign-projects-submit').prop('disabled', false);
      $("#list_of_projects").on("changed.bs.select", function(e, clickedIndex, isSelected, oldValue) {
        if (clickedIndex != null && isSelected != null) {
          var selectedItems = ($(this).selectpicker('val') || []).length;

          if (selectedItems > 0) {
            $('#assign-projects-submit').prop('disabled', false);
          } else {
            $('#assign-projects-submit').prop('disabled', true);
          }
        }
      });

      $('#list_of_disciplines').selectpicker();
        // $('#assign-projects-submit').prop('disabled', false);
      $("#list_of_disciplines").on("changed.bs.select", function(e, clickedIndex, isSelected, oldValue) {
        if (clickedIndex != null && isSelected != null) {
          var selectedItems = ($(this).selectpicker('val') || []).length;

          if (selectedItems > 0) {
            $('#assign-disciplines-submit').prop('disabled', false);
          } else {
            $('#assign-disciplines-submit').prop('disabled', true);
          }
        }
      });
    });

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

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

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

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