@extends('adminlte::page')

@section('title', 'Payment Logs')

@section('content_header')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Payment Logs</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">Payment Logs</li>
                </ol>
            </div>
        </div>
    </div>
</section>
@stop

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Payment Transactions</h3>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ route('admin.paymentLogs') }}" class="mb-4">
                    <div class="row">
                        <div class="col-md-2 mb-3">
                            <label for="search">Search</label>
                            <input type="text" id="search" name="search" class="form-control" value="{{ $search }}" placeholder="Order ID / Receipt / Member / Email">
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="gateway">Gateway</label>
                            <select id="gateway" name="gateway" class="form-control">
                                <option value="">All</option>
                                @foreach($gateways as $gatewayOption)
                                    <option value="{{ $gatewayOption }}" @selected($gateway === $gatewayOption)>{{ ucfirst($gatewayOption) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="payment_result">Payment Result</label>
                            <select id="payment_result" name="payment_result" class="form-control">
                                <option value="">All</option>
                                @foreach($paymentResults as $paymentResultOption)
                                    <option value="{{ $paymentResultOption }}" @selected($paymentResult === $paymentResultOption)>{{ ucfirst($paymentResultOption) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="gateway_status">Gateway Status</label>
                            <select id="gateway_status" name="gateway_status" class="form-control">
                                <option value="">All</option>
                                @foreach($gatewayStatuses as $gatewayStatusOption)
                                    <option value="{{ $gatewayStatusOption }}" @selected($gatewayStatus === $gatewayStatusOption)>{{ $gatewayStatusOption }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="cms_status">CMS Sync</label>
                            <select id="cms_status" name="cms_status" class="form-control">
                                <option value="">All</option>
                                @foreach($cmsStatuses as $cmsStatusValue => $cmsStatusLabel)
                                    <option value="{{ $cmsStatusValue }}" @selected($cmsStatus === $cmsStatusValue)>{{ $cmsStatusLabel }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="source">Source</label>
                            <select id="source" name="source" class="form-control">
                                <option value="">All</option>
                                @foreach($sources as $sourceOption)
                                    <option value="{{ $sourceOption }}" @selected($source === $sourceOption)>{{ ucwords(str_replace('_', ' ', $sourceOption)) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2 mb-3">
                            <label for="from_date">From</label>
                            <input type="date" id="from_date" name="from_date" class="form-control" value="{{ $fromDate }}">
                        </div>
                        <div class="col-md-2 mb-3">
                            <label for="to_date">To</label>
                            <input type="date" id="to_date" name="to_date" class="form-control" value="{{ $toDate }}">
                        </div>
                        <div class="col-md-2 mb-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary btn-block">Filter</button>
                        </div>
                    </div>
                    <div>
                        <a href="{{ route('admin.paymentLogs') }}" class="btn btn-outline-secondary btn-sm">Reset Filters</a>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Date</th>
                                <th>Member</th>
                                <th>Order / Receipt</th>
                                <th>Gateway</th>
                                <th>Amount</th>
                                <th>Payment Result</th>
                                <th>Gateway Status</th>
                                <th>Verification</th>
                                <th>CMS Sync</th>
                                <th>Contact</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($orders as $order)
                                @php
                                    $memberName = trim((string) optional($order->user)->name);
                                    $memberId = (string) optional($order->user)->member_id;
                                    $detailPayload = $order->detail_payload ?? [];
                                @endphp
                                <tr>
                                    <td>{{ $order->id }}</td>
                                    <td>
                                        <div>{{ optional($order->created_at)->format('Y-m-d') }}</div>
                                        <small class="text-muted">{{ optional($order->created_at)->format('h:i A') }}</small>
                                    </td>
                                    <td>
                                        <div><strong>{{ $memberId !== '' ? $memberId : 'N/A' }}</strong></div>
                                        <small class="text-muted">{{ $memberName !== '' ? $memberName : 'Unknown member' }}</small>
                                    </td>
                                    <td>
                                        <div><strong>{{ $order->order_id }}</strong></div>
                                        <small class="text-muted">Receipt: {{ $order->receipt_id ?: 'N/A' }}</small>
                                    </td>
                                    <td>
                                        <span class="badge badge-info text-uppercase">{{ $order->payment_gateway ?: 'N/A' }}</span>
                                        <div class="small text-muted mt-1">{{ $order->payment_source ? ucwords(str_replace('_', ' ', $order->payment_source)) : 'N/A' }}</div>
                                    </td>
                                    <td>
                                        <strong class="text-success">₹{{ number_format((float) $order->amount, 2) }}</strong>
                                        <div class="small text-muted">{{ $order->currency ?: 'INR' }}</div>
                                    </td>
                                    <td>
                                        <div><span class="badge badge-{{ $order->payment_result_badge }}">{{ $order->payment_result_label }}</span></div>
                                    </td>
                                    <td>
                                        <div><span class="badge badge-{{ $order->gateway_status_badge }}">{{ $order->gateway_status_label }}</span></div>
                                        <small class="text-muted">Raw: {{ $order->payment_status ?: 'N/A' }}</small>
                                    </td>
                                    <td>
                                        <span class="badge badge-{{ $order->verification_badge }}">{{ $order->verification_label }}</span>
                                        <div class="small text-muted mt-1">
                                            {{ $order->verification_meta }}
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge badge-{{ $order->cms_sync_badge }}">{{ $order->cms_sync_label }}</span>
                                        @if($order->cms_sync_label !== 'Synced' && (int) $order->cms_attempt_count > 0)
                                            <div class="small text-muted mt-1">
                                                Attempt: {{ (int) $order->cms_attempt_count }}
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="small">{{ $order->email ?: 'No email' }}</div>
                                        <div class="small text-muted">{{ $order->phone ?: 'No phone' }}</div>
                                    </td>
                                    <td class="text-center">
                                        <button
                                            type="button"
                                            class="btn btn-sm btn-primary view-payment-details"
                                            data-id="{{ $order->id }}"
                                        >
                                            View Details
                                        </button>
                                        <script type="application/json" id="payment-log-{{ $order->id }}">
                                            @json($detailPayload, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE)
                                        </script>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="12" class="text-center text-muted">No payment logs found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="mt-3">
                    {{ $orders->links() }}
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="payment-log-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Payment Details #<span id="payment-log-modal-id"></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">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <tbody id="payment-log-modal-body"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
    #payment-log-modal-body th {
        width: 24%;
        background: #f4f6f9;
    }

    #payment-log-modal-body pre {
        margin: 0;
        white-space: pre-wrap;
        word-break: break-word;
        font-size: 12px;
    }
</style>
@stop

@section('js')
<script>
    $(function () {
        $('.view-payment-details').on('click', function () {
            const id = $(this).data('id');
            const rawJson = document.getElementById('payment-log-' + id)?.textContent || '{}';
            const payload = JSON.parse(rawJson);
            let html = '';

            Object.entries(payload).forEach(([key, value]) => {
                let displayValue = value;

                if (value === null || value === '') {
                    displayValue = '<span class="text-muted">N/A</span>';
                } else if (typeof value === 'object') {
                    displayValue = '<pre>' + $('<div>').text(JSON.stringify(value, null, 2)).html() + '</pre>';
                } else {
                    displayValue = $('<div>').text(String(value)).html();
                }

                html += '<tr><th>' + key + '</th><td>' + displayValue + '</td></tr>';
            });

            $('#payment-log-modal-id').text(id);
            $('#payment-log-modal-body').html(html);
            $('#payment-log-modal').modal('show');
        });
    });
</script>
@stop