@extends('layouts.app')

@section('title', 'Biometric Devices')

@section('panel-actions')
    @if(auth()->user()->canAccess('biometric.manage'))
    <a href="{{ route('biometric-devices.create') }}" class="btn btn-primary py-1 px-3" style="font-size: 13px;">
        <i class="fas fa-plus me-1"></i> Add Device
    </a>
    @endif
@endsection

@section('content')
<div class="row">
    <div class="col-12 mb-3">
        <div class="card card-outline card-info">
            <div class="card-header">
                <h3 class="card-title font-weight-bold"><i class="fas fa-book mr-2"></i>Device Configuration Guide</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                </div>
            </div>
            <div class="card-body bg-light">
                <div class="row">
                    <div class="col-md-4">
                        <h6 class="font-weight-bold text-dark"><i class="fas fa-network-wired mr-2"></i>Network Setup</h6>
                        <p class="small text-muted">Go to <strong>Menu > Comm. > Ethernet</strong>. Set a static IP (e.g., 192.168.1.201).</p>
                    </div>
                    <div class="col-md-4">
                        <h6 class="font-weight-bold text-dark"><i class="fas fa-cloud-upload-alt mr-2"></i>ADMS / Cloud Setting</h6>
                        <p class="small text-muted"><strong>Server:</strong> {{ request()->ip() }}<br><strong>Port:</strong> 80 (or 443)</p>
                    </div>
                    <div class="col-md-4">
                        <h6 class="font-weight-bold text-dark"><i class="fas fa-qrcode mr-2"></i>Register Device</h6>
                        <p class="small text-muted">Add details below using the <strong>Serial Number</strong> found in System Info.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Devices List -->
    <div class="col-12">
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title font-weight-bold"><i class="fas fa-fingerprint mr-2"></i>Configured Biometric Devices</h3>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered table-striped w-100 mb-0 nowrap" id="devicesTable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>IP Address</th>
                                <th>Port</th>
                                <th>Location</th>
                                <th>Protocol</th>
                                <th>Status</th>
                                <th>Last Activity</th>
                                <th style="width: 100px;">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    let table = $('#devicesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('biometric-devices.data') }}",
        columns: [
            {data: 'name', name: 'name'},
            {data: 'ip_address', name: 'ip_address'},
            {data: 'port', name: 'port'},
            {data: 'location', name: 'location'},
            {data: 'protocol', name: 'protocol'},
            {data: 'status', name: 'status'},
            {data: 'last_activity', name: 'last_activity'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ]
    });

    $('body').on('click', '.delete-device-btn', function() {
        let url = $(this).data('url');
        Swal.fire({
            title: 'Remove Device?',
            text: "This will remove the device configuration.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    data: { _token: "{{ csrf_token() }}" },
                    success: function(res) {
                        table.draw();
                        Swal.fire('Deleted!', res.success, 'success');
                    }
                });
            }
        });
    });
});
</script>
@endpush