@extends('backend.layouts.app')

@section('title') {{ __($module_action) }} {{ __($module_title) }} @endsection

@section('breadcrumbs')
<x-backend.breadcrumbs>
    <x-backend.breadcrumb-item type="active" icon='{{ $module_icon }}'>{{ __($module_title) }}</x-backend.breadcrumb-item>
</x-backend.breadcrumbs>
@endsection

@section('content')
{{-- <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-bootstrap-4/bootstrap-4.css"> --}}
<style>
    .camera-preview {
        width: 320px;
        height: 180px;
        background-color: #000;
        margin: 10px 0;
    }
    .status-badge {
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 0.8rem;
    }
    .status-active {
        background-color: #28a745;
        color: white;
    }
    .status-inactive {
        background-color: #dc3545;
        color: white;
    }
    .status-error {
        background-color: #ffc107;
        color: black;
    }
    .action-buttons button {
        margin: 0 2px;
    }
    .modal-xl {
        max-width: 1140px;
    }
    .camera-details-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .stream-container {
        aspect-ratio: 16/9;
        background: #000;
        width: 100%;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Camera Management</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-primary" id="discoverCameras">
                            <i class="fas fa-search"></i> Discover Cameras
                        </button>
                        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addCameraModal">
                            <i class="fas fa-plus"></i> Add Camera
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <table id="camerasTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>IP Address</th>
                                <th>Model</th>
                                <th>Manufacturer</th>
                                <th>Status</th>
                                <th>Last Discovery</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($cameras as $camera)
                                <tr>
                                    <td>{{ $camera->name }}</td>
                                    <td>{{ $camera->ip_address }}</td>
                                    <td>{{ $camera->model }}</td>
                                    <td>{{ $camera->manufacturer }}</td>
                                    <td>{{ $camera->status }}</td>
                                    <td>{{ $camera->last_discovery }}</td>
                                    <td>{{ $camera->actions }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Camera Modal -->
<div class="modal fade" id="addCameraModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Camera</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addCameraForm">
                    <div class="mb-3">
                        <label for="name" class="form-label">Camera Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="ip_address" class="form-label">IP Address</label>
                        <input type="text" class="form-control" id="ip_address" name="ip_address" required>
                    </div>
                    <div class="mb-3">
                        <label for="port" class="form-label">Port</label>
                        <input type="number" class="form-control" id="port" name="port" value="80" required>
                    </div>
                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="username" name="username">
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" class="form-control" id="password" name="password">
                    </div>
                </form>
            </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" id="saveCamera">Save Camera</button>
            </div>
        </div>
    </div>
</div>

<!-- Camera Details Modal -->
<div class="modal fade" id="cameraDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Camera Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="stream-container mb-3">
                            <video id="cameraStream" class="w-100 h-100" controls></video>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button class="btn btn-primary me-2" id="startStream">Start Stream</button>
                            <button class="btn btn-danger" id="stopStream">Stop Stream</button>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="camera-details-grid">
                            <div class="detail-item">
                                <strong>Name:</strong>
                                <span id="detail-name"></span>
                            </div>
                            <div class="detail-item">
                                <strong>IP Address:</strong>
                                <span id="detail-ip"></span>
                            </div>
                            <div class="detail-item">
                                <strong>Model:</strong>
                                <span id="detail-model"></span>
                            </div>
                            <div class="detail-item">
                                <strong>Manufacturer:</strong>
                                <span id="detail-manufacturer"></span>
                            </div>
                            <div class="detail-item">
                                <strong>Firmware:</strong>
                                <span id="detail-firmware"></span>
                            </div>
                            <div class="detail-item">
                                <strong>Status:</strong>
                                <span id="detail-status"></span>
                            </div>
                            <div class="detail-item">
                                <strong>ONVIF URL:</strong>
                                <span id="detail-onvif"></span>
                            </div>
                            <div class="detail-item">
                                <strong>RTSP URL:</strong>
                                <span id="detail-rtsp"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<script>
$(document).ready(function() {
    // Discover Cameras
    $('#discoverCameras').click(function() {
        Swal.fire({
            title: 'Discovering Cameras',
            text: 'Please wait while we scan for ONVIF cameras...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.get("{{ route('backend.cameras.discover') }}")
            .done(function(response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: response.message
                });
                table.ajax.reload();
            })
            .fail(function(error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to discover cameras'
                });
            });
    });

    // Add Camera
    $('#saveCamera').click(function() {
        const formData = $('#addCameraForm').serialize();
        
        $.post("{{ route('backend.cameras.store') }}", formData)
            .done(function(response) {
                $('#addCameraModal').modal('hide');
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: 'Camera added successfully'
                });
                table.ajax.reload();
            })
            .fail(function(error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: error.responseJSON.message || 'Failed to add camera'
                });
            });
    });

    // View Camera Details
    $(document).on('click', '.view-camera', function() {
        const cameraId = $(this).data('id');
        
        $.get(`{{ url('cameras') }}/${cameraId}`)
            .done(function(response) {
                const camera = response.data;
                $('#detail-name').text(camera.name);
                $('#detail-ip').text(camera.ip_address);
                $('#detail-model').text(camera.model);
                $('#detail-manufacturer').text(camera.manufacturer);
                $('#detail-firmware').text(camera.firmware_version);
                $('#detail-status').text(camera.status);
                $('#detail-onvif').text(camera.onvif_url);
                $('#detail-rtsp').text(camera.rtsp_url);
                
                $('#cameraDetailsModal').modal('show');
            });
    });

    // Delete Camera
    $(document).on('click', '.delete-camera', function() {
        const cameraId = $(this).data('id');
        
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `{{ url('cameras') }}/${cameraId}`,
                    type: 'DELETE',
                    success: function(response) {
                        Swal.fire(
                            'Deleted!',
                            'Camera has been deleted.',
                            'success'
                        );
                        table.ajax.reload();
                    },
                    error: function(error) {
                        Swal.fire(
                            'Error!',
                            'Failed to delete camera.',
                            'error'
                        );
                    }
                });
            }
        });
    });

    // Stream Management
    let hls;
    
    $('#startStream').click(function() {
        const video = document.getElementById('cameraStream');
        const streamUrl = $('#detail-rtsp').text();
        
        if (Hls.isSupported() && streamUrl) {
            hls = new Hls();
            hls.loadSource(streamUrl);
            hls.attachMedia(video);
            video.play();
        }
    });

    $('#stopStream').click(function() {
        if (hls) {
            hls.destroy();
            document.getElementById('cameraStream').pause();
        }
    });

    // Clean up on modal close
    $('#cameraDetailsModal').on('hidden.bs.modal', function() {
        if (hls) {
            hls.destroy();
        }
        document.getElementById('cameraStream').pause();
    });
});
</script>
@endsection