@extends('layout.app')
@section('title', 'Edit Server')

@section('main')

    <div class="row py-4">
        <div class="card card-body shadow">

            <h4>
                <a href="{{ url('servers') }}" class="btn btn-warning">← Back</a>
                <br><br>
                Edit Server
            </h4>

            <form id="serverForm">
                @csrf

                <!-- SERVER INFO -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label>Server Name</label>
                        <input name="server_name" value="{{ $server->server_name }}" class="form-control">
                        <div class="invalid-feedback"></div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Server Type</label>
                        <select name="server_type" class="form-select">
                            <option value="">Select</option>
                            <option value="Database" {{ $server->server_type=='Database'?'selected':'' }}>Database</option>
                            <option value="SFTP" {{ $server->server_type=='SFTP'?'selected':'' }}>SFTP</option>
                            <option value="Application" {{ $server->server_type=='Application'?'selected':'' }}>Application</option>
                            <option value="Web" {{ $server->server_type=='Web'?'selected':'' }}>Web</option>
                            <option value="Cache" {{ $server->server_type=='Cache'?'selected':'' }}>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 name="os_info" value="{{ $server->os_info }}" class="form-control">
                        <div class="invalid-feedback"></div>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label>RAM</label>
                        <input type="number" name="ram_gb" value="{{ $server->ram_gb }}" class="form-control">
                        <div class="invalid-feedback"></div>
                    </div>

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

                <!-- NETWORK -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label>Private IP</label>
                        <input name="ip_address" value="{{ $server->ip_address }}" class="form-control">
                        <div class="invalid-feedback"></div>
                    </div>

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

                <hr>

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

                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>User</th>
                        <th>Password (TEXT)</th>
                        <th>Port</th>
                        <th>Access Type</th>
                        <th>Level</th>
                        <th>Action</th>
                    </tr>
                    </thead>

                    <tbody id="userTableBody">

                    @foreach($server->users as $i => $user)
                        <tr>
                            <td>
                                <input name="users[{{ $i }}][user_name]"
                                       value="{{ $user->user_name }}"
                                       class="form-control">
                                <div class="invalid-feedback"></div>
                            </td>

                            <td>
                                <!-- TEXT PASSWORD FIELD -->
                                <input type="text"
                                       name="users[{{ $i }}][password]"
                                       value="{{ $user->password_hash ?? '' }}"
                                       class="form-control">
                                <div class="invalid-feedback"></div>
                            </td>

                            <td>
                                <input type="number"
                                       name="users[{{ $i }}][port]"
                                       value="{{ $user->port }}"
                                       class="form-control">
                                <div class="invalid-feedback"></div>
                            </td>

                            <td>
                                <select name="users[{{ $i }}][access_type]" class="form-select">
                                    <option value="SSH" {{ $user->access_type=='SSH'?'selected':'' }}>SSH</option>
                                    <option value="Remote Desktop" {{ $user->access_type=='Remote Desktop'?'selected':'' }}>Remote Desktop</option>
                                    <option value="SFTP" {{ $user->access_type=='SFTP'?'selected':'' }}>SFTP</option>
                                    <option value="MySQL" {{ $user->access_type=='MySQL'?'selected':'' }}>MySQL</option>
                                    <option value="Oracle" {{ $user->access_type=='Oracle'?'selected':'' }}>Oracle</option>
                                </select>
                                <div class="invalid-feedback"></div>
                            </td>

                            <td>
                                <select name="users[{{ $i }}][access_level]" class="form-select">
                                    <option value="admin" {{ $user->access_level=='admin'?'selected':'' }}>Admin</option>
                                    <option value="write" {{ $user->access_level=='write'?'selected':'' }}>Write</option>
                                    <option value="read" {{ $user->access_level=='read'?'selected':'' }}>Read</option>
                                </select>
                                <div class="invalid-feedback"></div>
                            </td>

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

                    </tbody>
                </table>

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

                <br><br>

                <button type="button" onclick="submitUpdate()" class="btn btn-primary">
                    Update Server
                </button>

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

@endsection


@section('script')
    <script>
        let rowIndex = {{ count($server->users ?? []) }};

        // ADD ROW
        function addRow() {
            let row = `
    <tr>
        <td>
            <input name="users[${rowIndex}][user_name]" class="form-control">
            <div class="invalid-feedback"></div>
        </td>

        <td>
            <input type="text" name="users[${rowIndex}][password]" class="form-control">
            <div class="invalid-feedback"></div>
        </td>

        <td>
            <input type="number" name="users[${rowIndex}][port]" class="form-control">
            <div class="invalid-feedback"></div>
        </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 UPDATE
        function submitUpdate() {

            let form = $("#serverForm")[0];
            let formData = new FormData(form);

            formData.append('_method', 'PUT');

            $.ajax({
                url: "{{ route('servers.update', $server->id) }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,

                success: function (res) {
                    clearErrors();

                    Swal.fire({
                        title: "Success!",
                        text: res.statusMsg,
                        icon: "success"
                    });
                },

                error: function (xhr) {

                    clearErrors();

                    if (xhr.status === 422) {
                        showErrors(xhr.responseJSON.errors);
                    } else {
                        Swal.fire("Error", "Internal Server Error", "error");
                    }
                }
            });
        }

        // CLEAR ERRORS
        function clearErrors() {
            $('.form-control, .form-select').removeClass('is-invalid');
            $('.invalid-feedback').text('');
        }

        // SHOW ERRORS
        function showErrors(errors) {

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

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

                if (!input.length) {
                    let fixed = key.replace(/\.(\d+)\./g, "[$1][");
                    fixed = fixed.replace(/\./g, "]");
                    input = $('[name="' + fixed + '"]');
                }

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

@endsection