@extends('layouts.layout-2')

@section('content')

    <h4 class="font-weight-bold py-3 mb-4">
        {{ __('Anfragen') }}
    </h4>

    <div class="card">
        <div class="table-responsive-track" id="datatables-leads-scroll">
            <div class="table-responsive-thumb" id="datatables-leads-thumb">
            </div>
        </div>
        <div class="card-datatable table-responsive" id="datatables-leads-table">
            <table class="datatables-leads table table-striped table-bordered" id="datatables-leads">
                <thead>
                <tr>
                    <th style="max-width: 60px;">&nbsp;</th>
                    <th>{{__('LeadID')}}</th>
                    <th>{{__('KundenID')}}</th>
                    <th>{{__('Vorname')}}</th>
                    <th>{{__('Nachname')}}</th>
                    <th>{{__('E-Mail')}}</th>
                    <th>{{__('Anfrage-Datum')}}</th>
                    <th>{{__('Reiseland')}}</th>
                    <th>{{__('N.')}}</th>
                    <th>{{__('Sachbearbeiter')}}</th>
                    <th>{{__('Status')}}</th>
                    <th>{{__('E-Mail')}}</th>
                    <th style="max-width: 60px;">{{__('delete')}}</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

    <script>
        $( document ).ready(function() {
            var table =  $('#datatables-leads').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": '{!! route('data_table_leads') !!}',
                "order": [[ 1, "desc" ]],
                "columns": [
                    { data: 'action_edit', orderable: false, searchable: false},
                    { data: 'id', name: 'id' },
                    { data: 'customer_id', name: 'customer_id' },
                    { data: 'customer.firstname', name: 'customer.firstname' },
                    { data: 'customer.name', name: 'customer.name' },
                    { data: 'customer.email', name: 'customer.email' },
                    { data: 'request_date', name: 'request_date' },
                    { data: 'travel_country', name: 'travel_country', orderable: false  },
                    { data: 'lead_notice', name: 'lead_notice', orderable: false },
                    { data: 'sf_guard_user.last_name', name: 'sf_guard_user.last_name',  searchable: false },
                    { data: 'status', name: 'status' },
                    { data: 'last_lead_email', name: 'last_lead_email',  orderable: true },
                    { data: 'action_delete', orderable: false, searchable: false},
                ],
                "bLengthChange": false,
                "iDisplayLength": 100,
                "language": {
                    "url": "/js/German.json"
                },
                drawCallback: function () {
                    dataTableScrollTrack('#datatables-leads');
                    $('#datatables-leads [rel="tooltip"]').tooltip({trigger: "hover"});
                    $('#datatables-leads [data-toggle="popover"]').popover({trigger: "hover", content: get_popover_content,  html: true,});
                }
            });

          
            function get_popover_content() {
                if ($(this).data('lead_id')) {
                    var data = {};
                    data['action'] = $(this).data('action');
                    data['lead_id'] = $(this).data('lead_id');
                    $(this).addClass("loading");
                    var icontent = $.ajax({
                        url: '{!! route( 'lead_ajax_requests' ) !!}',
                        data: data,
                        type: "POST",
                        dataType: "html",
                        cache: false,
                        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                        encode: true,
                        async: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function() {
                            // just get the response
                        },
                        error: function() {
                            // nothing
                        }
                    }).responseText;
                    $(this).removeClass("loading");
                    return icontent;
                }
                return "Keine Buchungs-ID";
            }
        });
    </script>



@endsection