@extends('layouts.layout-2')

@section('content')
    <h4 class="font-weight-bold py-3 mb-1">
        Buchungen Anfragen
    </h4>
    <div class="card">
        {!! Form::open(['url' => route('admin_report_export_leads'), 'class' => '']) !!}
        {!! Form::hidden('order', '[[0, "asc"]]', ['id'=>'order_table']) !!}
        <div class="ui-bordered px-4 pt-3 mb-0">
            <div class="form-row align-items-center">

                {{--  
                    <div class="col-12 col-md-3 mb-2">
                    <label class="form-label" for="filter_option_leads_id">Filter FeWo</label>
                        <select class="custom-select" name="filter_option_leads_id" id="filter_option_leads_id">
                            <option value="">alle ...</option>
                            @foreach($filter_leads_options as $id=>$name)
                                <option value="{{$id}}">{{$name}}</option>
                            @endforeach
                        </select>
                </div>
                --}}
                <div class="col-12 col-md-4 mb-2">
                    <label class="form-label">Anfragedatum</label>
                    <div class="row">
                        <div class="input-group col-6 pr-0">
                            <div class="input-group-prepend">
                                <span class="input-group-text">von</span>
                            </div>
                            <input class="form-control datepicker-base" name="filter_date_from" type="text" value="">
                        </div>

                        <div class="input-group col-6 pl-1">
                            <div class="input-group-prepend">
                                <span class="input-group-text">bis</span>
                            </div>
                            <input class="form-control datepicker-base" name="filter_date_to" type="text" value="">
                        </div>
                    </div>
                </div>

        
                <div class="col-2 mb-4">
                    <a href="{{ route('admin_report_leads') }}" class="btn icon-btn btn-sm btn-outline-dark mt-4">
                        <span class="fa fa-sync"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="table-responsive-track" id="datatables-report-scroll">
            <div class="table-responsive-thumb" id="datatables-report-thumb">
            </div>
        </div>
        <div class="card-datatable table-responsive" id="datatables-report-table">
            <table class="datatables-report table table-striped table-bordered" id="datatables-report">
                <thead>
                <tr>
                    <th>{{__('LeadID')}}</th>
                    <th>{{__('KundenID')}}</th>
                    <th>{{__('Vorname')}}</th>
                    <th>{{__('Nachname')}}</th>
                    <th>{{__('E-Mail')}}</th>
                    <th>{{__('Anfrage-Datum')}}</th>
                    <th>{{__('Reiseland')}}</th>
                    <th>{{__('Sachbearbeiter')}}</th>
                    <th>{{__('Status')}}</th>
                    <th>{{__('E-Mail')}}</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

            <div class="mt-4 col">
                <div class="d-none" id="filter-btn-show">
                     <button type="submit" name="export" value="export" class="btn btn-primary"><i class="ion"></i> Export </button>
                </div>
                <div class="alert alert-danger" id="filter-btn-hide">
                    Max. Export 1000 Einträge, über Datum filtern.
                </div>
            </div>
        </div>
        {!! Form::close() !!}
    </div>

    <script>
        $( document ).ready(function() {
            var table = $('.datatables-report').DataTable({
                "processing": true,
                "serverSide": true,
                "searching": false,
                "ajax": {
                    "url": '{!! route( 'admin_report_leads_datatable' ) !!}',
                    "data": function(d) {
                        d.filter_date_from = $('input[name=filter_date_from]').val();
                        d.filter_date_to = $('input[name=filter_date_to]').val();
                    }
                },
                "columns": [
                    { 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: '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 },
                ],
                "order": [[ 0, "desc" ]],
                "orderSequence": ["desc", "asc"],
                "bLengthChange": false,
                "iDisplayLength": 100,
                "language": {
                    "url": "/js/German.json"
                },
                drawCallback: function (settings) {
                    dataTableScrollTrack('#datatables-report');

                    if(settings.json.recordsTotal > 1000){
                        $('#filter-btn-hide').removeClass('d-none');
                        $('#filter-btn-show').addClass('d-none');
                    }else{
                        $('#filter-btn-hide').addClass('d-none');
                        $('#filter-btn-show').removeClass('d-none');
                    }
                    $('#order_table').val(table.order());
                    $('#datatables-report [rel="tooltip"]').tooltip({trigger: "hover"});
                    $('#datatables-report [data-toggle="popover"]').popover({trigger: "hover", content: get_popover_content,  html: true,});
                }
            });
            $('#filter_option_leads_id, #filter_is_cleared, #filter_sort_by').on('change', function(){
               // console.log("asd");
                table.order( [ 0, 'desc' ] ).draw();
            });
            $('.datepicker-base').on('change', function(){
                table.order( [ 0, 'desc' ] ).draw();
            });

            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