@foreach ($plans as $p)
  <script type="text/javascript">
    $("#choose{{$p->id}}").click(function(){
      var id = $("#planid{{$p->id}}").val();
      var price = {{$p->customer_price}};
      var name = $("#planname{{$p->id}}").val();
      event.preventDefault();
      $('.green-btn').removeClass('active');
      $("#choose{{$p->id}}").addClass('active');
      $('.plan-no-selected').css("display", "none");
      $('.plan-price-html').html(price+ " {{__('site.sum')}}");
      $('.plan-selected').css("display", "block");
      $('.plan-selected').html(name+ ' ' + price+ " {{__('site.sum')}}");
      $('input[name="plan_id"]').val(id);
      $('input[name="plan_price"]').val(price);
      $('.total').css('display', 'block');
      var pr = (+$('input[name="plan_price"]').val())+(+$('input[name="equipment_price"]').val())+(+$('input[name="service_price"]').val());
      $('.total').html(pr+ " {{__('site.sum')}}");
      $('.month').removeClass('active');
      $('#month1').addClass('active');
      // console.log(pr);
    });
  </script>
@endforeach
@foreach($equips as $equip)
  <script type="text/javascript">
    $("#equipment{{$equip->id}}").change(function() {
        
        // $('.equip-price-html').html({{ $equip->price }} + " {{ __('site.sum') }}<br />");
        $('.equip-no-selected').css('display', 'none');
        $('.equip-selected').css('display', 'block');
        $('input[name="equipment_id"]').val({{ $equip->id }});
        var price = $('input[name="equipment_price"]').val();

        var eq_price = {{ $equip->price }};
        var res_price = parseFloat(price) + parseFloat(eq_price);
        
        if($(this).prop('checked') == false) {
          var res_price = parseFloat(price) - parseFloat(eq_price);
          $(".{{ 'equip_' . $equip->id . $equip->price }}").remove();
        } else {
          $('.equip-selected').append("<span class='{{ 'equip_' . $equip->id . $equip->price }}'>{{ $equip->getTitleAttribute() }} " + "{{ $equip->price }} {{__('site.sum')}}</span><br />");
        }
        
        $('input[name="equipment_price"]').val(res_price);
        $('.total').css('display', 'block');
        
        var pr = (+$('input[name="plan_price"]').val()) + (+$('input[name="equipment_price"]').val()) + (+$('input[name="service_price"]').val());

        $('.total').html(pr+ " {{__('site.sum')}}");
        $('.month').removeClass('active');
        $('#month1').addClass('active');
    });
  </script>
@endforeach
@foreach($services as $service)
  <script type="text/javascript">
    var i = 0;
    var price = 0;
    var array = new Array();
    $("#service{{$service->id}}").change(function(){
      var checkBox = document.getElementById("service{{$service->id}}");
      if(checkBox.checked===true){
          i++;
          array.push({{$service->id}});
          price +=  {{$service->customer_price}};
          $('input[name="service_price"]').val(price);
          $('input[name="service_id"]').val(array);
          // $('.service-price-html').html(price+ "  {{__('site.sum')}}")
          $("#ser{{$service->id}}").css("display", "flex");
          $(".service-no-selected").css("display", "none");
          $('.total').css('display', 'block');
          var pr = (+$('input[name="plan_price"]').val())+(+$('input[name="equipment_price"]').val())+(+$('input[name="service_price"]').val());
          $('.total').html(pr+ " {{__('site.sum')}}");
      }else{
          for(var j=0; j<array.length; j++){
            if(array[j]=={{$service->id}}){
              array.splice(j, 1);
            }
          }
          $('input[name="service_id"]').val(array);
          $("#ser{{$service->id}}").css("display", "none");
          i--;
          price -=  {{$service->customer_price}};
          $('input[name="service_price"]').val(price);
          if(price!=0){
            $('.service-price-html').html(price+ "  {{__('site.sum')}}")
          }else{
            $('.service-price-html').html(" ")
          }
          if(i==0){
            $(".service-no-selected").css("display", "block");
          }
          $('.total').css('display', 'block');
          var pr = (+$('input[name="plan_price"]').val())+(+$('input[name="equipment_price"]').val())+(+$('input[name="service_price"]').val());
          $('.total').html(pr+ " {{__('site.sum')}}");
            $('.month').removeClass('active');
            $('#month1').addClass('active');
      }
    });
  </script>
@endforeach

<script type="text/javascript">
  $('#month1').click(function(){
    $('.month').removeClass('active');
    $('#month1').addClass('active');
    var pr = (+$('input[name="plan_price"]').val())+(+$('input[name="equipment_price"]').val())+(+$('input[name="service_price"]').val());
    $('.total').html(pr+ " {{__('site.sum')}}");
  });
  $('#month2').click(function(){
    $('.month').removeClass('active');
    $('#month2').addClass('active');
    var pr = 3*(+$('input[name="plan_price"]').val())+(+$('input[name="equipment_price"]').val())+(+$('input[name="service_price"]').val());
    $('.total').html(pr+ " {{__('site.sum')}}");
  });
  $('#month3').click(function(){
    $('.month').removeClass('active');
    $('#month3').addClass('active');
    var pr = 6*(+$('input[name="plan_price"]').val())+(+$('input[name="equipment_price"]').val())+(+$('input[name="service_price"]').val());
    $('.total').html(pr+ " {{__('site.sum')}}");
  });
  $('#month4').click(function(){
    $('.month').removeClass('active');
    $('#month4').addClass('active');
    // var pr = 12*7*(+$('input[name="plan_price"]').val())/10+(+$('input[name="equipment_price"]').val())+(+$('input[name="service_price"]').val());
    var pr = 12*(+$('input[name="plan_price"]').val())+(+$('input[name="equipment_price"]').val())+(+$('input[name="service_price"]').val());
    $('.total').html(pr+ " {{__('site.sum')}}");
  });
</script>

<script type="text/javascript">
  $('#connection').click(function(){
    $('.name_for_connect').css("display", "block");
    $('#connection').css("display", "none");
    $('#connect_submit').css("display", "block");
    event.preventDefault();
  });
</script>