@extends('layouts.app', ['pageSlug' => 'TodoBoard'])
@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>All Todos</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
  @php
      $auth = \Auth::user();
  @endphp
  <div class="row">
    <div class="col-lg-6">
         All Todos
    </div>
    <div class="col-lg-6 text-right">
      <div class="widgetbar">
        <a href="{{\Request::is('admin/todo') ? '#' : url('admin/todo')}}" class="a-btn btn btn-success" id="show"><i class="fa fa-plus"></i> Add Board</a>
        @if($auth->role->roleName->role == 'admin')
        <a href="{{url('admin/todoboard')}}" class="a-btn btn btn-primary"><i class="fa fa-list "></i> All Boards</a>
        @endif
      </div>
    </div>
  </div>
  <div id="task-model"class="modal fade" role="dialog" title="Board">
        <form class="form-horizontal" role="form" action="{{route('todoboard.store')}}" method="POST">
        @csrf
      <input type="hidden" class="form-control input-sm" id="id" name="id" value="" required>
      <input type="hidden" class="form-control input-sm" name="created_by" value="{{$auth->id}}" required>
      <div class="row">
        <div class="{{$auth->role->roleName->role == 'admin' ? 'col-lg-6' : 'col-lg-12'}} col-sm-12">
          <div class="form-group{{ $errors->has('title') ? ' has-error' : '' }}">
            <label class="control-label" for="title">Title</label>
          <input type="text" class="form-control input-sm" id="title" name="title" value="" placeholder='Enter Title' required>
          </div>
        </div>
          @if($auth->role->roleName->role == 'admin')
          <div class="col-lg-6 col-sm-12">
            <div class="form-group{{ $errors->has('assigned_to') ? ' has-error' : '' }}">
              <label class="control-label" for="assigned_to">Assigned To</label>
              <select name="assigned_to" id="assigned_to" class="form-control select2">
                <option>Please Select</option>
               @foreach($users as $key => $u)
                <option value="{{$key}}">{{$u}}</option>
                @endforeach
              </select>
            </div>
          </div>
        @else
          <input type="hidden" name="assigned_to" value="">
        @endif
        </div>
      <div class="row">
        <div class="col-lg-12 col-sm-12">
          <div class="form-group{{ $errors->has('is_public') ? ' has-error' : '' }}">
            <div class="row">
              <div class="col-lg-3">
              <label class="control-label" for="is_public">If Public Board</label>
              </div>
              <div class="col-lg-1">
                <input type="checkbox" class="" id="is_public" name="is_public" value="{{isset($todoboard) ? $todoboard->is_public : 0}}">
              </div>
            </div>
            <small class="text-info">** If public, this board will be visible to everyone.</small>
          </div>
        </div>
        <div class="col-lg-12 col-sm-12">
          <div class="form-group{{ $errors->has('todo_active') ? ' has-error' : '' }}">
            <div class="row">
            <div class="col-lg-3">
            <label class="control-label" for="todo_active">Status</label>
            </div>
            <div class="col-lg-1">
              <input type="checkbox" class="" id="todo_active" name="todo_active" value="{{ isset($todoboard) ? $todoboard->is_active : 1}}">
            </div>
            </div>
          </div>
        </div>
        <div class="col-lg-12 col-sm-12">
          <div class="form-group">
            @if(isset($todoboard))
            <button type="submit" class="btn btn-success">Update</button>
            @else
            <button type="reset" class="btn btn-danger"><i class="fa fa-ban"></i> Reset</button>
            <button type="submit" class="btn btn-primary"><i class="fa fa-check-circle"></i> Save</button>
            @endif
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="row">
    @if(isset($boards))
      @foreach($boards as $item)
        <div class="col-lg-4 col-sm-12">
          <div class="card m-b-30">
            <div class="card-header">
              <div class="header-info inline">
                <h5 class="card-title mb-0"><b>{{ucfirst($item->title)}}</b> ({{$item->todos->where('is_complete','1')->count()}}/{{$item->todos->count()}})
                @if($item->is_public == 1)
                  <span class="label label-info">Public</span>
                @endif
                </h5>
                @if($item->assigned_to != null)
                <small class=""><i class="fa fa-user mr-2"></i>{{ucfirst($item->user->name)}},</small>
                <small class="">{{ucfirst($item->assignedto->name)}}</small>
                @endif
                @if($item->is_public == 1)
                <small class=""><i class="fa fa-user mr-2"></i>By {{ucfirst($item->user->name)}}</small>
                @endif
              </div>
              @if($item->created_by == $auth->id || $auth->role->roleName->role == 'admin')
              <div class="inline pull-right">
                <a href="#" class="edit-btn" title="Edit" data-id="{{$item->id}}" data-title="{{$item->title}}" data-assigned="{{$item->assigned_to}}" data-public="{{$item->is_public}}" data-status="{{$item->status}}"><i class="fa fa-edit" ></i></a>
                <a href="#" class="deletemodal text-danger" data-toggle="modal" data-target="#deleteModal" data-id="{{$item->id}}" data-url="todoboard" title="Delete"><i class="fa fa-trash"></i></a>
              </div>
              @endif
            </div>
            <div class="card-body todo-board">
              <div id="kanban-board-{{$item->id}}">
                @foreach($item->todos as $todo)
                  <div class="card bg-primary-rgba m-b-20">
                    <div class="card-body">
                      <div class="kanban-tag inline p-20">
                        <p>{{$todo->task}}</p>
                      </div>
                      <div class="kanban-menu">
                        @if($todo->created_by == $auth->id || $auth->role->roleName->role == 'admin')
                            <a href="#" class="todo-editbtn" data-toggle="modal" data-id="{{$todo->id}}" title="Edit"><i class="fa fa-edit"></i></a>
                            <a href="#" class="deletemodal" data-toggle="modal" data-target="#deleteModal" data-id="{{$todo->id}}" title="Delete"><i class="fa fa-trash"></i></a>
                        @endif
                      </div>
                      <div class="kanban-footer-block m-t-5">
                        <div class="row g-0">
                          <div class="col-lg-3 kanban-left-footer">
                            @if($todo->priority == 'h')
                              <span class="label label-danger">High</span>
                            @elseif($todo->priority == 'm')
                              <span class="label label-success">Medium</span>
                            @else
                              <span class="label label-warning">Low</span>
                            @endif
                          </div>
                          <div class="col-lg-6 kanban-center-footer">
                            @if($todo->is_checked != 1 && $todo->due_on != null)
                              <small class="text-danger">Due : {{date('jS M Y', strtotime($todo->due_on))}}</small>
                            @endif
                          </div>
                          @if($item->is_public != 1)
                          <div class="col-lg-3 kanban-footer text-right">
                            <form class="form-horizontal" role="form" action="{{route('todo.status', $todo->id)}}" method="POST">
                              @csrf
                              <input type="hidden" name="type" value="1">
                              <input title="Complete" type="checkbox" class="todo-status" name="is_complete" value="{{$todo->is_complete == 1 ? '1' : '0'}}" {{$todo->is_complete == 1 ? 'checked' : ''}}>
                            </form>
                            @if($item->assigned_to != null)
                              <form class="form-horizontal" role="form" action="{{route('todo.status', $todo->id)}}" method="POST">
                                @csrf
                                <input type="hidden" name="type" value="2">
                                <input title="Complete & Checked" type="checkbox" class="todo-status" name="is_checked" value="{{$todo->is_checked == '1' ? '1' : '0'}}" {{$todo->is_checked == '1' ? 'checked' : ''}}>
                              </form>
                            @endif
                          </div>
                          @endif
                        </div>
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>
              <div class="task-block">
                <!--<div class="add-task-block hide-block">-->
               <!--     <form class="form-horizontal" role="form" action="{{route('todo.store')}}" method="POST">-->
        <!--                                @csrf-->
                <!--    <input type="hidden" name="board_id" value="{{$item->id}}">-->
                <!--    <input type="hidden" name="created_by" value="{{$auth->id}}">-->
                <!--    <input type="hidden" name="is_active" value="1">-->
                <!--    <div class="row">-->
                <!--      <div class="col-sm-12"> -->
             <!--           <div class="form-group {{ $errors->has('task') ? ' has-error' : '' }} m-b-10">-->
        <!--                            <label class="control-label" for="task">Add Task</label>-->
             <!--             <input type="text" class="form-control input-sm" name="task" value="" placeholder='Enter Task' required>-->
             <!--           </div> -->
             <!--         </div>-->
                <!--      <div class="col-lg-7 col-sm-12">  -->
             <!--           <div class="form-group {{ $errors->has('due_on') ? ' has-error' : '' }} m-b-10">-->
        <!--                            <label class="control-label" for="due_on">Due On</label>-->
             <!--             <input type="text" class="form-control input-sm datetimepicker" autocomplete="off" name="due_on" value="" placeholder='Select Date' required>-->
             <!--           </div>-->
             <!--         </div>-->
                <!--      <div class="col-lg-5 col-sm-12">-->
             <!--           <div class="form-group{{ $errors->has('priority') ? ' has-error' : '' }} m-b-10">-->
        <!--                            <label class="control-label" for="priority">Priority</label>-->
        <!--                            <select name="priority" class="form-control">-->
        <!--                                <option>Please Select</option>-->
        <!--                                <option value="h">High</option>-->
        <!--                                <option value="m">Medium</option>-->
        <!--                                <option value="l">Low</option>-->
        <!--                            </select>-->
             <!--           </div>-->
             <!--         </div>-->
             <!--       </div>-->
                <!--    <button type="submit" class="btn btn-info-rgba btn-block btn-lg font-16"><i class="fa fa-check-circle "></i>Add Task</button>-->
           <!--       </form>-->
           <!--     </div>-->
                  <button type="button" class="add-task-btn btn btn-primary-rgba btn-block" data-id="{{$item->id}}"><i class="fa fa-plus"></i> Add Task</button>
              </div>
            </div>
          </div>
        </div>
      @endforeach
    @endif
  </div>
