@extends('layouts.app')

@section('title', 'Servers - VPN Admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/select2/select2.css') }}">
<style>
    /* Page-specific styles only - Select2 styling is in common file (select2-dark-theme.css) */
</style>
@endpush

@section('content')
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="m-t-30"><img src="{{ asset('assets/images/logo-icon.svg') }}" width="48" height="48" alt="VPN Admin"></div>
        <p>Please wait...</p>
    </div>
</div>

<!-- main page content body part -->
<div id="main-content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <h2>Servers</h2>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i></a></li>
                        <li class="breadcrumb-item">Settings</li>
                        <li class="breadcrumb-item active">Servers</li>
                    </ul>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="d-flex flex-row-reverse">
                        <div class="page_action">
                            @can('create servers')
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#serverModal" id="addServerBtn"><i class="fa fa-plus"></i> Add Server</button>
                            @endcan
                            <button type="button" class="btn btn-secondary" id="refreshTable"><i class="fa fa-refresh"></i> Refresh</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alerts -->
        @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        <!-- Filters -->
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2>Filters</h2>
                    </div>
                    <div class="body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="filterStatus">Status</label>
                                    <select class="form-control" id="filterStatus">
                                        <option value="">All</option>
                                        <option value="Running">Running</option>
                                        <option value="Standby">Standby</option>
                                        <option value="Disabled">Disabled</option>
                                        <option value="Reserved">Reserved</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="filterCountry">Country</label>
                                    <select class="form-control select2" id="filterCountry" style="width: 100%;">
                                        <option value="">All</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="filterPurpose">Purpose</label>
                                    <select class="form-control" id="filterPurpose">
                                        <option value="">All</option>
                                        <option value="General">General</option>
                                        <option value="Streaming">Streaming</option>
                                        <option value="Gaming">Gaming</option>
                                        <option value="Business">Business</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="filterProtocol">Protocol</label>
                                    <select class="form-control" id="filterProtocol">
                                        <option value="">All</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="filterGroup">Group</label>
                                    <select class="form-control" id="filterGroup">
                                        <option value="">All</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="filterIncludeDisabled">Include Disabled</label>
                                    <select class="form-control" id="filterIncludeDisabled">
                                        <option value="false">No</option>
                                        <option value="true">Yes</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="button" class="btn btn-primary btn-block" id="applyFilters">Apply Filters</button>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="button" class="btn btn-secondary btn-block" id="clearFilters">Clear Filters</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- DataTable -->
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2>Servers List</h2>
                    </div>
                    <div class="body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable" id="serversTable" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Protocol</th>
                                        <th>Group</th>
                                        <th>Country</th>
                                        <th>City</th>
                                        <th>Primary IP</th>
                                        <th>Port</th>
                                        <th>Status</th>
                                        <th>Purpose</th>
                                        <th>Type</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Server Modal (Create/Edit/View) -->
