@extends('layouts.header')

@section('content')
<style>
    .icici-test-container { padding: 20px; }
    .card { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 20px; }
    .card h3 { color: #333; margin-bottom: 20px; border-bottom: 2px solid #ff6b00; padding-bottom: 10px; }
    .form-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; }
    .form-group { flex: 1; min-width: 200px; }
    .form-group label { display: block; font-weight: 600; margin-bottom: 5px; color: #555; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
    .form-group input:focus, .form-group select:focus { border-color: #ff6b00; outline: none; }
    .btn { padding: 12px 25px; border: none; border-radius: 5px; cursor: pointer; font-weight: 600; }
    .btn-primary { background: #ff6b00; color: #fff; }
    .btn-primary:hover { background: #e05d00; }
    .btn-success { background: #28a745; color: #fff; }
    .btn-info { background: #17a2b8; color: #fff; }
    .response-box { background: #f8f9fa; border: 1px solid #ddd; border-radius: 5px; padding: 15px; margin-top: 15px; max-height: 400px; overflow: auto; }
    .response-box pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; font-size: 13px; }
    .status-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
    .status-PENDING { background: #ffc107; color: #000; }
    .status-INITIATED { background: #17a2b8; color: #fff; }
    .status-PROCESSING { background: #007bff; color: #fff; }
    .status-SUCCESS { background: #28a745; color: #fff; }
    .status-FAILED { background: #dc3545; color: #fff; }
    .history-table { width: 100%; border-collapse: collapse; }
    .history-table th, .history-table td { padding: 10px; border: 1px solid #ddd; text-align: left; }
    .history-table th { background: #f0f0f0; }
    .history-table tr:hover { background: #f9f9f9; }
    .section-tabs { display: flex; gap: 10px; margin-bottom: 20px; }
    .section-tabs .tab { padding: 10px 20px; background: #e0e0e0; border-radius: 5px 5px 0 0; cursor: pointer; }
    .section-tabs .tab.active { background: #ff6b00; color: #fff; }
</style>

<div class="icici-test-container">
    <h2 style="color: #333; margin-bottom: 20px;">
        <i class="fa fa-bank"></i> ICICI Payment API - Test Console
    </h2>
    
    <!-- Initiate Payment Card -->
    <div class="card">
        <h3><i class="fa fa-paper-plane"></i> Initiate Payment</h3>
        <form id="initiateForm">
            <div class="form-row">
                <div class="form-group">
                    <label>Payment Mode *</label>
                    <select name="mode" id="mode" required>
                        <option value="NEFT">NEFT</option>
                        <option value="RTGS">RTGS (Min ₹2,00,000)</option>
                        <option value="IMPS">IMPS (Max ₹5,00,000)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Amount (₹) *</label>
                    <input type="number" name="amount" id="amount" placeholder="150000.00" step="0.01" required>
                </div>
                <div class="form-group">
                    <label>Payment Source</label>
                    <select name="payment_source" id="payment_source">
                        <option value="TEST">TEST</option>
                        <option value="INVOICE">INVOICE</option>
                        <option value="ADVANCE">ADVANCE</option>
                        <option value="SALARY">SALARY</option>
                        <option value="IMPREST">IMPREST</option>
                        <option value="TRAVEL">TRAVEL</option>
                        <option value="DIRECT">DIRECT EXPENSE</option>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label>Beneficiary Name *</label>
                    <input type="text" name="beneficiary_name" id="beneficiary_name" placeholder="Vendor Company Pvt Ltd" required>
                </div>
                <div class="form-group">
                    <label>Beneficiary Account No *</label>
                    <input type="text" name="beneficiary_account" id="beneficiary_account" placeholder="324560901267" required>
                </div>
                <div class="form-group">
                    <label>Beneficiary IFSC *</label>
                    <input type="text" name="beneficiary_ifsc" id="beneficiary_ifsc" placeholder="SBIN0003060" style="text-transform:uppercase" required>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label>Remarks</label>
                    <input type="text" name="remarks" id="remarks" placeholder="Invoice payment INV/2026/001">
                </div>
                <div class="form-group">
                    <label>Payment Number (Optional)</label>
                    <input type="text" name="payment_number" id="payment_number" placeholder="Auto-generated if empty">
                </div>
            </div>
            
            <button type="submit" class="btn btn-primary" id="btnInitiate">
                <i class="fa fa-send"></i> Initiate Payment
            </button>
        </form>
        
        <div class="response-box" id="initiateResponse" style="display:none;">
            <strong>API Response:</strong>
            <pre id="initiateResponseJson"></pre>
        </div>
    </div>
    
    <!-- Check Status Card -->
    <div class="card">
        <h3><i class="fa fa-search"></i> Check Payment Status</h3>
        <form id="statusForm">
            <div class="form-row">
                <div class="form-group">
                    <label>Request ID *</label>
                    <input type="text" name="request_id" id="status_request_id" placeholder="NEFT20260204163000123" required>
                </div>
                <div class="form-group">
                    <label>Mode</label>
                    <select name="mode" id="status_mode">
                        <option value="NEFT">NEFT</option>
                        <option value="RTGS">RTGS</option>
                        <option value="IMPS">IMPS</option>
                    </select>
                </div>
                <div class="form-group" style="display:flex; align-items:flex-end;">
                    <button type="submit" class="btn btn-info" id="btnStatus">
                        <i class="fa fa-refresh"></i> Check Status
                    </button>
                </div>
            </div>
        </form>
        
        <div class="response-box" id="statusResponse" style="display:none;">
            <strong>Status Response:</strong>
            <pre id="statusResponseJson"></pre>
        </div>
    </div>
    
    <!-- Recent Payments Card -->
    <div class="card">
        <h3><i class="fa fa-history"></i> Recent Payments</h3>
        <table class="history-table" id="paymentsTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Request ID</th>
                    <th>Mode</th>
                    <th>Amount</th>
                    <th>Beneficiary</th>
                    <th>Status</th>
                    <th>UTR</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentPayments ?? [] as $pmt)
                <tr>
                    <td>{{ $pmt->id }}</td>
                    <td><code>{{ $pmt->request_id }}</code></td>
                    <td>{{ $pmt->mode }}</td>
                    <td style="text-align:right;">₹{{ number_format($pmt->amount, 2) }}</td>
                    <td>{{ $pmt->beneficiary_name }}<br><small>{{ $pmt->beneficiary_account }}</small></td>
                    <td><span class="status-badge status-{{ $pmt->api_status }}">{{ $pmt->api_status }}</span></td>
                    <td>{{ $pmt->utr_number ?? '-' }}</td>
                    <td>{{ $pmt->created_at ? $pmt->created_at->format('d-M-Y H:i') : '-' }}</td>
                    <td>
                        <button class="btn btn-info btn-sm" onclick="checkStatusFor('{{ $pmt->request_id }}', '{{ $pmt->mode }}')" title="Check Status">
                            <i class="fa fa-refresh"></i>
                        </button>
                        <button class="btn btn-success btn-sm" onclick="viewLogs('{{ $pmt->request_id }}')" title="View Logs">
                            <i class="fa fa-file-text"></i>
                        </button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="9" style="text-align:center; padding:30px; color:#999;">No payments found. Make your first test payment above.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
        
        <div style="margin-top:15px;">
            <button class="btn btn-success" onclick="refreshPage()">
                <i class="fa fa-refresh"></i> Refresh List
            </button>
            <button class="btn btn-info" onclick="bulkStatusCheck()">
                <i class="fa fa-check-circle"></i> Bulk Status Check
            </button>
        </div>
    </div>
    
    <!-- Logs Modal -->
    <div id="logsModal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:9999;">
        <div style="background:#fff; max-width:800px; margin:50px auto; border-radius:10px; max-height:80vh; overflow:hidden;">
            <div style="padding:15px 20px; background:#ff6b00; color:#fff; display:flex; justify-content:space-between; align-items:center;">
                <h4 style="margin:0;"><i class="fa fa-file-text"></i> API Logs</h4>
                <button onclick="closeLogsModal()" style="background:none; border:none; color:#fff; font-size:20px; cursor:pointer;">&times;</button>
            </div>
            <div id="logsContent" style="padding:20px; max-height:calc(80vh - 60px); overflow:auto;"></div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // Initiate Payment Form
    $('#initiateForm').on('submit', function(e) {
        e.preventDefault();
        
        var btn = $('#btnInitiate');
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Processing...');
        
        $.ajax({
            url: '{{ route("icici-test.initiate") }}',
            type: 'POST',
            data: $(this).serialize(),
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
            success: function(response) {
                $('#initiateResponse').show();
                $('#initiateResponseJson').text(JSON.stringify(response, null, 2));
                
                if (response.status === 'success' && response.data.request_id) {
                    $('#status_request_id').val(response.data.request_id);
                    $('#status_mode').val($('#mode').val());
                }
                
                // Refresh page after 2 seconds to show new entry
                setTimeout(function() { location.reload(); }, 2000);
            },
            error: function(xhr) {
                $('#initiateResponse').show();
                $('#initiateResponseJson').text(JSON.stringify(xhr.responseJSON || {error: xhr.statusText}, null, 2));
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="fa fa-send"></i> Initiate Payment');
            }
        });
    });
    
    // Check Status Form
    $('#statusForm').on('submit', function(e) {
        e.preventDefault();
        
        var btn = $('#btnStatus');
        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Checking...');
        
        $.ajax({
            url: '{{ route("icici-test.status") }}',
            type: 'POST',
            data: $(this).serialize(),
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
            success: function(response) {
                $('#statusResponse').show();
                $('#statusResponseJson').text(JSON.stringify(response, null, 2));
            },
            error: function(xhr) {
                $('#statusResponse').show();
                $('#statusResponseJson').text(JSON.stringify(xhr.responseJSON || {error: xhr.statusText}, null, 2));
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="fa fa-refresh"></i> Check Status');
            }
        });
    });
});

function checkStatusFor(requestId, mode) {
    $('#status_request_id').val(requestId);
    $('#status_mode').val(mode);
    $('#statusForm').submit();
}

function viewLogs(requestId) {
    $.get('{{ url("icici-test/logs") }}/' + requestId, function(response) {
        var html = '<div style="margin-bottom:20px;"><strong>Payment:</strong> ' + requestId + '</div>';
        
        if (response.logs && response.logs.length > 0) {
            response.logs.forEach(function(log) {
                html += '<div style="background:#f8f9fa; padding:15px; margin-bottom:15px; border-radius:5px;">';
                html += '<div><strong>Endpoint:</strong> ' + log.api_endpoint + ' | <strong>HTTP:</strong> ' + log.http_code + ' | <strong>Time:</strong> ' + log.execution_time_ms + 'ms | <strong>Status:</strong> ' + log.status + '</div>';
                html += '<div style="margin-top:10px;"><strong>Request:</strong></div>';
                html += '<pre style="background:#fff; padding:10px; font-size:12px; overflow:auto;">' + JSON.stringify(JSON.parse(log.request_payload || '{}'), null, 2) + '</pre>';
                html += '<div style="margin-top:10px;"><strong>Response:</strong></div>';
                html += '<pre style="background:#fff; padding:10px; font-size:12px; overflow:auto;">' + JSON.stringify(JSON.parse(log.response_payload || '{}'), null, 2) + '</pre>';
                html += '</div>';
            });
        } else {
            html += '<p>No logs found.</p>';
        }
        
        $('#logsContent').html(html);
        $('#logsModal').fadeIn();
    });
}

function closeLogsModal() {
    $('#logsModal').fadeOut();
}

function refreshPage() {
    location.reload();
}

function bulkStatusCheck() {
    if (!confirm('Check status for all pending payments?')) return;
    
    $.get('{{ route("icici-test.bulk-status") }}', function(response) {
        alert('Checked ' + response.checked_count + ' payments. Refreshing...');
        location.reload();
    });
}
</script>
@endsection