@extends('layouts.app')
@section('title', 'OpenVPN Servers')

@section('content')
<div class="mb-4">
    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addServerModal">
        <i class="fa-solid fa-plus me-2"></i>Add Server
    </button>
</div>

@if(session('done'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fa-solid fa-check-circle me-2"></i>{{ session('done') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif
@if(session('not'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fa-solid fa-circle-exclamation me-2"></i>{{ session('not') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="card border-0 shadow-sm">
    <div class="card-header bg-white py-3">
        <div class="row align-items-center g-3">
            <div class="col-md-6">
                <form action="{{ url()->current() }}">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="fa-solid fa-search text-muted"></i>
                        </span>
                        <input type="text" name="search" class="form-control border-start-0 ps-0" 
                               value="{{ request('search') }}" placeholder="Search servers...">
                    </div>
                </form>
            </div>
            <div class="col-md-6 text-end">
                <span class="badge bg-success rounded-pill">{{ $servers->total() }} Servers</span>
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="sortableTable">
                <thead class="table-light">
                    <tr>
                        <th style="width: 40px;"></th>
                        <th class="ps-4">Server</th>
                        <th>Location</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th class="text-center pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody id="sortableBody" data-route="{{ route('admin.openvpn.sort') }}">
                    @forelse($servers as $server)
                    <tr data-id="{{ $server->id }}" class="sortable-row">
                        <td>
                            <i class="fa-solid fa-grip-vertical text-muted handle" style="cursor: grab;"></i>
                        </td>
                        <td class="ps-4">
                            <div>
                                <h6 class="mb-0">{{ ucwords($server->name) }}</h6>
                                <small class="text-muted">Added {{ $server->created_at->format('M d, Y') }}</small>
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-secondary me-1">{{ $server->country_code ?? '-' }}</span>
                            {{ $server->city_name ?? '-' }}
                        </td>
                        <td>
                            @if($server->type == 1)
                                <span class="badge bg-success">Premium</span>
                            @else
                                <span class="badge bg-secondary">Free</span>
                            @endif
                        </td>
                        <td>
                            <div class="form-check form-switch mb-0">
                                <input type="checkbox" class="form-check-input status-toggle" 
                                       data-id="{{ $server->id }}" {{ $server->status == 1 ? 'checked' : '' }}>
                            </div>
                        </td>
                        <td class="text-center">
                            <div class="btn-group btn-group-sm gap-1">
                                @if($server->config_file_url)
                                <a href="{{ $server->config_file_url }}" target="_blank" class="btn btn-sm btn-success">View</a>
                                @endif
                                <button type="button" class="btn btn-sm btn-primary btn-edit"
                                        data-server='@json($server)'>Edit</button>
                                <button type="button" class="btn btn-sm btn-danger btn-delete"
                                        data-id="{{ $server->id }}">Delete</button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5">
                            <div class="text-muted">
                                <i class="fa-solid fa-server fa-3x mb-3 opacity-25"></i>
                                <p class="mb-1">No servers found</p>
                                <small>Add your first OpenVPN server to get started</small>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($servers->hasPages())
    <div class="card-footer bg-white py-3">
        <div class="d-flex justify-content-end">
            {{ $servers->links('pagination::bootstrap-5') }}
        </div>
    </div>
    @endif
</div>
@endsection

@section('modals')
<div class="modal fade" id="addServerModal" tabindex="-1" aria-labelledby="addServerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title" id="addServerModalLabel">Add New Server</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.openvpn.add') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body pt-2">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="name" class="form-label">Server Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" value="{{ old('name') }}" placeholder="e.g. US East 1" required>
                        </div>
                        <div class="col-md-6">
                            <label for="type" class="form-label">Server Type <span class="text-danger">*</span></label>
                            <select class="form-select" id="type" name="type" required>
                                <option value="0">Free</option>
                                <option value="1">Premium</option>
                            </select>
                        </div>
                    </div>
                    <hr class="my-4">
                    <h6 class="text-muted mb-3">Location Details</h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="country_code" class="form-label">Country Code <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="country_code" name="country_code" value="{{ old('country_code') }}" placeholder="e.g. US, UK" maxlength="3" required>
                        </div>
                        <div class="col-md-6">
                            <label for="city_name" class="form-label">City Name</label>
                            <input type="text" class="form-control" id="city_name" name="city_name" value="{{ old('city_name') }}" placeholder="e.g. New York">
                        </div>
                    </div>
                    <hr class="my-4">
                    <h6 class="text-muted mb-3">VPN Credentials</h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="username" class="form-label">Username</label>
                            <input type="text" class="form-control" id="username" name="username" value="{{ old('username') }}" placeholder="VPN username">
                        </div>
                        <div class="col-md-6">
                            <label for="password" class="form-label">Password</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="password" name="password" placeholder="VPN password">
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('password', 'togglePasswordIcon')">
                                    <i class="fa-solid fa-eye" id="togglePasswordIcon"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <hr class="my-4">
                    <h6 class="text-muted mb-3">Configuration File</h6>
                    <div class="mb-3">
                        <label for="config_file" class="form-label">Upload .ovpn File <span class="text-danger">*</span></label>
                        <input type="file" class="form-control" id="config_file" name="config_file" accept=".ovpn,.txt" required>
                        <small class="text-muted">Maximum file size: 5MB. Accepted formats: .ovpn, .txt</small>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Create Server</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editServerModal" tabindex="-1" aria-labelledby="editServerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title" id="editServerModalLabel">Edit Server</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editForm" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body pt-2">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="edit_name" class="form-label">Server Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="edit_name" name="name" required>
                        </div>
                        <div class="col-md-6">
                            <label for="edit_type" class="form-label">Server Type <span class="text-danger">*</span></label>
                            <select class="form-select" id="edit_type" name="type" required>
                                <option value="0">Free</option>
                                <option value="1">Premium</option>
                            </select>
                        </div>
                    </div>
                    <hr class="my-4">
                    <h6 class="text-muted mb-3">Location Details</h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="edit_country_code" class="form-label">Country Code <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="edit_country_code" name="country_code" maxlength="3" required>
                        </div>
                        <div class="col-md-6">
                            <label for="edit_city_name" class="form-label">City Name</label>
                            <input type="text" class="form-control" id="edit_city_name" name="city_name">
                        </div>
                    </div>
                    <hr class="my-4">
                    <h6 class="text-muted mb-3">VPN Credentials</h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="edit_username" class="form-label">Username</label>
                            <input type="text" class="form-control" id="edit_username" name="username">
                        </div>
                        <div class="col-md-6">
                            <label for="edit_password" class="form-label">Password</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="edit_password" name="password" placeholder="Leave blank to keep current">
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('edit_password', 'editTogglePasswordIcon')">
                                    <i class="fa-solid fa-eye" id="editTogglePasswordIcon"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <hr class="my-4">
                    <h6 class="text-muted mb-3">Configuration File</h6>
                    <div class="mb-3">
                        <label for="edit_config_file" class="form-label">Upload New .ovpn File</label>
                        <input type="file" class="form-control" id="edit_config_file" name="config_file" accept=".ovpn,.txt">
                        <small class="text-muted">Leave blank to keep current file. Maximum size: 5MB</small>
                        <div id="currentConfigInfo" class="mt-2" style="display: none;">
                            <span class="badge bg-info">
                                <i class="fa-solid fa-file me-1"></i>Current config file exists
                            </span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('style')
<style>
.btn-group .btn {
    padding: 0.35rem 0.6rem;
}
.btn-group .btn i {
    font-size: 13px;
}
.form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}
.modal-content {
    border-radius: 12px;
}
.sortable-row {
    transition: background-color 0.2s;
}
.sortable-row:hover {
    background-color: rgba(25, 135, 84, 0.03);
}
.sortable-row.dragging {
    opacity: 0.5;
    background-color: rgba(25, 135, 84, 0.1);
}
.handle {
    opacity: 0.5;
}
.handle:hover {
    opacity: 1;
}
</style>
@endpush

@push('script')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
function togglePassword(inputId, iconId) {
    const input = document.getElementById(inputId);
    const icon = document.getElementById(iconId);
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const tbody = document.getElementById('sortableBody');
    if (tbody) {
        new Sortable(tbody, {
            handle: '.handle',
            animation: 150,
            ghostClass: 'dragging',
            onEnd: function(evt) {
                const route = tbody.dataset.route;
                const order = [];
                tbody.querySelectorAll('.sortable-row').forEach((row, index) => {
                    order.push(row.dataset.id);
                });
                
                $.ajax({
                    url: route,
                    type: 'POST',
                    data: {
                        order: order,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (typeof toastr !== 'undefined') {
                            toastr.success('Server order updated');
                        }
                    },
                    error: function() {
                        if (typeof toastr !== 'undefined') {
                            toastr.error('Failed to update order');
                        }
                    }
                });
            }
        });
    }
    
    document.querySelectorAll('.btn-edit').forEach(btn => {
        btn.addEventListener('click', function() {
            const server = JSON.parse(this.dataset.server);
            const modal = new bootstrap.Modal(document.getElementById('editServerModal'));
            const form = document.getElementById('editForm');
            
            form.action = '{{ route("admin.openvpn.update", ":id") }}'.replace(':id', server.id);
            document.getElementById('edit_name').value = server.name || '';
            document.getElementById('edit_country_code').value = server.country_code || '';
            document.getElementById('edit_city_name').value = server.city_name || '';
            document.getElementById('edit_username').value = server.username || '';
            document.getElementById('edit_password').value = '';
            document.getElementById('edit_type').value = server.type || 0;
            
            const configInfo = document.getElementById('currentConfigInfo');
            if (server.config_file) {
                configInfo.style.display = 'block';
            } else {
                configInfo.style.display = 'none';
            }
            
            modal.show();
        });
    });
    
    document.querySelectorAll('.btn-delete').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            if (confirm('Are you sure you want to delete this server?')) {
                window.location.href = '{{ route("admin.openvpn.delete", ":id") }}'.replace(':id', id);
            }
        });
    });
    
    $('.status-toggle').on('change', function() {
        const serverId = $(this).data('id');
        const status = $(this).is(':checked') ? 1 : 0;
        
        $.ajax({
            url: '{{ route("admin.openvpn.status", ":id") }}'.replace(':id', serverId),
            type: 'POST',
            data: { status: status, _token: '{{ csrf_token() }}' },
            success: function(response) {
                toastr.success(response.success || 'Status updated');
            }
        });
    });
});
</script>
@endpush