<div class="modal fade" id="serverModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="serverModalTitle">Add Server</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="serverForm">
                @csrf
                <input type="hidden" id="server_id" name="server_id">
                <input type="hidden" id="_method" name="_method" value="POST">
                <div class="modal-body">
                    <div id="serverModalBody">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="modal_name">Server Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="modal_name" name="name" required>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="modal_protocol_id">Protocol <span class="text-danger">*</span></label>
                                    <select class="form-control" id="modal_protocol_id" name="protocol_id" required>
                                        <option value="">Select Protocol</option>
                                    </select>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="modal_group_id">Group <span class="text-danger">*</span></label>
                                    <select class="form-control" id="modal_group_id" name="group_id" required>
                                        <option value="">Select Group</option>
                                    </select>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="modal_server_provider">Server Provider</label>
                                    <input type="text" class="form-control" id="modal_server_provider" name="server_provider">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="modal_country">Country</label>
                                    <select class="form-control select2" id="modal_country" name="country" style="width: 100%;">
                                        <option value="">Select Country</option>
                                    </select>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="modal_city">City</label>
                                    <input type="text" class="form-control" id="modal_city" name="city" list="modal_city_list" placeholder="Select or enter city" autocomplete="off">
                                    <datalist id="modal_city_list"></datalist>
                                    <small class="form-text text-muted">Pick a suggestion or type any city name</small>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="modal_primary_ip">Primary IP</label>
                                    <input type="text" class="form-control" id="modal_primary_ip" name="primary_ip">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="modal_port">Port</label>
                                    <input type="number" class="form-control" id="modal_port" name="port">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="modal_priority">Priority</label>
                                    <input type="number" class="form-control" id="modal_priority" name="priority" value="0">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="modal_max_bw">Max Bandwidth</label>
                                    <input type="number" class="form-control" id="modal_max_bw" name="max_bw" value="1">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="modal_all_ips">All IPs</label>
                            <textarea class="form-control" id="modal_all_ips" name="all_ips" rows="3" placeholder="Enter IPs separated by comma or newline"></textarea>
                            <small class="form-text text-muted">Enter IP addresses separated by comma or newline</small>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Network</label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="network" id="modal_network_tcp" value="tcp">
                                            <label class="form-check-label" for="modal_network_tcp">TCP</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="network" id="modal_network_udp" value="udp">
                                            <label class="form-check-label" for="modal_network_udp">UDP</label>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="modal_status">Status</label>
                                    <select class="form-control" id="modal_status" name="status">
                                        <option value="Running">Running</option>
                                        <option value="Standby">Standby</option>
                                        <option value="Disabled">Disabled</option>
                                        <option value="Reserved">Reserved</option>
                                    </select>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="modal_purpose">Purpose</label>
                                    <select class="form-control" id="modal_purpose" name="purpose">
                                        <option value="General">General</option>
                                        <option value="Streaming">Streaming</option>
                                        <option value="Gaming">Gaming</option>
                                        <option value="Business">Business</option>
                                    </select>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="modal_type">Type</label>
                                    <select class="form-control" id="modal_type" name="type">
                                        <option value="Free">Free</option>
                                        <option value="Premium">Premium</option>
                                        <option value="Voucher">Voucher</option>
                                    </select>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="modal_config">Config</label>
                                    <textarea class="form-control" id="modal_config" name="config" rows="3"></textarea>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- View Mode Content -->
                    <div id="serverViewContent" style="display: none;">
                        <table class="table table-bordered">
                            <tr>
                                <th width="150">Server ID</th>
                                <td id="view_id">-</td>
                            </tr>
                            <tr>
                                <th>Name</th>
                                <td id="view_name">-</td>
                            </tr>
                            <tr>
                                <th>Protocol</th>
                                <td id="view_protocol_id">-</td>
                            </tr>
                            <tr>
                                <th>Group</th>
                                <td id="view_group_id">-</td>
                            </tr>
                            <tr>
                                <th>Server Provider</th>
                                <td id="view_server_provider">-</td>
                            </tr>
                            <tr>
                                <th>Country</th>
                                <td id="view_country">-</td>
                            </tr>
                            <tr>
                                <th>City</th>
                                <td id="view_city">-</td>
                            </tr>
                            <tr>
                                <th>Primary IP</th>
                                <td id="view_primary_ip">-</td>
                            </tr>
                            <tr>
                                <th>Port</th>
                                <td id="view_port">-</td>
                            </tr>
                            <tr>
                                <th>Priority</th>
                                <td id="view_priority">-</td>
                            </tr>
                            <tr>
                                <th>Max Bandwidth</th>
                                <td id="view_max_bw">-</td>
                            </tr>
                            <tr>
                                <th>All IPs</th>
                                <td id="view_all_ips">-</td>
                            </tr>
                            <tr>
                                <th>Network</th>
                                <td id="view_network">-</td>
                            </tr>
                            <tr>
                                <th>Config</th>
                                <td id="view_config">-</td>
                            </tr>
                            <tr>
                                <th>Status</th>
                                <td id="view_status">-</td>
                            </tr>
                            <tr>
                                <th>Purpose</th>
                                <td id="view_purpose">-</td>
                            </tr>
                            <tr>
                                <th>Type</th>
                                <td id="view_type">-</td>
                            </tr>
                            <tr>
                                <th>User Count</th>
                                <td id="view_user_count">-</td>
                            </tr>
                            <tr>
                                <th>Bandwidth</th>
                                <td id="view_bandwidth">-</td>
                            </tr>
                            <tr>
                                <th>Load Status</th>
                                <td id="view_load_status">-</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="modal-footer" id="serverModalFooter">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="serverSubmitBtn">
                        <i class="fa fa-spinner fa-spin" id="serverSubmitSpinner" style="display: none;"></i>
                        <span id="serverSubmitText">Save</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/vendor/jquery-datatable/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/vendor/select2/select2.js') }}"></script>
