@extends('layouts.app')
@section('content')
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--<link rel="stylesheet" href="{{ asset('css/select2.min.css') }}" />-->
<!-- Middle Column -->
<div class="dc-col m7">
  <div class="dc-row-padding">
    <div class="dc-col m10">
      <div class="dc-card dc-round dc-white">
        <div class="dc-container dc-padding">
          <h4 class="dc-opacity">Apply for Subscription</h4>

            <form name="subcribes" class="register-form" action="">
              <fieldset>
                <legend>Subscription</legend>
                <div class="colums ">
                  <div class="item">
                    <label for="deliverydate">First Delivery Date<span>*</span></label>
                    <input id="deliverydate" type="date"   name="deliverydate"  value="04/30/2021" required/>
                  </div>
                  <div class="item">
                    <label for="shipping">Monthly Rx Refill<span>*</span></label>
                    <select name="monthlysubs" required>
                        <option>3 Months</option>
                        <option>6 Months</option>                
                        <option>9 Months</option>
                        <option>12 Months</option>
                    </select>
                  </div> 
                  <div class="item">
                    <label for="shipping">Payment Method<span>*</span></label>
                    <select name="paymentsubs"  required>
                        <option>Pay in Store</option>
                        <option>Bank Transfer</option>                
                        <option>GCash</option>
                    </select>
                  </div>            
              </fieldset>
              <br/>
              <fieldset>
              <legend>Product</legend>
              <div class="colums">
              </div>
              <div class="item">
              <label for="amount">Select Product<span>*</span></label></br>
              Search: 
              <input type="text" id="search" style="margin: 10px;width: 165px;" onkeyup="filter()">
              <select id="chooseProduct" size="10" style="height: 150px;">      
                <!--<option value="">Select Rx Product</option>-->
                @foreach($products as $pro)
                <option id="option-{{ $pro->sku }}" value = "{{ $pro->product_name }}" data-sku="{{ $pro->sku }}" data-price="{{ $pro->retail_price }}">{{ $pro->product_name }} - PHP{{ $pro->retail_price }}</option>
                @endforeach
              </select>
              </div>
              <div class="item" id="product-container">
                <label for="amount">Selected Product/s</label>
                <input type ="hidden" id="productcount" name="productcount" value="0"/>
                <ul id="product-list">
                </ul>
              </div>      

              <div class="item">
                  <label for="amount">Upload Prescription <span>*</span></label>
                  <input type="file" class="fileupload" name="prescriptionimage" id="fileToUpload">
                  </div>
                  <div class="item">
                  <label for="donation">Additional Comments/ Special Instruction</label>
                  <textarea name="comments" id="donation" rows="3">DADASDASD</textarea>
                  </div>
                  </fieldset>
                  <div class="btn-block">
                  {{csrf_field()}}
                  <button type="submit" href="/">Submit</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Middle Column -->
</div>



<script type="text/javascript">
  $("#chooseProduct").change(function () {
     var x = $("#chooseProduct").val();
     var sku =  $(this).find(':selected').data('sku');
     var price =  $(this).find(':selected').data('price');
     var cnt = parseInt($("#productcount").val()) + 1;
     
     $("#product-list").append("<li id='list-"+sku+"'><input type='text' name='productname' style='max-width: 68%; float: left;' value='"+x+ " - PHP " + price + "' disabled/> <input type='number' name='productqty[]' style='max-width: 10%; float: left;' value='1'><span style='height: 28px;width: 28px;margin-left: 3px;float: left;background-color: #898c87;color: white;text-align: center;border-radius: 50%;margin-top: 2px;cursor: pointer;' onclick='removeprod("+sku+")'>x</span> <input type='hidden' name='productname[]' style='max-width: 68%; float: left;' value='"+sku+"' /></li>");
     $("#chooseProduct option[value='"+x+"']").hide();
     $("#productcount").val(cnt);
  });     
  
  function removeprod(sku){
      $("#list-"+sku).remove();
      $("#option-"+sku).show();
      $("#productcount").val(parseInt($("#productcount").val())-1);
  }

  function filter() {
    var keyword = document.getElementById("search").value;
    var fleet = document.getElementById("chooseProduct");
    for (var i = 0; i < fleet.length; i++) {
      var txt = fleet.options[i].text;
      if (txt.substring(0, keyword.length).toLowerCase() !== keyword.toLowerCase() && keyword.trim() !== "") {
          fleet.options[i].style.display = 'none';
      } else {
          fleet.options[i].style.display = 'list-item';
      }
    }
  }  

  $(function(){
      $( "form" ).on( "submit", function(e) {     
          var dataString = $(this).serialize();
          $.ajax({
            type: "POST",
            url: "/rxsubscribe",
            data: dataString,
            contentType: false,
            processData: false,
            success: function () {
              $("#contact_form").html("<div id='message'></div>");
              $("#message")
                .html("<h2>Contact Form Submitted!</h2>")
                .append("<p>We will be in touch soon.</p>")
                .hide()
                .fadeIn(1500, function () {
                  $("#message").append(
                    "<img id='checkmark' src='images/check.png' />"
                  );
                });
            }
          });
          e.preventDefault();
      });
  });
</script>
@endsection