@extends('layout.app')

@section('content')
<div class="container-fluid">
    {{-- Page Header --}}
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="text-primary font-weight-bold">
                <i class="fas fa-server"></i> RADIUS Redcheck Management
            </h2>
            <small class="text-muted">Search, add, and manage RADIUS authentication records</small>
        </div>
    </div>

    {{-- Search & Add Card --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0 text-primary">
                        <i class="fas fa-search"></i> Search & Add User
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="search_input" class="font-weight-semibold">User ID / Username</label>
                                <input class="form-control form-control-lg" id="search_input" type="text"
                                       placeholder="Enter username (e.g., pppoe1)" autocomplete="off">
                                <small class="form-text text-muted">Press Enter or click Search to find existing user</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-lg mr-2" id="search_btn">
                            <i class="fas fa-search mr-1"></i> Search
                        </button>
                        <button class="btn btn-success btn-lg" id="add">
                            <i class="fas fa-plus mr-1"></i> Add New User
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Results Container --}}
    <div id="result" class="results-container">
        <div class="alert alert-info text-center py-5">
            <i class="fas fa-info-circle fa-2x mb-3"></i>
            <p class="mb-0">Enter a username above and click <strong>Search</strong> or <strong>Add New User</strong> to get started</p>
        </div>
    </div>
</div>



@endsection

@section('ajax')
<style>
    .results-container {
        animation: fadeIn 0.3s ease-in;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .loading-spinner {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
    }
    .spinner-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
        z-index: 9998;
        display: none;
    }
</style>

<div class="spinner-overlay" id="loadingOverlay"></div>

<script>
    $(function() {
        // Show/hide loading spinner
        function showLoading() {
            $('#loadingOverlay').show();
            $('#result').html(`
                <div class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <p class="mt-3 text-muted">Processing request...</p>
                </div>
            `);
        }

        function hideLoading() {
            $('#loadingOverlay').hide();
        }

        // Validate input
        function validateInput() {
            const userid = $('#search_input').val().trim();
            if (!userid) {
                toastr.warning('Please enter a username');
                $('#search_input').focus();
                return false;
            }
            return userid;
        }

        // Search Button Click
        $('#search_btn').on('click', function() {
            const userid = validateInput();
            if (!userid) return;

            showLoading();

            $.ajax({
                url: '{{ route('search-in-redcheck') }}',
                type: 'GET',
                data: { userid: userid },
                success: function(data) {
                    $('#result').html(data);
                    hideLoading();
                    toastr.success('User found');
                },
                error: function(xhr, status, error) {
                    hideLoading();
                    $('#result').html(`
                        <div class="alert alert-danger" role="alert">
                            <i class="fas fa-exclamation-circle"></i> Error: Unable to fetch user data
                        </div>
                    `);
                    toastr.error('Failed to search user');
                }
            });
        });

        // Enter key on input
        $('#search_input').on('keyup', function(e) {
            if (e.keyCode === 13) {
                $('#search_btn').click();
            }
        });

        // Add Button Click
        $('#add').on('click', function() {
            const userid = validateInput();
            if (!userid) return;

            showLoading();

            $.ajax({
                url: '{{ route('addredcheck') }}',
                type: 'POST',
                data: {
                    userid: userid,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    hideLoading();

                    // Handle both HTML response and JSON response
                    if (typeof data === 'string') {
                        $('#result').html(data);
                        toastr.success('User added successfully');
                    } else if (data.message) {
                        if (data.message === 'User Not Found') {
                            $('#result').html(`
                                <div class="alert alert-danger" role="alert">
                                    <i class="fas fa-user-slash"></i> ${data.message}
                                </div>
                            `);
                            toastr.error(data.message);
                        } else {
                            toastr.warning(data.message);
                            // Auto-search if user already exists
                            if (data.message.includes('Already Exist')) {
                                setTimeout(() => $('#search_btn').click(), 1500);
                            }
                        }
                    }
                },
                error: function(xhr, status, error) {
                    hideLoading();
                    $('#result').html(`
                        <div class="alert alert-danger" role="alert">
                            <i class="fas fa-exclamation-circle"></i> Error: Unable to add user
                        </div>
                    `);
                    toastr.error('Failed to add user');
                    console.error(error);
                }
            });
        });

        // Focus on input on page load
        $('#search_input').focus();
    });
</script>
@endsection