<script>
    var protocolsList = [];
    var groupsList = [];
    var table;

    function normalizeId(value) {
        if (value === null || value === undefined || value === '') {
            return '';
        }

        if (typeof value === 'object') {
            if (value.$oid) {
                return String(value.$oid);
            }
            if (value.id) {
                return normalizeId(value.id);
            }
            if (value._id) {
                return normalizeId(value._id);
            }
        }

        return String(value);
    }

    function getProtocolNameById(id, row) {
        if (row) {
            if (row.protocol_name) {
                return row.protocol_name;
            }
            if (row.protocol && row.protocol.name) {
                return row.protocol.name;
            }
        }

        var normalizedId = normalizeId(id);
        if (!normalizedId) {
            return '-';
        }

        var protocol = protocolsList.find(function(item) {
            return normalizeId(item.id || item._id) === normalizedId;
        });

        return protocol ? protocol.name : normalizedId;
    }

    function getGroupNameById(id, row) {
        if (row) {
            if (row.group_name) {
                return row.group_name;
            }
            if (row.group && row.group.name) {
                return row.group.name;
            }
        }

        var normalizedId = normalizeId(id);
        if (!normalizedId) {
            return '-';
        }

        var group = groupsList.find(function(item) {
            return normalizeId(item.id || item._id) === normalizedId;
        });

        return group ? group.name : normalizedId;
    }

    function fetchProtocolsList() {
        return $.ajax({
            url: "{{ route('protocols.ajax.list') }}",
            method: 'GET'
        }).then(function(response) {
            protocolsList = (response.data && Array.isArray(response.data)) ? response.data : [];
            return protocolsList;
        }, function() {
            protocolsList = [];
            return protocolsList;
        });
    }

    function fetchGroupsList() {
        return $.ajax({
            url: "{{ route('groups.ajax.list') }}",
            method: 'GET'
        }).then(function(response) {
            groupsList = (response.data && Array.isArray(response.data)) ? response.data : [];
            return groupsList;
        }, function() {
            groupsList = [];
            return groupsList;
        });
    }

    function populateProtocolSelect($select) {
        $select.empty().append('<option value="">Select Protocol</option>');
        protocolsList.forEach(function(protocol) {
            $select.append(
                '<option value="' + normalizeId(protocol.id || protocol._id) + '">' +
                protocol.name + ' (' + protocol.code + ')' +
                '</option>'
            );
        });
    }

    function populateGroupSelect($select) {
        $select.empty().append('<option value="">Select Group</option>');
        groupsList.forEach(function(group) {
            $select.append(
                '<option value="' + normalizeId(group.id || group._id) + '">' +
                group.name +
                '</option>'
            );
        });
    }

    function populateFilterDropdowns() {
        var $protocolFilter = $('#filterProtocol');
        $protocolFilter.empty().append('<option value="">All</option>');
        protocolsList.forEach(function(protocol) {
            $protocolFilter.append(
                '<option value="' + normalizeId(protocol.id || protocol._id) + '">' +
                protocol.name + ' (' + protocol.code + ')' +
                '</option>'
            );
        });

        var $groupFilter = $('#filterGroup');
        $groupFilter.empty().append('<option value="">All</option>');
        groupsList.forEach(function(group) {
            $groupFilter.append(
                '<option value="' + normalizeId(group.id || group._id) + '">' +
                group.name +
                '</option>'
            );
        });
    }

    function refreshServerNameColumns() {
        if (table) {
            table.rows().invalidate('data').draw(false);
        }
    }
    
    // Load protocols for dropdown
    function loadProtocols() {
        var $protocolSelect = $('#modal_protocol_id');
        if (!$protocolSelect.length) return;
        
        $protocolSelect.prop('disabled', true);

        if (protocolsList.length) {
            populateProtocolSelect($protocolSelect);
            $protocolSelect.prop('disabled', false);
            return;
        }

        $protocolSelect.empty().append('<option value="">Loading protocols...</option>');
        
        fetchProtocolsList().always(function() {
            populateProtocolSelect($protocolSelect);
            $protocolSelect.prop('disabled', false);
            refreshServerNameColumns();
        });
    }
    
    // Load groups for dropdown
    function loadGroups(callback) {
        var $groupSelect = $('#modal_group_id');
        if (!$groupSelect.length) {
            if (callback) callback();
            return;
        }
        
        $groupSelect.prop('disabled', true);

        if (groupsList.length) {
            populateGroupSelect($groupSelect);
            $groupSelect.prop('disabled', false);
            if (callback) callback();
            return;
        }

        $groupSelect.empty().append('<option value="">Loading groups...</option>');
        
        fetchGroupsList().always(function() {
            populateGroupSelect($groupSelect);
            $groupSelect.prop('disabled', false);
            refreshServerNameColumns();
            if (callback) callback();
        });
    }
    
    $(document).ready(function() {
        var lookupListsReady = $.when(fetchProtocolsList(), fetchGroupsList()).always(function() {
            populateFilterDropdowns();
            refreshServerNameColumns();
        });
        
        // Load countries for filter dropdown
        function loadFilterCountries() {
            var $filterCountry = $('#filterCountry');
            if (!$filterCountry.length) return;
            
            // Show loading state
            $filterCountry.prop('disabled', true);
            $filterCountry.empty().append('<option value="">Loading countries...</option>');
            
            $.ajax({
                url: "{{ route('countries.ajax.select') }}",
                dataType: 'json',
                data: { q: '' }, // Empty search to get all countries
                beforeSend: function() {
                    $filterCountry.prop('disabled', true);
                },
                success: function(response) {
                    $filterCountry.empty().append('<option value="">All</option>');
                    if (response.results && response.results.length > 0) {
                        $.each(response.results, function(index, country) {
                            $filterCountry.append(
                                $('<option></option>')
                                    .attr('value', country.id)
                                    .text(country.text)
                            );
                        });
                    }
                    $filterCountry.prop('disabled', false);
                    
                    // Initialize Select2 after options are loaded
                    $filterCountry.select2({
                        placeholder: 'Select Country',
                        allowClear: true
                    });
                },
                error: function(xhr, status, error) {
                    console.error('Error loading filter countries:', error);
                    $filterCountry.empty().append('<option value="">All</option>');
                    $filterCountry.prop('disabled', false);
                    // Initialize Select2 anyway
                    $filterCountry.select2({
                        placeholder: 'Select Country',
                        allowClear: true
                    });
                }
            });
        }
        
        // Load filter countries
        loadFilterCountries();
        
        // Load countries and initialize select2
        function initCountrySelect2() {
            var $countrySelect = $('#modal_country');
            if (!$countrySelect.length) {
                console.error('Country select element not found');
                return;
            }
            
            // Destroy existing select2 if any
            if ($countrySelect.hasClass('select2-hidden-accessible')) {
                $countrySelect.select2('destroy');
            }
            
            // Show loading state
            $countrySelect.prop('disabled', true).addClass('select2-loading');
            $countrySelect.empty().append('<option value="">Loading countries...</option>');
            
            // Load countries via AJAX first
            $.ajax({
                url: "{{ route('countries.ajax.select') }}",
                dataType: 'json',
                data: { q: '' }, // Empty search to get all countries
                beforeSend: function() {
                    $countrySelect.prop('disabled', true).addClass('select2-loading');
                },
                success: function(response) {
                    // Clear existing options except the placeholder
                    $countrySelect.empty().append('<option value="">Select Country</option>');
                    
                    // Add countries as options
                    if (response.results && response.results.length > 0) {
                        $.each(response.results, function(index, country) {
                            $countrySelect.append(
                                $('<option></option>')
                                    .attr('value', country.id)
                                    .text(country.text)
                            );
                        });
                    }
                    
                    // Remove loading state
                    $countrySelect.prop('disabled', false).removeClass('select2-loading');
                    
                    // Initialize Select2 after options are loaded
                    $countrySelect.select2({
                        placeholder: 'Select Country',
                        allowClear: true
                    });
                },
                error: function(xhr, status, error) {
                    console.error('Error loading countries:', error);
                    console.error('Response:', xhr.responseText);
                    // Remove loading state
                    $countrySelect.prop('disabled', false).removeClass('select2-loading');
                    $countrySelect.empty().append('<option value="">Error loading countries</option>');
                    // Initialize Select2 anyway with empty options
                    $countrySelect.select2({
                        placeholder: 'Select Country',
                        allowClear: true
                    });
                }
            });
        }

        function loadCityDatalist() {
            var $datalist = $('#modal_city_list');
            if (!$datalist.length || $datalist.children().length > 0) {
                return;
            }

            $.ajax({
                url: "{{ route('servers.ajax.cities') }}",
                dataType: 'json',
                data: { q: '' },
                success: function(response) {
                    $datalist.empty();
                    if (response.results && response.results.length > 0) {
                        $.each(response.results, function(index, city) {
                            $datalist.append(
                                $('<option></option>').attr('value', city.text)
                            );
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error loading cities:', error);
                }
            });
        }

        function setCityValue(city) {
            var $cityInput = $('#modal_city');
            var $datalist = $('#modal_city_list');

            if (city && $datalist.find('option[value="' + city.replace(/"/g, '\\"') + '"]').length === 0) {
                $datalist.append($('<option></option>').attr('value', city));
            }

            $cityInput.val(city || '');
        }
        
        // Show loader on initial page load
        showFullScreenLoader();
        
        // Initialize DataTable
        table = $('#serversTable').DataTable({
            processing: false,
            serverSide: false,
            ajax: {
                url: "{{ route('servers.ajax.list') }}",
                type: 'GET',
                cache: false,
                timeout: 30000,
                dataSrc: 'data',
                data: function(d) {
                    // Add filter parameters to AJAX request
                    if ($('#filterStatus').val()) {
                        d.status = $('#filterStatus').val();
                    }
                    var filterCountry = $('#filterCountry').val();
                    if (filterCountry) {
                        d.country = filterCountry;
                    }
                    if ($('#filterPurpose').val()) {
                        d.purpose = $('#filterPurpose').val();
                    }
                    if ($('#filterProtocol').val()) {
                        d.protocol_id = $('#filterProtocol').val();
                    }
                    if ($('#filterGroup').val()) {
                        d.group_id = $('#filterGroup').val();
                    }
                    d.include_disabled = $('#filterIncludeDisabled').val() || 'false';
                },
                complete: function() {
                    lookupListsReady.always(function() {
                        refreshServerNameColumns();
                        hideFullScreenLoader();
                    });
                },
                error: function(xhr, error, thrown) {
                    console.error('DataTables Error:', error);
                    console.error('Response:', xhr.responseText);
                }
            },
            columns: [
                { data: 'name', name: 'name' },
                { 
                    data: 'protocol_id', 
                    name: 'protocol_id',
                    render: function(data, type, row) {
                        return getProtocolNameById(data, row);
                    }
                },
                { 
                    data: 'group_id', 
                    name: 'group_id',
                    render: function(data, type, row) {
                        return getGroupNameById(data, row);
                    }
                },
                { data: 'country', name: 'country', defaultContent: '-' },
                { data: 'city', name: 'city', defaultContent: '-' },
                { data: 'primary_ip', name: 'primary_ip', defaultContent: '-' },
                { data: 'port', name: 'port', defaultContent: '-' },
                { 
                    data: 'status', 
                    name: 'status',
                    render: function(data, type, row) {
                        if (!data) return '-';
                        var badgeClass = 'secondary';
                        if (data === 'Running') badgeClass = 'success';
                        else if (data === 'Standby') badgeClass = 'info';
                        else if (data === 'Disabled') badgeClass = 'danger';
                        else if (data === 'Reserved') badgeClass = 'warning';
                        return '<span class="badge badge-' + badgeClass + '">' + data + '</span>';
                    }
                },
                { data: 'purpose', name: 'purpose', defaultContent: '-' },
                { data: 'type', name: 'type', defaultContent: '-' },
                { 
                    data: 'id', 
                    name: 'actions',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        var serverId = data || row.id || row._id || '';
                        var actions = '<div class="btn-group" role="group">';
                        actions += '<button type="button" class="btn btn-sm btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">';
                        actions += '<i class="fa fa-cog"></i> Actions ';
                        actions += '</button>';
                        actions += '<div class="dropdown-menu dropdown-menu-right">';
                        actions += '<a class="dropdown-item view-server" href="javascript:void(0);" data-id="' + serverId + '"><i class="fa fa-eye"></i> View</a>';
                        @can('edit servers')
                        actions += '<a class="dropdown-item edit-server" href="javascript:void(0);" data-id="' + serverId + '"><i class="fa fa-edit"></i> Edit</a>';
                        @endcan
                        @can('delete servers')
                        actions += '<a class="dropdown-item delete-server" href="javascript:void(0);" data-id="' + serverId + '"><i class="fa fa-trash"></i> Delete</a>';
                        @endcan
                        actions += '</div>';
                        actions += '</div>';
                        return actions;
                    }
                }
            ],
            order: [[0, 'asc']],
            pageLength: 20,
            lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
            language: {
                processing: '',
                emptyTable: "No servers found",
                zeroRecords: "No matching servers found"
            }
        });

        // Refresh table manually
        $('#refreshTable').on('click', function() {
            var $btn = $(this);
            var originalHtml = $btn.html();
            $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Loading...');
            showFullScreenLoader();
            table.ajax.reload(function(json) {
                $btn.prop('disabled', false).html(originalHtml);
                hideFullScreenLoader();
            }, false);
        });

        // Apply filters
        $('#applyFilters').on('click', function() {
            showFullScreenLoader();
            table.ajax.reload(function() {
                hideFullScreenLoader();
            }, false);
        });

        // Clear filters
        $('#clearFilters').on('click', function() {
            $('#filterStatus').val('');
            $('#filterCountry').val(null).trigger('change');
            $('#filterPurpose').val('');
            $('#filterProtocol').val('');
            $('#filterGroup').val('');
            $('#filterIncludeDisabled').val('false');
            showFullScreenLoader();
            table.ajax.reload(function() {
                hideFullScreenLoader();
            }, false);
        });

        // Initialize country select2 when modal is shown
        $('#serverModal').on('shown.bs.modal', function() {
            if ($('#serverModalBody').is(':visible')) {
                initCountrySelect2();
                loadCityDatalist();
            }
        });

        // Add Server - Open modal
        $('#addServerBtn').on('click', function() {
            resetServerModal();
            $('#serverModalTitle').text('Add Server');
            $('#serverForm').attr('action', "{{ route('servers.store') }}");
            $('#_method').val('POST');
            $('#server_id').val('');
            $('#serverModalBody').show();
            $('#serverViewContent').hide();
            $('#serverModalFooter').show();
            $('#serverSubmitBtn').show();
            $('#serverSubmitText').text('Create Server');
            loadProtocols();
            loadGroups();
            $('#serverModal').modal('show');
        });

        // View Server
        $(document).on('click', '.view-server', function() {
            var serverId = $(this).data('id');
            showFullScreenLoader();
            $('#serverModalBody').hide();
            $('#serverViewContent').show();
            $('#serverModalFooter').show();
            $('#serverSubmitBtn').hide();
            $('#serverModalTitle').text('Server Details');
            
            $.ajax({
                url: "{{ route('servers.show.ajax', ':id') }}".replace(':id', serverId),
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                success: function(response) {
                    hideFullScreenLoader();
                    if (response.success && response.data) {
                        var server = response.data;
                        $('#view_id').text(server.id || '-');
                        $('#view_name').text(server.name || '-');
                        var protocol = protocolsList.find(function(p) {
                            return normalizeId(p.id || p._id) === normalizeId(server.protocol_id);
                        });
                        $('#view_protocol_id').text(protocol ? protocol.name : getProtocolNameById(server.protocol_id, server));
                        var group = groupsList.find(function(g) {
                            return normalizeId(g.id || g._id) === normalizeId(server.group_id);
                        });
                        $('#view_group_id').text(group ? group.name : getGroupNameById(server.group_id, server));
                        $('#view_server_provider').text(server.server_provider || '-');
                        $('#view_country').text(server.country || '-');
                        $('#view_city').text(server.city || '-');
                        $('#view_primary_ip').text(server.primary_ip || '-');
                        $('#view_port').text(server.port || '-');
                        $('#view_priority').text(server.priority || '-');
                        $('#view_max_bw').text(server.max_bw || '-');
                        $('#view_all_ips').text(Array.isArray(server.all_ips) ? server.all_ips.join(', ') : (server.all_ips || '-'));
                        $('#view_network').text(server.network || '-');
                        $('#view_config').text(server.config || '-');
                        var statusBadge = '<span class="badge badge-secondary">' + (server.status || '-') + '</span>';
                        if (server.status === 'Running') statusBadge = '<span class="badge badge-success">Running</span>';
                        else if (server.status === 'Standby') statusBadge = '<span class="badge badge-info">Standby</span>';
                        else if (server.status === 'Disabled') statusBadge = '<span class="badge badge-danger">Disabled</span>';
                        else if (server.status === 'Reserved') statusBadge = '<span class="badge badge-warning">Reserved</span>';
                        $('#view_status').html(statusBadge);
                        $('#view_purpose').text(server.purpose || '-');
                        $('#view_type').text(server.type || '-');
                        $('#view_user_count').text(server.user_count || '0');
                        $('#view_bandwidth').text(server.bandwidth || '0');
                        $('#view_load_status').text(server.load_status || '-');
                        $('#serverModal').modal('show');
                    } else {
                        showErrorToast('Failed to load server details.');
                    }
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error loading server:', error);
                    showErrorToast('Error loading server details.');
                }
            });
        });

        // Edit Server
        $(document).on('click', '.edit-server', function() {
            var serverId = $(this).data('id');
            showFullScreenLoader();
            resetServerModal();
            $('#serverModalTitle').text('Edit Server');
            $('#serverForm').attr('action', "{{ route('servers.update', ':id') }}".replace(':id', serverId));
            $('#_method').val('PUT');
            $('#server_id').val(serverId);
            $('#serverModalBody').show();
            $('#serverViewContent').hide();
            $('#serverModalFooter').show();
            $('#serverSubmitBtn').show();
            $('#serverSubmitText').text('Update Server');
            loadProtocols();
            $('#serverModal').modal('show');
            
            // Load groups first, then load server data
            loadGroups(function() {
                $.ajax({
                    url: "{{ route('servers.show.ajax', ':id') }}".replace(':id', serverId),
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    success: function(response) {
                        hideFullScreenLoader();
                        if (response.success && response.data) {
                            var server = response.data;
                            $('#modal_name').val(server.name || '');
                            $('#modal_protocol_id').val(server.protocol_id || '');
                            // Set group_id after groups are loaded
                            $('#modal_group_id').val(server.group_id || '');
                            $('#modal_server_provider').val(server.server_provider || '');
                            // Set country in select2
                            if (server.country) {
                                // Wait for select2 to be initialized and countries loaded
                                setTimeout(function() {
                                    $('#modal_country').val(server.country).trigger('change');
                                }, 500);
                            } else {
                                $('#modal_country').val(null).trigger('change');
                            }
                            loadCityDatalist();
                            setCityValue(server.city || '');
                            $('#modal_primary_ip').val(server.primary_ip || '');
                            $('#modal_port').val(server.port || '');
                            $('#modal_priority').val(server.priority || '0');
                            $('#modal_max_bw').val(server.max_bw || '1');
                            $('#modal_all_ips').val(Array.isArray(server.all_ips) ? server.all_ips.join(', ') : (server.all_ips || ''));
                            // Set network radio button
                            if (server.network) {
                                var networkValue = server.network.toLowerCase();
                                if (networkValue === 'tcp') {
                                    $('#modal_network_tcp').prop('checked', true);
                                } else if (networkValue === 'udp') {
                                    $('#modal_network_udp').prop('checked', true);
                                }
                            }
                            $('#modal_config').val(server.config || '');
                            $('#modal_status').val(server.status || 'Running');
                            $('#modal_purpose').val(server.purpose || 'General');
                            $('#modal_type').val(server.type || 'Free');
                        } else {
                            showErrorToast('Failed to load server details.');
                        }
                    },
                    error: function(xhr, status, error) {
                        hideFullScreenLoader();
                        console.error('Error loading server:', error);
                        showErrorToast('Error loading server details.');
                    }
                });
            });
        });

        // Reset modal form
        function resetServerModal() {
            $('#serverForm')[0].reset();
            $('#serverForm').find('.is-invalid').removeClass('is-invalid');
            $('#serverForm').find('.invalid-feedback').text('');
            $('#server_id').val('');
            $('#_method').val('POST');
            $('#modal_priority').val('0');
            $('#modal_max_bw').val('1');
            $('#modal_country').val(null).trigger('change');
            $('#modal_city').val('');
            // Reset network radio buttons
            $('input[name="network"]').prop('checked', false);
        }

        // Submit Server Form (Create/Edit)
        $('#serverForm').on('submit', function(e) {
            e.preventDefault();
            
            var $form = $(this);
            var $submitBtn = $('#serverSubmitBtn');
            var $spinner = $('#serverSubmitSpinner');
            var $submitText = $('#serverSubmitText');
            var serverId = $('#server_id').val();
            var method = $('#_method').val();
            var url = $form.attr('action');
            
            $submitBtn.prop('disabled', true);
            $spinner.show();
            $submitText.text(method === 'PUT' ? 'Updating...' : 'Creating...');
            showFullScreenLoader();
            
            // Parse all_ips from textarea (comma or newline separated)
            var allIpsText = $('#modal_all_ips').val() || '';
            var allIps = allIpsText.split(/[,\n]/).map(function(ip) {
                return ip.trim();
            }).filter(function(ip) {
                return ip.length > 0;
            });
            
            var formData = {
                name: $('#modal_name').val(),
                protocol_id: $('#modal_protocol_id').val(),
                group_id: $('#modal_group_id').val(),
                server_provider: $('#modal_server_provider').val(),
                country: $('#modal_country').val() || null,
                city: $.trim($('#modal_city').val()) || null,
                primary_ip: $('#modal_primary_ip').val(),
                port: $('#modal_port').val() ? parseInt($('#modal_port').val()) : null,
                priority: $('#modal_priority').val() ? parseInt($('#modal_priority').val()) : 0,
                max_bw: $('#modal_max_bw').val() ? parseInt($('#modal_max_bw').val()) : 1,
                all_ips: allIps,
                network: $('input[name="network"]:checked').val() || '',
                config: $('#modal_config').val(),
                status: $('#modal_status').val(),
                purpose: $('#modal_purpose').val(),
                type: $('#modal_type').val(),
                user_count: 0,
                bandwidth: 0,
                load_status: '',
                _token: $('meta[name="csrf-token"]').attr('content')
            };
            
            if (method === 'PUT') {
                formData._method = 'PUT';
            }
            
            $.ajax({
                url: url,
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                data: formData,
                success: function(response) {
                    hideFullScreenLoader();
                    $('#serverModal').modal('hide');
                    showFullScreenLoader();
                    table.ajax.reload(function() {
                        hideFullScreenLoader();
                    }, false);
                    var message = response.message || (method === 'PUT' ? 'Server updated successfully.' : 'Server created successfully.');
                    showSuccessToast(message);
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error saving server:', error);
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(field, messages) {
                            var $field = $('#modal_' + field);
                            $field.addClass('is-invalid');
                            $field.siblings('.invalid-feedback').text(messages[0]);
                        });
                    } else {
                        var errorMsg = xhr.responseJSON && xhr.responseJSON.message 
                            ? xhr.responseJSON.message 
                            : 'Error saving server. Please try again.';
                        showErrorToast(errorMsg);
                    }
                },
                complete: function() {
                    $submitBtn.prop('disabled', false);
                    $spinner.hide();
                    $submitText.text(method === 'PUT' ? 'Update Server' : 'Create Server');
                }
            });
        });

        // Delete server
        $(document).on('click', '.delete-server', function() {
            var serverId = $(this).data('id');
            var serverName = $(this).closest('tr').find('td:first').text();
            
            if (confirm('Are you sure you want to delete server "' + serverName + '"? This action cannot be undone.')) {
                showFullScreenLoader();
                $.ajax({
                    url: "{{ url('servers') }}/" + serverId,
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    success: function(response) {
                        showFullScreenLoader();
                        table.ajax.reload(function() {
                            hideFullScreenLoader();
                        }, false);
                        showSuccessToast('Server deleted successfully.');
                    },
                    error: function(xhr, status, error) {
                        hideFullScreenLoader();
                        console.error('Error deleting server:', error);
                        var errorMsg = xhr.responseJSON && xhr.responseJSON.message 
                            ? xhr.responseJSON.message 
                            : 'Error deleting server. Please try again.';
                        showErrorToast(errorMsg);
                    }
                });
            }
        });

        // Reset modal on close
        $('#serverModal').on('hidden.bs.modal', function() {
            resetServerModal();
        });
    });
</script>
@endpush