@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Discover Cameras</div>

                <div class="card-body">
                    <ul class="nav nav-tabs" id="discoveryTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="nvr-tab" data-toggle="tab" href="#nvr" role="tab">NVR Discovery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="range-tab" data-toggle="tab" href="#range" role="tab">IP Range Discovery</a>
                        </li>
                    </ul>
                    
                    <div class="tab-content mt-3" id="discoveryTabsContent">
                        <!-- NVR Discovery Form -->
                        <div class="tab-pane fade show active" id="nvr" role="tabpanel">
                            <form id="nvrDiscoveryForm">
                                @csrf
                                <div class="form-group">
                                    <label for="nvr_ip">NVR IP Address</label>
                                    <input type="text" class="form-control" id="nvr_ip" name="nvr_ip" placeholder="192.168.1.100" required>
                                </div>
                                <div class="form-group">
                                    <label for="port">Port (Optional)</label>
                                    <input type="number" class="form-control" id="port" name="port" placeholder="80">
                                </div>
                                <div class="form-group">
                                    <label for="username">Username (Optional)</label>
                                    <input type="text" class="form-control" id="username" name="username" placeholder="admin">
                                </div>
                                <div class="form-group">
                                    <label for="password">Password (Optional)</label>
                                    <input type="password" class="form-control" id="password" name="password">
                                </div>
                                <button type="submit" class="btn btn-primary">Discover Cameras</button>
                            </form>
                        </div>
                        
                        <!-- IP Range Discovery Form -->
                        <div class="tab-pane fade" id="range" role="tabpanel">
                            <form id="rangeDiscoveryForm">
                                @csrf
                                <div class="form-group">
                                    <label for="start_ip">Start IP</label>
                                    <input type="text" class="form-control" id="start_ip" name="start_ip" placeholder="192.168.1.1" required>
                                </div>
                                <div class="form-group">
                                    <label for="end_ip">End IP</label>
                                    <input type="text" class="form-control" id="end_ip" name="end_ip" placeholder="192.168.1.254" required>
                                </div>
                                <button type="submit" class="btn btn-primary">Scan IP Range</button>
                            </form>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <h5>Discovered Cameras</h5>
                        <div id="loadingIndicator" style="display: none;">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <span class="ml-2">Discovering cameras, please wait...</span>
                        </div>
                        <div id="cameraResults" class="mt-3">
                            <p>No cameras discovered yet.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // NVR Discovery Form Submission
    document.getElementById('nvrDiscoveryForm').addEventListener('submit', function(e) {
        e.preventDefault();
        discoverCameras('{{ route("cameras.discover-nvr") }}', new FormData(this));
    });
    
    // IP Range Discovery Form Submission
    document.getElementById('rangeDiscoveryForm').addEventListener('submit', function(e) {
        e.preventDefault();
        discoverCameras('{{ route("cameras.discover-range") }}', new FormData(this));
    });
    
    function discoverCameras(url, formData) {
        // Show loading indicator
        document.getElementById('loadingIndicator').style.display = 'block';
        document.getElementById('cameraResults').innerHTML = '';
        
        fetch(url, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            // Hide loading indicator
            document.getElementById('loadingIndicator').style.display = 'none';
            
            if (data.success) {
                if (data.cameras.length > 0) {
                    let html = `<div class="alert alert-success">Found ${data.count} cameras</div>`;
                    html += '<table class="table table-striped">';
                    html += '<thead><tr><th>Status</th><th>IP Address</th><th>Name</th><th>Model</th><th>Actions</th></tr></thead>';
                    html += '<tbody>';
                    
                    data.cameras.forEach(camera => {
                        html += `<tr>
                            <td><span class="badge badge-${camera.status === 'online' ? 'success' : 'danger'}">${camera.status}</span></td>
                            <td>${camera.ip_address}</td>
                            <td>${camera.camera_name}</td>
                            <td>${camera.model || 'Unknown'}</td>
                            <td>
                                <button class="btn btn-sm btn-primary" onclick="addCamera('${camera.ip_address}', ${camera.port}, '${camera.device_name}')">Add</button>
                            </td>
                        </tr>`;
                    });
                    
                    html += '</tbody></table>';
                    document.getElementById('cameraResults').innerHTML = html;
                } else {
                    document.getElementById('cameraResults').innerHTML = '<div class="alert alert-warning">No cameras found</div>';
                }
            } else {
                document.getElementById('cameraResults').innerHTML = `<div class="alert alert-danger">Error: ${data.message}</div>`;
            }
        })
        .catch(error => {
            document.getElementById('loadingIndicator').style.display = 'none';
            document.getElementById('cameraResults').innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
        });
    }
    
    // This function would be implemented to add the camera to your system
    window.addCamera = function(ip, port, name) {
        alert(`Adding camera ${name} at ${ip}:${port}`);
        // Implement your camera adding logic here
    };
});
</script>
@endsection