@extends('layouts.user_type.auth')
@section('laravelLog')
    <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        .stacktrace-pre { background:var(--smoke); border:1px solid var(--border); border-radius:var(--r-md); padding:0.75rem 1rem; margin-top:0.5rem; font-family:var(--mono); font-size:0.7rem; color:var(--grey-dark); white-space:pre-wrap; word-break:break-all; line-height:1.6; }
    </style>
<div class="container-fluid py-4 px-4">
    @include('components.alert')
    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
                <h5 class="mb-0" style="font-weight:700;">Error Logs</h5>
                <p class="mb-0" style="font-size:0.75rem;color:var(--grey);margin-top:2px;">Laravel application error and exception records.</p>
            </div>
            <form action="{{ route('laravelLog.show') }}" method="GET">
                <div class="input-group" style="width:260px;">
                    <span class="input-group-text" style="background:var(--faint);border:1px solid var(--border-m);border-right:none;border-radius:var(--r-md) 0 0 var(--r-md);">
                        <i class="fas fa-calendar-alt" style="font-size:0.75rem;color:var(--grey);"></i>
                    </span>
                    <input type="text" id="daterange" name="filter_date_range" class="form-control" style="border-left:none;border-radius:0 var(--r-md) var(--r-md) 0;" value="{{ request('filter_date_range') }}" placeholder="Filter by date range" />
                </div>
            </form>
        </div>
        <div class="card-body p-0">
            <div style="max-height:calc(100vh - 270px);overflow-y:auto;overflow-x:auto;border:none;">
                <table class="table mb-0" style="min-width:780px;table-layout:fixed;">
                    <thead>
                        <tr>
                            <th style="width:5%;padding-left:1.25rem;">#</th>
                            <th style="width:15%;">Timestamp</th>
                            <th style="width:80%;">Log Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($logs as $index => $log)
                            <tr>
                                <td style="padding-left:1.25rem;"><span class="mono" style="font-size:0.72rem;color:var(--grey);">{{ str_pad($logs->firstItem()+$index,2,'0',STR_PAD_LEFT) }}</span></td>
                                <td>
                                    <span class="mono" style="font-size:0.72rem;color:var(--grey-mid);display:block;">{{ \Carbon\Carbon::parse($log['date'])->format('d-m-Y') }}</span>
                                    <span class="mono" style="font-size:0.67rem;color:var(--grey);">{{ \Carbon\Carbon::parse($log['date'])->format('H:i:s') }}</span>
                                </td>
                                <td style="word-break:break-word;white-space:normal;">
                                    <a href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#st-{{ $index }}" style="color:var(--heading);text-decoration:none;font-weight:500;font-size:0.8rem;display:flex;align-items:flex-start;gap:0.5rem;">
                                        <span style="width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--qc-danger-soft),var(--qc-danger-soft));border:1px solid var(--qc-danger-soft);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;">
                                            <i class="fas fa-exclamation" style="font-size:0.52rem;color:var(--qc-danger);"></i>
                                        </span>
                                        {{ $log['content'] }}
                                    </a>
                                    <div class="collapse" id="st-{{ $index }}">
                                        <pre class="stacktrace-pre">@if(isset($log['stacktrace'])&&!empty($log['stacktrace'])){{ $log['stacktrace'] }}@else No stacktrace available. @endif</pre>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="3"><div class="empty-state"><i class="fas fa-check-circle" style="color:var(--qc-success)!important;"></i><p style="color:var(--qc-success)!important;">No error logs — all clear!</p></div></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="px-4 py-3" style="border-top:1px solid var(--border);">
                @include('components.pagination', ['paginator' => $logs])
            </div>
        </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