@extends('admin::curd.index')
@section('heading')
@stop

@section('title')
 <img src="{!!URL::to('img/report/analytics.png')!!}"> &nbsp;{!! ucwords('Reports') !!}
@stop

@section('breadcrumb')
@stop

@section('entry')

@stop

@section('tools')
@stop


@section('content')
  <div class="box-body" >
    <div class="nav-tabs-custom">
     <ul class="nav nav-tabs primary">
        <li class="active"><a href="{!!trans_url('admin')!!}/customer/amc/report" class="active">Contract</a></li>
        <li><a href="{!!trans_url('admin')!!}/customer/amc-billing/report">Billing</a></li>
      </ul>

      <div class="tab-content">
  
        <div class="tab-pane active clearfix" id="details">

            {!!Form::horizondal_open()
            ->id('leaseReportForm')
            ->secure()
            ->method('POST')
            ->files('true')
            ->enctype('multipart/form-data') !!}
            <div class="col-md-5 col-lg-5">
             

              {{-- {!! Form::select('search[service_company_id]')
              -> options([])
              ->id('service_company_id')
              -> label(trans('maintenance_contracts::maintenance_contract.label.service_company_id'))
              -> placeholder(trans('maintenance_contracts::maintenance_contract.placeholder.service_company_id'))
              -> addGroupClass('form-group-sm')!!} --}}

               {{-- {!! Form::select('search[service_company_id]')
               -> options([])
               ->id('service_company_id')
               -> addGroupClass('form-group-sm')
               -> label('Service Provider')
               -> placeholder('Select Supplier')
               !!} --}}

              {!! Form::select('search[customer_id]')
              -> options([])
              ->id('customer_id')
              -> addGroupClass('form-group-sm')
              -> label('Customer')
              -> placeholder('Select Customer')
              !!}
    
              {{-- {!! Form::select('search[asset_id]')
                -> options([])
              -> id('asset_id')
              -> label(trans('maintenance_contracts::maintenance_contract.label.asset_id'))
              -> placeholder(trans('maintenance_contracts::maintenance_contract.placeholder.asset_id'))
              -> addGroupClass('form-group-sm')!!} --}}
    
              {!! Form::select('search[company_id]')
              -> options(Company::companies(),user('admin.web')->current_comp)
              -> disabled()
              -> id('company_id')
              -> label(trans('customer::amc_contract.label.company_id'))
              -> placeholder(trans('customer::amc_contract.placeholder.company_id'))
              -> addGroupClass('form-group-sm')!!}

             {!! Form::select('search[division_id]')
              -> options(Company::divisions())
              -> id('division_id')
              -> label(trans('customer::amc_contract.label.division_id'))
              -> placeholder(trans('customer::amc_contract.placeholder.division_id'))
              -> addGroupClass('form-group-sm')!!}

    

            </div>          
            
              

          <div class="col-md-5 col-lg-5">
            
            {!! Form::select('search[status]')
              -> options(trans('customer::amc_contract.options.status'))
              -> id('status')
              -> label(trans('customer::amc_contract.label.status'))
              -> placeholder(trans('customer::amc_contract.placeholder.status'))
              -> addGroupClass('form-group-sm')!!}
                {{-- <div class="form-group form-group-sm">
                  <label for="month" class="control-label col-lg-3 col-md-6 col-sm-6"> 
                    Year
                  </label>
                  <div class="col-lg-3 col-md-3 col-sm-3">
                    <select  class="form-control" id="currentyear" name="search[currentyear]">
                          @for ($i = date("Y"); $i >= 2010; --$i)
                          <option value="{!!$i!!}">{!!$i!!}</option>
                          @endfor
                    </select>
                    
                  </div>
                  <label for="month" class="control-label col-lg-2 col-md-6 col-sm-6"> 
                    Month
                  </label>
                  
                  <div class="col-lg-4 col-md-3 col-sm-3">
                    {!! Form::select('search[month]')
                     -> id('month')
                     -> options(trans('maintenance_contracts::maintenance_contract.options.month'),date('m'))
                     -> addGroupClass('form-group-sm')
                     -> raw()!!}
                  </div>
              </div> --}}
              <div class="form-group form-group-sm">
                <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6"> 
                  Contract Date
                </label>
                <div class="col-lg-5 col-md-3 col-sm-3">

                    {!! Form::date('search[contractdate][0]')
                    -> id('contract_date_from')
                    -> addGroupClass('form-group-sm')
                    -> placeholder('From')
                    ->addClass('datepick')
                    -> raw()!!}
                </div>

                <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                  {!! Form::date('search[contractdate][1]')
                    -> id('contract_date_to')
                    -> addGroupClass('form-group-sm')
                    -> placeholder('To')
                    ->addClass('datepick')
                    -> raw()!!}
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6"> 
                  Start Date
                </label>
                <div class="col-lg-5 col-md-3 col-sm-3">

                    {!! Form::date('search[startdate][0]')
                    -> id('start_date_from')
                    -> addGroupClass('form-group-sm')
                    -> placeholder('From')
                    ->addClass('datepick')
                    -> raw()!!}
                </div>

                <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                  {!! Form::date('search[startdate][1]')
                    -> id('start_date_to')
                    -> addGroupClass('form-group-sm')
                    -> placeholder('To')
                    ->addClass('datepick')
                    -> raw()!!}
                </div>
              </div>

              <div class="form-group form-group-sm">
                <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6"> 
                  End Date
                </label>
                <div class="col-lg-5 col-md-3 col-sm-3">

                    {!! Form::date('search[enddate][0]')
                    -> id('end_date_from')
                    -> addGroupClass('form-group-sm')
                    -> placeholder('From')
                    ->addClass('datepick')
                    -> raw()!!}
                </div>

                <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                  {!! Form::date('search[enddate][1]')
                    -> id('end_date_to')
                    -> addGroupClass('form-group-sm')
                    -> placeholder('To')
                    ->addClass('datepick')
                    -> raw()!!}
                </div>
              </div>
          
               
               

            </div>
              
            <div class="col-md-2 col-lg-2">
                {{-- <div class="m-b-20">
                  <img src="{!!URL::to('img/report/order.png')!!}">&nbsp;
                  <a  id="download_report"  class="headpicture" href="#">Download Report</a>
                </div> --}}
                <div class="m-b-20">
                  <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                  <a  id="download_csv"  class="headpicture" href="#">Download Csv</a>
                </div>
                {{-- <div class="m-b-20">
                  <img src="{!!URL::to('img/report/print.png')!!}">&nbsp;
                  <a class="headpicture popup_a" width="350" id='popup-save-report' style="cursor:pointer">Save Report</a>
                </div>
                <div class="m-b-20">
                  <img src="{!!URL::to('img/report/finish-work.png')!!}">&nbsp;
                  <a class="headpicture popup_a" width="350" id='view_report' href="#">My Saved Reports</a>
                </div> --}}

                <div class="m-b-20">
                    <i class="fa fa-refresh" style="color:#000;"></i>&nbsp;
                    <a  id="resetnow" class="headpicture" style="cursor:pointer;">Reset Filter</a>
                </div> 
            </div> 

            <div class="col-md-10 col-lg-10">            
                <button type="button" id="gobutton" class="btn btn-success btn-sm" style="width:100%">Go</button>
            </div>             

            {!!Form::close()!!}
        </div>
      </div>
    </div>
  </div>


