@extends('layouts.main-layout')

@section('content')
<style>
    #template_download{
        background-color: #fff;
        border: 1px solid #2c2e3e !important;
    }
</style>
{{-- @include('dataTable_items.dataTable_buttons_css')

<!--DATATABLE EXPORT BUTTONS JS -->
@include('dataTable_items.dataTable_buttons') --}}
<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=" table-responsive text-dark table-bordered"
                style="min-height: 500px; padding:20px;">
                <div class="row d-flex"
                style="margin-bottom: 20px; margin-right: 5px;">
                {{-- <div class="row mb-3">
                    <a class="btn mx-3" href="{{ asset('assets/Templates/Forecast_Template.xlsx') }}" download
                    style="width:150px;" id="template_download">Download Template</a>
                </div> --}}
                     <div class="d-flex justify-content-end">
                        {{-- <form action="{{ route('forecast.import') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="d-flex">
                                <div class="">
                                    <input class="form-control" type="file" name="bulk_upload" id="bulk_upload">
                                </div>
                                <div class="mx-5">
                                    <button class="btn btn-primary" type="submit">Upload</button>
                                </div>
                            </div>
                        </form> --}}
                        <div class=" " style="">
                            <a class="btn btn-primary" href="{{ route('forecast.create') }}"
                        style="width: 150px;">Create Forecast</a>
                        </div>
                    </div>
                </div>
                    {{-- {!! $dataTable->table() !!} --}}
                    <table id="past_forecast" class="table">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Message</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>
    $(function() {
        var table = $('#past_forecast').DataTable({
            // processing: true,
            serverSide: true,
            ajax: "{{ route('forecast.incoming') }}",
            columns: [
                // { data: 'id', name: 'id' },
                { data: 'title', name: 'title' },
                {
                    data: 'message',
                    name: 'message',
                    render: function(data) {
                        return `<div class="text-wrap">${data}</div>`
                    }
                },
                // { data: 'banker', name: 'banker' },
                // { data: 'two_sure', name: 'two_sure' },
                // { data: 'three_direct', name: 'three_direct' },
                // { data: 'permutations', name: 'permutations' },
                // { data: 'message', name: 'message' },
                { 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' },
                // { data: 'action', name: 'action', orderable: false, searchable: false, visible: true, },
                // Add more columns here
            ],
            dom: 'Bfrtip', // Include export buttons
            order: [3, 'desc'],
            buttons: [
            {
                extend: 'copy',
                exportOptions: {
                    columns: [0, 1, 2] // Indexes of the columns to include in the export (0-based index)
                }
            },
            {
                extend: 'excel',
                exportOptions: {
                    columns: [0, 1, 2]
                },
                title: 'Lotto Forecast Data'
            },
            {
                extend: 'csv',
                exportOptions: {
                    columns: [0, 1, 2]
                },
                title: 'Lotto Forecast Data'
            },
            {
                extend: 'pdf',
                exportOptions: {
                    columns: [0, 1, 2]
                },
                title: 'Lotto Forecast Data'
            },
            {
                extend: 'print',
                exportOptions: {
                    columns: [0, 1, 2]
                },
                title: 'Lotto Forecast Data'
            }
        ]
        });

        // 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