@extends('layouts.app')

@section('content')
   
<style type="text/css">.loader.text-center { position: absolute; top: 130%;left: 55%;}
.loader { display: none; }
</style>
	<div class="panel">
        <div class="panel-heading bord-btm clearfix pad-all h-100">
            <h3 class="panel-title pull-left pad-no"></h3>
            <div class="pull-right clearfix">
                    <div class="box-inline pad-rgt pull-left">
                        <div class="" style="min-width: 200px;">
                            <form class=""  action="{{route('inhouse.product.export', 'allproduct')}}" method="GET">
                                <input type="text" name="daterange" class="form-control" value=""  placeholder="Select Date">
                                <h3 class="panel-title"><button type="submit" class="btn"><i class="fa fa-download" aria-hidden="true"></i>{{ translate('Export Inhouse Product Report') }}</button></h3>
                            </form>
                        </div>
                    </div>

                    <div class="box-inline pad-rgt pull-left">
                        <div class="" style="min-width: 200px;">
                            <form class=""  action="{{route('inventory.export')}}" method="GET">
                                <input type="text" name="daterange" class="form-control" value=""  placeholder="Select Date">
                                <h3 class="panel-title"><button type="submit" class="btn"><i class="fa fa-download" aria-hidden="true"></i>{{ translate('Export Inventory Product Report') }}</button></h3>
                            </form>
                        </div>
                    </div>
            </div>
        </div>
    </div>

    
    <hr>
    <div class="loader text-center"><i class="fa fa-spinner fa-pulse fa-3x" aria-hidden="true" style="color: #038ece"></i></div>

@endsection

@section('script')
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript">
    $(function() {
      $('input[name="daterange"]').daterangepicker({
          autoUpdateInput: false,
          maxDate: new Date(),
          locale: {
              cancelLabel: 'Clear'
          }
      });

      $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
          $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

      $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
          $(this).val('');
      });

    });
</script>
<script type="text/javascript">
    
	$(".btn-info").click(function(){
		$(".loader").show();
		setTimeout(function()
			{ 
				$(".loader").hide();
		}, 10000);	
	});

</script>
@endsection