@extends('layouts.app')

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

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

    <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#site">Site</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#email">Reset Password Email</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#smtp">SMTP</button></li>
        {{-- <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#branding">Branding</button></li> --}}
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#integration">Integration</button></li>
    </ul>

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

        <div class="tab-content">
            {{-- Site --}}
            <div class="tab-pane fade show active" id="site">
                <div class="mb-3">
                    <label>Site Name</label>
                    <input type="text" name="site_name" class="form-control" value="{{ old('site_name', $settings->site_name ?? '') }}">
                </div>
                <div class="mb-3">
                    <label>Logo</label>
                    <input type="file" name="logo_path" class="form-control">
                    @if(!empty($settings->logo_path))
                        <img src="{{ asset($settings->logo_path) }}" class="mt-2" style="max-height:80px;">
                    @endif
                </div>
                <div class="mb-3">
                    <label>Banner Color</label>
                    <input type="color" name="banner_color" value="{{ old('banner_color', $settings->banner_color ?? '#007bff') }}">
                </div>
            </div>

            {{-- Email --}}
            <div class="tab-pane fade" id="email">
                <div class="mb-3">
                    <label>Email Subject</label>
                    <input type="text" name="email_subject" class="form-control" value="{{ $resetpassword->subject }}">
                </div>
                <div class="mb-3">
                    <label>Email Body (use variables like {fullname} {username} {name}  {email} {reset_link})</label>
                    <textarea name="email_body" rows="6" class="form-control">{{ $resetpassword->body }}</textarea>
                </div>
            </div>

            {{-- SMTP --}}
            <div class="tab-pane fade" id="smtp">
                <div class="mb-3"><label>From Email</label>
                    <input type="email" name="from_email" class="form-control" value="{{ $settings->from_email }}">
                </div>
                <div class="mb-3"><label>Send To</label>
                    <input type="email" name="email_to" class="form-control" value="{{ $settings->email_to }}">
                </div>
                <div class="mb-3"><label>SMTP Host</label>
                    <input type="text" name="smtp_host" class="form-control" value="{{ $settings->smtp_host }}">
                </div>
                <div class="mb-3"><label>SMTP Port</label>
                    <input type="number" name="smtp_port" class="form-control" value="{{ $settings->smtp_port }}">
                </div>
                <div class="mb-3"><label>SMTP Username</label>
                    <input type="text" name="smtp_username" class="form-control" value="{{ $settings->smtp_username }}">
                </div>
                <div class="mb-3"><label>SMTP Password</label>
                    <input type="password" name="smtp_password" class="form-control" value="{{ $settings->smtp_password }}">
                </div>
                <div class="mb-3"><label>SMTP Secure</label>
                    <select name="smtp_secure" class="form-control">
                        <option value="tls" {{ $settings->smtp_secure=='tls'?'selected':'' }}>TLS</option>
                        <option value="ssl" {{ $settings->smtp_secure=='ssl'?'selected':'' }}>SSL</option>
                    </select>
                </div>
            </div>

           

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

                <h1 class="mb-4 mt-5">
                    <img src="/{{ 'uploads/zapier-logo.png' }}" alt="zapier" style="max-height: 80px;">
                </h1>

                @php
                    // Generate API Key (static or dynamic)
                    function vform_generate_api_key() {
                        return 'hn6D09^siR&Z@Q^B*QdkMxeg@SfJPSUnxO3';
                    }

                    $api_key = vform_generate_api_key();

                    // Get site URL
                    $siteUrl = url('/');
                @endphp

                <div class="tab-zapier">
                    <div class="mb-3">
                        <label class="form-label">API Key</label>
                        <input type="text" class="form-control" disabled value="{{ $api_key }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Site Key</label>
                        <input type="text" class="form-control" disabled value="{{ $siteUrl }}">
                    </div>
                </div>



                <h3>Autotask</h3>
                <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