@extends('layouts.layout-2')

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

    <div class="card">
        <div class="card-header">
            <div class="">
                <div class=" mb-2 text-right">
                    <a href="{{ route('travel_user_booking_fewo_detail', ['new']) }}" class="btn btn-sm btn-primary">Neue Buchung anlegen</a>
                </div>
                <div class="form-row align-items-center">
                    <div class="col-md-5 mb-3">
                        <label class="form-label" for="option_fewo_id">Filter FeWo</label>
                        <select class="custom-select" name="option_fewo_id" id="option_fewo_id">
                            <option value="">Filter aus</option>
                            @foreach($filter_fewo_options as $id=>$name)
                                <option value="{{$id}}">{{$name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-10 col-md-5 mb-3">
                        <label class="form-label" for="option_channel_id">Filter Kanal</label>
                        <select class="custom-select" name="option_channel_id" id="option_channel_id">
                            <option value="">Filter aus</option>
                            @foreach($filter_channel_options as $id=>$name)
                                <option value="{{$id}}">{{$name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-2 col-sm-2 mb-2 mt-4">
                        <a href="{{ route('travel_user_booking_fewos') }}?reset=filter" data-toggle="tooltip" data-placement="top"  title="Reset Filter" class="btn icon-btn btn-sm btn-outline-dark float-right">
                            <span class="fa fa-sync"></span>
                        </a>
                    </div>
                </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="">
            <table id="datatables-fewos" class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th style="max-width: 10px;">&nbsp;</th>
                    <th>{{__('ID')}}</th>
                    <th>{{__('FeWo')}}</th>
                    <th>{{__('Kunde')}}</th>
                    <th>{{__('vom')}}</th>
                    <th>{{__('bis')}}</th>
                    <th>{{__('Eingetragen')}}</th>
                    <th>{{__('Mails')}}</th>
                    <th>{{__('N.')}}</th>
                    <th>{{__('Kanal')}}</th>
                    <th>{{__('E-Mail')}}</th>
                    <th>{{__('Datum')}}</th>
                    <th>{{__('R.-Nr.')}}</th>
                    <th style="max-width: 60px;">{{__('delete')}}</th>
                </tr>
                </thead>
            </table>
            <div class="mr-4 mt-2 text-right">
                <a href="{{ route('travel_user_booking_fewo_detail', ['new']) }}" class="btn btn-sm btn-primary">Neue Buchung anlegen</a>
            </div>
        </div>
    </div>

    <script>
        $( document ).ready(function() {
            var table =$('#datatables-fewos').DataTable({
                "processing": true,
                "serverSide": true,
                "searching": true,
                ajax: {
                    url: '{!! route('data_table_travel_user_booking_fewos') !!}',
                    data: function(d) {
                        d.option_fewo_id = $('select[name=option_fewo_id]').val();
                        d.option_channel_id = $('select[name=option_channel_id]').val();
                    }
                },
                "columns": [
                    { data: 'action_edit', orderable: false, searchable: false},
                    { data: 'id', name: 'id' },
                    { data: 'fewo_lodging.name', name: 'fewo_lodging.name' },
                    { data: 'travel_user', name: 'travel_user', orderable: false, },
                    { data: 'from_date', name: 'from_date' },
                    { data: 'to_date', name: 'to_date' },
                    { data: 'is_calendar', name: 'is_calendar', orderable: false },
                    { data: 'is_mail', name: 'is_mail', orderable: false },
                    { data: 'booking_fewo_notice', name: 'booking_fewo_notice', orderable: false },
                    { data: 'travel_booking_fewo_channel.name', name: 'travel_booking_fewo_channel.name' },
                    { data: 'last_fewo_email', name: 'last_fewo_email' },
                    { data: 'booking_date', name: 'booking_date' },
                    { data: 'invoice_number', name: 'invoice_number' },
                    { data: 'action_delete', orderable: false, searchable: false},
                ],
                "order": [[ 1, "desc" ]],
                "bLengthChange": false,
                "iDisplayLength": 50,
                "language": {
                    "url": "/js/German.json"
                },
                drawCallback: function () {
                    $('#datatables-fewos [rel="tooltip"]').tooltip({trigger: "hover"});
                    $('#datatables-fewos [data-toggle="popover"]').popover({trigger: "hover", content: get_popover_content,  html: true,});
                }
            });
            $('#option_fewo_id').on('change', function(){
                table.draw();
            });
            $('#option_channel_id').on('change', function(){
                table.draw();
            });
            $('#datatables-fewos').tooltip({selector: '[data-toggle="tooltip"]'});

            function get_popover_content() {
                if ($(this).data('travel_user_booking_fewo_id')) {
                    var data = {};
                    data['action'] = $(this).data('action');
                    data['travel_user_booking_fewo_id'] = $(this).data('travel_user_booking_fewo_id');
                    $(this).addClass("loading");
                    var icontent = $.ajax({
                        url: '{!! route( 'travel_user_booking_fewo_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