@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')
<div class="card mb-4">
    <div class="card-body">
        <x-backend.section-header>
            <i class="{{ $module_icon }}"></i> {{ __($module_title) }}
            <small class="text-muted">{{ __($module_action) }}</small>
        </x-backend.section-header>

        <div class="row mt-4">
            <!-- Add Camera Button -->
            
            <div class="col">
                <div class="container mt-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <!--<h4 class="fw-bold">
                            <i class="fas fa-video mr-3"></i> {{-- __($module_title) --}} {{-- __($module_action) --}} 
                        </h4>-->
                        <a href="{{ route('backend.cameras.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> Add Camera
                        </a>
                    </div>
                
                    <div class="card shadow-sm mt-3">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="datatable" class="table table-bordered table-hover table-striped">
                                    <thead class="table-primary text-center">
                                        <tr>
                                            <th>@lang('Name')</th>
                                            <th>@lang('IP Address')</th>
                                            <th>@lang('Port')</th>
                                            <th>@lang('Username')</th>
                                            <th>@lang('Status')</th>
                                            <th class="text-center">@lang('Action')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($cameras as $camera)
                                        <tr>
                                            <td class="align-middle">{{ $camera->name }}</td>
                                            <td class="align-middle text-center">{{ $camera->ip_address }}</td>
                                            <td class="align-middle text-center">{{ $camera->port }}</td>
                                            <td class="align-middle text-center">{{ $camera->username }}</td>
                                            <td class="align-middle text-center">
                                                <select class="form-select status-dropdown border-0 text-light {{ $camera->status == 'active' ? 'bg-success' : ($camera->status == 'inactive' ? 'bg-secondary' : 'bg-danger') }}" data-camera-id="{{ $camera->id }}" style="--bs-form-select-bg-img: none!important">
                                                    <option value="active" {{ $camera->status == 'active' ? 'selected' : '' }} class="badge bg-success">Active</option>
                                                    <option value="inactive" {{ $camera->status == 'inactive' ? 'selected' : '' }} class="badge bg-secondary">In-Active</option>
                                                    <option value="error" {{ $camera->status == 'error' ? 'selected' : '' }} class="badge bg-danger">Error</option>
                                                </select>
                                            </td>
                                            <td class="text-center align-middle">
                                                <a href='{{ route("backend.cameras.show", $camera) }}' class='btn btn-success btn-sm' data-bs-toggle="tooltip" title="@lang('Show')">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href='{{ route("backend.cameras.edit", $camera) }}' class='btn btn-primary btn-sm' data-bs-toggle="tooltip" title="@lang('Edit')">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <form action='{{ route("backend.cameras.destroy", $camera) }}' method="POST" class="d-inline-block" onsubmit="return confirm('Are you sure you want to delete this?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class='btn btn-danger btn-sm' data-bs-toggle="tooltip" title="@lang('Delete')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $('#datatable').DataTable({
        // Basic functionality
        "paging": true,
        "lengthMenu": [10, 25, 50, 100],
        "searching": true,
        "ordering": true,
        "info": true,
        
        // Responsive design
        "responsive": true,
        
        // Advanced filtering
        "dom": 'Blfrtip',
        
        // Export buttons
        "buttons": [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        
        // Column-specific filtering
        "initComplete": function() {
            this.api().columns().every(function() {
                let column = this;
                let select = $('<select><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function() {
                        let val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    });
                
                column.data().unique().sort().each(function(d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                });
            });
        },
        
        // Custom pagination icons (keeping your current ones)
        "language": {
            "paginate": {
                "previous": "<i class='fas fa-chevron-left pr-5'></i>",
                "next": "<i class='fas fa-chevron-right pl-5'></i>"
            }
        }
    });
    /* $('#datatable').DataTable({
        "paging": true,  // Enable DataTable pagination
        "lengthMenu": [10, 25, 50, 100], // Set page length options
        "searching": true, // Keep search functionality
        "ordering": true, // Allow sorting
        "info": true, // Show info like "Showing 1 to 10 of 50 entries"
        "language": {
            "paginate": {
                "previous": "<i class='fas fa-chevron-left pr-5'></i>",
                "next": "<i class='fas fa-chevron-right pl-5'></i>"
            }
        }
    }); */

    // On change event for status dropdown
    $('.status-dropdown').change(function() {
        let newStatus = $(this).val();  // Get the selected status
        let cameraId = $(this).data('camera-id');  // Get the camera ID from the data attribute

        // Send the AJAX request to update the status
        $.ajax({
            url: '/admin/cameras/toggle-status/' + cameraId,  // Change this to your correct route
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                status: newStatus,  // Send the new status to the backend
            },
            success: function(response) {
                // Update the label in the UI with the new status
                if (response.status) {
                    let badgeClass = '';
                    if (response.status === 'active') {
                        badgeClass = 'bg-success';
                    } else if (response.status === 'inactive') {
                        badgeClass = 'bg-secondary';
                    } else {
                        badgeClass = 'bg-danger';
                    }
                    // Change the dropdown styling (optional)
                    $('select[data-camera-id="' + cameraId + '"]').removeClass('bg-success bg-danger bg-secondary').addClass(badgeClass);
                    toastr.success(response.message || 'Status updated successfully.');
                } else {
                    toastr.error(response.message || 'Failed to update status.');
                }
            },
            error: function() {
                toastr.error('An error occurred while updating the status.');
            }
        });
    });
</script>

@endpush