</div>
<!-- Modal -->
<div id="todoeditModal" class="edit-modal modal fade" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Task</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="delete-icon"></div>
      </div>
      <div class="todo-edit-modal modal-body">
        <form class="form-horizontal" role="form" action="{{route('todo.store')}}" method="POST">
            @csrf
 	        <input type="hidden" id="board_id" name="board_id" value="">
            <input type="hidden" name="created_by" value="{{\Auth::user()->id}}">
          <div class="row">
            <div class="col-lg-12 col-sm-12">
              <div class="form-group{{ $errors->has('username') ? ' has-error' : '' }}">
                <label class="control-label" for="username">Select Customer</label>
                <select class="form-control select2" name="username">
                    <option>Please Select</option>
                    @foreach($customers as $cus)
                        <option value="{{$cus}}">{{$cus}}</option>
                    @endforeach
                </select>
              </div>
            </div>
            <!--@if($auth->role->roleName->role == 'admin')-->
            <!--  <div class="col-lg-6 col-sm-12">-->
            <!--    <div class="form-group{{ $errors->has('assigned_to') ? ' has-error' : '' }}">-->
            <!--      <label class="control-label" for="assigned_to">Assigned To</label>-->
            <!--      <select name="assigned_to" class="form-control select2">-->
            <!--        <option>Please Select</option>-->
            <!--       
            <!--      </select>-->
            <!--    </div>-->
            <!--  </div>-->
            <!--@else-->
            <!--  <input type="hidden" name="assigned_to" value="">-->
            <!--@endif-->
            <!--<div class="col-lg-12 col-sm-12">-->
            <!--  <div class="form-group{{ $errors->has('task') ? ' has-error' : '' }}">-->
            <!--    <label class="control-label" for="username">Select Subject</label>-->
            <!--    <select class="form-control" name="username">-->
            <!--        <option>Please Select</option>-->            <!--        
            <!--    </select>-->
            <!--  </div>-->
            <!--</div>-->
            <div class="col-lg-12 col-sm-12">
              <div class="form-group{{ $errors->has('task') ? ' has-error' : '' }}">
                <label class="control-label" for="task">Add Task</label>
                <input type="text" class="form-control" name="task" value="" placeholder='Enter Task' required>
              </div>
            </div>
            <div class="col-lg-6 col-sm-12">
              <div class="form-group{{ $errors->has('priority') ? ' has-error' : '' }}">
                <label class="control-label" for="priority">Priority</label>
                <select name="priority" class="form-control">
                    <option>Please Select</option>
                    <option value="h">High</option>
                    <option value="m">Medium</option>
                    <option value="l">Low</option>
                </select>
                <small class="text-danger">{{ $errors->first('priority') }}</small>
              </div>
            </div>
            <div class="col-lg-6 col-sm-12">
              <div class="form-group{{ $errors->has('due_on') ? ' has-error' : '' }}">
                <label class="control-label" for="due_on">Due On</label>
                <input type="text" class="form-control datetimepicker" autocomplete="off" name="due_on" value="" placeholder='Select Date' required>
                <small class="text-danger">{{ $errors->first('due_on') }}</small>
              </div>
            </div>
            @if($auth->role->roleName->role == 'admin' || (isset($todo) && $todo->board->created_by == $auth->id))
            <div class="col-lg-12 col-sm-12">
              <div class="form-group{{ $errors->has('remark') ? ' has-error' : '' }}">
                <label class="control-label" for="remark">Remark</label>
                <input type="textarea" class="form-control" name="remark" value="">
              </div>
            </div>
            @endif
            <div class="col-lg-12 col-sm-12">
              <div class="form-group{{ $errors->has('is_complete') ? ' has-error' : '' }}">
                <div class="row">
                <div class="col-lg-3">
                    <label class="control-label" for="is_complete">If Completed</label>
                </div>
                <div class="col-lg-2">
                  <input type="checkbox" class="" name="is_complete" value="">
                  <label class="custom-control-label" for="is_complete"></label>
                </div>
                </div>
              </div>
            </div>
            @if($auth->role->roleName->role == 'admin')
              <div class="col-lg-12 col-sm-12">
                <div class="form-group{{ $errors->has('is_checked') ? ' has-error' : '' }}">
                  <div class="row">
                  <div class="col-lg-3">
                    <label class="control-label" for="is_checked">If Checked & Complete</label>
                  </div>
                  <div class="col-lg-2">
                  <input type="checkbox" class="" name="is_checked" value="">
                    <label class="custom-control-label" for="is_checked"></label>
                  </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-12 col-sm-12">
                <div class="form-group{{ $errors->has('is_active') ? ' has-error' : '' }}">
                  <div class="row">
                  <div class="col-lg-3">
                    <label class="control-label" for="is_active">Show On Board</label>
                  </div>
                  <div class="col-lg-2 custom-switch">
                  <input type="checkbox" class="form-control custom-control-input input-sm" name="is_active" value="">
                    <label class="custom-control-label" for="is_active"></label>
                  </div>
                  </div>
                  <small class="text-danger">{{ $errors->first('is_active') }}</small>
                </div>
              </div>
            @else
              <input type="hidden" name="is_active" value="1">
            @endif
            <div class="col-lg-12 m-t-10">
              <div class="form-group">
                <button type="submit" class="btn btn-primary"><i class="fa fa-check-circle"></i> Add</button>
              </div>
              <div class="clear-both"></div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div id="deleteModal" class="delete-modal modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="delete-icon"></div>
      </div>
      <div class="modal-body text-center">
        <h4 class="modal-heading">Are You Sure ?</h4>
        <p>Do you really want to delete these records? This process cannot be undone.</p>
      </div>
      <div class="modal-footer">
          <form class="form-horizontal" role="form" action="{{url('admin/todo')}}" method="POST" id="deleteform">       
          <input type="hidden" name="_method" value="DELETE">
                @csrf
          <button type="reset" class="btn btn-info" data-dismiss="modal">No</button>
          <button type="submit" class="btn btn-danger">Yes</button>
        </form>
      </div>
    </div>
  </div>
