@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">Register Subscription</h4>

            <form name="subcribes" class="register-form" action="">
              <fieldset>
                <legend>Personal Info</legend>
                <div class="colums ">
                  <div class="item " >
                    <label for="fname">First Name<span>*</span></label>
                    <input id="fname" type="text" name="fname" value="Dc" required/>
                  </div>
                  <div class="item">
                    <label for="lname"> Last Name<span>*</span></label>
                    <input id="lname" type="text" name="lname"  value="Catti" required />
                  </div>
                  <div class="item">
                    <label for="eaddress">Email Address<span>*</span></label>
                    <input id="eaddress" type="email"   name="eaddress" value="dc@gmail.com" required />
                  </div>
                  <div class="item">
                    <label for="contact">Contact Number<span>*</span></label>
                    <input id="contact" type="tel"   name="contact" value="09954511905"  required/>
                  </div>
                  <h3>Delivery Address</h3>
                  <p>Delivery Method only support online hubs. <a href="https://stjosephdrug.com/delivery-matrix/" target="_blank">See link.</a></p>     
                  <div class="item">
                    <label for="block">House No./Block/Street<span>*</span></label>
                    <input id="block" type="text"   name="block"  required/>
                  </div>
                  <div class="item">
                    <label for="shipping">Brgy, Town/City, Province<span>*</span></label>
                    <select id="address" name="address" placeholder="Select Address " required>
                        <option value="">Select Address</option>
                        @foreach($barangay as $brgy)
                            <option>{{ $brgy->address }}</option>
                        @endforeach
                    </select>
                  </div>
                  <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>Medicine</legend>
              <div class="colums">
              </div>
              <div class="item">
              <label for="amount">Select Product<span>*</span></label>
        
              <select id="chooseProduct">      
                <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" name="fileToUpload" 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>

<!-- Right Column -->
<div class="dc-col m2">
  <div class="dc-card dc-round dc-white dc-center">
    <div class="dc-container">
      <p>Upcoming Events:</p>
      <img src="https://www.w3schools.com/w3images/forest.jpg" alt="Forest" style="width:100%;">
      <p><strong>Holiday</strong></p>
      <p>Friday 15:00</p>
      <p><button class="dc-button dc-block dc-theme-l4">Info</button></p>
    </div>
  </div>
  <br>
<!-- End Right 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"+cnt+"' 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"+cnt+"' 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(){
      $( "form" ).on( "submit", function(e) {     
          var dataString = $(this).serialize();
          $.ajax({
            type: "POST",
            url: "/applysubscriptions",
            data: dataString,
            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>

<!--<script src="{{ asset('js/select2.min.js') }} "></script>
<script>
  $("#address").select2( {
   placeholder: "Select Address",
   allowClear: true
   } );
   $("#chooseProduct").select2( {
    placeholder: "Select Rx Product",
    allowClear: true
    } );   
  </script>-->
@endsection