@extends('layouts.user_type.auth')

@section('laravelLog')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <div>
        @include('components.alert')
        <div class="card mb-4 mx-4">
            <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                <h3 class="mb-0">Error Logs</h3>

                <form action="{{ route('laravelLog.show') }}" method="GET" class="d-flex">
                    <input type="text" id="daterange" name="filter_date_range" class="form-control form-control-sm"
                        value="{{ request('filter_date_range') }}" />
                </form>

            </div>
            <div class="card-body px-0 pt-0 pb-2">
                <div class="table-responsive p-4">
                    <table class="table align-items-center mb-0">
                        <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Timestamp
                                </th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Log Details
                                </th>
                            </tr>
                        </thead>
                        <tbody>

                            @forelse($logs as $index => $log)
                                <tr>
                                    <td class="ps-4">
                                        <p class="text-xs font-weight-bold mb-0">{{ $logs->firstItem() + $index }}</p>
                                    </td>
                                    <td class="text-xs font-weight-bold mb-0">
                                        <p class="text-xs font-weight-bold mb-0">
                                            {{ \Carbon\Carbon::parse($log['date'])->format('d-m-Y | H:i:s') ?? 'N/A' }}</p>
                                    </td>
                                    <td class="text-xs font-weight-bold mb-0">
                                        <!-- Main log entry with toggle link -->
                                        <a href="javascript:void(0);" data-bs-toggle="collapse"
                                            data-bs-target="#stacktrace-{{ $index }}" aria-expanded="false"
                                            aria-controls="stacktrace-{{ $index }}">
                                            {{ $log['content'] }}
                                        </a>

                                        <!-- Stacktrace (hidden by default) -->
                                        <div class="collapse" id="stacktrace-{{ $index }}">
                                            @if (isset($log['stacktrace']) && !empty($log['stacktrace']))
                                                <pre class="text-xs font-weight-light mb-0">{{ $log['stacktrace'] }}</pre>
                                            @else
                                                <pre class="text-xs font-weight-light mb-0">No stacktrace available.</pre>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center py-5">
                                        <img src="{{ asset('assets/img/no_data_found.png') }}" alt="No Data Found"
                                            style="width: 200px; opacity: 0.6;">
                                        <p class="mt-2 text-muted">No log data Found</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @include('components.pagination', ['paginator' => $logs])
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#daterange').daterangepicker({
                locale: {
                    format: 'YYYY-MM-DD',
                },
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')],
                }
            }).on('apply.daterangepicker', function(ev, picker) {
                $(this).closest('form').submit();
            });
        });
    </script>
@endsection