@include('include.datatable-css')

<div class="row">
    <div class="col-md-12 text-end">
        <input id="dateRangeEle-2" class='dateRangeEle status-ele cursor-pointer text-center rounded' type="text" size="40" data-bs-toggle="tooltip" title="Select date range">
    </div>
</div>

<div class="dt-responsive table-responsive">
    <table id="simpletable" class="table table-striped table-bordered nowrap">
        <thead>
            <tr>
                <th>Package</th>
                <th>Customer</th>
                <th>Status</th>
                <th>From Date</th>
                <th>To Date</th>
                <th>Date & Time</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($paused_packages as $record)
                <tr>
                    <td>
                        {{ $record->package->title }}
                    </td>
                    <td>
                        @isset($record->user)
                            {{ $record->user->firstName . ' ' . $record->user->lastName }}
                        @endisset
                    </td>
                    <td>
                        @if ($record->type == "P")
                            Paused
                        @elseif ($record->type == "S")
                            Skipped
                        @endif
                    </td>
                    <td>
                        {{ $record->from_date }}
                    </td>
                    <td>
                        {{ $record->to_date }}
                    </td>
                    <td>
                        {{ $record->created_at }}
                    </td>
                    <td>
                        <a href="{{ route('paused-package-history-details', ['record' => $record->id]) }}" class="avtar avtar-xs btn-link-secondary btn-pc-default" data-bs-toggle="tooltip" data-bs-original-title="Details">
                            <i class="ti ti-eye f-18"></i>
                        </a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

@include('include.datatable')

<script>
    new DateRangePicker('dateRangeEle-2',
        {
            timePicker: true,
            opens: 'left',
            ranges: {
                'Today': [moment().startOf('day'), moment().endOf('day')],
                'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
                'This Month': [moment().startOf('month').startOf('day'), moment().endOf('month').endOf('day')],
            },
            locale: {
                format: "YYYY-MM-DD HH:mm:ss",
            }
        },
        function (start, end) {
            let url = "{{ route('packages') }}";

            start = start.format('YYYY-MM-DD HH:mm:ss');
            end = end.format('YYYY-MM-DD HH:mm:ss');

            location.href = url + '?startDate=' + start + '&endDate=' + end + '&tab=2';
        }
    );
</script>

<script>
    $(document).ready(function () {
        $('#pausedPackagesTable thead tr')
            .clone(true)
            .addClass('filters')
            .addClass('filters-2')
            .appendTo('#pausedPackagesTable thead');

        var table = $('#pausedPackagesTable').DataTable({
            fixedColumns: {
                leftColumns: 1,
                rightColumns: 1
            },
            dom: 'Bfrtip',
            buttons: [
            {
                extend: 'copyHtml5',
                exportOptions: {
                columns: [0, ':visible']
                }
            },
                'csv',
            {
                extend: 'excelHtml5',
                exportOptions: {
                columns: ':visible'
                }
            },
            'colvis'
            ],
            orderCellsTop: true,
            fixedHeader: true,
            initComplete: function () {
                var api = this.api();

                // For each column
                api
                    .columns()
                    .eq(0)
                    .each(function (colIdx) {
                        // Set the header cell to contain the input element
                        var cell = $('.filters-2 th').eq(
                            $(api.column(colIdx).header()).index()
                        );
                        var title = $(cell).text();

                        if (colIdx == 6) {
                            $(cell).html('');
                        } else {
                            $(cell).html('<input class="form-control" type="text" placeholder="' + title + '" />');
                        }

                        // On every keypress in this input
                        $(
                            'input',
                            $('.filters-2 th').eq($(api.column(colIdx).header()).index())
                        )
                            .off('keyup change')
                            .on('change', function (e) {
                                // Get the search value
                                $(this).attr('title', $(this).val());
                                var regexr = '({search})'; //$(this).parents('th').find('select').val();

                                var cursorPosition = this.selectionStart;
                                // Search the column for that value
                                api
                                    .column(colIdx)
                                    .search(
                                        this.value != ''
                                            ? regexr.replace('{search}', '(((' + this.value + ')))')
                                            : '',
                                        this.value != '',
                                        this.value == ''
                                    )
                                    .draw();
                            })
                            .on('keyup', function (e) {
                                e.stopPropagation();

                                $(this).trigger('change');
                                $(this)
                                    .focus()[0]
                                    .setSelectionRange(cursorPosition, cursorPosition);
                            });
                    });
            },
        });
    });
</script>