@if($paginate == 0)
    <div class="modal-header">
        <h5 class="modal-title" id="CompanyDetailsModal">Record List</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div id="modal_dynamic_content">
            <div class="alert alert-danger print-error-msg" style="display:none">
                <ul></ul>
            </div>
            <div id="call_list_container">
@endif
                <table class="table table-striped" style="font-size: 11px">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Vehicle</th>
                            <th class="table_cell_content">VIN</th>
                            @if($transaction_type == 'leo' || $transaction_type == 'toyota_care')
                                <th class="table_cell_content cursorpointer" onclick="setOrderByColumn('customer_type');callListPaginationData(1, null, false)">Customer Type <span class="header_tag customer_type"></span></th>
                            @endif
                            <th class="table_cell_content">Phone</th>
                            @if($transaction_type == 'leo' || $transaction_type == 'toyota_care')
                                <th class="table_cell_content cursorpointer" onclick="setOrderByColumn('recent_transaction_date');callListPaginationData(1, null, false)">Transaction Date <span class="header_tag recent_transaction_date"><i class="fas fa-sort-up"></i></span></th>
                            @elseif($transaction_type == 'call_records')
                                <th class="table_cell_content cursorpointer" onclick="setOrderByColumn('remind');callListPaginationData(1, null, false)">Remind <span class="header_tag remind"><i class="fas fa-sort-up"></i></span></th>
                            @else
                                <th class="table_cell_content">Cell Phone</th>
                            @endif
                            <th style="text-align: center;">Make Call</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($records as $record)
                                                        <tr id="call_row_{{ $record->id }}_{{ $call_list_coid }}" style="{{ $background_color }} {{ $display_none }}">
                                @if($transaction_type == 'call_records')
                                    <td id="record_name_{{ $record->id }}">{{ $record->fname }} {{ $record->lname }}</td>
                                @else
                                    <td id="record_name_{{ $record->id }}">{{ $record->first_name }} {{ $record->last_name }}</td>
                                @endif
                                @if($transaction_type == 'leo' || $transaction_type == 'toyota_care')
                                    <td>{{ $record->year }} Toyota {{ $record->model }}</td>
                                @else
                                    <td>{{ $record->vehicle_year }} {{ $record->vehicle_make }} {{ $record->vehicle_model }}</td>
                                @endif
                                
                                <td class="table_cell_content">
                                    {{ $record->vin }}
                                    @if(in_array($record->vin, $global_removed_vins))
                                        &nbsp;&nbsp;<button class="btn btn-secondary btn-sm" id="ghosted_{{ $record->vin }}" data-toggle="popover" title="VIN Information" data-content="Loading..." data-trigger="click" onclick="setVinInfoToolTipData(event, 'ghosted', '{{ $record->vin }}')"><i class="fas fa-ghost" style="font-size: 16px"></i></button>
                                    @endif
                                    @if(in_array($record->vin, $recall_vins))
                                        &nbsp;&nbsp;<button class="btn btn-danger btn-sm" id="recall_{{ $record->vin }}" data-toggle="popover" title="VIN Information" data-content="Loading..." data-trigger="click" onclick="setVinInfoToolTipData(event, 'recall', '{{ $record->vin }}')"><i class="fas fa-exclamation-triangle" style="font-size: 16px"></i></button>
                                    @endif
                                </td>
                                @if($transaction_type == 'leo' || $transaction_type == 'toyota_care')
                                    <td class="table_cell_content">{{ $record->customer_type }}</td>
                                @endif
                                <td class="table_cell_content"><span style="{{ $strikeout_text }}">{{ preg_replace("/(\d{3})(\d{3})(\d{4})/", "\\1-\\2-\\3", $record->phone) }}</span></td>
                                @if($transaction_type == 'leo' || $transaction_type == 'toyota_care')
                                    <td class="table_cell_content">{{ date('m/d/Y', strtotime($record->recent_transaction_date)) }}</td>
                                @elseif($transaction_type == 'call_records')
                                    <td class="table_cell_content">{{ date('m/d/Y', strtotime($record->remind)) }}</td>
                                @else
                                    <td class="table_cell_content">{{ preg_replace("/(\d{3})(\d{3})(\d{4})/", "\\1-\\2-\\3", $record->cellphone) }}</td>
                                @endif
                                <td align="center">
                                    @if(isset($dnc_phones[$record->phone]))
                                        <a href="#" onclick="showAlertDialog(event, 'Sorry this is a DNC record!')"><i class="fas fa-exclamation-triangle" style="font-size: 25px"></i></a>
                                    @else
                                        <a href="#" onclick="showCallDialog(event, '{{ $record->id }}', '{{ $call_list_coid }}','{{ $transaction_type }}', '{{ $group_type }}')"><i class="fas fa-phone-square" style="font-size: 25px"></i></a>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div id="call_list_links">
                    {{ $records->links() }} 
                </div>
@if($paginate == 0)
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <form method="POST" id="call_records_form" action="" class="needs-validation" novalidate>
            <fieldset id="call_records_disable_form_fieldset">
                @csrf
                <input type="hidden" id="transaction_type" name="transaction_type" value="{{ $transaction_type }}">
                <input type="hidden" id="group_type" name="group_type" value="{{ $group_type }}">
                <input type="hidden" id="call_list_coid" name="call_list_coid" value="{{ $call_list_coid }}">
                <input type="hidden" name="order_by_column" id="order_by_column" value="">
                <input type="hidden" name="order_by_direction" id="order_by_direction" value="">
            </fieldset>
        </form>    
    </div>
    

    <script>
        $(document).ready(function()
        {
            $(document).on('click', '#call_list_links a',function(event)
            {
                event.preventDefault();
                $('li').removeClass('active');

                $(this).parent('li').addClass('active');
                var myurl = $(this).attr('href');
                var page=$(this).attr('href').split('page=')[1];
                callListPaginationData(page, null, 0);
            });
        });

        function callListPaginationData(page,id, showall)
        {
            var html = getLoadingContent();
            $("#call_list_container").empty().html(html);
            var order_by_column = $('#order_by_column').val();
            var order_by_direction = $('#order_by_direction').val();
            var form_values = $('#call_records_form').serialize();
            form_values+='&page='+page+'&id='+id+'&showall='+showall+'&paginate=1';
            $.ajax(
            {
                url: $('meta[name="main-url"]').attr('content')+'/call/make/call/dialog',
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                datatype: "html",
                data: form_values
            }).done(function(data){
                $("#call_list_container").empty().html(data);
                location.hash = page;


                $('.header_tag').html('');
                if(order_by_direction == 'asc')
                {
                    $('.'+order_by_column).html('<i class="fas fa-sort-up"></i>')
                } else {
                    $('.'+order_by_column).html('<i class="fas fa-sort-down"></i>')
                }



            }).fail(function(jqXHR, ajaxOptions, thrownError){
                  alert('No response from server');
            });
        }
    </script>
@endif