<div class="nav-tabs-custom">
    <ul class="nav nav-tabs primary">
      {{-- <li class="active"><a href="#tab-graph" data-toggle="tab">Graph</a></li>
      <li><a href="#tab-summary" data-toggle="tab">Data Summary</a></li> --}}
      <li class="active"><a href="#tab-full-data" data-toggle="tab">Full Data Set</a></li>
    </ul>
    
    <div class="tab-content">
        {{-- <div class="tab-pane active" id="tab-graph">
          <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
            <table width="100%"  align="center" cellpadding="0" cellspacing="0" id="table_1" class="form_table table table-striped">
              <tr>
                <td colspan="2">
                  <table width="100%" bgcolor="#FFF" border="0" cellpadding="0" cellspacing="0" style="padding:8px 0 0 0;">
                    <tr>
                     
                    </tr>
                    <!-- <tr>
                      <td height="30" colspan="3" class="form_fields_table" style="padding:5px;"><b>Date Range:</b><span style="padding-left:30px;" id="date_range_label">No Date Range Selected</span></td>
                    </tr> -->
                    <!-- <tr>
                      <td height="30" colspan="3" class="form_fields_table" style="padding:5px;"><b>Filters:</b><span style="padding-left:30px;" id="filters_label"></span></td>
                    </tr> -->
                    <tr>
                      <td height="10" class="form_fields_table">&nbsp;</td>
                      <td width="15%" height="10" colspan="-4" class="form_fields_table">&nbsp;</td>
                      <td width="71%" height="10" colspan="-4" class="form_fields_table">&nbsp;</td>
                    </tr>
                    <tr>
                      <td colspan="3" class="form_fields_table" style="padding:10px;"> <div id="chart_span" style="min-width: 400px; height: 350px; margin: 0 auto"></div></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="tab-pane" id="tab-summary">
          <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
            <table width="100%" id="data_summary" border="0" align="center" class="table table-striped display datatable data-table" cellpadding="0" cellspacing="0">
            </table>
          </div>
        </div> --}}
        <div class="tab-pane active" id="tab-full-data">
          <table id="full_listings" class="table table-striped data-table" width="100%">
              <thead  class="list_head">
                <th> <div class="reset" style="display:none;"></div></th> 
                   <th>Contract No.</th>
                   <th>Contract Date</th>
                   <th>Customer Name</th>
                   <th>Start Date</th>
                   <th>End Date</th>
                   <th>Device Count</th>
                   <th>Amount</th>
                   <th>Status</th>
                   <th>No of services</th>
                  <th>Payment Terms</th>
                  <th>Division</th>
                  <th>Company</th>             
              </thead>
              
          </table>
        </div>
    </div>
