@extends('layouts.app')

@section('title', 'Cron Log')

@push('styles')
    <!-- Add CSRF token meta tag for AJAX requests -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        /* Ensure datepicker is visible */
        .datepicker {
            z-index: 1060 !important;
        }
    </style>
@endpush

@section('content')
    <div class="page-title">
        <div class="title_left">
            <h3>Cron Log</h3>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Date Filter</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row">
                        <div class="col-md-12">
                            <form id="filter-form" class="form-horizontal form-label-left">
                                <div class="form-group row">
                                    <label class="control-label col-md-2 col-sm-2">Select Date</label>
                                    <div class="col-md-3 col-sm-3">
                                        <input type="date" class="form-control" id="selected-date" name="selected-date"
                                            value="{{ $startDate }}">
                                    </div>
                                    <div class="col-md-4 col-sm-4">
                                        <button type="button" class="btn btn-primary" id="apply-filter">Apply</button>
                                        <button type="button" class="btn btn-default" id="today-filter">Today</button>
                                        <button id="download-csv" class="btn btn-info btn-sm">
                                            <i class="fa fa-file-csv"></i> Download CSV
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Log Details</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="table-responsive">
                        <table id="logs-table" class="table table-striped table-bordered dt-responsive nowrap"
                            cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>S.No</th>
                                    <th>Cron</th>
                                    <th>No. of Calls</th>
                                    <th>Total</th>
                                    <th>Not Sent</th>
                                    <th>Last Run</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Log Details Modal -->
    <div class="modal fade" id="log-details-modal" tabindex="-1" role="dialog" aria-labelledby="logDetailsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="logDetailsModalLabel">Log Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="log-details-loader" class="text-center my-3" style="display:none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                        <p>Loading details...</p>
                    </div>
                    <table id="cron-details-table" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Timestamp</th>
                                <th>Total</th>
                                <th>Not Sent</th>
                                <th>Duration</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="module">
        $(document).ready(function() {
            // Setup CSRF for all AJAX requests
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialize DataTable
            var table = $('#logs-table').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 50,
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                order: [
                    [5, 'desc']
                ], // Default order by last_run descending
                ajax: {
                    url: "{{ route('cron.logs.grouped') }}",
                    type: "POST",
                    data: function(d) {
                        d.start_date = $('#selected-date').val();
                    },
                    error: function(xhr, error, code) {
                        console.error('DataTable AJAX Error:', error, code);
                        console.error('Response:', xhr.responseText);
                    }
                },
                columns: [{
                        data: 'sno',
                        name: 'sno',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'cron',
                        name: 'cron'
                    },
                    {
                        data: 'call_count',
                        name: 'call_count'
                    },
                    {
                        data: 'total_sum',
                        name: 'total_sum'
                    },
                    {
                        data: 'not_sent_sum',
                        name: 'not_sent_sum'
                    },
                    {
                        data: 'last_run',
                        name: 'last_run'
                    },
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return '<button class="btn btn-primary btn-sm view-details" data-cron="' +
                                row.cron + '">View Details</button>';
                        }
                    }
                ]
            });

            // Apply filter button click
            $('#apply-filter').on('click', function(e) {
                e.preventDefault();
                table.ajax.reload(null, false); // false = stay on current page
            });

            // Today filter button click
            $('#today-filter').on('click', function(e) {
                e.preventDefault();
                var today = new Date().toISOString().split('T')[0];
                $('#selected-date').val(today);
                table.ajax.reload(null, true); // true = reset to first page
            });

            // Add form submit handler
            $('#filter-form').on('submit', function(e) {
                e.preventDefault();
                $('#apply-filter').click();
            });

            // View details button click
            $('#logs-table').on('click', '.view-details', function() {
                var cron = $(this).data('cron');
                var date = $('#selected-date').val();

                var tbody = $('#cron-details-table tbody');
                tbody.empty();
                $('#log-details-loader').show();
                $('#log-details-modal').modal('show');

                $.post("{{ route('cron.logs.details.by.cron') }}", {
                    cron: cron,
                    start_date: date,
                    _token: $('meta[name="csrf-token"]').attr('content')
                }, function(response) {
                    tbody.empty();
                    $.each(response, function(i, log) {
                        tbody.append('<tr>' +
                            '<td>' + log.sno + '</td>' +
                            '<td>' + log.timestamp + '</td>' +
                            '<td>' + log.total + '</td>' +
                            '<td>' + log.not_sent + '</td>' +
                            '<td>' + log.execution_time + '</td>' +
                            '</tr>');
                    });
                }).fail(function(xhr, status, error) {
                    console.error('Error loading cron details:', error);
                    tbody.append(
                        '<tr><td colspan="5" class="text-center text-danger">Error loading details</td></tr>'
                    );
                }).always(function() {
                    $('#log-details-loader').hide();
                });
            });

            $('#download-csv').click(function() {
                let date = $('#selected-date').val();
                if (!date) {
                    alert("Please select a date first.");
                    return;
                }
                window.location.href = "{{ route('cron.logs.export', 'csv') }}" + "?date=" + date;
            });
        });
    </script>
@endpush