@extends('layouts.app')

@section('content')

    <!-- Page Content -->
    <div class="content container-fluid" style="padding: 2px;">
    
      <!-- Page Header -->
      <div class="project-page-header">
        @include('project.project-menu') 
        
      </div>
      <!-- /Page Header -->
            
          <div class="row">
            <div class="col-lg-12 col-xl-12">
              <!--  -->
                <div class="fixed-header">
                  <div class="navbar">
                    <div class="float-left mr-auto">
                      <div class="add-task-btn-wrapper">
                        @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4 )
                        <a href="javascript:;" class="btn btn-sm btn-success createModuleBtn"><i class="fa fa-plus"></i> Add Module</a>
                        @endif
                      </div>
                    </div>
                    <a class="task-chat profile-rightbar float-right" id="task_chat" href="#task_window"><i class="fa fa fa-comment"></i></a>
                    <ul class="nav float-right custom-menu">
                      <li class="nav-item dropdown dropdown-action">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-cog"></i></a>
                        <div class="dropdown-menu dropdown-menu-right">
                          <!-- <a class="dropdown-item" href="javascript:void(0)">Pending Tasks</a>                          -->
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              <!--  -->
              
              <div class="project-task">                
                <div class="card flex-fill">
                  <!-- module -->
                  <div class="card-header">
                    <h5 class="card-title mb-0">Available Modules </h5>
                  </div>
                  
                  <table class="task-list-table table modules-table" width="100%">
                    <tr>
                      <th width="55%">Name</th>
                      <th width="10%" class="text-center">Total Task </th>
                      <th width="8%">Start Date</th>
                      <th width="8%">End Date</th>
                      <th width="8%">Created at</th>
                      <th width="8%">Action</th>
                    </tr>
                    @if(count($modules) > 0 )
                    @foreach($modules as $item)
                    <tr class="">                     
                      <td width="">
                        <h4 style="margin-bottom: 0;"><a href="">{{$item->title}}</a></h4>                          
                        <p style="padding: 3px; margin-bottom: 0px;">{{$item->notes}}</p>                
                      </td>
                      <td width="" class="text-center"> {{Techsaga::get_total_task($item->id)}}</td>
                      <td width="">{{date('d-m-Y',strtotime($item->start_date))}}</td>
                      <td width="">{{date('d-m-Y',strtotime($item->end_date))}}</td>
                      <td width="">{{date('d-m-Y',strtotime($item->created_at))}}</td>
                      <td width="">

                         @if( auth()->user()->role_id == 1 || auth()->user()->id == $item->created_by) 
                        <a href="javascript:;" class="btn btn-sm btn-dark editModuleBtn" data="{{  base64_encode($item->id)}}">
                          <i class="fa fa-pencil"></i> Edit 
                        </a>
                        @endif
                      </td>
                    </tr>
                    @endforeach
                    @else
                    <tr><td colspan="5"><h3 class="text-center">It seems like you have not created a module.</h3></td></tr>
                    @endif
                  </table>                  

                </div>
              </div>
            </div>            
          </div>      
    </div>

<!-- /Page Content -->

<style type="text/css">
.module-sub-h3 {
    color: rgba(var(--sk_foreground_max_solid,97,96,97),1);
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 15px;
    padding: 20px;
}
.task-list-table.table.modules-table td {
    vertical-align: middle;
}
</style>

<!-- Create module Modal -->
<div id="createModule" class="modal custom-modal fade" role="dialog">
	<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Add Module - <span class="taskProjectName"></span></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">

        <div style="padding: 10px; text-align: justify; border: 1px solid #ddd" class="module-sub-h3"> 
        Module where you can track your project's progress. Best to organise your task to create a module
      </div>

				<form method="post" id="addModuleForm" action="{{route('project/module/add')}}">
        @csrf				
					<div class="row">
						<div class="col-sm-12">
							<div class="form-group">
								<label>Module Name</label>
								<input class="form-control" type="text" name="name">
                <p style="margin-bottom: 2px;" class="text-danger" id="error-name"></p> 
                <small class="text-muted">(e.g. User Module, Employee and Admin etc.)</small>
							</div>
						</div>										
					</div>
					
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group">
								<label>Start Date</label>
								<div class="cal-icon">
									<input class="form-control " id="from_date" name="start_date" type="text">
                  <p style="margin-bottom: 2px;" class="text-danger" id="error-start_date"></p> 
								</div>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<label>End Date</label>
								<div class="cal-icon">
									<input class="form-control " id="to_date" name="end_date" type="text">
                  <p style="margin-bottom: 2px;" class="text-danger" id="error-end_date"></p> 
								</div>
							</div>
						</div>						
					</div>	

            <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <label>Description </label>
                <textarea rows="3" class="form-control" name="notes"></textarea>
                <p style="margin-bottom: 2px;" class="text-danger" id="error-notes"></p> 
              </div>
            </div>                    
          </div>								
														
					<div class="submit-section">
            <input type="hidden" name="project_id" value="{{Request::segment(3)}}">
						<button class="btn btn-primary submit-btn">Submit</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- /add module Modal -->           

