@extends('layouts.main-layout')

@section('content')
<style>
    #dropdownMenuButton{
        background-color: #09E9E9;
    }
    .no-export{
        display: none;
    }
    @media print {
    .no-print {
        display: none !important;
    }
}
</style>

<div class="row mt-5">
    <div class="col-lg-12">
        {{-- <div class="card card-statistics"> --}}
            <div class="card-body" style="background-color: #fff;">
                <div class="datatable-wrapper table-responsive text-dark table-bordered"
                style="min-height: 500px; padding:20px;">
                <div class="row d-flex justify-content-end"
                style="margin-bottom: 20px; margin-right: 5px;">
                    {{-- <a class="btn btn-primary" href="{{ route('forecast.create') }}"
                    style="width: 150px;">Create Forecast</a> --}}
                </div>
                    {{-- {!! $dataTable->table() !!} --}}
                    <table id="past_forecast" class="table">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Banker</th>
                                <th>Two Sure</th>
                                <th>Three Direct</th>
                                <th>Permutations</th>
                                <th>Schedule</th>
                                <th>Created At</th>
                                {{-- <th>Actions</th> --}}
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        {{-- </div> --}}
    </div>
</div>

{{-- {{ $dataTable->scripts() }} --}}

{{-- <script>
    $(document).ready(function () {
        $('#datatable').DataTable({
            dom: 'Bfrtip',
            buttons: ['copy', 'excel', 'csv', 'pdf', 'print']
        });
    });
</script> --}}

<script>
    $(function() {
        var table = $('#past_forecast').DataTable({
            // processing: true,
            serverSide: true,
            ajax: "{{ route('forecast.past') }}",
            columns: [
                // { data: 'id', name: 'id' },
                { data: 'title', name: 'title' },
                { data: 'banker', name: 'banker' },
                { data: 'two_sure', name: 'two_sure' },
                { data: 'three_direct', name: 'three_direct' },
                { data: 'permutations', name: 'permutations' },
                { data: 'schedule', name: 'schedule' },
                { data: 'created_at', name: 'created_at',
                    render: function(data) {
                    return moment(data).format('YYYY-MM-DD HH:mm:ss'); // Format using moment.js
                    }
                },
                // { data: 'action', name: 'action', orderable: false, searchable: false, visible: true, },
                // Add more columns here
            ],
            dom: 'Bfrtip', // Include export buttons
            buttons: [
            {
                extend: 'copy',
                exportOptions: {
                    columns: [0, 1] // Indexes of the columns to include in the export (0-based index)
                }
            },
            {
                extend: 'excel',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6]
                }
            },
            {
                extend: 'csv',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6]
                }
            },
            {
                extend: 'pdf',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6]
                }
            },
            {
                extend: 'print',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6]
                }
            }
        ]
        });

        // Adjust column visibility when exporting
        // table.on('preXhr.dt', function (e, settings, data) {
        //     if (data.draw == 1) {
        //         table.columns([2]).visible(false);
        //     }
        // });

        // table.on('draw.dt', function () {
        //     table.columns([2, 3, 4]).visible(true);
        // });
    });
</script>


@endsection