@extends('outlets.layout')

@section('content')

@include('outlets.header', ['title'=>'Service list']) 

<style type="text/css">


.content-wrapper, .right-side, .main-footer {
    padding-top: 60px!important;
}


.product-buttons {

    padding: 30px 0px;

}



.sidenav{
  width: 0px;
}

.sidenav .closebtn{
    display: block;
}

.content-wrapper {
    margin-left: 0px !important;
}
.content-wrapper.close-wrapper {
    margin-left: 300px!important;
}





.pro-btn {

    background: #333;

    border: none;

    color: #fff;

    padding: 10px 25px;

    display: block;

    width: 100%;

    margin: 10px 0px;

    border-radius: 30px;

    cursor: pointer;

}



.pro-btn i {

    color: #fff;

    vertical-align: inherit;

}



.product-buttons .col-3 {

    text-align: center;

}



.product-buttons a{

  color: #fff!important;

}



.blue-color {

    background: #1f328e;

}



.pink-color {

    background: #F44336;

}



.green-color {

    background: #4CAF50;

}



.orange-color {

    background: #FF9800;

}



.light-blue-color {

    background: #03A9F4;

}



.pro-btn:hover{

  opacity: 0.8;

  color: #fff;

}



.pro-btn:focus{

  outline: none;

}



.close {

    position: absolute;

    right: 15px;

}



button.close {

    position: absolute;

    right: 15px;

}



.modal-body {

    padding: 5rem 4rem;

    text-align: center;

}



.modal-body {

    font-size: 16px;

}



.modal-content {

    min-height: auto;

}



.modal-title {

    padding-left: 0;

}





.modal-body p {

    margin-bottom: 0;

    font-size: 24px;

    font-weight: 600;

}

.payPopup {
    padding: 2rem 2rem !important;
}
</style>
 
<section class="orderPage">
		 <div class="row">

            <div class="col-md-12 tableButtns text-right">
		 
				<a href="javascript:void();" class="btn-blue" id="btnuploadProductExcel" data-toggle="modal" data-target="#uploadProductExcel"><i class="fa fa-upload"></i> Import Services</a>
			</div>
		</div>
		
          <div class="row no-gutters">

            <div class="col-md-4 col-sm-12">

              <div class="orderleftBar" style="margin: 15px 15px 0 15px;">

                <div class="row">

                  <div class="col-7">

                    <div class="ordersearch">

                      <i class="fas fa-search"></i>

                      <input type="search" name="" id='searchable' value="" placeholder="Search...">

                    </div>

                  </div>

                  <div class="col-4 proDuct3">

                    <p class="tPro text-right">0 services</p>

                  </div>

                  <div class="col-1 text-center" style="background: #fff;">

                    <a href="#" class="plusIcon"><i class="fas fa-plus"></i></a>

                  </div>

                </div>

                <!-- row -->





                <div class="row no-gutters">

                  <div class="col-12">

                    <div class="orderScroll">



                  @if(count($results['services'])>0)



                    @foreach ($results['services'] as  $key=>$services)

                      
                    <div class="productORder" onclick="Getproductinfo()">

                      <div class="media">


                          <div class="media-body">

                            <h5 class="mt-0">{{ $services->services_name }}</h5>

                          

                            <div class="row inStock">

                              <div class="col-6">

                              </div>

                              <div class="col-6">

                                <p class="text-right">{{ $results['currency'][0]->currency_symbol }}{{ $services->services_price }}</p>

                              </div>

                            </div>

                          </div>

                        </div>

                    </div>



                  @endforeach



                @endif 
