@extends('layouts.layout-2')

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

    <div class="card">
        <div class="ui-bordered px-4 pt-3 mb-0">
             <div class="form-row align-items-center">
                 <div class="col-md-4 mb-4">
                     <label class="form-label" for="travel_option_search">Filter Anreise</label>
                     <select class="custom-select" name="travel_option_search" id="travel_option_search">
                         <option value="">Filter aus</option>
                         <option value="before_2">Anreise vor 2 Monaten</option>
                         <option value="brefore_1">Anreise vor 1 Monat</option>
                         <option value="on_site">vor Ort</option>
                         <option value="after_1">Anreise in 1 Monat</option>
                         <option value="after_1">Anreise in 2 Monat</option>
                     </select>
                 </div>
                 <div class="col-md-4 mb-4">
                     <label class="form-label">Filter Anreise Datum</label>
                     <div class="row">
                         <div class="input-group col-6 pr-0">
                             <div class="input-group-prepend">
                                 <span class="input-group-text">ab</span>
                             </div>
                             <input class="form-control datepicker-base" name="arrival_start_date" 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="arrival_end_date" type="text" value="">
                         </div>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
                     <label class="form-label">Filter Abreise Datum</label>
                     <div class="row">
                         <div class="input-group col-6 pr-0">
                             <div class="input-group-prepend">
                                 <span class="input-group-text">ab</span>
                             </div>
                             <input class="form-control datepicker-base" name="departure_start_date" 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="departure_end_date" type="text" value="">
                         </div>
                     </div>
                 </div>
             </div>
            <div class="form-row align-items-center">
                <div class="col-5 col-sm-2 mb-4">
                    <label class="form-label">LeadID</label>
                    <input class="form-control full_search" name="full_lead_id_search" placeholder="suche" type="text" value="">
                </div>
                <div class="col-6 col-sm-3 mb-4">
                    <label class="form-label">Vorname</label>
                    <input class="form-control full_search" name="full_firstname_search" placeholder="suche"  type="text" value="">
                </div>
                <div class="col-6 col-sm-3 mb-4">
                    <label class="form-label">Nachname</label>
                    <input class="form-control full_search" name="full_lastname_search" placeholder="suche"  type="text" value="">
                </div>

                <div class="col-5 col-sm-2 mb-4">
                    <label class="form-label">BookingID</label>
                    <input class="form-control full_search" name="full_booking_id_search" placeholder="suche"  type="text" value="">
                </div>
                <div class="col-2 col-sm-2 mb-4 mt-4">
                    <a href="{{ route('requests') }}" class="btn icon-btn btn-sm btn-outline-dark float-right">
                        <span class="far fa-sync"></span>
                    </a>
                </div>
            </div>

        </div>

        <div class="card-datatable table-responsive py-2">
            <input type="hidden" name="sort_travel_country_id" value="">
            <input type="hidden" name="sort_travelagenda_id" value="">
            <input type="hidden" name="sort_travel_documents" value="">
            <input type="hidden" name="sort_sf_guard_user_id" value="">
            <input type="hidden" name="sort_lead_status_id" value="">

            <table id="datatables-requests" class="table table-striped table-bordered">

                <thead>
                <tr>
                    <!--<th style="max-width: 1px;">&nbsp;</th> -->
                    <th>{{__('LeadID')}}</th>
                    <th>{{__('Vorname')}}</th>
                    <th>{{__('Nachname')}}</th>
                    <th>{{__('BookingID')}}</th>
                    <th>{{__('Land')}}</th>
                    <th>{{__('Reise')}}</th>
                    <th>{{__('Anreise')}}</th>
                    <th>{{__('Abreise')}}</th>
                    <th>{{__('Reiseunterlage')}}</th>
                    <th>{{__('Sachbearbeiter')}}</th>
                    <th>{{__('Status')}}</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

    <script>
        $( document ).ready(function() {

            var table = $('#datatables-requests').DataTable({
                "processing": true,
                "serverSide": true,
                "searching": false,
               ajax: {
                   url: '{!! route( 'data_table_requests' ) !!}',
                   data: function(d) {
                       d.arrival_start_date = $('input[name=arrival_start_date]').val();
                       d.arrival_end_date = $('input[name=arrival_end_date]').val();
                       d.departure_start_date = $('input[name=departure_start_date]').val();
                       d.departure_end_date = $('input[name=departure_end_date]').val();
                       d.sort_travel_country_id = $('input[name=sort_travel_country_id]').val();
                       d.sort_travelagenda_id = $('input[name=sort_travelagenda_id]').val();
                       d.sort_travel_documents = $('input[name=sort_travel_documents]').val();
                       d.sort_sf_guard_user_id = $('input[name=sort_sf_guard_user_id]').val();
                       d.sort_lead_status_id = $('input[name=sort_lead_status_id]').val();
                       d.full_firstname_search = $('input[name=full_firstname_search]').val();
                       d.full_lastname_search = $('input[name=full_lastname_search]').val();
                       d.full_lead_id_search = $('input[name=full_lead_id_search]').val();
                       d.full_booking_id_search = $('input[name=full_booking_id_search]').val();
                       d.travel_option_search = $('select[name=travel_option_search]').val();
                   }
               },
                "columns": [
                   // { data: 'action_edit', orderable: false, searchable: false},
                    { data: 'lead_id', name: 'lead_id' },
                    { data: 'participant_firstname', name: 'participant_firstname' },
                    { data: 'participant_name', name: 'participant_name' },
                    { data: 'id', name: 'id' },
                    { data: 'travel_country_id', name: 'travel_country_id', orderable: false  },
                    { data: 'travelagenda_id', name: 'travelagenda_id', orderable: false },
                    { data: 'start_date', name: 'start_date' },
                    { data: 'end_date', name: 'end_date' },
                    { data: 'travel_documents', name: 'travel_documents', orderable: false },
                    { data: 'sf_guard_user_id', name: 'sf_guard_user_id', orderable: false },
                    { data: 'lead.status_id', name: 'lead.status_id', orderable: false },

                ],
                "bLengthChange": false,
                "iDisplayLength": 50,
                "orderSequence": ["desc", "asc"],
                "order": [[ 3, "desc" ]],
                "language": {
                    "url": "/js/German.json"
                },

                initComplete: function () {
                    this.api().columns(4).every( function () {
                        var column = this;
                        var title = $(column.header()).html();
                        var select = $('<select class="selectpicker"><option value="">'+title+'</option></select>')
                            .appendTo( $(column.header()).empty() )
                            .on( 'change', function () {
                                $('input[name=sort_travel_country_id]').val($(this).val());
                                table.order( [ 3, 'desc' ] ).draw();
                            } );
                        column.data().unique().sort().each( function ( d, j ) {
                            if(d !== ""){
                                var text = $(d+' span').text();
                                if(text != "" && text != "-"){
                                    select.append( '<option value="'+$(d).data('order')+'">'+ $(d+' span').text()+'</option>' );
                                }
                            }
                        } );
                    } );
                    this.api().columns(5).every( function () {
                        var column = this;
                        var title = $(column.header()).html();
                        var select = $('<select class="selectpicker"><option value="">'+title+'</option></select>')
                            .appendTo( $(column.header()).empty() )
                            .on( 'change', function () {
                                $('input[name=sort_travelagenda_id]').val($(this).val());
                                table.order( [ 3, 'desc' ] ).draw();
                            } );
                        column.data().unique().sort().each( function ( d, j ) {
                            if(d !== ""){
                                var text = $(d+' span').text();
                                if(text != "" && text != "-"){
                                    select.append( '<option value="'+$(d).data('order')+'">'+ $(d+' span').text()+'</option>' );
                                }
                            }
                        } );
                    } );

                    this.api().columns(8).every( function () {
                        var column = this;
                        var title = $(column.header()).html();
                        var select = $('<select class="selectpicker"><option value="">'+title+'</option></select>')
                            .appendTo( $(column.header()).empty() )
                            .on( 'change', function () {
                                $('input[name=sort_travel_documents]').val($(this).val());
                                table.order( [ 3, 'desc' ] ).draw();
                            } );
                        column.data().unique().sort().each( function ( d, j ) {
                            if(d !== ""){
                                console.log($(d).data('order'));
                                var text = $(d).data('order') ? "Ja" : "Nein";
                                if(text != "" && text != "-"){
                                    select.append( '<option value="'+$(d).data('order')+'">'+ text+'</option>' );
                                }
                            }
                        } );
                    } );

                    this.api().columns(9).every( function () {
                        var column = this;
                        var title = $(column.header()).html();
                        var select = $('<select class="selectpicker"><option value="">'+title+'</option></select>')
                            .appendTo( $(column.header()).empty() )
                            .on( 'change', function () {
                                $('input[name=sort_sf_guard_user_id]').val($(this).val());
                                table.order( [ 3, 'desc' ] ).draw();
                            } );
                        column.data().unique().sort().each( function ( d, j ) {
                            if(d !== ""){
                                var text = $(d+' span').text();
                                if(text != "" && text != "-"){
                                    select.append( '<option value="'+$(d).data('order')+'">'+ $(d+' span').text()+'</option>' );
                                }
                            }
                        } );
                    } );

                   $('.selectpicker').selectpicker();
                }

            });

            $('#travel_option_search').on('change', function(){
                if($(this).val() != ""){
                    $('.datepicker-base').removeClass('active');
                    $('.datepicker-base').addClass('deactive');
                    $(this).removeClass('deactive');
                    $(this).addClass('active');
                    $('.datepicker-base').val(null);

                }else{
                    $('.datepicker-base').removeClass('deactive');
                    $(this).removeClass('active');
                }
                table.order( [ 3, 'desc' ] ).draw();
             //   console.log($(this).val());
              //  console.log($(this).attr('name'));
            });


            $('.datepicker-base').on('change', function(){
                if($(this).val() != ""){
                    $('#travel_option_search').removeClass('active');
                    $('#travel_option_search').addClass('deactive');
                    $('.datepicker-base').removeClass('deactive');
                    $('.datepicker-base').addClass('active');
                    $('#travel_option_search').val(null);
                }else{
                    $('.datepicker-base').removeClass('active');
                    $('#travel_option_search').removeClass('deactive');
                }
                table.order( [ 3, 'desc' ] ).draw();
              //  console.log($(this).val());
              //  console.log($(this).attr('name'));
            });


            $('.full_search').on('keyup', function(){
                table.order( [ 3, 'desc' ] ).draw();
               // console.log($(this).val());
               // console.log($(this).attr('name'));
            });
        });
    </script>



@endsection