@extends('layouts.app')

@section('title', 'Create Project | ')

@section('content')

        <!-- Page Content -->
        <div class="content container-fluid" style="background: #fff">                    
          <!-- Content Starts -->
          <div class="row">
            <div class="col-sm-12">                             
                
                 {{ Form::open(array('url' => 'project/store', 'files' => true)) }}

                    <div class="col-sm-8 offset-sm-2">
                    
                    <div class="" style="padding: 25px 0; ">

                    <h3 class=" text-center">Project Details <small>(New Project)</small></h3>
                    <!-- row -->
                    <div class="row">
                    <div class="col-sm-12">
                      <div class="form-group ">
                        <label>Project Name <span class="text-danger">*</span></label>
                        <input class="form-control @if ($errors->has('name')) is-invalid @endif" type="text" value="{{old('name')}}" name="name">
                        @if ($errors->has('name')) <div class=" invalid-feedback">{{ $errors->first('name') }}</div> @endif
                      </div>
                    </div>                    
                    </div>
                    <!-- row end -->
                    <!-- row -->
                    <div class="row">
                    <div class="col-sm-12">
                      <div class="form-group">
                        <label>Description</label>
                        {!! Form::textarea('description', null, ['class' => 'form-control summernote', 'placeholder' => 'Project description...']) !!}

                        @if ($errors->has('description')) <div class="text-danger">{{ $errors->first('description') }}</div> @endif    
                      </div>
                    </div>                    
                    </div>
                              
                  	<div class="row typeRow" >										
        						<div class="col-sm-6" >
        							<div class="form-group" >
        								<label>Type <span class="text-danger">*</span></label>
        								<select class="select form-control project_type" name="type">
        									<option value="">Select </option>
        									<option value="fixed"  {{ old('type') == 'fixed' ? 'selected="selected"' : '' }}>Fixed Timeline</option>
        									<option value="product" {{ old('type') == 'product' ? 'selected="selected"' : '' }}>Recuring Work</option>
        									
        								</select>
                         @if ($errors->has('type')) <div class="text-danger">{{ $errors->first('type') }}</div> @endif  
        								<small class="text-muted">(If Project Type is re-curing work, so there is no required deadline. )</small>
        							</div>
        						</div>
        						
        					</div>
                    <!-- end row -->
                    <div class="row timeLineDate " >
                    <div class="col-sm-3">
                      <div class="form-group">
                        <label>Start Date</label>
                        <div class="cal-icon">
                          <input class="form-control " id="from_date" type="text" name="start_date" placeholder="dd-mm-yyyy">
                           @if ($errors->has('start_date')) <div class=" text-danger">{{ $errors->first('start_date') }}</div> @endif
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-3">
                      <div class="form-group">
                        <label>End Date</label>
                        <div class="cal-icon">
                          <input class="form-control " id="to_date" type="text" name="end_date" placeholder="dd-mm-yyyy">
                          @if ($errors->has('end_date')) <div class=" text-danger">{{ $errors->first('end_date') }}</div> @endif
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-3">
                      <div class="form-group">
                        <label>Total Days</label>
                        <div class="la la-time">
                          <input class="form-control total_days " name="total_days" type="text" readonly>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- row -->
                  <div class="row" >                                        
                    <div class="col-sm-6" data-select2-id="40">
                      <div class="form-group" data-select2-id="39">
                        <label>Actually start date <span class="text-danger">*</span> </label>
                        <div class="cal-icon">
                          <input class="form-control datetimepicker" type="text" name="actual_start_date" placeholder="dd-mm-yyyy">
                           @if ($errors->has('actual_start_date')) 
                           <div class="text-danger">{{ $errors->first('actual_start_date') }}</div> @endif
                          <small class="text-muted">(System will track from this date. )</small>
                        </div>
                      </div>
                    </div>

                    <div class="col-sm-3" >
                      
                    </div>
                  </div>
                  <!-- end row -->
                  <div class="row">
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label>Add Project Leader <span class="text-danger">*</span></label>                        
                        <select class="select form-control " name="project_leader">
                          <option value="">Select an user </option>
                          @if(count($leaders) > 0)
                          @foreach($leaders as $item)
                            <option value="{{$item->id}}" {{ old('project_leader') == $item->id ? 'selected="selected"' : '' }}> {{$item->userName}} </option>
                          @endforeach
                          @else
                          <span class="text-danger">Please add user and assign Role Manager, Team Leader etc.</span>
                          @endif
                        </select>                        
                         @if ($errors->has('project_leader')) <div class=" text-danger">{{ $errors->first('project_leader') }}</div> @endif
                        <small class="text-muted">(Who will be responsible for all project activity.)</small>
                      </div>
                    </div>
                    <!-- <div class="col-sm-6">
                      <div class="form-group">
                        <label>Team Leader</label>
                        <div class="project-members">
                          <a href="#" data-toggle="tooltip" title="" class="avatar" data-original-title="user name">
                            <img src="{{ asset('images/avtar.png') }}" alt="">
                          </a>
                        </div>
                      </div>
                    </div> -->
                  </div>
                  <!--  -->
                  <div class="row">
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label>Add Team</label>                        
                        <select id="team_list" name="team_list[]" class="select form-control" multiple>
                            
                        </select>
                        <small>To add a teammate who’s not on Techsaga, you need to <a href="{{route('user/add')}}">Create Them First</a></small>
                      </div>
                    </div>
                  <!--   <div class="col-sm-6">
                      <div class="form-group">
                        <label>Team Members</label>
                        <div class="project-members">

                          <a href="#" data-toggle="tooltip" title="" class="avatar" data-original-title="John Doe">
                            <img src="{{ asset('images/avtar.png') }}" alt="">
                          </a>
                          <a href="#" data-toggle="tooltip" title="" class="avatar" data-original-title="Richard Miles">
                            <img src="{{ asset('images/avtar.png') }}" alt="">
                          </a>
                          
                          <span class="all-team">+2</span>
                          
                        </div>
                      </div>
                    </div> -->
                  </div>
                  <!-- row -->
                  <div class="row">
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label>Add Client</label>
                        <select id="client_list" name="client_list[]" class="select form-control" multiple>
                        </select>
                        <small>To add a Client who’s not on Techsaga, you need to <a href="javascript:;" class="inviteClientBtn">Invite Them First</a></small>
                      </div>
                    </div>
                   <!--  <div class="col-sm-6">
                      <div class="form-group">
                        <label>Client Members</label>
                        <div class="project-members">
                          <a href="#" data-toggle="tooltip" title="" class="avatar" data-original-title="John Doe">
                            <img src="{{ asset('images/avtar.png') }}" alt="">
                          </a>                         
                          <a href="#" data-toggle="tooltip" title="" class="avatar" data-original-title="Mike Litorus">
                            <img src="{{ asset('images/avtar.png') }}" alt="">
                          </a>
                          <span class="all-team">+2</span>
                        </div>
                      </div>
                    </div> -->
                  </div>
                  <!-- end row -->
                   <!-- row -->
                  <div class="row">
                    <div class="col-sm-6">
                      <div class="form-group">
                        <label>Add Files</label>
                        <input type="file" name="document[]" class="form-control">
                        
                      </div>
                    </div>
                    <div class="col-sm-6">
                      
                    </div>
                  </div>
                  <!-- end row -->
                 
                   <!-- add note -->
                  <div class="form-group" style="margin-top:20px; ">
                    <p class="text-muted">Tip: Better tracking, Next step create module with deadline and their task. </p>
                  </div>
                  <!--  -->

                  <div class="submit-section">
                    <button class="btn btn-primary submit-btn">Submit</button>
                  </div>                                    
                  
                  {!! Form::close() !!}
                  
                </div>
              
              </div>
              
            </div>
          </div>
          <!-- /Content End -->
          
     </div>
    <!-- /Page Content -->