<!-- edit module Modal -->
<div id="editModuleModal" class="modal custom-modal fade" role="dialog">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit Module - <span class="taskProjectName"></span></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <div style="padding: 10px; text-align: justify; border: 1px solid #ddd" class="module-sub-h3"> 
        Module where you can track your project's progress. Best to organise your task to create a module
      </div>

        <form method="post" id="editModuleForm" action="{{route('/project/module')}}">
        @csrf        
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <label>Module Name</label>
                <input class="form-control name" type="text" name="name">
                <p style="margin-bottom: 2px;" class="text-danger" id="error-name"></p> 
                <small class="text-muted">(e.g. User Module, Employee and Admin etc.)</small>
              </div>
            </div>                    
          </div>
          
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label>Start Date</label>
                <div class="cal-icon">
                  <input class="form-control start_date" id="from_date" name="start_date" type="text">
                  <p style="margin-bottom: 2px;" class="text-danger" id="error-start_date"></p> 
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label>End Date</label>
                <div class="cal-icon">
                  <input class="form-control end_date" id="to_date" name="end_date" type="text">
                  <p style="margin-bottom: 2px;" class="text-danger" id="error-end_date"></p> 
                </div>
              </div>
            </div>            
          </div>  
            <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <label>Description </label>
                <textarea rows="3" class="form-control notes" name="notes"></textarea>
                <p style="margin-bottom: 2px;" class="text-danger" id="error-notes"></p> 
              </div>
            </div>                    
          </div>                
                            
          <div class="submit-section">
            <input type="hidden" id="input_module_id" name="module_id" value="">
            <button class="btn btn-primary submit-btn">Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- /edit module Modal -->           

<script type="text/javascript">
$(function(){

$( "#from_date,#to_date" ).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
autoclose:true,
todayHighlight: true,
format: 'dd-mm-yyyy',
startDate:'today'
});

  //opoen modal to create module
  $('.createModuleBtn').click(function(){
      $('#createModule').modal({
        backdrop: 'static',
        keyboard: false
      });
    // reset data 
    
    $("#addModuleForm")[0].reset();

    $('.taskProjectName').html($('.projectName').text());

  });

//submit form
$(document).on('submit', 'form#addModuleForm', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
          
          $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                for (control in data.errors) {
                    //clear 
                    $('input[name=' + control + ']').removeClass('is-invalid');
                    $('#error-' + control).html('');
                    //set
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#addModuleForm').modal('hide');
                window.location.reload();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});
// 


//open edit module modal
$('.editModuleBtn').click(function(){
    
    var module_id = $(this).attr('data');

    $('#input_module_id').val(module_id);

      $('#editModuleModal').modal({
        backdrop: 'static',
        keyboard: false
      });
    //
    $('.taskProjectName').html($('.projectName').text());

    //
    $.ajax({
        type: 'get',
        url: "{{route('/project/module')}}",
        data: {'module_id':module_id},        
        success: function (data) {
            console.log(data);
            // return false;
            $("#editModuleForm")[0].reset();
            // console.log(data.result.passport_no);
            if(data !='null')
            {                               
                $('.name').val(data.result.title);                                               
                $('.notes').val(data.result.notes);                
                $('.start_date').val(moment(data.result.start_date).format('DD-MM-YYYY')); 
                $('.end_date').val(moment(data.result.end_date).format('DD-MM-YYYY')); 
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    //
});
//
$(document).on('submit', 'form#editModuleForm', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
          
          $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#editModuleForm').modal('hide');
                window.location.reload();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});
// 


});

</script>
                 
@endsection