@extends('front.inner-layout.app')
@section('content')

<link href="{{ asset('assets/css/colorPick.css') }}" rel='stylesheet' />
<link href="{{ asset('assets/css/colorPick.dark.theme.css') }}" rel='stylesheet' />

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper">
   <div class="row align-items-center">
      <div class="col-lg-4 col-md-4 col-sm-4">
         <h1 class="page-title eagle-font font-400"><span class="arca-font">My</span> Reports</h1>
      </div>
      @include('front.inner-layout.header')
   </div>
   <div class="brdr-bttm"></div>
   <div class="adduser-btn mb-20 dropdown-adduser">
      <!-- <a href="javascript:" id="add-user-modal" class="btn-unfill cursor-pointer font-400">Add User</a> -->
      <div class="dropdown">
         <button class="dropdown-toggle btn-unfill cursor-pointer font-400" type="button" id="dropdownMenuButton add-user-modal" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn-unfill cursor-pointer font-400">
            Reports
         </button>
         <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="javascript:" id="add-user-modal">Filter Reports</a>
         </div>
      </div>
   </div>

</div>
@endsection

@section('modals')
<!-- Add user modal start -->
<div class="client-follow-popup login-modal bulk-popup customscroll user-popup clientabpopup profiledit-modal client-dahsboardfamiliy">
   <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel13" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="popup-marg">
               <div class="modal-header">
                  <h5 class="modal-title text-center font-400" id="exampleModalLabel13">Report</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true"><img src="{{asset('assets/images/close-img.svg')}}" alt="" class="img-fluid closeimg"></span>
                  </button>
               </div>
            

                  <div class="modal-body p-0">
                     <div class="mCustomScrollbar">

                        <div class="boxwhite padd-sm m-25">
                           <div class="test-results-area">
                              <div class="label-input"> 
                              <!-- btn-info btn-lg -->
                                <button type="button" class="btn    btn-fill nomshow_modal " >Filter</button>

                                 <div class="definiterole-permissionarea">
                                    <div class="definiterole-area">
                                       
                                       <div class="single-tittle">
                                          <ul class="age-title p-0">
                                     <form class="storePractitoner" method="POST" action="{{route('practitioner.reports.getreport')}}">
                                          <div class="form-group">
                                             <p><b>Start Date</b></p>
                                             <input type="text" class="form-control small-input bluetxt required-input from-calendar" name="start_date" id="start_date"  placeholder="00-00-0000" required="" max='10'>
                                             <span class="invalid-feedback d-block"></span>
                                         </div>
                                         <br>
                                          <div class="form-group">
                                            <p><b>End Date</b></p>
                                             <input type="text" class="form-control small-input bluetxt  required-input to-calendar" name="end_date" id="end_date"  placeholder="00-00-0000" required="" max='10'>
                                             <span class="invalid-feedback d-block"></span>

                                         </div>
                                         <br>
                                         <!-- <div class="form-group">
                                            <p><b>Services</b></p>
                                             <select class="form-control" name="paytype">
                                                 <option value="">Select</option>       
                                                                                                </select>

                                           
                                         </div> -->

                                       <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100 font-15">Submit</button>
                                          </ul>
                                       </div>
                                    </div>

                           </form>
                                    <div class="userpermission-area">

                                       <div class="collapse show" id="collapseinvoices" data-parent="#accordion-client" style="">
                    <div class="mt-20">
                        
                        <div class="test-result-box th-brdr">
                            <div class="whitecard waitlist-abox">
                            <div class="table-responsive">
                                <table class=" table ">
                                    <tbody><tr>
                                       
                                        <th class="widthtable">Total Amount</th>
                                       
                                    </tr>
                                </tbody></table>
                            </div>
                            
                            </div>
                        </div>
                                                
                    <div id="invoices-table"> 
                                                
                        <div class="test-result-box td-brdr">
                            <div class="whitecard waitlist-abox for-service-table">
                            <div class="table-responsive">
                                
                                <table class="init_calander table" >
                                 <tbody>
                              

                                
                                 </tbody>
                                 </table>
                            </div>
                            
                            </div>
                        </div>
                        </div>
                         
                    </div>

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

 <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
           <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
         
        </div>
        <div class="modal-body">
          <form class="storePractitoner_filter" method="POST" action="{{route('practitioner.reports.getreport_filterdata')}}">
                                          <div class="form-group">
                                             <b>Start Date</b>
                                             <input type="text" class="form-control small-input bluetxt required-input from-calendar" name="start_date" id="start_date"  placeholder="00/00/0000" required="" max='10'>
                                             <span class="invalid-feedback d-block"></span>
                                         </div>
                                        
                                          <div class="form-group">
                                             <b>End Date</b>
                                             <input type="text" class="form-control small-input bluetxt  required-input to-calendar" name="end_date" id="end_date"  placeholder="00/00/0000" required="" max='10'>
                                             <span class="invalid-feedback d-block"></span>

                                         </div>
                                      
                                         <div class="form-group">
                                            <p><b>Services Provider</b></p>
                                             <select class="form-control" name="practitioner_id">
                                                 <option value="">Select</option>       
                                                                                                </select>
                                         </div> 

                                         <br>
                                         <div class="form-group">
                                            <p><b>Locations</b></p>
                                             <select class="form-control" name="location">
                                                 <option value="">Select</option>       
                                                                                                </select>
                                         </div> 

                                         <div class="form-group">
                                            <p><b>Payment method</b></p>
                                             <select class="form-control" name="paytype">
                                                 <option value="">Select</option>       
                                                                                                </select>
                                         </div> 

                                         <div class="form-group">
                                            <p><b>Item</b></p>
                                             <select class="form-control" name="Item_type">
                                                <option value="all">All</option>       
                                                <option value="products">Products</option>       
                                                <option value="services">Services</option>       
                                                   <!--  -->
                                             </select>
                                         </div> 

                                       <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100 font-15">Submit</button>
                                          </ul>
                                       </div>
                                    </div>

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


   <div class="modal fade" id="myModalfilter" role="dialog">
    <div class="modal-dialog modal-lg">
    
      <!-- Modal content-->
      <div class="modal-content" style="width:116%">
           <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
         
        </div>
        <div class="modal-body">
       
