@extends('front.layouts.main')
@section('style')
<link type="text/css" rel="stylesheet" href="{{asset('root-assets/css/flexslider1.css')}}"/>
<link href="{{asset('root-assets/css/jquery.fileuploader.min.css')}}" media="all" rel="stylesheet">
<style>
  input[type="file"] {
  display: block;
  }
  .imageThumb {
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;
  }
  .pip {
  display: inline-block;
  margin: 10px 10px 0 0;
  }
</style>
@endsection
@section('content')
<div class="mb-4">
    <div>{{@$gcompany->company_name}}</div>
    @if(\Auth::user()->user_type == 2)
        @include('front.projects.menu')
    @endif
    <div class="d-sm-flex justify-content-sm-between align-items-center mb-3">
        <h2 class="sub-heading mt-0 mb-2 mb-sm-0">Weather Details</h2>
        <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>
                    </p>
                </div>
                <label class="calendar-circle mr-2">
                    <i class="icon-calender"></i>
                    <input  class="date-input"  type="text" id="datepicker" data-url="{{route('projectinfo-notes.getNote')}}" 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="01-01-1970" 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="submit" 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 class="hour-edit">
            <a href="{{route('projectinfo-notes.create')}}?project_id={{ request()->input('project_id') }}"class="btn-new btn-new-primary"><i class="icon-add mar_right_5"></i> Add New Notes entry</a>
        </div>
    </div>
    <div class="c-midsection card-c mt-4">
        <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="Note-sec hour-edit-table active input-dark-wrap">
                            <div id="note-section">
                                <div class="note-content hour-edit-table1">
                                {!! Form::open(array('route' => ['projectinfo-notes.update',$note->id],'method'=>'PATCH','id'=>'myform1','files'=>'true')) !!}
                                {!! Form::hidden('project_id',request()->input('project_id')) !!}
                                {!! Form::hidden('submission_date',\Session::get('sdate')?\Session::get('sdate'):null,['id'=>'submission_date']) !!}
                                <div class="form-group-row">
                                    <label for="inputselect1" class="form-group-label">Select Category</label>
                                    <div class="category-sec select-box-new inside">
                                        {{ Form::select('category_id',@$category,$note->category_id,['id'=>'inputselect1','class'=>'form-group-input'])}}
                                    </div>
                                </div>
                                <div class="s-description">
                                    <div class="form-group-row">
                                    <label for="inputtext1" class="form-group-label">Description</label>
                                    {!! Form::text('note',$note->note, array('class' => 'form-group-input', 'id' => 'inputtext1', 'maxlength' => 250)) !!}
                                    <div class="error-text">{{ $errors->first('note', ':message') }}</div>
                                    </div>
                                </div>
                                <div class="select-attch attach-new-wrap">
                                    <label for="inputattch" class="form-group-label">Add attachment</label>
                                    <input type="file" name="noteImage" id="noteImage">
                                    <div class="d-flex flex-wrap">
                                    @foreach($note->images as $img)
                                    <span class="cd-aat">
                                    <img src="{{$img->image}}" style="height:80px;padding-right:5px;">
                                    <a class="del-act" href="javascript:void(0);" onclick="deleteAttribute('{{route('projectnote-deleteImages',['id'=>$img->id])}}', 'Delete')"><i class="icon-delete"></i></a>
                                    </span>
                                    @endforeach
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="submit" class="btn btn-new btn-new-primary" value="Save">Save</button>
                                </div>
                                {!! Form::close() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </section>
            </div>
        </div>
    </div>
</div>
<div class="gallery modal-custom modal-large gallery-pic-wrap" data-pop="gallry">
  <div class="close right"><i class="icon-cancel"></i></div>
  <div id="slider" class="flexslider gallery-slider-main">
    <ul class="slides">
    </ul>
  </div>
  <div id="carousel" class="flexslider gallery-slider-nav">
    <ul class="slides">
    </ul>
  </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 type="text/javascript" src="https://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<script src="{{asset('root-assets/js/modernizr.js')}}"></script>
<script src="{{asset('root-assets/js/jquery.flexslider1.js')}}"></script>
<script src="{{asset('root-assets/js/jquery.fileuploader.js')}}"></script>
<!--date picker-->
<script>
  $(document).ready(function () {
      var dateString = "{{getSignedReportDates($project->id)}}";
       var dates = "{{reportDataEntryStatus($project->id)}}";
       dates = dates.split(',');
       var selectedDate = dateString.split(',');
      var projectCreatedDate = $("#project_created_date").val();
      var minDate = $("#project_created_date").data("date");
      console.log(minDate);
      var currentDate=$("#current_date").val();
      $("#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, 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();
          if(date < created_at){
            //  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);
                  $("#note-section").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);
                     },
                     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
      
      $(document).on("click", ".noteGallary", function () {
      var note_id = $(this).data('id');
      $.ajax({
          url: "{{route('note-images')}}",
          type: "GET",
          data: {'note_id': note_id},
          success: function (result) {
              console.log(result);
              $('.slides').html(result);
              $('.flexslider').removeData("flexslider");
  
              $('#carousel').flexslider({
                  animation: "slide",
                  controlNav: false,
                  animationLoop: false,
                  slideshow: false,
                  itemWidth: 100,
                  itemMargin: 5,
                  asNavFor: '#slider'
              });
  
              $('#slider').flexslider({
                  animation: "slide",
                  controlNav: false,
                  animationLoop: false,
                  slideshow: false,
                  sync: "#carousel"
              });
          }
      });
  });
  
  // $(document).on("change", "#noteImage", function () {
  //     //var size=$('#image_preview').find('.pip').size();
  //     $('#image_preview').html('');
  //     var imageCount = $(this)[0].files.length;
     
  //      if(imageCount > 4) {
  //         alert('you can not add more than four images for a note. Please select valid number of images.');
  //         $("#noteImage").val('');
  //          return false;
  //      }
       
  //     var total_file = document.getElementById("noteImage").files.length;
  //     for (var i = 0; i < total_file; i++)
  //     {
  //         console.log(event.target.files);
  //         console.log(i);
  //         $('#image_preview').append("<span class='pip'><img class='img-responsive preview' src='" + URL.createObjectURL(event.target.files[i]) + "'style='height:80px;padding-right:5px;'></br>");
  //     }
  //  })
   
  });
  
   $('#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 preview_images() {
  //     var total_file = document.getElementById("noteImage").files.length;
  //     for (var i = 0; i < total_file; i++)
  //     {
  //         console.log(event.target.files);
  //         console.log(i);
  //         $('#image_preview').append("<span class='pip'><img class='img-responsive preview' src='" + URL.createObjectURL(event.target.files[i]) + "'style='height:80px;padding-right:5px;'></br>");
  //     }
  // }
  
  
                                                 
  
  //                                                    function setDate() {
  //                                                        var date = $('#datepicker').val();
  //                                                        document.getElementById("date").value = date;
  //                                                        document.getElementById("submission_date").value = date;
  //                                                        document.getElementById("changedate").innerHTML = date;
  //                                                    }
  var l="{{12-$note->images->count()}}";
  
   $('input[name="noteImage"]').fileuploader({
       addMore: true,
       limit:l
   });
  
</script>
<!--date picker-->
@endsection