@extends('layouts.app')

@section('title', 'API Source Data')

@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('api-sources.index') }}">API Sources</a>
    </li>
    <li class="breadcrumb-item">
        <a href="{{ route('api-sources.show', $apiSource) }}">{{ $apiSource->name }}</a>
    </li>
    <li class="breadcrumb-item active">Data</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-table me-2"></i>{{ $apiSource->name }} - Imported Data
                </h1>
                <div class="btn-group">
                    <button type="button" class="btn btn-success" onclick="importData({{ $apiSource->id }}, '{{ $apiSource->name }}')">
                        <i class="fas fa-download me-2"></i>Import New Data
                    </button>
                    <a href="{{ route('api-sources.show', $apiSource) }}" class="btn btn-info">
                        <i class="fas fa-eye me-2"></i>View Details
                    </a>
                    <a href="{{ route('api-sources.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Information Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Table Name</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800">
                                <code>{{ $apiSource->table_name }}</code>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-table fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                API URL</div>
                            <div class="small text-gray-800">{{ Str::limit($apiSource->url, 25) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-link fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Method</div>
                            <div class="h6 mb-0 font-weight-bold text-gray-800">{{ $apiSource->method }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-cog fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Last Fetched</div>
                            <div class="small text-gray-800">
                                @if($apiSource->last_fetched_at)
                                    {{ $apiSource->last_fetched_at->diffForHumans() }}
                                @else
                                    Never
                                @endif
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Display -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-database me-2"></i>Imported Data from Table: <code>{{ $apiSource->table_name }}</code>
                    </h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                            aria-labelledby="dropdownMenuLink">
                            <div class="dropdown-header">Actions:</div>
                            <a class="dropdown-item" href="#" onclick="refreshData()">
                                <i class="fas fa-sync fa-sm fa-fw mr-2 text-gray-400"></i>
                                Refresh Data
                            </a>
                            <a class="dropdown-item" href="#" onclick="exportData()">
                                <i class="fas fa-download fa-sm fa-fw mr-2 text-gray-400"></i>
                                Export Data
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#" onclick="clearData()">
                                <i class="fas fa-trash fa-sm fa-fw mr-2 text-gray-400"></i>
                                Clear All Data
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Note:</strong> This is a preview of the data structure. In a real implementation, 
                        you would query the actual database table <code>{{ $apiSource->table_name }}</code> to display the imported data.
                        The data shown below is sample data to demonstrate the interface.
                    </div>

                    <!-- Sample Data Display -->
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>Sample Data Structure:</strong>
                            </div>
                            <div>
                                <button type="button" class="btn btn-sm btn-outline-primary" onclick="showRawData()">
                                    <i class="fas fa-code me-1"></i>View Raw JSON
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover" id="dataTable">
                            <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Sample Data Rows -->
                                <tr>
                                    <td>1</td>
                                    <td>101</td>
                                    <td>John Doe</td>
                                    <td>john@example.com</td>
                                    <td><span class="badge badge-success">Active</span></td>
                                    <td>2024-01-15 10:30:00</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary" onclick="viewRecord(101)">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>102</td>
                                    <td>Jane Smith</td>
                                    <td>jane@example.com</td>
                                    <td><span class="badge badge-warning">Pending</span></td>
                                    <td>2024-01-15 11:45:00</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary" onclick="viewRecord(102)">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>103</td>
                                    <td>Bob Johnson</td>
                                    <td>bob@example.com</td>
                                    <td><span class="badge badge-secondary">Inactive</span></td>
                                    <td>2024-01-15 14:20:00</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary" onclick="viewRecord(103)">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination Placeholder -->
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <div class="small text-muted">
                            Showing 1 to 3 of 3 sample records
                        </div>
                        <nav>
                            <ul class="pagination pagination-sm mb-0">
                                <li class="page-item disabled">
                                    <span class="page-link">Previous</span>
                                </li>
                                <li class="page-item active">
                                    <span class="page-link">1</span>
                                </li>
                                <li class="page-item disabled">
                                    <span class="page-link">Next</span>
                                </li>
                            </ul>
                        </nav>
                    </div>

                    <!-- Implementation Guide -->
                    <div class="alert alert-warning mt-4">
                        <h6><i class="fas fa-code me-2"></i>Implementation Guide:</h6>
                        <p class="mb-2">To implement real data display, you would:</p>
                        <ol class="mb-0">
                            <li>Create a dynamic table based on the actual database structure</li>
                            <li>Query the <code>{{ $apiSource->table_name }}</code> table</li>
                            <li>Implement pagination for large datasets</li>
                            <li>Add search and filtering capabilities</li>
                            <li>Provide export functionality (CSV, Excel, JSON)</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Record Details Modal -->
<div class="modal fade" id="recordModal" tabindex="-1" role="dialog" aria-labelledby="recordModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="recordModalLabel">
                    <i class="fas fa-info-circle me-2"></i>Record Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="recordContent">
                    <!-- Record details will be loaded here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Raw Data Modal -->
<div class="modal fade" id="rawDataModal" tabindex="-1" role="dialog" aria-labelledby="rawDataModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="rawDataModalLabel">
                    <i class="fas fa-code me-2"></i>Raw JSON Data
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <pre id="rawDataContent" class="bg-dark text-light p-3 rounded" style="max-height: 500px; overflow-y: auto;"></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="copyRawData()">
                    <i class="fas fa-copy me-1"></i>Copy to Clipboard
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Sample data for demonstration
const sampleData = [
    {
        id: 101,
        name: "John Doe",
        email: "john@example.com",
        status: "active",
        created_at: "2024-01-15 10:30:00",
        phone: "+1234567890",
        address: "123 Main St, City, State"
    },
    {
        id: 102,
        name: "Jane Smith",
        email: "jane@example.com",
        status: "pending",
        created_at: "2024-01-15 11:45:00",
        phone: "+1234567891",
        address: "456 Oak Ave, City, State"
    },
    {
        id: 103,
        name: "Bob Johnson",
        email: "bob@example.com",
        status: "inactive",
        created_at: "2024-01-15 14:20:00",
        phone: "+1234567892",
        address: "789 Pine Rd, City, State"
    }
];

function viewRecord(id) {
    const record = sampleData.find(r => r.id === id);
    if (record) {
        const content = `
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <strong>ID:</strong> ${record.id}
                    </div>
                    <div class="mb-3">
                        <strong>Name:</strong> ${record.name}
                    </div>
                    <div class="mb-3">
                        <strong>Email:</strong> ${record.email}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <strong>Status:</strong> 
                        <span class="badge badge-${record.status === 'active' ? 'success' : (record.status === 'pending' ? 'warning' : 'secondary')}">
                            ${record.status.charAt(0).toUpperCase() + record.status.slice(1)}
                        </span>
                    </div>
                    <div class="mb-3">
                        <strong>Phone:</strong> ${record.phone}
                    </div>
                    <div class="mb-3">
                        <strong>Created:</strong> ${record.created_at}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="mb-3">
                        <strong>Address:</strong> ${record.address}
                    </div>
                </div>
            </div>
        `;
        
        document.getElementById('recordContent').innerHTML = content;
        const modal = new bootstrap.Modal(document.getElementById('recordModal'));
        modal.show();
    }
}

function showRawData() {
    const rawData = JSON.stringify(sampleData, null, 2);
    document.getElementById('rawDataContent').textContent = rawData;
    
    const modal = new bootstrap.Modal(document.getElementById('rawDataModal'));
    modal.show();
}

function copyRawData() {
    const rawData = document.getElementById('rawDataContent').textContent;
    navigator.clipboard.writeText(rawData).then(function() {
        window.Toast.success('Raw data copied to clipboard');
    }).catch(function() {
        window.Toast.error('Failed to copy data to clipboard');
    });
}

function importData(id, name) {
    if (confirm(`Import new data from "${name}"?`)) {
        window.LoadingOverlay.show('Importing data...');
        
        fetch(`/api-sources/${id}/import`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            window.LoadingOverlay.hide();
            if (data.success) {
                window.Toast.success(data.message || 'Data imported successfully');
                setTimeout(() => location.reload(), 2000);
            } else {
                window.Toast.error(data.message || 'Import failed');
            }
        })
        .catch(error => {
            window.LoadingOverlay.hide();
            window.Toast.error('Import failed: ' + error.message);
        });
    }
}

function refreshData() {
    window.Toast.info('Refreshing data...');
    setTimeout(() => {
        location.reload();
    }, 1000);
}

function exportData() {
    window.Toast.info('Export functionality would be implemented here');
    // In real implementation, this would trigger a download of the data
}

function clearData() {
    if (confirm('Are you sure you want to clear all imported data? This action cannot be undone.')) {
        window.LoadingOverlay.show('Clearing data...');
        
        // Simulate API call
        setTimeout(() => {
            window.LoadingOverlay.hide();
            window.Toast.success('Data clearing functionality would be implemented here');
        }, 2000);
    }
}
</script>
@endpush
@endsection