<table class="init_calanderfilter" >
                                 <tbody>
                              

                                
                                 </tbody>
                                 </table>
        </div>
        
      </div>
      
    </div>
  </div>

<!--- Calender Active Popup End   ---->

@endsection

@section('css')
<style>
   .pac-container {
      z-index: 10000 !important;
   }
</style>

@endsection

@section('js')
<script>
   $(document).ready(function() {


    calendar();
      $(".from-calendar").datepicker().datepicker("setDate", new Date());
      $(".to-calendar").datepicker().datepicker("setDate", new Date());

      function calendar() {

         $('.from-calendar').datepicker({
            //format: "yyyy-mm-dd",
            format: "dd-mm-yyyy",
            weekStart: 1,
            todayHighlight: true,
            autoclose: true,
           // clearBtn: false,
            //startDate: '-',
           // saveBtn: true,
         });
         $('.to-calendar').datepicker({
            //format: "yyyy-mm-dd",
            format: "dd-mm-yyyy",
            weekStart: 1,
            todayHighlight: true,
            autoclose: true,
           // clearBtn: false,
            //startDate: '-',
         });

       }



             $(".nomshow_modal").click(function(){

               $('#addUserModal').modal('hide');
               $('#myModal').modal('show'); 
             });

         // $(".details-box-show").addClass('d-none');
         // $(".permission-box").addClass('d-none');
         // $(".payment-box").addClass('d-none');
         // $(".hours-box").addClass('d-none');

         $(".user-role-info").hover(function() {
            $(this).closest('div').find('.user-role-info-box').toggle();
         });

         $(".access_all_client_files").hover(function() {
            $(this).closest('div').find('.access_all_client_files_box').toggle();
         });


         $(".detail-box").hide();
         $(".permission-box").hide();
         $(".hours-box").hide();
         $(".payment-box").hide();

         // $(".yesmshow").click(function() {
         //    $(".serviceProvidershow").toggle();
         //    $(".adminShow").hide();
         // });

         $(".nomshow").click(function() {
               $('.yesboxshow').addClass('hide');

               if ($('input[name="role"]:checked').val() == 'service_provider' ||
                  $('input[name="role"]:checked').val() == 'both') {

                  if ($(".serviceProvidershow").length == 1) {
                     $(".serviceProvidershow").clone().attr('style', '').appendTo('.appendDiv');
                  }

                  // $(".serviceProvidershow").toggle();
                  $(".adminShow").hide();
               } else if ($('input[name="role"]:checked').val() == 'admin') {
                  $(".adminShow").clone().attr('style', '').appendTo('.appendDiv');
                  $(".serviceProvidershow").hide();
                  // $(".adminShow").toggle();
               }
            }

         );

         $(".yesmshow").click(function() {

            if ($('input[name="role"]:checked').val() == 'service_provider' ||
               $('input[name="role"]:checked').val() == 'both') {
               $('.professionHideShow').removeClass('hide');
            } else {
               $('.professionHideShow').addClass('hide');
            }

            $('.yesboxshow').removeClass('hide');
            $('.appendDiv').children('.adminShow').remove();
            $('.appendDiv').children('.serviceProvidershow').remove();
            //$(".adminShow").hide();        
            // $(".serviceProvidershow").hide();
         });

         $('.closeimg').on("click", function(e) {
            $('.user-detail-form').css('display', 'none');
         });

         $(".send-client-btn-geo").hover(function() {
            $(".send-client-box-geo").toggle();
         });

         $(".detailbox-show").click(function() {
            $(".permission-box").hide();
            $(".hours-box").hide();
            $(".payment-box").hide();
            var details = $(this).parent().parent().parent().parent().parent().parent().parent().parent().next().find(".detail-box");
            details.toggle();
            //details.toggleClass('d-block');
         });

         $(".permissionbox-show").click(function() {
               $(".detail-box").hide();
               $(".hours-box").hide();
               $(".payment-box").hide();
               var permission = $(this).parent().parent().parent().parent().parent().parent().parent().parent().next().find(".permission-box");
               permission.toggle();
               //permission.toggleClass('d-block');
            }

         );

         $(".hoursbox-show").click(function() {
            $(".permission-box").hide();
            $(".detail-box").hide();
            $(".payment-box").hide();
            var hours = $(this).parent().parent().parent().parent().parent().parent().parent().parent().next().find(".hours-box");
            hours.toggle();
            //hours.toggleClass('d-block');
         });

         $(".paymentbox-show").click(function() {
               $(".permission-box").hide();
               $(".detail-box").hide();
               $(".hours-box").hide();
               //$(".details-box-show")
               var payment = $(this).parent().parent().parent().parent().parent().parent().parent().parent().next().find(".payment-box");
               //payment.toggleClass('d-block');
               payment.toggle();
            }

         );
      }

   );

   // profile image upload for provider
   var loadFileForProvider = function(event) {
      var reader = new FileReader();
      reader.onload = function() {
         var output = document.getElementById('outputForProvider');
         output.src = reader.result;
         $('#outputForProvider').css({
            "background-color": "#ffffff"
         });
      };
      reader.readAsDataURL(event.target.files[0]);
   };

   $('#browseimgForProvider').on('change', function() {
      Object.values(this.files).forEach(function(file) {
         if (file.type == 'application/pdf') {
            $('.pdfFile').addClass('d-flex');
            $('#outputForProvider').addClass('d-none');
         } else {
            $('.pdfFile').removeClass('d-flex');
            $('#outputForProvider').removeClass('d-none');
         }
      })
   });

   // for admin
   var loadFileForAdmin = function(event) {
      var reader = new FileReader();
      reader.onload = function() {
         var output = document.getElementById('outputForAdmin');
         output.src = reader.result;
         $('#outputForAdmin').css({
            "background-color": "#ffffff"
         });
      };
      reader.readAsDataURL(event.target.files[0]);
      $('#outputForAdmin')[0].files[0].name;

   };

   $('#browseimgForAdmin').on('change', function() {
      Object.values(this.files).forEach(function(file) {
         if (file.type == 'application/pdf') {
            $('.pdfFile').addClass('d-flex');
            $('#outputForAdmin').addClass('d-none');
         } else {
            $('.pdfFile').removeClass('d-flex');
            $('#outputForAdmin').removeClass('d-none');
         }
      })
   });

   $(".details").submit(function(e) {
      e.preventDefault();
      $(".profile-form-error").hide();

      if ($(this).parsley().isValid()) {
         $.ajax({
               url: $(this).attr("action"),
               data: $(this).serialize(),
               type: 'POST',
            }

         ).done(function(response) {
            if (response.status == "success") {
               Swal.fire({

                  icon: response.status,
                  title: 'Success!',
                  text: response.msg,
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
            } else {
               $.each(response.errors, function(key, value, i) {
                  var input = $('input[name=' + key + ']');
                  var parent = input.parent().next('.invalid-feedback').text(value[0]);
                  input.addClass('is-invalid');
               });
            }
         });
      }
   });

   $(".permission").submit(function(e) {
      e.preventDefault();
      $(".profile-form-error").hide();

      if ($(this).parsley().isValid()) {
         $.ajax({
               url: $(this).attr("action"),
               data: $(this).serialize(),
               type: 'POST',
            }

         ).done(function(response) {
            if (response.status == "success") {
               Swal.fire({

                     icon: response.status,
                     title: 'Success!',
                     text: response.msg,
                     showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                     }

                     ,
                     hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                     }
                  }

               );
            } else {
               $.each(response.errors, function(key, value, i) {
                     var input = $('input[name=' + key + ']');
                     var parent = input.parent().next('.invalid-feedback').text(value[0]);
                     input.addClass('is-invalid');
                  }

               );
            }
         });
      }
   });

   $(".bank_details").submit(function(e) {
      e.preventDefault();
      $(".profile-form-error").hide();
      if ($(this).parsley().isValid()) {
         $.ajax({
            url: $(this).attr("action"),
            data: $(this).serialize(),
            type: 'POST',
         }).done(function(response) {
            if (response.status == "success") {
               Swal.fire({
                  icon: response.status,
                  title: 'Success!',
                  text: response.msg,
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
            } else {
               $.each(response.errors, function(key, value, i) {
                  var input = $('input[name=' + key + ']');
                  var parent = input.parent().next('.invalid-feedback').text(value[0]);
                  input.addClass('is-invalid');
               });
            }
         });
      }
   });

   $(".storePractitoner").submit(function(e) {
      var selectedDays = new Array();
      e.preventDefault();
      //$(".profile-form-error").hide();

     // if ($(this).parsley().isValid()) {
          //var f = $(this);

          var datas = new FormData($(this)[0]);

          //alert(datas);

         $.ajax({
            url:$(this).attr('action'),
            data: datas,
            type: "POST",
            contentType: false,
            processData: false,
            success: function (response){

               $('.init_calander').html(response.html);
            }
         });
      
   });

   $(".storePractitoner_filter").submit(function(e) {
      var selectedDays = new Array();
      e.preventDefault();
      //$(".profile-form-error").hide();

     // if ($(this).parsley().isValid()) {
          //var f = $(this);

          var datas = new FormData($(this)[0]);

          //alert(datas);

         $.ajax({
            url:$(this).attr('action'),
            data: datas,
            type: "POST",
            contentType: false,
            processData: false,
            success: function (response){

               //myModal
                //$('#addUserModal').modal('hide');
               $('#myModalfilter').modal('show'); 
               $('.init_calanderfilter').html(response.html);
            }
         });
      
   });

   $("body").on('input', '.google_address1', function() {
         var input = $(this);

         var options = {
            types: ['geocode'] //    componentRestrictions: { country: 'uk' } //Turkey only
         }

         ;
         var autocomplete = new google.maps.places.Autocomplete(input[0]);

         google.maps.event.addListener(autocomplete, 'place_changed', function() {
               var place = autocomplete.getPlace();
               // $("#latitude").val(place.geometry.location.lat());
               // $("#longitude").val(place.geometry.location.lng());
            }

         );
      }

   );

   $("#add-user-modal").click(function() {
         $(".storePractitoner")[0].reset();
         $('.appendDiv').children('.adminShow').remove();
         $('.appendDiv').children('.serviceProvidershow').remove();
         $('#addUserModal').modal('show');
      }

   );

   $(".timepicker").each(function() {
      $(this).mdtimepicker({
         theme: 'blue',
         useCurrent: false
      });
   });

   $(document).on('click', '.be-select', function(event) {
         if (event.target.value == 'monday') {
            var monday = $(this).closest('div').parent().parent().parent().next();
            resetValue(monday, 'monday_');
         }

         if (event.target.value == 'tuesday') {
            var tuesday = $(this).closest('div').parent().parent().parent().next().next();
            resetValue(tuesday, 'tuesday_');
         }

         if (event.target.value == 'wednesday') {
            var wednesday = $(this).closest('div').parent().parent().parent().next().next().next();
            resetValue(wednesday, 'wednesday_');
         }

         if (event.target.value == 'thursday') {
            var thursday = $(this).closest('div').parent().parent().parent().next().next().next().next();
            resetValue(thursday, 'thursday_');
         }

         if (event.target.value == 'friday') {
            var friday = $(this).closest('div').parent().parent().parent().next().next().next().next().next();
            resetValue(friday, 'friday_');
         }

         if (event.target.value == 'saturday') {
            var saturday = $(this).closest('div').parent().parent().parent().next().next().next().next().next().next();
            resetValue(saturday, 'saturday_');
         }

         if (event.target.value == 'sunday') {
            var sunday = $(this).closest('div').parent().parent().parent().next().next().next().next().next().next().next();
            resetValue(sunday, 'sunday_');
         }
      }

   );

   function resetValue(day, flag) {
      day.find('.timepicker').each(function(element) {
         $(this).mdtimepicker({
            theme: 'blue',
            useCurrent: false
         });
      });
      day.toggle("show");
      day.find("input[name*=" + flag + "start_time]").val('9:00 AM');
      day.find("input[name*=" + flag + "end_time]").val('5:00 PM');
      day.find("input[name*=" + flag + "break_start_time]").val('12:00 PM');
      day.find("input[name*=" + flag + "break_end_time]").val('1:00 PM');
      // day.find("input[name*=" + flag + "]").each(function(element) {
      //    return $(this).val('12:00 AM');
      // });
   }

   $(document).on('click', '.addNewLocation', function(event) {
      var flag = 'ForAddUser';
      daysSelection($(this), flag);
   });

   $(document).on('click', '.addNewLocationForHoursDiv', function(event) {
      var flag = 'ForAddHours';
      daysSelection($(this), flag);
   });



   function daysSelection(_this, flag) {

      if (_this.val() == 1) {
         if (flag == 'ForAddUser') {
            var row = $('#workingHoursDiv').clone();
         } else {
            var row = $('#HoursDiv').clone();
         }
         row.find('input[type=checkbox]').prop('checked', false);
         row.find("input[name*='_time']").each(function(element) {
            $(this).parent().parent().parent().parent().parent().parent().parent().css('display', 'none')
            return $(this).val('12:00 AM');
         });

         generateUniqueField(row, '.mondays');
         generateUniqueField(row, '.tuesdays');
         generateUniqueField(row, '.wednesdays');
         generateUniqueField(row, '.thursdays');
         generateUniqueField(row, '.fridays');
         generateUniqueField(row, '.saturdays');
         generateUniqueField(row, '.sundays');

         if (flag == 'ForAddUser') {
            var row = $('#workingHoursDiv').clone();
            row.find('#workingHoursDiv').attr('id', '');
            $('.appendDivDays').append(row);
         } else {
            row.find('#HoursDiv').attr('id', '');
            $('.appendDivDaysInHoursDiv').append(row);
         }

      } else {
         if (flag == 'ForAddUser') {
            $("#workingHoursDiv:last-child").remove();
         } else {
            $("#HoursDiv:last-child").remove();
         }
      }
   };

   function generateUniqueField(row, day) {
      var uniqueId = Math.random();
      row.find(day).prop('id', uniqueId);
      row.find(day).next().prop('for', uniqueId);
      //return row;
   }

   $(document).on('click', '.selectRole', function(event) {
      $('.appendDiv').children('.adminShow').remove();
      $('.appendDiv').children('.serviceProvidershow').remove();
      $('input:radio[name=send_invite]')[0].checked = true;

      if ($('input[name="role"]:checked').val() == 'service_provider' ||
         $('input[name="role"]:checked').val() == 'both') {
         $('.professionHideShow').removeClass('hide');
      } else {
         $('.professionHideShow').addClass('hide');
      }
   });

   //block user
   $(document).on('click', '.blockUser', function(event) {
      var row = $(this);
      var url = "{{route('practitioner.my_team.block_provider')}}";
      $(".loading").show();
      $.ajax({
         url: url,
         data: {
            id: $(this).data("id")
         },
         type: 'POST',
      }).done(function(response) {
         if (response.status == "success") {
            Swal.fire({
               icon: response.status,
               title: 'Success!',
               text: response.msg,
               showClass: {
                  popup: 'animate__animated animate__fadeInDown'
               },
               hideClass: {
                  popup: 'animate__animated animate__fadeOutUp'
               }
            });
         }

         if (response.data == "active") {
            var url = "{{asset('assets/images/block-icon.svg')}}";
            row.children().attr('src', url);
         } else {
            var url = "{{asset('assets/images/unlock.png')}}";
            row.children().attr('src', url);
         }


         $(".loading").hide();

      }).fail(function(error) {
         $(".loading").hide();
         alert('something went wrong error.');
      });
   });

   $(document).on('click', '.sendSmsToProvider', function() {
      $("input[name='sendSmsProviderName']").val($(this).data('clientname'));
      $("input[name='sendSmsProviderId']").val($(this).data('data'));
      $("#sendMessage").modal('show');
   });


   $(".newProviderMsg").on('input', function() {
      //console.log($(this).val().length);
      $(".sms_firsttext").text(countString($(this).val().length));
   });

   $(".notify_btn").hover(function() {
      $(".notify_toggle").toggle();
   });

   $(".client_access_file_btn").hover(function() {
      $(".client_access_file_toggle").toggle();
   });
</script>@endsection