<!-- invite new client Modal -->
<div class="modal custom-modal fade" id="inviteModal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">

            <form method="post" id="invite_client_form" action="{{route('client/invite/new')}}">
                @csrf
                <div class="form-header">
                    <h3>Invite client</h3>                    
                <div class="add-client-tip" style="border: 1px solid #0083d9;padding: 12px;">
                   <p> <i class="fa fa-user-plus"></i> Creating client: </p>
                   <p>1. Invite first - System will send a link on client's email with secret code to verify email is active?</p>
                   <p>2. Client will fill the form with profile detail to access system.</p>
                </div>
                </div>
                
                <div class="form-group">
                <label>First Name <span class="text-danger">*</span></label>
                    <input class="form-control" type="text" name="first_name">
                    <p style="margin-bottom: 2px;" class="text-danger" id="error-first_name"></p>  
                </div>

                <div class="form-group">
                <label>Last Name </label>
                    <input class="form-control" type="text" name="last_name">
                </div>
                <div class="form-group">
                    <label>Email Address <span class="text-danger">*</span></label>
                    <input class="form-control" type="text" name="email">
                    <p style="margin-bottom: 2px;" class="text-danger" id="error-email"></p>  
                </div>

                <div class="modal-btn delete-action" style="margin-top: 25px;">
                    <div class="row">
                        <div class="col-6">
                            <button type="submit" class="btn btn-primary continue-btn" data-loading-text="sendig...">Send Invitation </button> 
                        </div> 
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                        </div>
                    </div>
                </div>
            
            </form>

            </div>
        </div>
    </div>
</div>     
<!--  -->    

@stack('scripts')

<script type="text/javascript">
//
$(document).ready(function() {
$(document).on('click','.inviteClientBtn',function(){
    $('#inviteModal').modal();
});

// submit form
$(document).on('submit', 'form#invite_client_form', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    var $btn = $(this);
    
    $('.continue-btn').button('loading');

    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
          
           $('.continue-btn').button('reset');

            $('.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 {
                $('#modalForm').modal('hide');
                 alert("Invitation has sent to Client!");
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});

//
$('.project_type').change(function(){
      
     var type = $(this).val();
     if( type=='product')
     {
     		$('.timeLineDate').hide();     		
     }
     else
     {
     		$('.timeLineDate').show();     		
     }      
});

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

var start = $('#from_date').datepicker('getDate');
var end   = $('#to_date').datepicker('getDate');
 
if (start==end) {  
  alert('ok');
  var days   = (end - start)/1000/60/60/24;
  $('.total_days').val('1');
}

if (start < end) {  
  var days   = (end - start)/1000/60/60/24+(1);
  $('.total_days').val(days);
}

if (start > end) {
  alert ("Please select appropriate date from!");
  $('#from_date').val("");
  $('#to_date').val("");
  $('.total_days').val("");
 }

 });

//


});
                  
</script>             

@endsection