</div>

<div class="modal fade" id="save-report">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title">Save Report</h3>
        <div class="popup_description">Type the name and save report for future use.</div>
      </div>
      <div class="modal-body" style="height:110px;">
        <div class="form-horizontal">

            <div class="col-md-12 col-lg-12 m-t-20">
              {!!Form::horizontal_open()
              ->id('report_save')
              ->method('POST')
              ->files('true')
              ->action(trans_url('admin/save_report'))!!}

                {!! Form::hidden('screen')
                   -> forceValue('maintenance_contract')!!}

                {!! Form::text('name')
                 -> placeholder('Enter Name')
                 -> label('Report Name')
                 -> required()!!}

              {!!Form::close()!!}  
            </div>
        </div>
        <div id="resultofsave" class="searchoptiontext"> </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="save-repot" name="Saverep" value="Send" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="show_report">
  <div class="modal-dialog">
    <div class="modal-content" style="max-width:400px;">
      <div class="modal-header header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Recent Saved Searches</h4>
      </div>
      <div class="modal-body" style="height:210px; overflow-y: auto;">
       
        <div id="saved-reports"></div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary"  name="Closerep" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

  @stop


  <script type="text/javascript">

  var chart;



 $(document).ready(function () {
 
   oTable = $('#full_listings').dataTable( {
       "bProcessing": true,
       "sDom": 'R<>rt<ilp><"clear">',
       "bServerSide": true,
       "sAjaxSource": '{!!trans_url("admin")!!}/customer/amc/report',
       "fnServerData" : function ( sSource, aoData, fnCallback ) {
 
           $('#leaseReportForm select, #leaseReportForm input').each(
               function(){
                   if ($(this).val() == null || $(this).val() == '') {
                     return;
                   }
 
                   aoData.push( { 'name' : $(this).attr('name'), 'value' : $(this).val() } );
               }
           );
           
           app.dataTable(aoData);
           $.ajax({
               'dataType'  : 'json',
               'data'      : aoData,
               'type'      : 'GET',
               'url'       : sSource,
               'success'   : fnCallback
           });
       },
 
       "columns": [
            {data :'dresets'},
           {data :'contract_no'},
           {data :'contractdate'},
           {data :'customer_id'},
          //  {data :'company_id'},
          {data :'startdate'},
          {data :'enddate'},
          {data :'devicecount'},
          {data : 'amount'},
          {data :'status'},
          {data: 'noofservices'},
          {data :'payment_terms'},
          {data :'division_id'},
           {data :'company_name'}
           
 
           
                                          
       ],
       "pageLength": 25,
        "order": [[ 0, "desc" ]],
   });

   $(".datepick").pickadate({
          format: 'dd mmm, yyyy',
          formatSubmit: 'yyyy-mm-dd',
          hiddenSuffix: '',
          selectMonths: true,
          selectYears: true
      }).prop('type','text');
   
   
    // @if(@$save_report['search']['portfolio_id'] <> "")
    //   $("select[name='search[property_id]").load('{{URL::to("admin/property/property-list")}}/{{@$save_report['search']['portfolio_id']}}/{{@$save_report['search']['property_id']}}');
    // @endif

    // @if(@$save_report['search']['currentyear'] <> "")
    //   $("#currentyear option[value='{!!$save_report['search']['currentyear']!!}']").prop('selected', true);
    // @else 
    //  $("#currentyear option[value='{!!date("Y")!!}']").prop('selected', true);
    // @endif
    // @if(@$save_report['search']['month'] <> "")
    //   $("#month option[value='{!!$save_report['search']['month']!!}']").prop('selected', true);
    // @endif
    

    var filter = $("#leaseReportForm").serialize(); 
    // plotGraph("{{URL::to('admin/customer/amc/report/graph')}}" +'/' + filter + '');
    $('#view_report').click(function(){
      $('#saved-reports').load("{{ trans_url('admin/customer/amc/save/save_report')}}");
      $('#show_report').modal("show");
    });

    $("#popup-save-report").click(function(){
      $("#name").val('');
      $("#save-report").modal('show');
    });

    // $("#portfolio_id").change(function(){
    //    var portfolio = $("#portfolio_id option:selected").val();
    //    $("#property_id").load("{{trans_url('admin/property/property-list')}}"+"/"+portfolio);
    // });

    $('#resetnow').click(function(){
      $('input[name="search[startdate][0]"]').val('');
      $('input[name="search[startdate]"][1]').val('');
      $('input[name="search[enddate][0]"]').val('');
      $('input[name="search[enddate][1]"]').val('');
      $('input[name="search[contractdate][0]"]').val('');
      $('input[name="search[contractdate][1]"]').val('');
      $('#leaseReportForm')[0].reset();
      $('.select2-selection__rendered').html('');
      var filter = $("#leaseReportForm").serialize();      
        // plotGraph("{{URL::to('admin/customer/amc/report/graph')}}" +'/' + filter + '');
      $('#date_range_label').html('No Date Range Selected');
      oTable.api().draw();
    });

    // $('#download_report').click(function(){
    //   var filter = $("#leaseReportForm").serialize();
    //   $('#download_report').attr('href',"{{URL::to('admin/customer/amc/report/graph/pdf')}}"+ "/" + filter);
    //   $('#download_report').attr("target", "_blank");
    // });

    $('#download_csv').click(function(){
      var filter = $("#leaseReportForm").serialize();
      $('#download_csv').attr('href',"{{URL::to('admin/customer/amc/report/graph/csv')}}"+ "/" + filter);
      $('#download_csv').attr("target", "_blank");
    });

    $('input[id=start_date_from]').change(function() {

    $("#start_date_to").pickadate('picker').set({ select:$('input[id=start_date_from]').val(), min: new Date($('input[id=start_date_from]').val())});
    });
    $('input[id=end_date_from]').change(function() {  
    $("#end_date_to").pickadate('picker').set({ select:$('input[id=end_date_from]').val(), min: new Date($('input[id=end_date_from]').val())});
    });
    $('input[id=contract_date_from]').change(function() {
      $("#contract_date_to").pickadate('picker').set({ select:$('input[id=contract_date_from]').val(), min: new Date($('input[id=contract_date_from]').val())});
    }); 
    $("#customer_id").select2({
      ajax: {
        url: "{{ trans_url('admin/customer/select2') }}",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term, // search term
            page: params.page
          };
        },
        processResults: function (data, params) {

          params.page = params.page || 1;
          return {
            results: data.items,
              pagination: {
                more: (params.page * 30) < data.total_count
              }
          };
        },
        cache: true
      },
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    
    templateResult: formatRepo, // omitted for brevity, see the source of this page
    templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
  });


  function formatRepo (repo) {
    if (repo.loading) return repo.name;
    var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result'><span>"+ repo.name +"</span></div>";

    return markup;
  }

  function formatRepoSelection (repo) {
    return repo.name;
  }
  $(document.body).on('click', "#gobutton", function (e) {
        e.preventDefault();
        // chart.showLoading();
        var filter = $("#leaseReportForm").serialize();
        var filter_label = '';
        var comma = '';
        $("#leaseReportForm select, #leaseReportForm input").each(function () {
            if ($(this).val() != '' || $(this).val() != null ) {
                filter_label += comma + ' ' + $('#' + $(this).attr('id') + ' :selected').text();
                comma = ',';
            }
        });

        /* labels set */
        $('#group_by_label').html($('#group_by :selected').text());
        $('#date_range_label').html('From ' + $('#start_date_from').val() + ' To ' + $('#start_date_to').val());
        //$('#filters_label').html(filter_label);

        
        //  plotGraph("{{URL::to('admin/customer/amc/report/graph')}}" +'/' + filter + '');
        $('#full_listings .search_bar').find("."+$(this).attr('id')).prop('disabled',true);
        oTable.api().draw();
    });
    // $("#service_company_id").select2({
    //         // minimumInputLength: 2,
    //         allowClear: true,
    //         placeholder: 'Select Supplier',
    //         ajax: {
    //             url: "{{ trans_url('admin/supplier/select2') }}",
    //             dataType: 'json',
    //             delay: 250,
    //             data: function(params) {
    //                 return {
    //                     q: params.term, // search term
    //                     companyId: {!! user('admin.web')->current_comp !!},
    //                     page: params.page
    //                 };
    //             },
    //             processResults: function(data, params) {

    //                 params.page = params.page || 1;
    //                 return {
    //                     results: data.items,
    //                     pagination: {
    //                         more: (params.page * 30) < data.total_count
    //                     }
    //                 };
    //             },
    //             cache: true
    //         },
    //         escapeMarkup: function(markup) {
    //             return markup;
    //         }, // let our custom formatter work
    //         initSelection: function(element, callback) {
    //             callback({
    //                 id: "{{ @$maintenance_contract->service_company_id }}",
    //                 name: "{{ @$maintenance_contract->serviceproviders->name }}"                });
    //         },
    //         templateResult: formatRepo3, // omitted for brevity, see the source of this page
    //         templateSelection: formatRepo3Selection // omitted for brevity, see the source of this page
    //     });
    //      function formatRepo3(repo) {
    //         if (repo.loading) return repo.name;
    //         var markup = "<div class='select2-result-repository clearfix'>" +
    //             "<div class='select2-result'><span>" + repo.name + "</span></div>";

    //         return markup;
    //     }


    //     function formatRepo3Selection(repo) {
    //         return repo.name?repo.name:repo.text;
            
    //     }

    $('#save-repot').click(function(e){
        if($("#report_save").valid() == false) {
            toastr.error('Please enter valid information.', 'Error');
            return false;
        }
        var postData  = $("#report_save").serialize();
        var chartData = $("#leaseReportForm").serialize();
        var formURL  = "{{ trans_url('admin/save_report')}}";
        $.ajax(
        {
            url : formURL,
            type: "POST",
            data : {data:postData,data1:chartData},
            success:function(data, textStatus, jqXHR)
            {
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                toastr.error('An error occurred while saving.', 'Error');
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
        
        e.preventDefault();
    });

// chart = new Highcharts.Chart({
//         chart: {
//             renderTo: 'chart_span',
//             type: 'column'
//         },
//         title: {
//             text: ''
//         },
//         credits: {
//             enabled: false
//         },
//         xAxis: {
//             categories: [],
//             labels: {
//                 rotation: -55,
//                 align: 'right',
//                 style: {
//                     fontSize: '11px',
//                     fontFamily: 'Roboto, sans-serif'
//                 }
//             }
//         },
//         yAxis: {
//             title: {
//                 text: 'Value'
//             },
//             plotLines: [{
//                 value: 0,
//                 width: 2,
//                 color: '#808080'
//             }]
//         },
//         tooltip: {
//             formatter: function () {
//                 return '' +
//                     this.series.name + ': ' + this.y + '';
//             }
//         },
//         credits: {
//             enabled: false
//         },
//         exporting: {
//           enabled: false
//         },
//         series: [{
//             name: 'Active',
//             data: []
//         }, {
//             name: 'InActive',
//             data: []
//         }, {
//             name: 'Pending',
//             data: []
//         }, {
//             name: 'All Contracts',
//             data: []
//         }]
//     });

  
// });


// function plotGraph(url) {
 
//     var label = new Array();
//     var dataA = new Array();
//     var dataB = new Array();
//     var dataC = new Array();
//     var dataD = new Array();
//     var html = '';
//     var color = '';
//     var count = 0;
 
//     html += '<thead class="list_head"><tr height="30" class="listing_headings" >';
//     html += '<th width="218" style="padding-left:10px;" >Group By</th>';
//     html += '<th width="192" style="padding-left:10px;" >Active</th>';
//     html += '<th width="320" style="padding-left:10px;" >InActive</th>';
//     html += '<th width="320" style="padding-left:10px;" >Pending</th>';
//     html += '<th width="320" style="padding-left:10px;" >Total</th>';
//     html += '</tr></thead>';


//     $.getJSON(url, function (seriesData) {
//         $.each(seriesData, function (id, key) {
//             if (count % 2 == 0) {
//                 color = '#ffffff';
//             } else {
//                 color = '#e9e9e9'
//             }

//             label.push(key.labels);
//             dataA.push(Number(key.active));
//             dataB.push(Number(key.inactive));
//             dataC.push(Number(key.pending));
//             dataD.push(Number(key.total));

//             html += '<tr height="25">';
//             html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.labels + '</td>';
//             html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.active + '</td>';
//             html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.inactive + '</td>';
//             html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.pending + '</td>';
//             html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.total + '</td>';
//             html += '</tr>';

//             count++;

//         });

//         $('#data_summary').html(html)
//         chart.xAxis[0].setCategories(label);
//         chart.series[0].setData(dataA, true);
//         chart.series[1].setData(dataB, true);
//         chart.series[2].setData(dataC, true);
//         chart.series[3].setData(dataD, true);
//         chart.redraw();
//         chart.hideLoading();
//     });

    
//   }
 });

</script>
<style type="text/css">
.header{
        background: #3c8dbc;
        color: white;
    }
    #full_listings_wrapper{
      width: 100%;
      overflow-x: scroll;
    }
</style>