{{-- ★ FILE: resources/views/backend/logs/index.blade.php --}}
@extends('backend.app')
@section('content')

<style>
    /* Premium & Responsive Table Design */
    .premium-card { border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: none; }
    
    .premium-table thead th { 
        background-color: #f8fafc; 
        color: #475569; 
        font-weight: 600; 
        text-transform: uppercase; 
        font-size: 13px; 
        padding: 12px 10px; 
    }
    
    .premium-table tbody td { 
        padding: 12px 10px; 
        vertical-align: middle; 
        color: #334155; 
        word-break: break-word; /* Text wrap to prevent scrolling */
    }

    .text-wrap-custom {
        white-space: normal !important;
        word-break: break-word;
        min-width: 180px;
        line-height: 1.6;
    }

    .badge-soft { 
        padding: 6px 10px; 
        border-radius: 6px; 
        font-weight: 600; 
        font-size: 12px; 
        text-decoration: none; 
        display: inline-block;
        white-space: nowrap; 
        margin: 2px 0;
        cursor: pointer;
    }
    .bg-soft-primary { background-color: #e0e7ff; color: #4338ca; border: 1px solid #c7d2fe; }
    .bg-soft-primary:hover { background-color: #c7d2fe; color: #3730a3; }
    
    .bg-soft-info { background-color: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
    .bg-soft-info:hover { background-color: #bae6fd; color: #0369a1; }
    
    .bg-soft-warning { background-color: #fef9c3; color: #854d0e; }

    /* Remove horizontal scroll */
    .table-responsive {
        overflow-x: auto;
    }
    
    @media (min-width: 992px) {
        .table-responsive { overflow-x: hidden; } /* No scroll on desktop */
    }
</style>

<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <h4 class="page-title"><i class="mdi mdi-history text-primary"></i> System Activity Logs</h4>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card premium-card">
            <div class="card-body">
                
                {{-- Filter Section --}}
                <form action="{{ route('admin.activity_logs') }}" method="GET" class="mb-4 bg-light p-3 rounded">
                    <div class="row align-items-end">
                        <div class="col-md-5 mb-3 mb-md-0">
                            <label for="user_id" class="form-label fw-bold">Filter by Worker</label>
                            <select name="user_id" id="user_id" class="form-select">
                                <option value="">All Workers & System Logs</option>
                                @foreach($workers as $worker)
                                    <option value="{{ $worker->id }}" {{ request('user_id') == $worker->id ? 'selected' : '' }}>
                                        {{ $worker->first_name }} {{ $worker->last_name }} ({{ $worker->mobile }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 mb-3 mb-md-0">
                            <button type="submit" class="btn btn-primary w-100"><i class="mdi mdi-filter"></i> Filter</button>
                        </div>
                        <div class="col-md-2">
                            <a href="{{ route('admin.activity_logs') }}" class="btn btn-outline-secondary w-100"><i class="mdi mdi-refresh"></i> Reset</a>
                        </div>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table premium-table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Date & Time</th>
                                <th>User</th>
                                <th>Action</th>
                                <th>Order Info</th>
                                <th>Activity Details</th>
                                <th>IP</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($logs as $log)
                                @php
                                    $rawText = $log->description ?? $log->note ?? '';
                                    $desc = htmlspecialchars($rawText);
                                    
                                    // Order ID Extract
                                    $extractedOrderId = $log->order_id;
                                    if(!$extractedOrderId && preg_match('/Order\s*#?(\d+)/i', $rawText, $matches)) {
                                        $extractedOrderId = $matches[1];
                                    }
                                    
                                    // Text Highlights
                                    $desc = preg_replace('/status changed to ([a-zA-Z0-9_ ]+)/i', 'status changed to <span class="badge-soft bg-soft-warning">$1</span>', $desc);
                                    $desc = preg_replace('/User ID: (\d+)/i', '<span class="badge-soft bg-soft-info"><i class="mdi mdi-account"></i> User ID: $1</span>', $desc);
                                    $desc = preg_replace('/(\d+) order\(s\)/i', '<strong class="text-dark">$1 order(s)</strong>', $desc);
                                @endphp
                            <tr>
                                <td class="text-muted fw-bold">#{{ $log->id }}</td>
                                
                                <td>
                                    <div class="fw-bold text-dark">{{ $log->created_at ? $log->created_at->format('d M, Y') : 'N/A' }}</div>
                                    <div class="text-muted small">{{ $log->created_at ? $log->created_at->format('h:i A') : '' }}</div>
                                </td>
                                
                                <td>
                                    @if($log->user)
                                        <div class="fw-bold text-primary">{{ $log->user->first_name }} {{ $log->user->last_name }}</div>
                                        <div class="small text-muted"><i class="mdi mdi-phone"></i> {{ $log->user->mobile ?? 'Worker' }}</div>
                                    @else
                                        <span class="badge bg-secondary">System</span>
                                    @endif
                                </td>
                                
                                <td>
                                    @php
                                        $actColor = 'bg-dark';
                                        if(stripos($log->action, 'create') !== false) $actColor = 'bg-success';
                                        if(stripos($log->action, 'update') !== false) $actColor = 'bg-info';
                                        if(stripos($log->action, 'delete') !== false) $actColor = 'bg-danger';
                                    @endphp
                                    <span class="badge {{ $actColor }} px-2 py-1">{{ strtoupper($log->action ?? 'LOG') }}</span>
                                </td>

                                {{-- ✅ Order ID & History Icon --}}
                                <td>
                                    @if($extractedOrderId)
                                        <div class="d-flex flex-column gap-1 align-items-start">
                                            <a href="{{ url('admin/orders/'.$extractedOrderId.'/edit') }}" target="_blank" class="badge-soft bg-soft-primary" title="View Order">
                                                <i class="mdi mdi-shopping-outline"></i> #{{ $extractedOrderId }}
                                            </a>
                                            <a href="javascript:void(0);" data-id="{{ $extractedOrderId }}" class="badge-soft bg-soft-info view-activity-log" title="View Full History">
                                                <i class="mdi mdi-history"></i> History
                                            </a>
                                        </div>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                
                                <td class="text-wrap-custom">
                                    {!! $desc !!} 
                                    @if(empty($rawText)) 
                                        <span class="text-danger small">(No details saved)</span>
                                    @endif
                                </td>
                                
                                <td>
                                    <div class="bg-light rounded px-2 py-1 d-inline-block border">
                                        <small class="text-muted fw-bold">{{ $log->ip_address ?? '127.0.0.1' }}</small>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center py-5">
                                    <i class="mdi mdi-folder-open-outline text-muted" style="font-size: 40px;"></i>
                                    <h5 class="text-muted mt-2">No activity logs found!</h5>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                <div class="mt-4 d-flex justify-content-end">
                    {!! $logs->appends(request()->query())->links('pagination::bootstrap-5') !!}
                </div>
                
            </div>
        </div>
    </div>
</div>

{{-- ✅ Activity Log Modal --}}
<div class="modal fade orderActivityLogModal" id="activityLogModal" tabindex="-1" aria-hidden="true" style="z-index: 99999;">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content" style="border-radius:16px; border:none; overflow: hidden;">
            <div class="modal-header border-bottom-0 bg-light py-3">
                <h5 class="modal-title fw-bold text-dark">Order Activity Log: <span id="logOrderId" class="text-primary"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 activityLogBody bg-white">Loading...</div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
$(document).ready(function() {
    // AJAX Request to load Order History in Modal
    $(document).on('click', '.view-activity-log', function (e) {
        e.preventDefault();
        const orderId = $(this).data('id');
        
        $('#logOrderId').text('#' + orderId);
        $('#activityLogModal').modal('show');
        
        $('.activityLogBody').html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div><div class="mt-2 text-muted fw-bold">Fetching logs... please wait.</div></div>');

        // Route URL 
        let logUrl = "{{ route('admin.order.history', ':id') }}".replace(':id', orderId);

        $.ajax({
            url: logUrl,
            type: 'GET',
            success: function (response) {
                $('.activityLogBody').html(response.html);
            },
            error: function(xhr) {
                $('.activityLogBody').html('<div class="text-danger text-center py-4 fw-bold"><i class="mdi mdi-alert-circle-outline" style="font-size: 40px;"></i><br>Error fetching logs.</div>');
            }
        });
    });
});
</script>
@endpush