@extends('layouts.app')

@section('content')
<div class="container py-5">
    {{-- <h1 class="mb-4">Au</h1> --}}

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif


    <form method="POST" enctype="multipart/form-data" action="{{ route('settings.updateAutotask', $settings->id) }}">
        @csrf

        <div class="">
           
           

            {{-- Integration --}}
            <div class="tab-pane " id="integration">

                <h1 class="mb-4 mt-5">
                    <img src="/{{ 'uploads/autotask-logo.jpg' }}" alt="Autotask" style="max-height: 80px;">
                </h1>
                <div class="mb-3"><label>Username</label>
                    <input type="text" name="autotaskusername" class="form-control" value="{{ $settings->autotaskusername }}">
                </div>
                <div class="mb-3"><label>Secret</label>
                    <input type="password" name="autotasksecret" class="form-control" value="{{ $settings->autotasksecret }}">
                </div>
                <div class="mb-3"><label>Integration Code</label>
                    <input type="text" name="autotaskintegrationcode" class="form-control" value="{{ $settings->autotaskintegrationcode }}">
                </div>
                <div class="mb-3"><label>API Url</label>
                    <input type="text" name="autotaskapiurl" class="form-control" value="{{ $settings->autotaskapiurl }}">
                </div>


                <button type="button" id="test_connection" class="btn btn-info">Test Connection</button>
                <div id="testresponse" class="mt-4"></div>

                <script>
                document.getElementById('test_connection').addEventListener('click', function () {
                    const button = this;
                    const originalText = button.textContent;
                    button.textContent = 'Fetching...';
                    button.disabled = true;

                    const formData = new FormData();
                    formData.append('username', document.querySelector('[name="autotaskusername"]').value);
                    formData.append('secret', document.querySelector('[name="autotasksecret"]').value);
                    formData.append('integrationcode', document.querySelector('[name="autotaskintegrationcode"]').value);
                    formData.append('apiurl', document.querySelector('[name="autotaskapiurl"]').value);

                    fetch("{{ route('test.autotask') }}", {
                        method: "POST",
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: formData
                    })
                    .then(res => res.json())
                    .then(data => {
                        const responseDiv = document.getElementById('testresponse');
                        if (data.success) {
                            responseDiv.innerHTML = `<div class="alert alert-success">✅ Connection Successful!</div>`;
                        } else {
                            responseDiv.innerHTML = `<div class="alert alert-danger">❌ Connection Failed: ${data.message}</div>`;
                        }
                    })
                    .catch(err => {
                        document.getElementById('testresponse').innerHTML =
                            `<div class="alert alert-danger">❌ Error: ${err.message}</div>`;
                    }).finally(() => {
                        button.textContent = originalText;
                        button.disabled = false;
                    });
                });
                </script>


            </div>

        </div>

        @if($user->is_admin || $isExternal)
        <div class="mt-4">
            <button type="submit" name="save_settings" class="btn btn-primary">Save Settings</button>
        </div>
        @endif
    </form>


</div>
@endsection