@extends('front.layouts.main')
@section('content')
<style>
  .btn-success{background-color: #28a745;color: #fff;}
  .btn-success:hover {background-color: #218838;box-shadow:none}
</style>
<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-questions.getQuestion')}}" 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" />
                    <!--  <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> -->
                    <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">Download</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>
            <input class="btn-new btn-new-primary" name="view2" id="btn5" checked="" type="submit" value="Save">
        </div>     -->
    </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 mt-0">
                    <img id="loader" src="{{asset('images/preloader.gif')}}" style="display: none;margin-left: 540px;"/>
                        <div class="sub-form-sec ">
                            <div class="quest-sec-main active">
                            <div>
                                <div class="quest-sec" id="questiorn_sec">
                                <div class="Questions-content">
                                    @if(count($questions))
                                    {!! Form::open(array('route'=>'projectinfo-questions.store')) !!}
                                    {!! Form::hidden('project_id',request()->input('project_id')) !!}
                                    {!! Form::hidden('submission_date',\Session::get('sdate')?\Session::get('sdate'):null,['id'=>'submission_date']) !!}
                                    <div id="question_sec">
                                                                        @foreach($questions as $key=>$question) 
                                    {!! Form::hidden("ans[$key][question_id]",$question->id) !!}
                                    <!-- <div><b>Question Category: </b><span style="color: red;">{{@$question->question_category->category_name}}</span></div> -->
                                    <div class="ques-div-1 form-group-row d-sm-flex align-items-sm-center">
                                        <div class="ques-main flex-fill">
                                            <div>
                                                <label for="inputdesp" class="form-group-label">
                                                    <span>{{$question->question}}</span>
                                                </label>
                                                <input type="text" class="form-group-input" id="inputdesp" name="ans[{{$key}}][answer]" placeholder="Please Description" value = "{{@$ans[$j]->answer}}" maxlength=250>
                                            </div>
                                        </div>
                                        <div class="ques-btn-new mt-3 mt-sm-0 flex-shrink-0 ml-0 ml-sm-3">
                                            <label class="radio-inner radio-orange mr-3">
                                                <input type="radio" name="ans[{{$key}}][answer_type]" value="1" id="btn1{{$i}}" @if(@$ans[$j]->answer_type == 1) checked="" @endif>
                                                <span></span>
                                                YES
                                            </label>
                                            <label class="radio-inner radio-orange">
                                                <input type="radio" name="ans[{{$key}}][answer_type]" value="0" id="btn2{{++$i}}" @if(@$ans[$j]->answer_type == 0) checked="" @endif>
                                                <span></span>
                                                NO
                                            </label>
                                            <!-- <div class="switch">
                                                <input type="radio" class="switch-input" name="ans[{{$key}}][answer_type]" value="1" id="btn1{{$i}}" @if(@$ans[$j]->answer_type == 1) checked="" @endif>
                                                <label for="btn1{{$i}}" class="switch-label switch-label-off">YES</label>
                                                <input type="radio" class="switch-input" name="ans[{{$key}}][answer_type]" value="0" id="btn2{{++$i}}" @if(@$ans[$j]->answer_type == 0) checked="" @endif>
                                                <label for="btn2{{$i}}" class="switch-label switch-label-on">NO</label>
                                                <span class="switch-selection"></span>
                                            </div> -->
                                        </div>
                                    </div>
                                                                        @endforeach
                                    </div>
                                    <div class="text-center">
                                    {!! Form::submit('Save',['class'=>'btn-new btn-new-primary mr-2','name'=>'view2','id'=>'btn5', 'checked'=>'']) !!}
                                    {!! Form::reset('Cancel',['class'=>'btn-new btn-new-primary','name'=>'view2','id'=>'btn6', 'checked'=>'']) !!}
                                    </div>
                                    {!! Form::close() !!}
                                    @else
                                    No Question Found..
                                    @endif
                                </div>
                                </div>
                            </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>
  $(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;
                }
  
          }
           
  }
  
          var project_id = $('#project_id').val();
          
          var url = $(this).data('url');
           
          $("#date").val(date);
          $("#submission_date").val(date);
          
          $("#changedate").html(date);
          $.ajax({
          url: url,
                  type: "GET",
                  data: {'date': date, 'project_id': project_id},
                  success: function (result) {
                  console.log(result);
                  $("#question_sec").html(result);
                              $.ajax({
             url: "{{route('getWeatherBydate')}}",
                     type: "GET",
                     data: {'date': date,'project_id': project_id},
  
                     success: function (result) {
						//console.log(result);
						$("#weather-section").html(result);
						location.reload();
                  },
                  error: function (XMLHttpRequest, textStatus, errorThrown) {
                  alert("Status: " + textStatus);
                          alert("Error: " + errorThrown);
                  }
          });
                  },
                  error: function (XMLHttpRequest, textStatus, errorThrown) {
                  alert("Status: " + textStatus);
                          alert("Error: " + errorThrown);
                  }
          });
         
  
         
      });
      //for weather change 
      $('#datepicker').on('change', function (e) {
          e.preventDefault;
          var project_id = $('#project_id').val();
          var date = $('#datepicker').val();
          
  
  
  
      });
  
       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
     
  });
  $('#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();
                          }
                  });
          });
  
  //    function setDate() {
  //                    var date = $('#datepicker').val();
  //                            document.getElementById("date").value = date;
  //                            document.getElementById("submission_date").value = date;
  //                            document.getElementById("changedate").innerHTML = date;
  //                    }
  //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