<!-- End Contentbar -->
@endsection
@push('js')
@if(count($errors) > 0)
<script>$('#todoeditModal').modal('show');</script>
@endif
<script>
// $('.select2').select2();  
$( ".datetimepicker" ).datepicker({
    dateFormat : 'yy-mm-dd'
});

       $('.deletemodal').on("click",function(){
        var id = $(this).data('id');
        var url = $(this).data('url');
        console.log(id);
        if(typeof url != "undefined"){
          var action = url + '/' + id;
        }
        else{
          var action = $("#deleteform").attr('action') + '/' + id;    
        }
        $("#deleteform").attr('action', action);
      });
    var dialog = $( "#task-model" ).dialog({
      autoOpen: false,
      height: "auto",
      width: "auto",
      modal: true,
      close: function() {
      }
    });

 $('#show').on("click",function(){
    dialog.dialog( "open" );
   });
$('.edit-btn').on("click",function(e){
    e.preventDefault();
    if($(this).data("status") == 1){
        dialog.find('input#todo_active').prop( "checked", true );
    }
    if($(this).data("public") == 1){
        dialog.find('input#is_public').prop( "checked", true );
    }
    dialog.find('input#id').val($(this).data("id"));
    dialog.find('input#title').val($(this).data("title"));
    dialog.find('#assigned_to').val($(this).data("assigned"));
    dialog.dialog( "open" );
});
 $('.add-task-btn').on("click",function(){
    //   $(this).closest('.task-block').find('.add-task-block').show(400);
    //   $(this).hide('fast');
    console.log($('input#board_id').val());
        $('#todoeditModal').find('input#board_id').val($(this).data('id'));
        $('#todoeditModal').modal('show');
    });


    $('.todo-editbtn').on('click', function (event) {
      var id = $(this).data('id');
      // console.log(id);
      if(id != null){
        $.ajax({
          headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          type:"GET",
          url: '/admin/todo/'+id+'/edit',
          success:function(data){
            $(".todo-edit-modal").html(data);
            $("#todoeditModal").modal('show');
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest);
          }
        });
      }
    });

    $('.todo-status').on('change', function (e) {
      var a = $(this).attr('name');
      $.ajax({
        headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type:"POST",
        url: $(this).closest('form').attr('action'),
        data: $(this).closest('form').serialize(),
        context: this,
        success:function(data){
          console.log(data);
          if(a == 'is_complete' && data.checked == 1)
            $(this).closest('.kanban-footer').find('input[name="is_checked"]').prop('checked',true);
          else if(a == 'is_complete' && data.checked == 0)
            $(this).closest('.kanban-footer').find('input[name="is_checked"]').prop('checked',false);
          if(a == 'is_checked' && data.complete == 1)
            $(this).closest('.kanban-footer').find('input[name="is_complete"]').prop('checked',true);
          else if(a == 'is_checked' && data.complete == 0)
            $(this).closest('.kanban-footer').find('input[name="is_complete"]').prop('checked',false);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          console.log(XMLHttpRequest);
        }
      });

    });
</script>
@endpush