@extends('front.layouts.main')
@section('style')
<link href="{{ asset('assets/sign/css/jquery.signature.css') }}" rel="stylesheet">
<style>
  .btn-success{background-color: #28a745;color: #fff;}
  .btn-success:hover {background-color: #218838;box-shadow:none}
</style>
@endsection
@section('content')
<div class="mb-4">
    <div>{{@$gcompany->company_name}}</div>
    @if(\Auth::user()->user_role->user_type == 2)
        @include('front.projects.menu')
    @endif
    <div class="d-sm-flex justify-content-sm-between align-items-center mb-3">
	<div class="d-flex align-items-center">
        <h2 class="sub-heading mt-0 mb-2 mb-sm-0 mr-md-5 mr-3">Weather Details</h2>
			@if($isNoWorkDone)
				<a href="javascript:void(0);" data-url="{{ route('projectinfo-hours.addUpdateFeed',['id'=>request()->input(   'project_id'),'isNoWorkDone'=>false, 'action'=>'addUpdateFeed']) }}" id="no-work-done"><button type="button" class="btn-new btn-new-primary btn-success">No Work Done</button></a>
			@else
				<a href="javascript:void(0);" data-url="{{ route('projectinfo-hours.addUpdateFeed',['id'=>request()->input(   'project_id'),'isNoWorkDone'=>true, 'action'=>'addUpdateFeed']) }}" id="no-work-done"><button type="button" class="btn-new btn-new-primary">No Work Done</button></a>
			@endif
		</div>
         <div class="d-flex">
            <div class="d-flex align-items-center">
                <div class="mr-2">
                                                <label class="date-text" id="changedate">
                        {{ \Session::get('sdate') ? \Session::get('sdate') : $date->format('m-d-Y') }}
                        </label>
                </div>
                <label class="calendar-circle mr-2">
                    <i class="icon-calender"></i>
                    <input class="date-input"  type="text" id="datepicker" data-url="{{route('projectinfo-hours.getHour')}}"  autocomplete="off">
                </label>
                <div class="btn-select-box">
                        <input type="hidden" name="project_created_date" value="{{date('Y-m-d',strtotime(str_replace(",", "", $project->created_at)))}}" id="project_created_date" data-date="{{date('m-d-Y',strtotime(str_replace(",", "", $project->created_at). ' -1 year'))}}">
                        <input type="hidden" name="current_date" value="{{date('Y-m-d')}}" id="current_date">
                        <input type="hidden" value="" id="created_at">
                        <input type="hidden" value="{{request()->input('project_id')}}" id="project_id" name="project_id" />
                        <input type="hidden" value="{{\Session::get('sdate') ? \Session::get('sdate') : $date->format('m-d-Y') }}" id="date" name="date" />
                        <!--                            <input type="" onClick="filterData();"  value="View Report" class="c-btn" />-->
                        <input type="hidden" name="project_created_date_month" id="project_created_date_month" data-date="{{date('F Y',strtotime(str_replace(",", "", $project->created_at). ' -1 year'))}}">
                        <!--  <a href="javascript:void(0);" data-url="{{ route('report-template.viewReport',['id'=>request()->input('project_id'),'action'=>'download']) }}" id="view-report-template" class="c-btn">View Report</a> -->
                        <a href="#" class="btn-new btn-new-primary custom-report">
                        View Report
                        <i class="icon-down-drop"></i>
                        </a>
                        <div class="report-dorp">
                            <ul>
                                <li><a href="javascript:void(0);" data-url="{{ route('report-template.viewReport',['id'=>request()->input('project_id'),'action'=>'download']) }}" id="view-report-template">Daily Report</a></li>
                                <li><a href="" data-attribute="timeFrame">Report Summary</a></li>
                            </ul>
                        </div>
                </div>
            </div>
        </div>
    </div>
    <div class="c-weather-detail mt-4" id="weather-section">
        @include('front.projects.weather')
    </div>
    <div class="mb-2 mt-3 d-sm-flex justify-content-between align-items-center">
         @include('front.projects.attributes')    
    </div>
    <div class="c-midsection card-c">
        <div class="c-mid-tsbsection">
            <div class="c-view-page">
                <section class="c-veiw-con">
                <div class="view-report-sec">
                    <img id="loader" src="{{asset('images/preloader.gif')}}" style="display: none;margin:0 auto;"/>
                    <div class="sub-form-sec ">
                    <!--                                   <p style="clear: both;"><button id="clear">Clear</button> 
                        <button id="json">To JSON</button> <button id="svg">To SVG</button></p>-->
                    <div class="sign-report active">
                        <div class="sign-report-new">
                        {!! Form::open(array('route' => 'projectinfo-sign.store','method'=>'POST','id'=>'myform')) !!}
                        {!! Form::hidden('project_id',request()->input('project_id')) !!}
                        {!! Form::hidden('submission_date',\Session::get('sdate')?\Session::get('sdate'):null,['id'=>'submission_date']) !!}
                        <div id="sign_sec">
                            <div class="sign-sec flex">
                            <div>
                                <div class="sign-area">
                                <div  id="signature"></div>
                                <div  id="error"></div>
                                </div>
                                <div class="btn-group-inline">
                                <span class="erase mr-2">
                                <button type="button" id="clear" class="btn-new btn-new-primary">Erase</button>
                                </span>
                                <span class="verify">
                                <input type="hidden" id="project_id" value="{{ $project_id }}">
                                <button  type="button" id="click" class="btn-new btn-new-primary " onclick="confirmAttribute('#myform', 'project hour')">Save</button>
                                </span>
                                </div>
                                <div style="display: none;">
                                <!-- <input style="display:none" type='button' id='click' value='click'> -->
                                <textarea style="display:none" name="image" id='output'></textarea>
                                <br/>
                                </div>
                            </div>
                            @if(@$sign->user_sign)
                            <div class="text-block-sign">
                                <img src='{{@$sign->user_sign}}' id='sign_prev' />
                                <div>Previous Signature</div>
                            </div>
                            @endif
                            <!--                                     <div>
                                Preview image 
                                <img src='' id='sign_prev' style='display: none;' />
                                </div> -->
                            </div>
                        </div>
                        {{ Form::close() }}
                        </div>
                    </div>
                    </div>
                </div>
                </section>
            </div>
        </div>
    </div>
</div>
<div class="popup-open modal-custom modal-small" data-pop="timeFrame">
  <div class="close modal-close-btn">
    <span class="icon-cancel"></span>
  </div>
  <h4 class="modal-cutom-title mar_bottom_20 mar_top_15 text-center">Select Your Time Frame</h4>
  <div class="pt-3">
    <form>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group-row">
                    <div class="half-ckn-radio">
                        <div class="chk-btn clearfix mar_bottom_5">
                            <input type="radio" id="useReport1" value="weekly_report" name="time-radio" onclick="show1();">
                            <label for="useReport1">Weekly Report</label>     
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group-row">
                    <div class="half-ckn-radio">
                        <div class="chk-btn clearfix mar_bottom_5">
                            <input type="radio" id="useReport2"  value="monthly_report" name="time-radio" onclick="show2();">
                            <label for="useReport2">Monthly Report</label>     
                        </div>
                    </div>
                </div>
            </div>
            <div id="monthSelectedDiv" class="monthSelectedDiv col-sm-12" style="display:none">
                <!--<label for="monthSelected">Month :</label>-->
                <div class="form-group-row">
                    <div class="select-with-icon">
                        <input readonly name="monthSelected" placeholder="Select Month" id="monthSelected" class="monthSelected " />
                        <i class="icon-calender"></i>
                    </div>
                    <input type="hidden" id="monthReportMonth" value="">
                    <input type="hidden" id="monthReportYear" value="">
                </div>
            </div>
            <div id="weekSelectedDiv" class="col-sm-12" style="display:none">
                <div class="form-group-row">
                    <div class="select-with-icon">
                        <input readonly name="weekSelected" placeholder="Select Week" id="weekSelected" class="weekSelected" />
                        <i class="icon-calender"></i>
                    </div>
                    <input type="hidden" id="weekStartDate" value="">
                    <input type="hidden" id="weekEndDate" value="">
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group-row">
                    <input type="email" name="recipient_email" id="recipient_email" class="form-group-input" placeholder="Send email link to">
                </div>
            </div>
            <div class="col-sm-12 text-center">
                <button id="sendMail" type="button" class="btn-new btn-new-primary">Send Report</button>
            </div>
            <div class="col-sm-12">
                <div id="showError" class="error-text">
                </div>
                <div id="successMessage" class="error-text">
                </div>
            </div>
        </div>
    </form>
  </div>
</div>
<style>
  .hide-calendar .ui-datepicker-calendar{display: none;}
</style>
@endsection
@section('js')
<script src="{{asset('assets/sign/libs/jSignature.min.js')}}"></script>
<script src="{{asset('assets/sign/libs/modernizr.js')}}"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="{{asset('assets/sign/libs/flashcanvas.js')}}"></script>
<![endif]-->
<script>
  $(document).ready(function () {
          var dateString = "{{getSignedReportDates($project->id)}}";
          var dates = "{{reportDataEntryStatus($project->id)}}";
          dates = dates.split(',');
		  var noWorkDates = "{{getNoWorkReportDates($project->id)}}";
		  noWorkDates = noWorkDates.split(',');
          var selectedDate = dateString.split(',');
          var projectCreatedDate = $("#project_created_date").val();
          var currentDate=$("#current_date").val();
          var minDate = $("#project_created_date").data("date");
  
      $("#datepicker").datepicker({
          minDate: minDate,
          maxDate: 0,
          dateFormat: 'mm-dd-yy',
          changeMonth: true, //this option for allowing user to select month
          changeYear: true, //this option for allowing user to select from year range
           beforeShowDay: function(date) {
                  var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
  
                 // check if date is in your array of dates
               //  if(string >= projectCreatedDate && string <= currentDate){
					if($.inArray(string, noWorkDates) != -1){
					  
						return [true, 'css-class-to-highlight-no-work'];
					} 
					else if ($.inArray(string, selectedDate) != -1) { 
                      // if it is return the following.
                        return [true, 'css-class-to-highlight'];
                        
                      } else if($.inArray(string, dates) != -1){
                          
                          return [true, 'css-class-to-highlight-unsigned'];
                          
                      } else {
  
                        return [true, '', ''];
                        
                      }
                 // }
                 // return [true, '', ''];
              }
      });
  
      function formatDate(date, formatType) {
                  var d = new Date(date),
                      month = '' + (d.getMonth() + 1),
                      day = '' + d.getDate(),
                      year = d.getFullYear();
   
                  if (month.length < 2) month = '0' + month;
                  if (day.length < 2) day = '0' + day;
                  if(formatType == 1)
                  {
                      return [month, day, year].join('-');
                  }
                  else
                  {
                      return [year, month, day].join('-');
                  }    
              }
  
      $('#datepicker').on('change', function (e) {
          e.preventDefault;
          var date = $('#datepicker').val();
          
          var created_at = $('#created_at').val();
          var dateOne = new Date(created_at); //Year, Month, Date
          var dateTwo = new Date(date); //Year, Month, Date
          if (dateTwo.getTime() < dateOne.getTime()){
            //  alert('selected date is before project created date. Please select correct date');
              var dateTwoNew = formatDate(dateTwo, 1);
              var string = jQuery.datepicker.formatDate('yy-mm-dd', dateTwo);
              if ($.inArray(string, selectedDate) != -1) { 
              //  console.log("used");
   
              } 
              else if($.inArray(string, dates) != -1){
                 // console.log("used");
   
              }
              else{
                //console.log("unused");
                  var createReport = confirm("This date is prior to the project creation date, would you like to create a daily report for " + dateTwoNew +" ?");
                  if(createReport == true)
                    {
                        var updateURL = "{{route('getWeather2')}}";
                       // console.log(updateURL);
                        var projectId = $('#project_id').val();
                        var dateSelected = formatDate(date, 2);
                        console.log("create="+updateURL+" id="+projectId);
                        $.ajax({
                        url: updateURL,
                        data: {'date': dateSelected, 'projectId' : projectId, 'type' : 'website', _token: '{{csrf_token()}}'},
                        type: "POST",
                        success: function (result) {
                         //  console.log("SUCCESS ::"+ JSON.stringify(result));
                           var result = JSON.parse(result);
   
                           alert(result.Message); 
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {      
                            alert("Something went wrong. Please try again.");
                        }
                        });
                    }
                    else
                    {
                        return false;
                    }
   
              }
               
      }
   
  
          $("#date").val(date);
          $("#submission_date").val(date);
          $("#changedate").html(date);
  
  
      });
  //for weather change 
      $('#datepicker').on('change', function (e) {
          e.preventDefault;
          var project_id = $('#project_id').val();
          var date = $('#datepicker').val();
          var sign = 1;
          
          $.ajax({
             url: "{{route('getWeatherBydate')}}",
                     type: "GET",
                     data: {'date': date,'project_id': project_id,'sign':sign},
  
                     success: function (result) {
  
						//console.log(result);
						$("#weather-section").html(result);
						location.reload();
                     },
                     error: function (XMLHttpRequest, textStatus, errorThrown) {
                     alert("Status: " + textStatus);
                             alert("Error: " + errorThrown);
                     }
             });
  
          var url = "{{url('projectinfo_new_sign')}}";
              
              $.ajax({
              url: url,
                      type: "GET",
                      data: {'date': date, 'project_id': project_id},
                      success: function (result) {
                      $("#sign_sec").html(result);
                      },
                      error: function (XMLHttpRequest, textStatus, errorThrown) {
                              alert("Something went wrong!");
                      }
              });
  
  
  
  
      });
  
  
   var minDateMonth = $("#project_created_date_month").data("date");
       //   console.log(minDateMonth);
          $(function() {
   
              $('#monthSelected').datepicker( { 
                  changeMonth: true,
                  changeYear: true,
                  showButtonPanel: true,
                  minDate: new Date(minDateMonth),
                  maxDate: 0,
                  dateFormat: 'MM yy',
                  onClose: function(dateText, inst) { 
                      $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
                      $('#monthReportMonth').val(inst.selectedMonth);
                      $('#monthReportYear').val(inst.selectedYear);
                      $(this).datepicker("widget").removeClass('hide-calendar');
                  },
                  beforeShow: function(input) {
                      $(input).datepicker("widget").addClass('hide-calendar');
                      
                      
                      
                  }
                  
              });
              
               
          });
  
  
   
              $(function() {
              var startDate;
              var endDate;
              var startDate1;
              var endDate1;
   
              var selectCurrentWeek = function() {
                  window.setTimeout(function () {
                      $('#ui-datepicker-div').find('.ui-datepicker-current-day a').addClass('ui-state-active')
                  }, 1);
              }
   
              $('#weekSelected').datepicker({
                  changeMonth: true,
                  changeYear: true,
                  showOtherMonths: true,
                  selectOtherMonths: true,
                  showButtonPanel: true,
                  dateFormat: 'mm-dd-yy',
                  minDate: minDate,
                  maxDate: 0,
                  onSelect: function(dateText, inst) { 
                      var date = $(this).datepicker('getDate');
                      startDate1 = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
                      endDate1 = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                   //   var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
                    //  $('#weekStartDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
                    //  $('#weekEndDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
                      startDate = jQuery.datepicker.formatDate('mm-dd-yy', startDate1);
                      endDate = jQuery.datepicker.formatDate('mm-dd-yy', endDate1);
                      $('#weekStartDate').val(jQuery.datepicker.formatDate('yy-mm-dd', startDate1));
                      $('#weekEndDate').val(jQuery.datepicker.formatDate('yy-mm-dd', endDate1));
                      $('#weekSelected').val(startDate + ' to ' + endDate);
                      selectCurrentWeek();
                  },
                  beforeShowDay: function(date) {
                      
                      // for week highighting
  //                    $('.ui-weekpicker').on('mousemove', 'tr', function () {
  //                        $(this).find('td a').addClass('ui-state-hover');
  //                    });
  //                    $('.ui-weekpicker').on('mouseleave', 'tr', function () {
  //                        $(this).find('td a').removeClass('ui-state-hover');
  //                    });
                      
                      var cssClass = '';
                      if(date >= startDate1 && date <= endDate1)
                          cssClass = 'ui-datepicker-current-day';
                      return [true, cssClass];
                  },
                  onChangeMonthYear: function(year, month, inst) {
                          selectCurrentWeek();
                  },
   
                  beforeShow: function(date) {
                      selectCurrentWeek();
                  }
                  
              });
              
              $(document).on('mousemove', '#ui-datepicker-div .ui-datepicker-calendar tr', function() { $(this).find('td a').addClass('ui-state-hover'); });
              $(document).on('mouseleave', '#ui-datepicker-div .ui-datepicker-calendar tr', function() { $(this).find('td a').removeClass('ui-state-hover'); });
   
              
          });
  
           //****  event to send mail to user  ****//
          $("#sendMail").click(function(){
                //alert("send mail");
                var receivers  = $('#recipient_email').val();
                var reportType = $("input[name='time-radio']:checked").val();
                var weekSelected = $('#weekSelected').val()
                var monthSelected = $('#monthSelected').val()
                if (!reportType)
                 {
                    $('#showError').empty();
                    $('#showError').append('<p>Please select report type.</p>');
                    return false;
                 }
                 else if(reportType == 'weekly_report' && weekSelected=='')
                  {
                      $('#showError').empty();
                      $('#showError').append('<p>Please select week.</p>');
                      return false;
                  }
                  else if(reportType == 'monthly_report' && monthSelected=='')
                  {
                      $('#showError').empty();
                      $('#showError').append('<p>Please select month.</p>');
                      return false;
                  }
                 else if(receivers=="")
                  {
                      $('#showError').empty();
                      $('#showError').append('<p>Please enter receiver\'s email.</p>');
                      return false;
                  }
                  else
                  {
                      var mailURL = "{{route('sendReportMail')}}";
                   //  var mailURL = "http://localhost/cdradmin/public/sendReportMail";
                     // return false;
                      var projectId = $('#project_id').val();
                      var weekStartDate = $('#weekStartDate').val();
                      var weekEndDate = $('#weekEndDate').val();
                      var monthReportMonth = $('#monthReportMonth').val();
                      var monthReportYear = $('#monthReportYear').val();
                   //   console.log(mailURL + " "+projectId + " "+receivers + " "+ weekSelected + " " +monthSelected+ " "+weekStartDate + " "+weekEndDate + " "+monthReportMonth + " "+monthReportYear +" "+reportType);
                      
                      $.ajax({
                      url: mailURL,
                      type: 'POST',
                      data: {'projectId' : projectId, 'reportType' : reportType, 'receivers' : receivers, 'weekSelected' : weekSelected, 'monthSelected' : monthSelected, 'weekStartDate' : weekStartDate, 'weekEndDate' : weekEndDate, 'monthReportMonth' : monthReportMonth, 'monthReportYear' : monthReportYear, _token: '{{csrf_token()}}'},
                      success: function (data) {
                      //    console.log(data);
                          var data = JSON.parse(data);
                          if(data.Success && data.Status == 200)
                          {
                              $('#showError').empty();
                              $('#successMessage').empty();
                             // $('#successMessage').append('<p>Mail sent successfully!</p>');
                             
                             //****  hide report summary popup  ****//
                              $(".opend-pop").fadeOut('fast');
                              $("body").removeClass("overlay");
                              
                              //****  Show success popup  ****//
                             swal({
                              title: "",
                              html: "<p style='color:#00a65a'>Mail sent successfully!</p>",
                              timer: 4000,
                              showConfirmButton: true,
                              type:"success",
                              confirmButtonColor:"#fb5600"
                              });
                          }
                          else if(data.Status == 400)
                          {
                              $('#showError').empty();
                              $('#showError').append('<p>'+ data.Message +'</p>');
                          }
                          else
                          {
                              $('#showError').empty();
                              $('#showError').append('<p>Something went wrong. Please try again later.</p>');
                          }    
   
                      },
                      error: function(xhr, status, error){
                          if(xhr.status==401)
                          {
                              $('#showError').empty();
                              $('#showError').append('<p>Something went wrong. Please try again later.</p>');
                          }
                          else
                          {
                              $('#showError').empty();
                              $('#showError').append('<p>Something went wrong. Please try again later.</p>');
                          }
                      }
                  });
                  }
                
                
          });
   
  
  // end
  
      // Initialize jSignature
      var $sigdiv = $("#signature").jSignature({'UndoButton': true});
      $('#click').click(function () {
  
          //check if signature is empaty
          if ($sigdiv.jSignature('getData', 'native').length == 0) {
              $("#error").html('Please Drow Your  Signature.');
              return false;
          }
  
          else {
              // Get response of type image
              var data = $sigdiv.jSignature('getData', 'image');
              // Storing in textarea
              //console.log(data);
              $('#output').val(data);
              // Alter image source 
              $('#sign_prev').attr('src', "data:" + data);
              $('#sign_prev').show();
          }
      });
  
  
  });
  $('#view-report-template').on('click', function () {
  
      var url = $(this).data('url');
  
      console.log(url);
      var date = $('#date').val();
      console.log(date);
      $("#loader").css('display', 'block');
      $.ajax({
          url: url,
          type: "GET",
          data: {'date': date},
          success: function (result) {
              //alert(result)
              console.log(result);
              $("#loader").css('display', 'none');
  //                                    $("#download_report").attr("href", result);
  //                                    $("#download_report").click();
              //window.parent.location.href=result;
              window.open(result, '_blank');
              //$('.block-show').show();
          }
      });
  });
	//To make no work done for the day
	$('#no-work-done').on('click', function () {
		var url = $(this).data('url');
		var date = $('#date').val();
		$("#loader").css('display', 'block');
		$.ajax({
			url: url,
			type: "POST",
			data: {"_token": "{{ csrf_token() }}","date": date},
			success: function (result) {
				$("#loader").css('display', 'none');
				swal({
					title: "",
					html: "<p style='color:#00a65a'>" + result + "</p>",
					timer: 4000,
					showConfirmButton: true,
					type:"success",
					confirmButtonColor:"#fb5600"
				}).then(function() {
					location.reload();
				});
			}
		});
	});
  
</script>
@endsection