@extends('adminlte::page')

@section('title', 'Activity Log')

@section('content_header')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Activity Log</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Activity Log</li>
                </ol>
            </div>
        </div>
    </div>
</section>
@stop

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">List of Activity Records</h3>
                    </div>
                    
                    <div class="card-body table-responsive">
                        <table id="activity-log-table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Timestamp</th>
                                    <th>Event Name</th>
                                    <th>Membership No</th>
                                    <th>Amount</th>
                                    <th>Action Details</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($logs as $log)
                                @php
                                    $payload = is_array($log->payload) ? $log->payload : json_decode($log->payload, true);
                                    $amount = $payload['amount'] ?? $payload['details']['amount'] ?? 0;
                                    $email = $payload['customer_verification']['email'] ?? $payload['email'] ?? $payload['details']['email'] ?? null;
                                    $phone = $payload['customer_verification']['phone'] ?? $payload['phone'] ?? $payload['details']['phone'] ?? null;
                                    $status = $payload['status'] ?? null;
                                    $gateway = $payload['payment_gateway'] ?? null;
                                    $reason = $payload['reason'] ?? $payload['error'] ?? null;
                                @endphp
                                <tr>
                                    <td>{{ $log->id }}</td>
                                    <td>
                                        <div>{{ $log->created_at->format('Y-m-d') }}</div>
                                        <small class="text-muted">{{ $log->created_at->format('h:i A') }}</small>
                                    </td>
                                    <td>
                                        <span class="text-uppercase font-weight-bold" style="font-size: 0.85rem;">
                                            {{ str_replace('_', ' ', $log->event_name) }}
                                        </span>
                                        <br>
                                        @php
                                            $sourceText = str_replace('_', ' ', $log->source);
                                            $paymentType = $payload['payment_type'] ?? $payload['details']['payment_type'] ?? null;
                                            
                                            if ($log->source === 'make_payment' && $paymentType) {
                                                $sourceText .= ' - ' . $paymentType;
                                            }
                                        @endphp
                                        <small class="badge badge-light border text-uppercase">{{ $sourceText }}</small>
                                    </td>
                                    <td>
                                        @if($log->membership_no)
                                            <strong>{{ $log->membership_no }}</strong>
                                        @else
                                            <span class="text-muted">N/A</span>
                                        @endif
                                        @if(isset($payload['member_name']))
                                            <div class="small text-muted">{{ $payload['member_name'] }}</div>
                                        @endif
                                    </td>
                                    <td>
                                        @if($amount > 0)
                                            <span class="text-success font-weight-bold">₹{{ number_format($amount, 2) }}</span>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        <div class="small">
                                            @if($email) <div><i class="fas fa-envelope fa-fw text-muted mr-1 small"></i> {{ $email }}</div> @endif
                                            @if($phone) <div><i class="fas fa-phone-alt fa-fw text-muted mr-1 small"></i> {{ $phone }}</div> @endif
                                            @if($gateway) <div class="text-info"><i class="fas fa-credit-card fa-fw mr-1 small"></i> <span class="text-capitalize">{{ $gateway }}</span></div> @endif
                                            @if($reason) <div class="text-danger mt-1"><i class="fas fa-exclamation-triangle mr-1 small"></i> {{ Str::limit(str_replace('_', ' ', $reason), 40) }}</div> @endif
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-sm btn-primary view-details" 
                                            data-json="{{ json_encode($payload) }}"
                                            data-event="{{ strtoupper(str_replace('_', ' ', $log->event_name)) }}"
                                            data-id="{{ $log->id }}"
                                            data-ip="{{ $log->ip_address }}"
                                            data-ua="{{ $log->user_agent }}"
                                            data-time="{{ $log->created_at->format('Y-m-d H:i:s') }}">
                                            View Details
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>Timestamp</th>
                                    <th>Event Name</th>
                                    <th>Membership No</th>
                                    <th>Amount</th>
                                    <th>Action Details</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Details Modal -->
<div class="modal fade" id="modal-log-details" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Activity Details #<span id="log-id-display"></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered m-0" id="destructured-table">
                        <tbody id="log-details-body">
                            <!-- Populated via JS -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
    <style>
        #activity-log-table td { vertical-align: middle; }
        #destructured-table th { width: 35%; background-color: #f4f6f9; }
        .badge { font-weight: normal; }
    </style>
@stop

@section('js')
    <script>
        $(function () {
            $('#activity-log-table').DataTable({
                "responsive": true, 
                "autoWidth": false,
                "order": [[ 0, "desc" ]]
            });

            $('.view-details').on('click', function() {
                const id = $(this).data('id');
                const event = $(this).data('event');
                const json = $(this).data('json');
                const ip = $(this).data('ip');
                const ua = $(this).data('ua');
                const time = $(this).data('time');
                
                $('#log-id-display').text(id);
                
                let html = `
                    <tr><th>Event Name</th><td><strong>${event}</strong></td></tr>
                    <tr><th>Date & Time</th><td>${time}</td></tr>
                    <tr><th>IP Address</th><td><code>${ip}</code></td></tr>
                    <tr><th>Device Browser</th><td><small>${ua}</small></td></tr>
                `;

                function processObject(obj, prefix = '') {
                    for (const key in obj) {
                        if (key === 'client_info' || key === 'initiation_time') continue;
                        
                        const value = obj[key];
                        let label = (prefix + key).replace(/_/g, ' ').toUpperCase();
                        
                        // Clean up technical labels for better readability
                        label = label.replace('CUSTOMER VERIFICATION', 'CUSTOMER');
                        
                        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
                            processObject(value, key + ' > ');
                        } else {
                            let displayValue = value;
                            if (value === true) displayValue = '<span class="text-success">Yes</span>';
                            if (value === false) displayValue = '<span class="text-danger">No</span>';
                            if (value === null) displayValue = '<span class="text-muted">N/A</span>';
                            
                            html += `<tr><th>${label}</th><td>${displayValue}</td></tr>`;
                        }
                    }
                }

                processObject(json);
                $('#log-details-body').html(html);
                $('#modal-log-details').modal('show');
            });
        });
    </script>
@stop