@extends('layouts.main') 
@section('title', 'RX Subscribe')
@section('content')
    
    <!-- push external head elements to head -->
    @push('head')
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
    @endpush
 
    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-users bg-green"></i>
                        <div class="d-inline">
                            <h5>{{ __('My Subscriptions')}}</h5>
                            <span>{{ __('Manage Subscriptions')}}</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <!--<a href="{{route('home')}}"><i class="ik ik-home"></i></a>-->
                                <a href="/dashboard"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item"><a href="#">RX Services</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Rx Subscribe</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="col-md-9">
                    <div class="card">
                        <div class="card-header"><h3>{{ __('Subscription')}}</h3></div>
                        <div class="card-body">
                            <div class="row">
    
                                <div class="col-md-12" class="med-info">
    
                                    <form method="post" id="subscription" action="" enctype="multipart/form-data">
                                        <input type="hidden" class="form-control form-control-sm" id= "_token" name="_token" value="{{ csrf_token() }}">
                                        <div class="form-group">
                                            <label for="subsdescription">{{ __('Name of Subscription') }}</label>
                                            <input type="text" class="form-control" id="subsdescription" name="subsdescription" required placeholder="Label Subscription" >
                                        </div>
                                        <div class="form-group">
                                            <label for="deliverydate">{{ __('First Delivery Date')}}</label>
                                            <input type="date" class="form-control" id="deliverydate" name="deliverydate" required placeholder="Delivery Date" min="{{ date('Y-m-d') }}">
                                        </div>                            

                                        <div class="form-group">
                                            <label for="monthlysubs">{{ __('Monthly Subscription')}}</label>
                                            <select class="form-control" id="monthlysubs" name="monthlysubs" required> 
                                                <option value="3">3 Months</option>
                                                <option value="6">6 Months</option>
                                                <option value="9">9 Months</option>
                                                <option value="12">1 Year</option>
                                                <option value="24">2 Years</option>
                                                <option value="36">3 Years</option>
                                            </select>    
                                        </div>                                        
                                        
                                        <div class="form-group">
                                            <label for="paymentsubs">{{ __('Payment Method')}}</label>
                                            <select class="form-control" id="paymentsubs" name="paymentsubs" required>
                                                <option value="Bank Transfer">Bank Transfer</option>
                                                <option value="GCash">GCash</option>
                                                <option value="Pay in Store">Pay in Store</option>
                                            </select>    
                                        </div>

                                        <div class="form-group">
                                            <label for="paymentmethod">{{ __('RX Products')}}</label>
                                            <input type="text"  class="form-control"  id="search" placeholder="Enter product name..." onkeyup="filter()">
                                            <select id="chooseProduct"  class="form-control"  size="10" style="height: 150px !important;">      

                                              @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="form-group" id="product-container">
                                            <label for="amount">Selected Product/s</label>
                                            <input type ="hidden" id="productcount" name="productcount" value="0"/>
                                            <ul id="product-list">
                                            </ul>
                                            <br>
                                        </div>  

                                        <div class="form-group">
                                            <label for="amount">Additional Note/Comments</label>
                                            <textarea name="comments" class="form-control" id="donation" rows="3"></textarea>
                                            <br>
                                        </div>                                          

                                        <div class="form-group">
                                            <label>Upload Prescription Photo</label>
                                            <input type="file" class="form-control form-control-sm" id="medphoto" name="medphoto" style="height:35px" accept=".jpg, .png">
                                          </div>  

                                        <button type="submit" class="btn btn-primary mr-2">{{ __('Submit')}}</button>
                                        <button class="btn btn-light" onclick="window.location.href='{{ route('admin.users.index') }}'">{{ __('Cancel')}}</button>
                                    </form>
    
                                </div>



                                <!--<div class="col-md-12" class="med-info">
    
                                    <form method="post" id="subscription-photo" action="" enctype="multipart/form-data">
                                        <input type="hidden" class="form-control form-control-sm" id= "_token" name="_token" value="{{ csrf_token() }}">
                                       
                                        <div class="form-group">
                                            <label>Upload Prescription Photo</label>
                                            <input type="file" class="form-control form-control-sm" id="med_photo" name="med_photo" style="height:35px" accept=".jpg, .png">
                                          </div>                                        

                                        <button type="submit" class="btn btn-primary mr-2">{{ __('Upload')}}</button>
                                        <button class="btn btn-light" onclick="window.location.href='{{ route('admin.users.index') }}'">{{ __('Cancel')}}</button>
                                    </form>
    
                                </div>   -->                             
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="spinboard">
        <div class="spinner-border text-success loader"></div>
    </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' class='form-control' name='productname' style='max-width: 68%; float: left;' value='"+x+ " - PHP " + price + "' disabled/> <input type='number' class='form-control' 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;' class='form-control' 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(){
            $( "#subscription" ).on( "submit", function(e) {  
                $(".spinboard").show();   
                var dataString = $(this).serialize();
                $.ajax({
                  type: "POST",
                  url: "/rxsubscribe/store/info",
                  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' />"
                        );
                      });*/
                      $(".spinboard").fadeOut(1500, function () {
                        window.location.assign('/rxsubscribe')
                      });   

                    
                  }
                });
                e.preventDefault();
            });
        });
      </script>
@endsection