@extends('layout.app')
@section('title', 'Servers Create')
@section('style')
@endsection
@section('main')


    <div class="row py-4">
        <div class="card card-body border-0 shadow mb-4">
            <div class="row">
                <div class="col-12 col-xl-12">
                    <h2 class="h5 mb-4">
                        <a href="{{url('servers')}}" class="btn btn-outline-warning text-dark d-inline-flex align-items-center">
                            ← Back
                        </a>
                        <br><br>
                        Server Create
                    </h2>

                    <div id="server-information">
                        <form id="serverForm">@csrf

                            <!-- Server Info -->
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label>Server Name</label>
                                    <input class="form-control" name="server_name" required>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label>Server Type</label>
                                    <select class="form-select" name="server_type" required>
                                        <option value="">Select Type</option>
                                        <option value="Database">Database</option>
                                        <option value="SFTP">SFTP</option>
                                        <option value="Application">Application</option>
                                        <option value="Web">Web</option>
                                        <option value="Cache">Cache</option>

                                    </select>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>

                            <!-- System Info -->
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label>OS</label>
                                    <input class="form-control" name="os_info">
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label>RAM (GB)</label>
                                    <input type="number" class="form-control" name="ram_gb">
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label>CPU</label>
                                    <input type="number" class="form-control" name="cpu_cores">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>

                            <!-- Network -->
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label>Private IP</label>
                                    <input class="form-control" name="ip_address">
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label>Public IP</label>
                                    <input class="form-control" name="public_ip_address">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>

                            <hr>

                            <!-- USERS TABLE -->
                            <h5>Server Users</h5>

                            <table class="table table-bordered" id="userTable">
                                <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Password</th>
                                    <th>Port</th>
                                    <th>Access Type</th>
                                    <th>Level</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody id="userTableBody">

                                <!-- Default Row -->
                                <tr>
                                    <td><input name="users[0][user_name]" class="form-control"></td>
                                    <td><input type="text" name="users[0][password]" class="form-control"></td>
                                    <td><input type="number" name="users[0][port]" class="form-control"></td>

                                    <td>
                                        <select name="users[0][access_type]" class="form-select">
                                            <option value="SSH">SSH</option>
                                            <option value="Remote Desktop">Remote Desktop</option>
                                            <option value="SFTP">SFTP</option>
                                            <option value="MySQL">MySQL</option>
                                            <option value="Oracle">Oracle</option>
                                        </select>
                                    </td>

                                    <td>
                                        <select name="users[0][access_level]" class="form-select">
                                            <option value="admin">Admin</option>
                                            <option value="write">Write</option>
                                            <option value="read">Read</option>
                                        </select>
                                    </td>

                                    <td>
                                        <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">X</button>
                                    </td>
                                </tr>

                                </tbody>
                            </table>

                            <button type="button" class="btn btn-success btn-sm" onclick="addRow()">+ Add User</button>

                            <br><br>

                            <button type="button" class="btn btn-primary" onclick="submitServer()">Save Server</button>

                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>

@endsection
@section('script')

    <script>
        let rowIndex = 1;
        // Add Row
        function addRow() {
            let row = `
        <tr>
            <td><input name="users[${rowIndex}][user_name]" class="form-control"></td>
            <td><input type="text" name="users[${rowIndex}][password]" class="form-control"></td>
            <td><input type="number" name="users[${rowIndex}][port]" class="form-control"></td>

            <td>
                <select name="users[${rowIndex}][access_type]" class="form-select">
                    <option value="SSH">SSH</option>
                    <option value="Remote Desktop">Remote Desktop</option>
                    <option value="SFTP">SFTP</option>
                    <option value="MySQL">MySQL</option>
                    <option value="Oracle">Oracle</option>
                </select>
            </td>

            <td>
                <select name="users[${rowIndex}][access_level]" class="form-select">
                    <option value="admin">Admin</option>
                    <option value="write">Write</option>
                    <option value="read">Read</option>
                </select>
            </td>

            <td>
                <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">X</button>
            </td>
        </tr>
    `;

            $('#userTableBody').append(row);
            rowIndex++;
        }
        // Remove Row
        function removeRow(btn) {
            $(btn).closest('tr').remove();
        }
        // Submit
        function submitServer() {
            let form = $("#serverForm")[0];
            let formData = new FormData(form);

            $.ajax({
                url: "{{ route('servers.store') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,

                success: function (data) {
                    Swal.fire({
                        title: "Success!",
                        text: data.statusMsg,
                        icon: "success"
                    });
                    form.reset();
                },

                error: function (xhr) {

                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        showErrors1(errors);
                    } else {
                        Swal.fire({
                            text: "Internal Server Error",
                            icon: "error"
                        });
                    }
                }
            });

            return false;
        }
        function showErrors1(errors) {

            // Clear old errors
            $('.form-control, .form-select').removeClass('is-invalid');
            $('.invalid-feedback').text('');

            $.each(errors, function (key, value) {

                let inputName = key.replace(/\./g, "][");
                inputName = inputName.replace(/\[(\d+)\]/g, "[$1]");

                let input = $('[name="' + key + '"], [name="' + inputName + '"]');

                if (input.length) {
                    input.addClass('is-invalid');
                    input.closest('td, .mb-3').find('.invalid-feedback').text(value[0]);
                }
            });
        }
    </script>
@endsection