@extends('layouts.app')

@section('title', 'Web 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>Web 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 Levels</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>Level</th>
                                    <th>Message</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-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 class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>ID:</label>
                                <p id="log-id"></p>
                            </div>
                            <div class="form-group">
                                <label>Channel:</label>
                                <p id="log-channel"></p>
                            </div>
                            <div class="form-group">
                                <label>Level:</label>
                                <p id="log-level"></p>
                            </div>
                            <div class="form-group">
                                <label>Date:</label>
                                <p id="log-date"></p>
                            </div>
                            <div class="form-group">
                                <label>Message:</label>
                                <pre id="log-message" class="pre-scrollable" style="max-height: 200px;"></pre>
                            </div>
                            <div class="form-group">
                                <label>Context:</label>
                                <pre id="log-context" class="pre-scrollable" style="max-height: 300px;"></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('logs.web.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: 'level',
                        name: 'level',
                        render: function(data, type, row) {
                            var badge = 'bg-info';
                            var upperData = data.toUpperCase();
                            if (upperData === 'ERROR' || upperData === 'CRITICAL' || upperData ===
                                'ALERT' || upperData === 'EMERGENCY') {
                                badge = 'bg-danger';
                            } else if (upperData === 'WARNING') {
                                badge = 'bg-warning';
                            } else if (upperData === 'NOTICE') {
                                badge = 'bg-primary';
                            } else if (upperData === 'DEBUG') {
                                badge = 'bg-secondary';
                            }
                            return '<span class=" badge ' + badge + '">' + data + '</span>';
                        }
                    },
                    {
                        data: 'message',
                        name: 'message',
                        render: function(data, type, row) {
                            // Truncate message if it's too long
                            if (type === 'display' && data.length > 100) {
                                return data.substr(0, 100) + '...';
                            }
                            return data;
                        }
                    },
                    {
                        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"]
                }]
            });
            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('ERROR');

                // 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-channel').text('Loading...');
                $('#log-level').text('Loading...');
                $('#log-date').text('Loading...');
                $('#log-message').text('Loading...');
                $('#log-context').text('Loading...');

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

                // Fetch log details
                $.ajax({
                    url: "{{ route('logs.web.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-channel').text(response.channel);
                        $('#log-level').text(response.level);
                        $('#log-date').text(response.created_at);
                        $('#log-message').text(response.message);

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