@extends('layouts.main') 
@section('title', 'New Subscription')
@section('content')


<style>
#container {
  width: 80%;
  /*border-radius: 25px;*/
  border: 1px solid Black;
  padding: 10px 10px 10px 10px;
  margin: 5px 5px 5px 5px;
  background: #A4D3EE;
  overflow: visible;
  box-shadow: 5px 5px 2px #888888;
  position: relative;
}

#x {
    position: absolute;
    background: red;
    color: white;
    top: -10px;
    right: -10px;
}

</style>

    <!-- push external head elements to head -->
    @push('head')
        <link rel="stylesheet" href="{{ asset('plugins/select2/dist/css/select2.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/summernote/dist/summernote-bs4.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/mohithg-switchery/dist/switchery.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-check-square bg-blue"></i>
                        <div class="d-inline">
                            <h5>{{ __('New Subscription')}}</h5>
                            <span>{{ __('Add New Subscription')}}</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>
                            </li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.subscriptions.index') }}">{{ __('List of Subscriptions')}}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('New Subscription')}}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <form method="post" action="{{ route('admin.subscriptions.store') }}" enctype="multipart/form-data" onsubmit="return validateForm()">
            <input type="hidden" class="form-control form-control-sm" id= "_token" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" class="form-control form-control-sm" id= "userid" name="userid" value="{{ auth()->user()->id }}">

            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header"><h3>{{ __('Subscription Information')}}</h3></div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Subscriber</label>
                                        <div class="input-group input-group-sm">
                                          <input type="hidden" class="form-control form-control-sm col-sm-1" id="user_id" name="user_id"  maxlength="15" readonly>
                                          <input type="text" class="form-control" id="name" name="name"  placeholder="Subscriber Name" readonly>
                                          <span class="input-group-append">
                                            <input type="button" class="btn btn-info btn-flat"  VALUE="Click to Select Subscriber" onclick="javascript:openWindow()" />
                                            <input type="button" class="btn btn-default btn-flat"  VALUE="Clear" onclick="cleartext1()" />
                                          </span>
                                        </div>
                                    </div>  
                                    <div class="form-group">
                                        <label for="exampleInputName1">{{ __('Prescription For')}}</label>
                                        <input type="text" class="form-control" id="description" name="description" placeholder="Prescription For" maxlength="100" required>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <!-- text input -->
                                            <div class="form-group">
                                              <label for="exampleInputName1">{{ __('Subscription From')}}</label>
                                              <input type="date" class="form-control" id="subsfrom" name="subsfrom" placeholder="Subscription From" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                              <label for="exampleInputName1">{{ __('Subscription To')}}</label>
                                              <input type="date" class="form-control" id="substo" name="substo" placeholder="Subscription To" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                          <label>Payment Method</label>
                                          <select name="payment_method" id="payment_method" class="form-control select2" required>
                                              <option value="">Select Payment Method</option>
                                              @foreach($paymethods as $paymethods)
                                                  <option value="{{ $paymethods->paymethod }}">{{ $paymethods->paymethod }}</option>
                                              @endforeach
                                          </select> 
                                    </div>

                                    <div class="form-group">
                                        <label for="exampleInputName1">{{ __('Prescription Note')}}</label>
                                        <textarea class="form-control" id="prescription_note" name = "prescription_note" rows="3" required></textarea>
                                    </div>
                                    <p><b>Shipping Address</b></p>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <!-- text input -->
                                            <div class="form-group">
                                              <label for="exampleInputName1">{{ __('Region')}}</label>
                                                <select name="region" id="region" class="form-control form-control-sm select2" data-dependent="province">
                                                 <option value="">Select Region</option>
                                                 @foreach($regions as $regions)
                                                 <option value="{{ $regions->code}}">{{ $regions->name }}</option>
                                                 @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                              <label for="exampleInputName1">{{ __('Province')}}</label>
                                                <select id="province" name="province" class="form-control form-control-sm select2" data-dependent="city">
                                                </select> 
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <!-- text input -->
                                            <div class="form-group">
                                              <label for="exampleInputName1">{{ __('Municipal')}}</label>
                                                <select id="city" name="city" class="form-control form-control-sm select2">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                              <label for="exampleInputName1">{{ __('Barangay')}}</label>
                                                <select id="barangay" name="barangay" class="form-control form-control-sm select2">
                                                </select>  
                                            </div>
                                        </div>
                                    </div>
                                      <div class="row">
                                        <div class="col-sm-6">
                                          <!-- text input -->
                                          <div class="form-group">
                                            <label>House/Unit/Flr #, Bldg Name, Blk or Lot #</label>
                                            <input type="text" class="form-control form-control-sm" id="address" name="address" placeholder="House No/Building Name/Street Name" maxlength="100">
                                          </div>
                                        </div>
                                        <div class="col-sm-3">
                                          <div class="form-group">
                                            <label>Zip Code</label>
                                            <input type="text" class="form-control form-control-sm" id="zipcode" name="zipcode" placeholder="Zip Code" maxlength="10">  
                                          </div>
                                        </div>
                                        <div class="col-sm-3">
                                          <div class="form-group">
                                            <label>Address Type</label>
                                                <select id="type" name="type" class="form-control form-control-sm select2">
                                                    <option value="">Select Address Type</option>
                                                    <option value="Home">Home</option>
                                                    <option value="Office">Office</option>
                                                </select>  
                                          </div>
                                        </div>
                                      </div>  




                                    <div class="form-group">
                                        <label for="exampleInputName1">{{ __('Files')}}</label>
                                        <input type="file" class="form-control form-control-sm" id="medphoto" name="medphoto[]" style="height:35px" accept=".doc,.docx, .png, .jpg, .csv, .xls, .xlxs"  multiple>
                                        @if ($errors->has('files'))
                                          @foreach ($errors->get('files') as $error)
                                          <span class="invalid-feedback" role="alert">
                                              <strong>{{ $error }}</strong>
                                          </span>
                                          @endforeach
                                        @endif
                                    </div>
                                    <label>Preview</label>
                                    <div id="image-preview"></div>  
                                    <br>
                                    <button type="submit" class="btn btn-primary mr-2">{{ __('Submit')}}</button>
                                    <button type="button" class="btn btn-light" onclick="window.location.href='{{ route('admin.subscriptions.index') }}'">{{ __('Cancel')}}</button>

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

                <div class="col-md-6">
                  
                    <div class="card">
                        <div class="card-header"><h3>{{ __('List of Products to Subscribe')}}</h3></div>
                        <div class="card-body">
                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Product</label>
                                        <div class="input-group input-group-sm">
                                          <input type="hidden" class="form-control form-control-sm col-sm-1" id="rxprod_id" name="rxprod_id"  maxlength="15" readonly>
                                          <input type="text" class="form-control form-control-sm col-sm-1" id="sku" name="sku"  readonly>
                                          <input type="text" class="form-control" id="product_name" name="product_name"  placeholder="Product Name" readonly>
                                          <span class="input-group-append">
                                            <input type="button" class="btn btn-info btn-flat"  VALUE="Click to Select Products" onclick="javascript:openWindow2()" />
                                            <input type="button" class="btn btn-default btn-flat"  VALUE="Clear" onclick="cleartext1()" />
                                          </span>
                                        </div>
                                    </div>  
                                    <div class="row">
                                        <div class="col-sm-4">
                                            <!-- text input -->
                                            <div class="form-group">
                                              <label for="exampleInputName1">{{ __('Retail Price (Php)')}}</label>
                                              <input type="text" class="form-control" id="retail_price" name="retail_price" placeholder="0.00" style="text-align: right;" readonly>  
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <label>Qty</label>
                                                <input type="number" class="form-control" id="qty" name="qty" placeholder="Qty" onkeyup="compute();" onclick="compute();" style="text-align: right;" value= "0">  
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="form-group">
                                                <label>Amount</label>
                                                <input type="number" class="form-control" id="amount" name="amount" placeholder="0.00" style="text-align: right;" value= "0" readonly>  
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <label> </label>
                                                <button type="button" class="btn btn-primary mr-2" onclick="addProduct();">{{ __('Add to List')}}</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                      <input type="hidden" class="form-control form-control-sm col-sm-1" id="ssku" name="ssku"  readonly>
                                      <table  id="employee-grid" class="display compact custom" cellspacing="0" cellspacing="0" style="width:100%">
                                          <thead>
                                          <tr>
                                              <th>Action</th>
                                              <th>Image</th>                                
                                              <th>SKU</th>
                                              <th>Product Name</th>
                                              <th>Qty</th>
                                              <th>Retail Price</th>
                                              <th>Amount</th>
                                          </tr>
                                          </thead>
                                          <tbody>

                                          </tbody>

                                      </table>  
                                    </div>


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


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

    <!-- push external js -->
    @push('script')
        <script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
        <script src="{{ asset('plugins/summernote/dist/summernote-bs4.min.js') }}"></script>
        <script src="{{ asset('plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js') }}"></script>
        <script src="{{ asset('plugins/jquery.repeater/jquery.repeater.min.js') }}"></script>
        <script src="{{ asset('plugins/mohithg-switchery/dist/switchery.min.js') }}"></script>
      
        <script src="{{ asset('js/form-advanced.js') }}"></script>

        <link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/jquery.dataTables.css') }}"> 
        <link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/buttons.dataTables.min.css') }}"> 

        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jquery.dataTables.min.js') }}"></script>
        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.buttons.min.js') }}"></script>
        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jszip.min.js') }}"></script>
        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/pdfmake.min.js') }}"></script>
        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/vfs_fonts.js') }}"></script>
        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/buttons.html5.min.js') }}"></script>
        <script type="text/javascript" language="javascript" src="{{ asset('mylib/js/buttons.colVis.min.js') }}"></script> 

        <script>
        function validateForm() {
          

          var table = $('#employee-grid').DataTable();

          if ( ! table.data().any() ) {
            alert( 'Please Add Product to Subscribe to Continue!' );
            return false;
          }

          if(document.getElementById('user_id').value == "" ){
              alert("Please Select Subscriber to Continue!");
               return false;
          }

          if(document.getElementById('description').value == "" ){
              alert("Please Enter Description to Continue!");
               return false;
          }

          if(document.getElementById('monthly_subs').value == "" ){
              alert("Please Select No of Months to Continue!");
               return false;
          }  

          if(document.getElementById('payment_method').value == "" ){
              alert("Please Select Payment Method to Continue!");
               return false;
          }  

          if(document.getElementById('delivery_date').value == "" ){
              alert("Please Enter Delivery Date to Continue!");
               return false;
          }           

          var ok = confirm("Are you sure you want Save Record?");
          if(ok){  
            return true; 
          } else {  
            return false; 
          }

        }
        </script>

        <script>
        $(document).ready(function(){
        refreshproducts();

        $('#region').on('change', function () {
            var regcode = this.value;
            $("#province").html('');
            $.ajax({
                url: "{{url('fetchProvince')}}",
                type: "POST",
                data: {
                    regcode: regcode,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (result) {
                    $('#province').html('<option value="">Select Province</option>');
                    $.each(result.province, function (key, value) {
                        $("#province").append('<option value="' + value
                            .code + '">' + value.name + '</option>');
                    });
                    $('#city').html('<option value="">Select City/Municipal</option>');
                }
            });
        });

        $('#province').on('change', function () {
            var provcode = this.value;
            $("#city").html('');
            $.ajax({
                url: "{{url('fetchCity')}}",
                type: "POST",
                data: {
                    provcode: provcode,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    $('#city').html('<option value="">Select City/Municipal</option>');
                    $.each(res.cities, function (key, value) {
                        $("#city").append('<option value="' + value.code + '">' + value.name + '</option>');
                    });
                }
            });
        });

        $('#city').on('change', function () {
            var cmcode = this.value;
            $("#barangay").html('');
            $.ajax({
                url: "{{url('fetchBarangay')}}",
                type: "POST",
                data: {
                    cmcode: cmcode,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    $('#barangay').html('<option value="">Select Barangay</option>');
                    $.each(res.barangays, function (key, value) {
                        $("#barangay").append('<option value="' + value.code + '">' + value.name + '</option>');
                    });
                }
            });
        });


        $('#region2').on('change', function () {
            var regcode = this.value;
            $("#province2").html('');
            $.ajax({
                url: "{{url('fetchProvince')}}",
                type: "POST",
                data: {
                    regcode: regcode,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (result) {
                    $('#province2').html('<option value="">Select Province</option>');
                    $.each(result.province, function (key, value) {
                        $("#province2").append('<option value="' + value
                            .code + '">' + value.name + '</option>');
                    });
                    $('#city2').html('<option value="">Select City/Municipal</option>');
                }
            });
        });

        $('#province2').on('change', function () {
            var provcode = this.value;
            $("#city2").html('');
            $.ajax({
                url: "{{url('fetchCity')}}",
                type: "POST",
                data: {
                    provcode: provcode,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    $('#city2').html('<option value="">Select City/Municipal</option>');
                    $.each(res.cities, function (key, value) {
                        $("#city2").append('<option value="' + value.code + '">' + value.name + '</option>');
                    });
                }
            });
        });

        $('#city2').on('change', function () {
            var cmcode = this.value;
            $("#barangay2").html('');
            $.ajax({
                url: "{{url('fetchBarangay')}}",
                type: "POST",
                data: {
                    cmcode: cmcode,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (res) {
                    $('#barangay2').html('<option value="">Select Barangay</option>');
                    $.each(res.barangays, function (key, value) {
                        $("#barangay2").append('<option value="' + value.code + '">' + value.name + '</option>');
                    });
                }
            });
        });



        });
        </script>

        <script>
        function refreshproducts() {

            fill_datatable();
            function fill_datatable(ssku = '')
            {
                var dataTable = $('#employee-grid').DataTable({
                    //scrollY:        "300px",
                    scrollX:        true,
                    scrollCollapse: true,
                    paging:         true,
                    columnDefs: [
                          { targets: [0], className: "text-center" },
                    ],
                    fixedColumns: true,

                    processing: true,
                    serverSide: true,
                dom: 'Blfrtip',
                buttons: [
                    {
                        extend: 'copyHtml5',
                        exportOptions: {
                            columns: [ 0, ':visible' ]
                        }
                    },
                    {
                        extend: 'excelHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'csvHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },            
                    {
                        extend: 'pdfHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    
                    'colvis'
                ], 
                    "lengthMenu": [[10, 20, 30, 40, 50, 100, -1], [10, 20, 30, 40, 50, 100, "All"]],
                    "pageLength": 10,                  

                    ajax:{
                        url: "{{ route('temp.subsproducttemps.index') }}",

                        data:{
                            ssku:ssku
                        }
                    },
                    columns: [
                        {data: 'action', name: 'action', orderable: false, searchable: false},
                        {
                            data:'prod_image',
                            name:'prod_image',
                            render: function (data, type, full, meta) {
                                //return "<img src=\"/storage/employees/" + data + "\" height=\"25\"   alt='No Image'/>";
                                return "<a href=\"https://stjosephdrug.com/product_images/" + data + "\" target='_blank'><img src=\"https://stjosephdrug.com/product_images/" + data + "\" height=\"25\"   alt='No Image'/></a>";
                            },
                            orderable: false, searchable: false
                        }, 
                        {
                            data:'sku',
                            name:'sku'
                        }, 

                        {
                            data:'product_name',
                            name:'product_name'
                        },  
                        {
                            data:'qty',
                            name:'qty'
                        },
                        {
                            data:'retail_price',
                            name:'retail_price'
                        }, 
                        {
                            data:'amount',
                            name:'amount'
                        }
                        


                ]



                });


            }
            $('#filter').click(function(){
                var ssku = $('#ssku').val();
                

                if(ssku != '')
                {
                    $('#employee-grid').DataTable().destroy();
                    fill_datatable(ssku);
                }
                else
                {
                    $('#employee-grid').DataTable().destroy();
                    fill_datatable();
                }
            });

            $('#reset').click(function(){
                $('#ssku').val('');
                $('#employee-grid').DataTable().destroy();
                fill_datatable();
            });

        } 

        </script>






        <script language="javascript"> 
        function openWindow() { 
          window.open("{{route('tablelist.allusers.index')}}", "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=100, left=200, width=1200, height=650"); 
        } 
        </script>    
        <script language="javascript"> 
        function openWindow2() { 
          window.open("{{route('tablelist.allproducts.index')}}", "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=100, left=200, width=1200, height=650"); 
        } 
        </script>   

        <script>
        function cleartext1() {
          document.getElementById('rxprod_id').value = "";
          document.getElementById('sku').value = "";
          document.getElementById('product_name').value = "";
          document.getElementById('retail_price').value = "";
        }
        </script>

        <script>    
        function addProduct() {

            if($('#sku').val() == ""){
                alert('Please Select Product to Continue!');
            }else if($('#qty').val() == ""){
                alert('Please Enter Qty to Continue!');                            
            }else{
                var ok = confirm("Are you sure you want to Add Product to the List?");
                if(ok){
                    $.ajax({
                        url: "{{ route('temp.subsproducttemps.store') }}",
                        dataType:'JSON',
                        data: {
                            _token:"{{csrf_token()}}",
                            userid: $('#userid').val(),
                            sku: $('#sku').val(),
                            retail_price: $('#retail_price').val(),
                            qty: $('#qty').val(),
                            amount: $('#amount').val()
                        },
                        type: "POST",

                        success: function(data){
                          document.getElementById('rxprod_id').value = "";
                          document.getElementById('sku').value = "";
                          document.getElementById('product_name').value = "";
                          document.getElementById('retail_price').value = "";
                          document.getElementById('qty').value = "";
                          document.getElementById('amount').value = "";
                          $('#employee-grid').DataTable().destroy();
                          refreshproducts();
                        }
                    });
                }

            }



        }
        </script> 

        <script>
        function compute()
        {

            var qty  = document.getElementById('qty').value;
            var retail_price  = document.getElementById('retail_price').value;
            var amount = parseFloat(qty) * parseFloat(retail_price);

            document.getElementById('amount').value = parseFloat(amount).toFixed(2);;

        }
        </script>

        <script>
        function DeleteProduct(element) {

             var id = element.getAttribute('id');

            //document.getElementById('educid').value = id;
            var ok = confirm("Are you sure you want to Delete Selected Record?");
            if(ok){
              $.ajax({
                 url: "{{ route('temp.subsproducttemps.destroy', "+id+") }}",
                data: {
                  _token:"{{csrf_token()}}",
                  id: id
                },
                type: "DELETE",
                
                success: function(data){
                  data = $.trim(data);
                  var str = $.trim(data);

                  $('#employee-grid').DataTable().destroy();
                   refreshproducts(); 

                  if(data === "SUCCESS"){
                    alert("Form has been submitted!");
                    location.reload(true);
                    //window.location.reload();
                  } //else{alert(data);}
                }
              });
            }



        }
        //});


        </script>


        <script type="text/javascript">
      
        
            $('#medphoto').on('change', function(){ 
                if (window.File && window.FileReader && window.FileList && window.Blob)
                {  
                    var data = $(this)[0].files; 
                    $.each(data, function(index, file){ 
                        if(/(\.|\/)(gif|jpe?g|png)$/i.test(file.type)){ 
                            var fRead = new FileReader(); 
                            fRead.onload = (function(file){ 
                            return function(e) {
                                $('#image-preview').append("<div style='display: inline' id='img-cont'><img class='thumb' width='50' height='50' src='"+e.target.result+"'/></div>"); 
                            };
                            })(file);
                            fRead.readAsDataURL(file); 
                        } 

                       if(/(\.|\/)(gif|jpe?g|png)$/i.test(file.type) == ''){ 

                            var fRead = new FileReader(); 
                            fRead.onload = (function(file){ 
                            return function(e) {
                                $('#image-preview').append("<div style='display: inline' id='img-cont'><img class='thumb' width='50' height='50' src='{{ asset('storage/icons/file.png') }}'/></div>"); 
                            };
                            })(file);
                            fRead.readAsDataURL(file); 
                        } 
                    });
                }else{
                    alert("Your browser doesn't support File API!"); 
                }
            });

          </script>





    @endpush
@endsection