@extends('layouts.app')

@section('title', 'SQL 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>SQL 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>
                                    <label class="control-label col-md-1 col-sm-1">Level</label>
                                    <div class="col-md-2 col-sm-2">
                                        <select class="form-control" id="selected-level" name="selected-level">
                                            <option value="">All Platform</option>
                                            @foreach ($logLevels as $level)
                                                <option value="{{ $level }}"
                                                    {{ $level == $selectedLevel ? 'selected' : '' }}>
                                                    {{ $level }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-2 col-sm-2">
                                        <button type="button" class="btn btn-primary" id="apply-filter">Apply</button>
                                        <button type="button" class="btn btn-default" id="today-filter">Today</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>ID</th>
                                    <th>Platform</th>
                                    <th>Time Taken</th>
                                    <th>File</th>
                                    <th>Line</th>
                                    <th>Date</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-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="logDetailsModalLabel">Log Details</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-3 mb-2">
                            <strong>ID:</strong> <span id="log-id" class="text-muted"></span>
                        </div>
                        <div class="col-md-3 mb-2">
                            <strong>Platform:</strong> <span id="log-platform" class="text-muted"></span>
                        </div>
                        <div class="col-md-3 mb-2">
                            <strong>Time Taken:</strong> <span id="log-time_taken"></span>
                        </div>
                        <div class="col-md-3 mb-2">
                            <strong>Date:</strong> <span id="log-date" class="text-muted"></span>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <h6 class="mb-2"><strong>SQL Query:</strong></h6>
                            <div class="border rounded p-3 bg-light" style="max-height: 400px; overflow-y: auto;">
                                <pre id="log-sql_query" class="mb-0"
                                    style="white-space: pre-wrap; word-wrap: break-word; font-family: 'Courier New', Courier, monospace; font-size: 13px;"></pre>
                            </div>
                        </div>
                    </div>
                </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: 100,
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                ajax: {
                    url: "{{ route('sql.logs.data') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: function(d) {
                        var selectedDate = $('#selected-date').val();
                        var selectedLevel = $('#selected-level').val();
                        d.start_date = selectedDate;
                        d.end_date = selectedDate;
                        d.level = selectedLevel;
                        d._token = $('meta[name="csrf-token"]').attr('content');
                        return d;
                    },
                    error: function(xhr, error, thrown) {

                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'platform',
                        name: 'platform'
                    },
                    {
                        data: 'time_taken',
                        name: 'time_taken',
                        render: function(data, type, row) {
                            // Convert milliseconds to seconds
                            var seconds = (data / 1000).toFixed(3);

                            var badge = 'bg-info';
                            if (seconds >= 5) {
                                badge = 'bg-danger';
                            } else if (seconds >= 1) {
                                badge = 'bg-warning';
                            } else if (seconds <= 1) {
                                badge = 'bg-primary';
                            }
                            return '<span class=" badge ' + badge + '">' + seconds + ' s</span>';
                        }
                    },
                    {
                        data: 'file',
                        name: 'file'
                    },
                    {
                        data: 'line',
                        name: 'line'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        render: function(data, type, row) {
                            return moment(data).format('YYYY-MM-DD HH:mm:ss');
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        render: function(data, type, row) {
                            return '<button type="button" class="btn btn-primary btn-sm view-details" data-id="' +
                                row.id + '">View Details</button>';
                        }
                    }
                ],
                order: [
                    [0, 'desc']
                ],
                columnDefs: [{
                    targets: '_all',
                    orderSequence: ["asc", "desc"]
                }]
            });

            // Ensure the table is drawn immediately

            table.draw();

            // Apply filter button click
            $('#apply-filter').on('click', function(e) {
                e.preventDefault(); // Prevent form submission
                var selectedDate = $('#selected-date').val();


                // Force a complete reload of the table
                table.ajax.reload(null, true);

            });

            // Today filter button click
            $('#today-filter').on('click', function(e) {
                e.preventDefault(); // Prevent form submission
                var today = new Date().toISOString().split('T')[0]; // Format: YYYY-MM-DD
                $('#selected-date').val(today);
                $('#selected-level').val('admin');

                // Force a complete reload of the table
                table.ajax.reload(null, true);


            });

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

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

                // Show loading state
                $('#log-id').text('Loading...');
                $('#log-platform').text('Loading...');
                $('#log-time_taken').text('Loading...');
                $('#log-date').text('Loading...');
                $('#log-sql_query').text('Loading...');

                // Show modal
                $('#log-details-modal').modal('show');

                // Fetch log details
                $.ajax({
                    url: "{{ route('sql.logs.details') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('#log-id').text(response.id);
                        $('#log-platform').text(response.platform);
                        $('#log-time_taken').text((response.time_taken / 1000).toFixed(3) +
                            ' seconds');
                        $('#log-date').text(response.created_at);
                        $('#log-sql_query').text(response.sql_query);

                        // Format JSON context if available
                        if (response.context) {
                            try {
                                var formattedContext = JSON.stringify(response.context, null,
                                    2);
                                $('#log-context').text(formattedContext);
                            } catch (e) {
                                $('#log-context').text(response.context);
                            }
                        } else {
                            $('#log-context').text('No context data available');
                        }
                    },
                    error: function() {
                        $('#log-id').text('Error loading data');
                        $('#log-channel').text('Error loading data');
                        $('#log-level').text('Error loading data');
                        $('#log-date').text('Error loading data');
                        $('#log-message').text('Error loading data');
                        $('#log-context').text('Error loading data');
                    }
                });
            });
        });
    </script>
@endpush