@extends('admin.layout.app')
@section('content')
    <script src="{{ asset('admin-asset/wireguardkey/index.js') }}"></script>
    <script src="{{ asset('admin-asset/wireguardkey/inbound.js') }}"></script>
    <div>
        <!-- Page Header -->
        <div class="flex flex-col sm:flex-row items-center justify-between mb-6">
            <div>
                <h3 class="text-xl font-bold text-gray-800">Servers</h3>
                <p class="text-sm text-gray-500 mt-1">Manage all your servers from here</p>
            </div>
            <div class="mt-4 sm:mt-0">
                <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 flex items-center gap-2" onclick='openServerForm()'>
                    <i class="mdi mdi-plus text-lg leading-none"></i> Add New
                </button>
            </div>
        </div>

        <!-- DataTable Card -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="overflow-x-auto">
                    <table id="listDataTable" class="w-full whitespace-nowrap text-left border-collapse">
                        <thead>
                            <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider border-b border-gray-200">
                                <th class="px-6 py-4 font-medium rounded-tl-lg">ID</th>
                                <th class="px-6 py-4 font-medium">Country Code</th>
                                <th class="px-6 py-4 font-medium">Country Name</th>
                                <th class="px-6 py-4 font-medium">Server Type</th>
                                <th class="px-6 py-4 font-medium">Server Address</th>
                                <th class="px-6 py-4 font-medium">Server Ip</th>
                                <th class="px-6 py-4 font-medium">Provide To</th>
                                <th class="px-6 py-4 font-medium rounded-tr-lg">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Server Modal -->
    <div class="modal fade" id="serverModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered relative">
            <form id="add_server" class="modal-content border-0 shadow-2xl rounded-xl overflow-hidden bg-white w-full">
                <input type="hidden" name="id">
                
                <!-- Modal Header -->
                <div class="bg-gray-50 border-b border-gray-100 px-6 py-4 flex items-center justify-between">
                    <h5 class="text-lg font-bold text-gray-800 modal-title">Add Server</h5>
                    <button type="button" class="text-gray-400 hover:text-red-500 transition-colors focus:outline-none p-1 rounded-md hover:bg-red-50 flex items-center justify-center h-8 w-8" data-bs-dismiss="modal">
                        <i class="mdi mdi-close text-xl leading-none"></i>
                    </button>
                </div>

                <!-- Modal Body -->
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Country Code -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Country Code</label>
                            <input type="text" name="country_code" placeholder="Country Code" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                        </div>
                        
                        <!-- Country Name -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Country Name</label>
                            <input type="text" name="country_names" placeholder="Country Name" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                        </div>
                        
                        <!-- Protocol -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Protocol</label>
                            <select name="server_type" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm bg-white">
                                <option value="">Select Protocol</option>
                                <option value="Wireguard">Wireguard</option>
                                <option value="Vless">Vless</option>
                                <option value="Vmess">Vmess</option>
                                <option value="Trojan">Trojan</option>
                                <option value="Shadowsocks">Shadowsocks</option>
                                <option value="Open VPN (TCP)">Open VPN (TCP)</option>
                                <option value="Open VPN (UDP)">Open VPN (UDP)</option>
                                <option value="Ikev2 PSK">Ikev2 PSK</option>
                                <option value="Ikev2 EAP">Ikev2 EAP</option>
                                <option value="IPSec">IPSec</option>
                            </select>
                        </div>
                        
                        <!-- Server IPS -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Server Ip</label>
                            <input type="text" name="server_ip" placeholder="Server Ip" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                        </div>
                        
                        <!-- Provide To -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Provide To</label>
                            <select name="provide_to" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm bg-white">
                                <option value="">Select Provide To</option>
                                <option value="Free">Free</option>
                                <option value="Premium">Premium</option>
                            </select>
                        </div>
                        
                        <!-- Location Row -->
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Latitude</label>
                                <input type="text" name="latitude" placeholder="Latitude" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Longitude</label>
                                <input type="text" name="longitude" placeholder="Longitude" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                            </div>
                        </div>

                        <!-- Server Address -->
                        <div class="md:col-span-2 commonDiv" id="server_address_div">
                            <label id="s_a" class="block text-sm font-medium text-gray-700 mb-2">Server Address</label>
                            <textarea name="server_address" rows="4" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm font-mono"></textarea>
                        </div>
                        
                        <!-- Username / Password -->
                        <div class="commonDiv" id="username_div">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Username</label>
                            <input type="text" name="username" placeholder="Username" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                        </div>
                        <div class="commonDiv" id="password_div">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Password</label>
                            <input type="password" name="password" placeholder="Password" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                        </div>
                        
                        <!-- Remote ID / Local ID -->
                        <div class="commonDiv" id="remote_id_div">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Remote ID</label>
                            <input type="text" name="remote_id" placeholder="Remote ID" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                        </div>
                        <div class="commonDiv" id="local_id_div">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Local ID</label>
                            <input type="text" name="local_id" placeholder="Local ID" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm" />
                        </div>

                        <!-- Secret Key -->
                        <div class="md:col-span-2 commonDiv" id="secret_key_div">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Secret Key</label>
                            <input type="text" name="secret_key" placeholder="Secret Key" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm font-mono" />
                        </div>
                    </div>
                </div>

                <!-- Modal Footer -->
                <div class="bg-gray-50 border-t border-gray-100 px-6 py-4 flex items-center justify-end gap-3 rounded-b-xl">
                    <button type="button" class="px-4 py-2 bg-white border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium focus:outline-none" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="addUpdate px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Save</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('customJs')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.3/css/dataTables.dataTables.css" />
    <script src="https://cdn.datatables.net/2.1.3/js/dataTables.js"></script>
    <style>
        /* Modernized DataTable Styles for Tailwind */
        .dt-container { font-size: 0.875rem; color: #4b5563; }
        .dt-container th.dt-ordering-asc, .dt-container th.dt-ordering-desc { color: #111827; }
        table.dataTable { border-collapse: collapse !important; border-bottom: 1px solid #e5e7eb !important; }
        table.dataTable thead th, table.dataTable thead td { padding: 1rem 1.5rem !important; border-bottom: 1px solid #e5e7eb !important; }
        table.dataTable tbody td { padding: 1rem 1.5rem !important; border-bottom: 1px solid #f3f4f6 !important; }
        table.dataTable.no-footer { border-bottom: 1px solid #e5e7eb !important; }
        .dt-container .dt-length select, .dt-container .dt-search input { border: 1px solid #d1d5db !important; border-radius: 0.5rem !important; padding: 0.375rem 0.75rem !important; outline: none; transition: all 0.2s; font-size: 0.875rem; margin-left: 0.5rem; }
        .dt-container .dt-length select:focus, .dt-container .dt-search input:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important; }
        .dt-container .dt-paging .dt-paging-button { border-radius: 0.375rem !important; padding: 0.375rem 0.75rem !important; margin: 0 0.125rem !important; border: 1px solid transparent !important; }
        .dt-container .dt-paging .dt-paging-button.current, .dt-container .dt-paging .dt-paging-button.current:hover { background-color: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; font-weight: 600; }
        .dt-container .dt-paging .dt-paging-button:hover:not(.current) { background-color: #f3f4f6 !important; border-color: #e5e7eb !important; color: #374151 !important; }
        .dt-container .dt-info { color: #6b7280 !important; font-size: 0.875rem; padding-top: 1rem !important; }
        .dt-layout-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
        .dt-layout-row:last-child { margin-top: 1.5rem; margin-bottom: 0; }
    </style>
    <script type="text/javascript">
        function reload_data_table(ele) {
            $(ele).DataTable().ajax.reload(null, false);
        }
        $(document).on('submit', '#add_server', function(event) {
            event.preventDefault();
            $.ajax({
                url: "{{ route('admin_server_add') }}",
                method: 'POST',
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                processData: false,
                success: function(data) {
                    webinaToast({
                        type: data.type,
                        message: data.text
                    });
                    if (data.type == 'success') {
                        reload_data_table('#listDataTable');
                        $('#serverModal').modal('hide');
                    }
                }
            });
        });

        function openServerForm(edit_id = 0) {
            if (edit_id) {
                $('.addUpdate').text('Update');
            } else {
                $('.addUpdate').text('Save');
            }
            $("#serverModal").find("input[name='id'],input[type='text'], input[type='number'], input[type='password'], select, textarea").val('');
            $(".commonDiv").hide();
            $("#serverModal").modal('show');
            if (parseInt(edit_id) > 0) {
                $.ajax({
                    url: "{{ route('admin_server_edit') }}",
                    method: "POST",
                    data: {
                        id: edit_id
                    },
                    dataType: "JSON",
                    success: function(data) {
                        $.each(data, function(key, value) {
                            if (key == "server_type") {
                                $('#add_server [name="server_type"]').val(value).trigger('change');
                            } else {
                                $('#add_server [name="' + key + '"]').val(value);
                            }
                        });
                    }
                });
            }
        }

        function load_datatable() {
            $('#listDataTable').DataTable({
                "pageLength": 10,
                "lengthMenu": [10, 20, 50, 100, 200],
                "language": {
                    "lengthMenu": '_MENU_',
                    "sSearch": "",
                    "searchPlaceholder": "Search records",
                    paginate: {
                        next: '<i class="fa fa-angle-double-right" aria-hidden="true"></i>',
                        previous: '<i class="fa fa-angle-double-left" aria-hidden="true"></i>'
                    }
                },
                "processing": true,
                "serverSide": true,
                "ajax": {
                    url: "{{ route('admin_server_fetchAllList') }}",
                    type: "POST",
                    data: {}
                },
                "columnDefs": [{
                    "orderable": false,
                    "targets": [4, 7]
                }, ],
                "order": [
                    [0, 'desc']
                ],
            });
        }

        function updateStatus(id) {
            event.preventDefault();
            webinaFire({
                icon: "question",
                title: "Are you sure to change status?",
                acceptButton: "Yes, change it!",
                cancelButton: "Cancel",
                message: "",
                accept: function() {
                    if ($("#" + id + "_status").is(":checked")) {
                        var status = 0;
                    } else {
                        var status = 1;
                    }
                    $.ajax({
                        url: "{{ route('admin_server_status') }}",
                        method: 'POST',
                        data: {
                            id: id,
                            status: status
                        },
                        dataType: 'JSON',
                        success: function(data) {
                            webinaToast({
                                type: data.type,
                                message: data.text
                            });
                            if (data.type == 'success') {
                                reload_data_table('#listDataTable');
                            }
                        }
                    });
                }
            });
        }

        function deleteServer(id) {
            event.preventDefault();
            webinaFire({
                icon: "question",
                title: "Are you sure to Delete?",
                acceptButton: "Yes, Delete it!",
                cancelButton: "Cancel",
                message: "",
                accept: function() {
                    $.ajax({
                        url: "{{ route('admin_server_delete') }}",
                        type: 'delete',
                        data: {
                            id: id
                        },
                        dataType: 'json',
                        success: function(data) {
                            webinaToast({
                                type: data.type,
                                message: data.text
                            });
                            if (data.type == 'success') {
                                reload_data_table("#listDataTable");
                            }
                        }
                    });
                }
            });
        }
        $(document).on("change", "select[name='server_type']", function() {
            var selected = $(this).val();
            if (selected == "Wireguard") {
                $("#s_a").text("Server Config");
            } else {
                $("#s_a").text("Server Address");
            }

            // First, hide all
            $(".commonDiv").hide();

            // Define logic
            switch (selected) {
                case "Open VPN (TCP)":
                case "Open VPN (UDP)":
                    $("#server_address_div, #username_div, #password_div").show();
                    break;

                case "Ikev2 PSK":
                case "Ikev2 EAP":
                case "IPSec":
                    $("#username_div, #password_div, #remote_id_div, #local_id_div, #secret_key_div").show();
                    break;

                case "Wireguard":
                case "Vless":
                case "Vmess":
                case "Trojan":
                case "Shadowsocks":
                    $("#server_address_div").show(); // Server Config
                    break;

                default:
                    // Handle unknown case (optional)
                    break;
            }
        });
        $(document).ready(function() {
            load_datatable();
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.get('modal') === '0') {
                openServerForm();
            }
        });
    </script>
@endsection