@extends('backend.layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>IP Cameras</h1>
    <div>
        <a href="{{ route('backend.cameras.discover') }}" class="btn btn-primary me-2">
            <i class="fas fa-search"></i> Discover Cameras
        </a>
        <a href="{{ route('backend.cameras.manual-add') }}" class="btn btn-success">
            <i class="fas fa-plus"></i> Add Camera
        </a>
    </div>
</div>

<div class="card">
    <div class="card-header bg-light">
        <div class="row align-items-center">
            <div class="col">
                <h5 class="mb-0">Cameras List</h5>
            </div>
            <div class="col-auto">
                <div class="input-group">
                    <input type="text" id="searchInput" class="form-control" placeholder="Search...">
                    <button class="btn btn-outline-secondary" type="button">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-striped mb-0 camera-table">
                <thead class="table-light">
                    <tr>
                        <th scope="col">Status</th>
                        <th scope="col">IP Address</th>
                        <th scope="col">Port</th>
                        <th scope="col">Device Name</th>
                        <th scope="col">Remote CH No.</th>
                        <th scope="col">Camera Name</th>
                        <th scope="col">SN</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($cameras as $camera)
                    <tr>
                        <td>
                            <span class="online-indicator {{ $camera->status == 'online' ? 'online' : 'offline' }}"></span>
                            {{ ucfirst($camera->status) }}
                        </td>
                        <td>{{ $camera->ip_address }}</td>
                        <td>{{ $camera->port }}</td>
                        <td>{{ $camera->device_name }}</td>
                        <td>{{ $camera->remote_ch_no }}</td>
                        <td>{{ $camera->camera_name }}</td>
                        <td>{{ $camera->sn }}</td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="{{ route('backend.cameras.show', $camera->id) }}" class="btn btn-sm btn-info">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('backend.cameras.stream', $camera->id) }}" class="btn btn-sm btn-primary">
                                    <i class="fas fa-video"></i>
                                </a>
                                <a href="{{ route('backend.cameras.edit', $camera->id) }}" class="btn btn-sm btn-warning">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button type="button" class="btn btn-sm btn-danger" 
                                    onclick="confirmDelete({{ $camera->id }})">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            <form id="delete-form-{{ $camera->id }}" 
                                action="{{ route('backend.cameras.destroy', $camera->id) }}" 
                                method="POST" style="display: none;">
                                @csrf
                                @method('DELETE')
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-4">
                            <div class="mb-3">
                                <i class="fas fa-camera-retro fa-4x text-muted"></i>
                            </div>
                            <p class="text-muted">No cameras found. Click "Discover Cameras" to scan your network or "Add Camera" to add one manually.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function confirmDelete(id) {
        if (confirm('Are you sure you want to remove this camera?')) {
            document.getElementById('delete-form-' + id).submit();
        }
    }
    
    $(document).ready(function() {
        $("#searchInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>
@endsection