@extends('layouts.app')

@section('title', __('whatsappnotification::lang.whatsapp_notification') . ' - ' . __('whatsappnotification::lang.notification_logs'))

@section('content')

@component('components.widget', ['class' => 'box-primary'])
    @slot('title')
        <i class="fab fa-whatsapp" style="color: #25D366;"></i> {{ __('whatsappnotification::lang.notification_logs') }}
    @endslot
    @slot('tool')
        <a href="{{ route('whatsappnotification.settings') }}" class="btn btn-primary btn-sm">
            <i class="fas fa-cog"></i> {{ __('whatsappnotification::lang.settings') }}
        </a>
    @endslot

    @if(session('status'))
        @if(session('status.success'))
            <div class="alert alert-success">{{ session('status.msg') }}</div>
        @else
            <div class="alert alert-danger">{{ session('status.msg') }}</div>
        @endif
    @endif

    {{-- Summary Stats --}}
    <div class="row" style="margin-bottom: 15px;">
        <div class="col-md-3">
            <div class="info-box bg-green">
                <span class="info-box-icon"><i class="fas fa-check"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Successful</span>
                    <span class="info-box-number">{{ $logs->where('status', 'success')->count() }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-box bg-red">
                <span class="info-box-icon"><i class="fas fa-times"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Failed</span>
                    <span class="info-box-number">{{ $logs->where('status', 'failed')->count() }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-box bg-yellow">
                <span class="info-box-icon"><i class="fas fa-clock"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Pending</span>
                    <span class="info-box-number">{{ $logs->where('status', 'pending')->count() }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-box bg-aqua">
                <span class="info-box-icon"><i class="fas fa-paper-plane"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Total Sent</span>
                    <span class="info-box-number">{{ $logs->total() }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>#</th>
                    <th>{{ __('whatsappnotification::lang.log_date') }}</th>
                    <th>{{ __('whatsappnotification::lang.log_customer') }}</th>
                    <th>{{ __('whatsappnotification::lang.log_mobile') }}</th>
                    <th>{{ __('whatsappnotification::lang.log_invoice') }}</th>
                    <th>{{ __('whatsappnotification::lang.log_amount') }}</th>
                    <th>{{ __('whatsappnotification::lang.log_status') }}</th>
                    <th>{{ __('whatsappnotification::lang.log_error') }}</th>
                    <th>{{ __('whatsappnotification::lang.log_response_status') }}</th>
                    <th>{{ __('whatsappnotification::lang.actions') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse($logs as $index => $log)
                    <tr>
                        <td>{{ $logs->firstItem() + $index }}</td>
                        <td>{{ \Carbon\Carbon::parse($log->created_at)->format('d M Y h:i A') }}</td>
                        <td>{{ $log->customer_name ?? '—' }}</td>
                        <td>{{ $log->mobile_number }}</td>
                        <td>
                            @if($log->transaction_id)
                                <a href="#" data-toggle="tooltip" title="Transaction #{{ $log->transaction_id }}">
                                    {{ $log->invoice_no ?? 'N/A' }}
                                </a>
                            @else
                                {{ $log->invoice_no ?? '—' }}
                            @endif
                        </td>
                        <td>{{ $log->total_amount ? number_format($log->total_amount, 2) : '—' }}</td>
                        <td>
                            @if($log->status === 'success')
                                <span class="label label-success"><i class="fas fa-check"></i> {{ __('whatsappnotification::lang.status_success') }}</span>
                            @elseif($log->status === 'failed')
                                <span class="label label-danger"><i class="fas fa-times"></i> {{ __('whatsappnotification::lang.status_failed') }}</span>
                            @else
                                <span class="label label-warning"><i class="fas fa-clock"></i> {{ __('whatsappnotification::lang.status_pending') }}</span>
                            @endif
                        </td>
                        <td>
                            @if($log->error_message)
                                <span class="text-danger" data-toggle="tooltip" title="{{ $log->error_message }}">
                                    {{ \Illuminate\Support\Str::limit($log->error_message, 40) }}
                                </span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td>
                            @if($log->response_status)
                                <code>{{ $log->response_status }}</code>
                            @else
                                —
                            @endif
                        </td>
                        <td>
                            @if($log->status === 'failed')
                                <form action="{{ route('whatsappnotification.retry', $log->id) }}" method="POST" style="display: inline;">
                                    @csrf
                                    <button type="submit" class="btn btn-xs btn-warning" title="{{ __('whatsappnotification::lang.retry') }}">
                                        <i class="fas fa-redo"></i> {{ __('whatsappnotification::lang.retry') }}
                                    </button>
                                </form>
                            @endif
                            @if($log->request_payload)
                                <button type="button" class="btn btn-xs btn-info view-payload-btn" 
                                    data-toggle="modal" data-target="#payloadModal"
                                    data-payload="{{ htmlspecialchars($log->request_payload) }}"
                                    data-response="{{ htmlspecialchars($log->response_body ?? '') }}">
                                    <i class="fas fa-eye"></i> Details
                                </button>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="10" class="text-center text-muted">
                            <i class="fas fa-inbox fa-2x"></i><br>
                            {{ __('whatsappnotification::lang.no_logs') }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    <div class="text-center">
        {{ $logs->links() }}
    </div>

    <hr>
    <div class="text-center" style="padding: 10px 0; color: #999; font-size: 12px;">
        <i class="fab fa-whatsapp" style="color: #25D366;"></i> 
        <strong>WhatsApp Connect</strong> v{{ config('whatsappnotification.module_version', '1.0') }} — 
        {{ __('whatsappnotification::lang.powered_by') }} | 
        <a href="https://bigbrainstechnolabs.com" target="_blank" style="color: #25D366;">bigbrainstechnolabs.com</a>
    </div>

@endcomponent

{{-- Payload Detail Modal --}}
<div class="modal fade" id="payloadModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title"><i class="fas fa-code"></i> Request / Response Details</h4>
            </div>
            <div class="modal-body">
                <h5><strong>Request Payload:</strong></h5>
                <pre id="modal_payload" style="max-height: 300px; overflow: auto; background: #272822; color: #f8f8f2; padding: 15px; border-radius: 5px;"></pre>
                <h5><strong>Response Body:</strong></h5>
                <pre id="modal_response" style="max-height: 300px; overflow: auto; background: #272822; color: #f8f8f2; padding: 15px; border-radius: 5px;"></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@stop

@section('javascript')
<script>
$(document).ready(function() {
    // Tooltips
    $('[data-toggle="tooltip"]').tooltip();

    // View payload modal
    $('.view-payload-btn').on('click', function() {
        var payload = $(this).data('payload');
        var response = $(this).data('response');

        // Try to pretty-print JSON
        try {
            payload = JSON.stringify(JSON.parse(payload), null, 2);
        } catch(e) { /* keep as-is */ }

        try {
            response = JSON.stringify(JSON.parse(response), null, 2);
        } catch(e) { /* keep as-is */ }

        $('#modal_payload').text(payload || 'N/A');
        $('#modal_response').text(response || 'N/A');
    });
});
</script>
@endsection