@extends('layouts.blank')
<style>
    .loading {
            background: #ff3333;
            color:white;
            font-weight:bold;
            padding: 15px;
            position: fixed;
            border-radius: 4px;
            left: 50%;
            top: 50%;
            text-align: center;
            margin: -40px 0 0 -50px;
            z-index: 2000;
            display: none;
        }
        .ajaxSearchUpdate th a, .ajaxSearchUpdate th a:hover{
            color:white;
            text-decoration: none;
        }    
</style>    
<div class="modal fade" id="gridModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg-long" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">
            {{ucfirst($type)}} Work Order Report for unit {{$unitName}}  
            <br>
            Last Location: {{$current_address}}

        </h5>
        <div class="row excel_to_report_btn ">                                               
            <div class="col-6"></div>
            <div class="col-6 text-right">
                @if($daysDifference > 30)
                    <a href="javascript:void(0)" onclick="exportButton('more')" id='export_excelPopup' class="btn btn-outline-primary float-right"><i class="fa fa-file-excel"></i> Export Last Month Data</a>
                @else    
                    <a href="javascript:void(0)" onclick="exportButton('less')" id='export_excelPopup' class="btn btn-outline-primary float-right"><i class="fa fa-file-excel"></i> Export to Excel</a>
                @endif    
            </div>
        </div>           
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>        
      <div class="modal-body">         
        <div class="detailed-info-table">
                        <!-- <div class="row">        
                            <div class="col-sm-5 form-group">
                                <div class="input-group">
                                    <input class="form-control" autocomplete="off" id="searchTxt" value="" onkeydown="if (event.keyCode == 13) ajaxLoad('','', '')" placeholder="Search Address" name="search" type="text">
                                    <div class="input-group-btn">
                                        &nbsp;
                                        <button type="button" class="btn btn-primary" onclick="ajaxLoad('','', '')">
                                            Search
                                        </button>
                                        &nbsp;
                                        <button type="button" class="btn btn-default clearClass" onclick="ajaxLoad('CLEAR', '', '')">
                                            Clear
                                        </button>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>  -->           
                        <div class="info-table ajaxSearchUpdate">
                             <table  class="table table-striped data-table-grid table-responsive">
                                <thead class="thead-dark">
                                    <tr>     
                                        <th>                    
                                            #                                            
                                        </th>                                              
                                        <th>
                                                                                                               
                                            <a href="javascript:ajaxLoad('{{$page}}','E', '{{$newOrder}}')">
                                                Job Number
                                            </a> 
                                            {{$orderFlag}}
                                        </th>                                             
                                        <th>Time Spent</th>
                                        <th>
                                                                                                              
                                            <a href="javascript:ajaxLoad('{{$page}}','D', '{{$newOrder}}')">
                                                Estimated Date
                                            </a>          
                                            {{$orderFlag}}
                                        </th>                                             
                                                                              
                                        <th>
                                                                                                              
                                            <a href="javascript:ajaxLoad('{{$page}}','A', '{{$newOrder}}')">
                                                Address
                                            </a>      
                                            {{$orderFlag}}
                                        </th>                                             
                                                                          
                                        <th>
                                                                                                              
                                            <a href="javascript:ajaxLoad('{{$page}}','DR', '{{$newOrder}}')">
                                                Driver                                            
                                            </a>      
                                            {{$orderFlag}}
                                        </th> 
                                                                                   
                                    </tr>                                    
                                </thead>
                                <tbody class="tbody searchable">    
                                    
                                    @if($woDetails->count() < 1)
                                        <tr class="even">
                                            <td colspan="5">No unit history data found.</td>
                                        </tr>
                                    @else 
                                                                                @foreach($woDetails as $value)
                                            @if($counter %2 == 0)
                                                <tr class="even">
                                            @else
                                                <tr class="odd">
                                            @endif                                            
                                                <td>{{($counter+1)}}</td>
                                                
                                                <td>{{$value->job_number}}</td>
                                                <td>{{$value->total_time_spent}}</td>
                                                <td>{{$value->date_time}}</td>
                                                <td> Pickup Address:{{$value->pickup_address}}
                                                    Destination Address: <a href="javascript:void(0);" class="report_address">{{$value->destination_address}}</a></td>                                                
                                                <td>{{$value->driver_name}}</td>
                                            </tr>   
                                                                                    @endforeach    
                                    @endif
                                </tbody>
                            </table>                            
                            <nav>
                                <ul class="pagination justify-content-end">
                                    {{ $woDetails->appends(['unit'=>$unit, 'start'=>$start, 'end'=>$end, 'field'=>$field, 'order'=>$order])->links('pagination.default') }}
                                </ul>
                            </nav>                            
                            <input type="hidden" name="field" id="field" value="{{$field}}">
                            <input type="hidden" name="order" id="order" value="{{$order}}">
                        </div>
                        <div class="loading">
                            <i class="fa fa-refresh fa-spin fa-2x fa-fw"></i><br/>
                            <span>Loading...</span>
                            <input type="hidden" name="start" id="start" value="{{$start}}">
                            <input type="hidden" name="end" id="end" value="{{$end}}">
                            <input type="hidden" name="unit" id="unit" value="{{$unit}}">                            
                        </div>            
                    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary btn-sm" data-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-outline-primary btn-sm">Save changes</button> -->
      </div>
    </div>
  </div>