<div class="hello">
						{{ $results['services']->links() }}
				 
                </div>




                  </div>

                  </div>

                </div>

                <!-- row -->



              </div>

            </div>

            <!-- col -->







            <div class="col-md-8 col-sm-12">



              <div class="orderRight apenddata">


            </div>

            <!-- col -->





          </div>





          </div>

        <!-- row -->

        </section>
 


       <div class="modal fade uploadProductExcel" id="uploadProductExcel" tabindex="-1" role="dialog" aria-labelledby="uploadProductExcel" aria-hidden="true">
            <div class="modal-dialog w580 modal-dialog-centered" role="document">
                <div class="modal-content minHe">
                    <div class="modal-body payPopup">
                        <div class="">
                            <center>
                                <h2 class="exp_heading">Import Services</h2>
                            </center>
                            <form id="importProductsModal">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input class="form-control " name="ServiceExcel" type="file" id="ServiceExcel" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="submit-section">
                                    <button class="btn btn-primary submit-btn">Upload <i class="fa fa-spinner fa-spin" style="font-size:19px;display:none"></i></button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<!-- deleteProductModal -->



  <div class="modal " id="deleteProductModal" tabindex="-1" role="dialog" aria-labelledby="deleteProductModalLabel">



    <div class="modal-dialog" role="document">



    <div class="modal-content">


      {!! Form::open(array('url' =>'outlets/deleteService', 'name'=>'deleteService', 'id'=>'deleteService', 'method'=>'post', 'class' => 'form-horizontal', 'enctype'=>'multipart/form-data')) !!}



          {!! Form::hidden('action',  'delete', array('class'=>'form-control')) !!}



          {!! Form::hidden('service_id',  '', array('class'=>'form-control', 'id'=>'products_id')) !!}



      <div class="modal-body">  



        <center><img style="width: 60px; padding-bottom: 20px;" src="/resources/views/outlets/common/images/cancel.svg" alt=""></center>

        <p>{{ trans('labels.DeleteThisServiceDiloge') }}?</p>



      </div>







      <div class="modal-footer">



              <button type="button" name="button" data-dismiss="modal">

                <img src="/resources/views/outlets/common/images/cancel.svg" alt="">

              </button>

              <button type="submit" id="deleteService" >

                <img src="/resources/views/outlets/common/images/verified.svg" alt="">

              </button>



            </div>



      {!! Form::close() !!}



    </div>



    </div>



  </div>



   <script type="text/javascript">

     function Getproductinfo(id)

      { 

      $.ajax({



         url:"{{ route('outlets.listingServices.ServiceDetail') }}",



         method:'GET',



         data:{id:id},



         dataType:'json',



         success:function(data)



         {

        $('.apenddata').html(data.table_data);

         }



        }); 

        

      }

   </script>

   <script type="text/javascript">

    function printBarcode01(pid){

      var printWindow = window.open('', '', 'height=400,width=1200');

      var html = ''+

        '<html>'+

        '<head>'+

        '<link rel="stylesheet" href="http://postest.ecom.sayhei.org/resources/nassets/dist/css/print_barcode.css" media="print" type="text/css" />'+

        '</head>'+

        '<body onload="window.focus();" onbeforeunload="window.close();">'+

        $("#print_barcode_content").html();

      

      html += '</body></html>';

      //printWindow.document.write(html);

      printWindow.document.body.innerHTML = html;

      printWindow.print();



    }

    

    

   </script>

   <script type="text/javascript">

      function barcodeVariationP(datavar){

        //console.log(datavar);

         if($('input[type="radio"]').is(':checked')) { 

          $('.print_barcode_content_inn img').attr('src','data:image/png;base64,'+datavar+'');

        }

      }

   </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="{{ url('resources/views/outlets/common/js/bootstrap.min.js') }}"></script>	
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.js"></script>
<script>
var ajaxurl = "{{ url('/')  }}";
$( document ).ready( function(){
    $("#importProductsModal").submit(function(e) {
        e.preventDefault();
    }).validate({
        //rules: {},
        submitHandler: function(form) {
            
            var formData = new FormData();
            formData.append('file', $('#ServiceExcel')[0].files[0]); 
            
            $.ajax({
              beforeSend:function(){
                  $("#importProductsModal").find('button').attr('disabled',true);
                  $("#importProductsModal").find('button>i').show();
              },
              url:  ajaxurl+'/outlets/services/importServices',
              data:formData,
              type: 'POST',
                contentType: false,
                cache: false,
                processData:false,
              success:function(response){
                  //   response = JSON.parse(response);
                  if (response.success) {
                     $("#importProductsModal")[0].reset();
                     $("#importProductsModal").find('button').attr('disabled',false);
                     $("#importProductsModal").find('button>i').hide();  
                     $("#uploadProductExcel").modal('hide');
        			 jQuery.toast({
                        heading: 'Success',
                        text: response.message,
                        showHideTransition: 'fade',
                        icon: 'success',
                        position: 'top-right',
                    }) ; 
                    location.href = response.redirect_url;
                  }
              },
              error:function(status, error){  
              }
          });
            return false;  //This doesn't prevent the form from submitting.
        }
    });

	//deleteProductModal

	$("body").on('click', '#deleteProductId', function(){

		var products_id = $(this).attr('products_id');

		$('#products_id').val(products_id);

		$("#deleteProductModal").modal('show');

	});

});
</script>



@endsection