@extends('frontend.app')

@section('title', 'Transaction Details | DiplomeChain')



@section('content')

<div class="container">
    <div class="transaction-card-custom" style="padding: 2rem; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
        <h5 class="transaction-card-title-custom" style="font-weight: 500; font-size: 1.1rem; border-bottom: none; margin-bottom: 1rem;">Transaction Details</h5>
        
        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Transaction Hash</div>
            <div class="info-value hash-text">{{ $transaction->transaction_hash }} <i class="fa-regular fa-copy copy-icon"></i></div>
        </div>

        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Result</div>
            <div class="info-value text-success" style="font-weight: 500;">
                <i class="fa-regular fa-circle-check"></i> {{ $transaction->result ?? 'Success' }}
            </div>
        </div>

        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Status</div>
            <div class="info-value">
                <span class="badge-success me-2" style="background-color: #dcfce3; color: #16a34a; padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; border: none;">{{ $transaction->transaction_status }}</span>
                <span class="chevron-badge">Confirmed by <span id="confirmed-by-count">4,036,507</span></span>
            </div>
        </div>

        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Block</div>
            <div class="info-value hash-text">{{ $transaction->block_number }}</div>
        </div>

        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Timestamp</div>
            <div class="info-value text-muted">
                <i class="fa-regular fa-clock me-1"></i> {{ $transaction->timestamp_text }}
            </div>
        </div>

        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> From</div>
            <div class="info-value hash-text">{{ $transaction->from_address }} <i class="fa-regular fa-copy copy-icon"></i></div>
        </div>

        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Interacted With (To)</div>
            <div class="info-value hash-text">{{ $transaction->to_address }} <i class="fa-regular fa-copy copy-icon"></i></div>
        </div>

        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Value</div>
            <div class="info-value">{{ $transaction->value }}</div>
        </div>

        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Transaction Fee</div>
            <div class="info-value">{{ $transaction->transaction_fee }}</div>
        </div>

        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Gas Price</div>
            <div class="info-value">{{ $transaction->gas_price }}</div>
        </div>

        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Transaction Type</div>
            <div class="info-value">{{ $transaction->transaction_type }}</div>
        </div>
        
        <br>
        
        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Gas Limit</div>
            <div class="info-value">{{ $transaction->gas_limit }}</div>
        </div>

        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Gas Used by Transaction</div>
            <div class="info-value">{{ $transaction->gas_used }}</div>
        </div>

        <div class="info-row">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Nonce <span class="chevron-badge ms-2" style="padding: 2px 8px 2px 14px; font-size: 0.7rem;">Position</span></div>
            <div class="info-value">{{ $transaction->nonce }} <span class="chevron-badge mx-2" style="padding: 2px 8px 2px 14px; font-size: 0.7rem;">Position</span> {{ $transaction->nonce_position }}</div>
        </div>

        <div class="info-row align-items-start mt-4">
            <div class="info-label"><i class="fa-solid fa-circle-info text-secondary"></i> Raw Input</div>
            <div class="info-value w-100">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary dropdown-toggle btn-sm bg-white" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="rawInputDropdownToggle">
                            Hex (Default)
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" onclick="toggleRawInput('hex', 'Hex (Default)')">Hex (Default)</a></li>
                            <li><a class="dropdown-item" href="#" onclick="toggleRawInput('utf8', 'UTF-8')">UTF-8</a></li>
                        </ul>
                    </div>
                    <i class="fa-regular fa-copy copy-icon" style="cursor: pointer;" onclick="copyRawInput()"></i>
                </div>
                <div class="bg-light p-3 rounded text-break" id="rawInputContent" style="max-height: 150px; overflow-y: auto; font-family: monospace; font-size: 0.85rem; border: 1px solid #dee2e6;">
                    {{ $transaction->raw_input }}
                </div>
                <!-- Hidden inputs to store the values for easy JS access -->
                <input type="hidden" id="raw_input_hex" value="{{ $transaction->raw_input }}">
                <input type="hidden" id="raw_input_utf8" value="{{ $transaction->raw_input_utf8 }}">
            </div>
        </div>

        <script>
            function toggleRawInput(type, label) {
                event.preventDefault();
                document.getElementById('rawInputDropdownToggle').innerText = label;
                const contentBox = document.getElementById('rawInputContent');
                
                if (type === 'hex') {
                    contentBox.innerText = document.getElementById('raw_input_hex').value;
                } else if (type === 'utf8') {
                    const utf8Val = document.getElementById('raw_input_utf8').value;
                    contentBox.innerText = utf8Val ? utf8Val : 'No UTF-8 representation available.';
                }
            }

            function copyRawInput() {
                const content = document.getElementById('rawInputContent').innerText;
                navigator.clipboard.writeText(content).then(() => {
                    // Optional: Show small success tooltip or toast
                    alert("Copied to clipboard");
                });
            }
        </script>

    </div>

    <!-- Input Section -->
    <div class="transaction-card-custom mt-4">
        <h5 style="font-weight: 700; color: var(--text-main); margin-bottom: 20px; font-size: 1.1rem;">Input</h5>
        
        <div style="background-color: #e0f2fe; color: #0284c7; padding: 15px; border-radius: 8px; margin-bottom: 25px; font-size: 0.9rem;">
            To see accurate decoded input data, the contract must be verified. Verify the contract <a href="#" style="color: #0284c7; text-decoration: underline;">here</a>
        </div>
        
        <div style="margin-bottom: 20px; font-size: 0.9rem; line-height: 1.6;">
            Potential matches from our contract method database:
            <br><br>
            IMPORTANT: This information is a best guess based on similar functions from other verified contracts. To have guaranteed accuracy, use the link above to verify the contract's source code.
        </div>
        
        <div style="font-weight: 600; font-size: 0.95rem; margin-bottom: 15px; color: var(--text-main);">
            {{ $transaction->call_method }}:
        </div>
        
        <div class="table-responsive mb-4">
            <table class="table table-bordered mb-0" style="font-size: 0.9rem;">
                <tbody>
                    <tr>
                        <td style="width: 25%; font-weight: 600; text-align: center; vertical-align: middle; background-color: #f8fafc;">Method Id</td>
                        <td style="color: #ec4899; text-align: center; vertical-align: middle;">{{ $transaction->method_id }}</td>
                    </tr>
                    <tr>
                        <td style="font-weight: 600; text-align: center; vertical-align: middle; background-color: #f8fafc;">Call</td>
                        <td style="color: #ec4899; text-align: center; vertical-align: middle;">{{ $transaction->call_method }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div class="table-responsive">
            <table class="table table-bordered mb-0" style="font-size: 0.9rem;">
                <thead>
                    <tr style="background-color: #f8fafc;">
                        <th style="width: 15%; text-align: center;">Name</th>
                        <th style="width: 15%; text-align: center;">Type</th>
                        <th>Data</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center; vertical-align: middle; font-weight: 500;">dataHash</td>
                        <td style="text-align: center; vertical-align: middle;">{{ $transaction->data_hash_type }}</td>
                        <td style="font-family: monospace; font-size: 0.85rem;"><i class="fa-regular fa-copy me-2 copy-icon" style="cursor: pointer;"></i> {{ $transaction->data_hash }}</td>
                    </tr>
                    <tr>
                        <td style="text-align: center; vertical-align: middle; font-weight: 500;">metadata</td>
                        <td style="text-align: center; vertical-align: middle;">{{ $transaction->metadata_type }}</td>
                        <td style="font-family: monospace; font-size: 0.85rem; line-height: 1.6;"><i class="fa-regular fa-copy me-2 copy-icon" style="cursor: pointer;"></i> {!! $transaction->metadata !!}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Internal Transactions -->
    <div class="transaction-card-custom mt-4 p-0 overflow-hidden">
        <div style="display: flex; background: #fff; border-bottom: 1px solid var(--border-color);" id="tab-container">
            <div class="tab-btn active" data-target="internal" style="padding: 15px 25px; font-weight: 700; color: #fff; background: var(--text-main); font-size: 0.95rem; cursor: pointer;">
                Internal Transactions
            </div>
            <div class="tab-btn" data-target="logs" style="padding: 15px 25px; font-weight: 600; color: var(--text-muted); font-size: 0.95rem; cursor: pointer;">
                Logs
            </div>
            <div class="tab-btn" data-target="raw" style="padding: 15px 25px; font-weight: 600; color: var(--text-muted); font-size: 0.95rem; cursor: pointer;">
                Raw Trace
            </div>
        </div>
        <div id="tab-content" style="padding: 30px; background: #f8fafc; text-align: center; color: var(--text-muted); font-size: 0.95rem;">
            There are no internal transactions for this transaction.
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const tabBtns = document.querySelectorAll('.tab-btn');
        const tabContent = document.getElementById('tab-content');
        
        tabBtns.forEach(btn => {
            btn.addEventListener('click', function(e) {
                // Reset styles for all tabs
                tabBtns.forEach(t => {
                    t.style.background = 'transparent';
                    t.style.color = 'var(--text-muted)';
                    t.style.fontWeight = '600';
                    t.classList.remove('active');
                });
                
                // Set active style for clicked tab
                this.style.background = 'var(--text-main)';
                this.style.color = '#fff';
                this.style.fontWeight = '700';
                this.classList.add('active');
                
                // Update content
                const target = this.getAttribute('data-target');
                if (target === 'internal') {
                    tabContent.innerHTML = 'There are no internal transactions for this transaction.';
                } else {
                    tabContent.innerHTML = '<span class="text-danger"><i class="fa-solid fa-triangle-exclamation me-1"></i> Please check your internet connection</span>';
                }
            });
        });

        // Simulating the "Confirmed by" counting up
        const confirmedByEl = document.getElementById('confirmed-by-count');
        if (confirmedByEl) {
            let count = parseInt(confirmedByEl.innerText.replace(/,/g, ''));
            setInterval(function() {
                count += Math.floor(Math.random() * 3) + 1; // Increment by 1-3 randomly
                confirmedByEl.innerText = count.toLocaleString('en-US');
            }, 3000); // Update every 3 seconds
        }

        // Copy functionality for hash texts
        document.querySelectorAll('.copy-icon').forEach(icon => {
            icon.addEventListener('click', function(e) {
                e.stopPropagation(); // Prevent parent clicks
                let textToCopy = '';
                
                // Find what to copy
                if (this.parentElement.classList.contains('hash-text')) {
                    textToCopy = this.parentElement.innerText.trim();
                } else if (this.parentElement.tagName === 'TD') {
                    textToCopy = this.parentElement.innerText.trim();
                }

                if (textToCopy) {
                    navigator.clipboard.writeText(textToCopy).then(() => {
                        const originalClass = this.className;
                        this.className = 'fa-solid fa-check text-success copy-icon';
                        
                        // Create "Copied" tooltip
                        const tooltip = document.createElement('span');
                        tooltip.innerText = 'Copied';
                        tooltip.style.position = 'absolute';
                        tooltip.style.bottom = 'calc(100% + 5px)';
                        tooltip.style.left = '50%';
                        tooltip.style.transform = 'translateX(-50%)';
                        tooltip.style.backgroundColor = '#1f2937';
                        tooltip.style.color = '#fff';
                        tooltip.style.padding = '4px 8px';
                        tooltip.style.borderRadius = '4px';
                        tooltip.style.fontSize = '0.7rem';
                        tooltip.style.fontWeight = '600';
                        tooltip.style.whiteSpace = 'nowrap';
                        tooltip.style.zIndex = '100';
                        tooltip.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
                        
                        this.style.position = 'relative';
                        this.appendChild(tooltip);

                        setTimeout(() => {
                            this.className = originalClass;
                            tooltip.remove();
                        }, 1500);
                    });
                }
            });
        });
    });
</script>
@endpush