</div>



<script type="text/javascript">

    $(document).unbind().on('click', '.ajaxSearchUpdate a.page-link', function (event) {
        event.preventDefault();
        ajaxLoad($(this).attr("customPageNumber"), $("#field").val(), $("#order").val());
    });

    function exportButton(flag) 
    {    
        if(flag == "less") {
            var URL = "{{url('/showWorkorder')}}" + '?unit='+$("#unit").val()+'&start='+$("#start").val()+'&end='+$("#end").val()+'&search='+$("#searchTxt").val()+'&field='+$("#field").val() +'&order='+$("#order").val()+"&doExport=1";
        } else {
            var URL = "{{url('/showWorkorder')}}" + '?unit='+$("#unit").val()+'&start='+$("#start").val()+'&end='+$("#end").val()+'&search='+$("#searchTxt").val()+'&field='+$("#field").val() +'&order='+$("#order").val()+"&doExport=1";
        }
        
        var win = window.open(URL, '_blank');
        win.focus();
    }
    
    function ajaxLoad(page, field, order) 
    {        
        var params = "{{url('/showWorkorder')}}" + '?unit='+$("#unit").val()+'&start='+$("#start").val()+'&end='+$("#end").val();
        if(page != "CLEAR") {
            params = params +'&search='+$("#searchTxt").val();                                  
            if(page != "") {
                params = params +'&page='+page;
            }
        
           if(field != "" && order != "") {
               params = params +'&field='+field +'&order='+order;  
           }           
        }  else if(page == "CLEAR") {
            $("#searchTxt").val(''); 
        }              
        
        $('.loading').show();
        $.ajax({
            type: "GET",
            url: params,
            contentType: false,
            success: function (data) {
                $(".ajaxSearchUpdate").html(data);
                $('.loading').hide();
            },
            error: function (xhr, status, error) {
                //alert(xhr.responseText);
            }
        });
    } 
    var modal = $('#wireless_telematics_modal'); 
    $(".report_address").click(function (){

        $("tr:odd").css("background-color","");
        $("tr:even").css("background-color","");
        var $tr = $(this).closest('tr'); 
        $tr.css('background-color', '#A9A9A9'); 
        
        var embed ="<div style='width: 100%;  height: 400px;'><iframe width='100%' height='600' frameborder='0'  style='border:0; margin-top: -150px;' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+encodeURIComponent( $(this).text() ) +"&amp;output=embed&amp'></iframe><div>";
       
             //$(this).html(embed);
             modal.find('.modal-dialog').css("left","10%");
             modal.find('.modal-dialog').css("top","50px");
             modal.find('.modal-title').text('Google Map Location');
              modal.find('.modal-body').html(embed);
              modal.modal('show');

    });        

</script>