@extends('layouts.main')

@section('content')
<div class="container-fluid">
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    @if(isset($settings['last_error']) && $settings['last_error'])
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>Last Error:</strong> {{ $settings['last_error'] }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h2 class="page-title">SMS Integration Settings (NenaSasa)</h2>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">SMS Configuration</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('settings.sms.save') }}">
                        @csrf
                        
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="smsEnabled" name="sms_enabled" value="1" {{ old('sms_enabled', $settings['enabled'] ?? false) ? 'checked' : '' }}>
                                <label class="form-check-label" for="smsEnabled">Enable SMS</label>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">OAuth2 Client ID</label>
                            <input type="text" name="sms_oauth_client_id" class="form-control" value="{{ $settings['oauth_client_id'] ?? '' }}" placeholder="Enter OAuth2 Client ID">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Username</label>
                            <input type="text" name="sms_oauth_username" class="form-control" value="{{ $settings['oauth_username'] ?? '' }}" placeholder="Enter your Nenasasa username">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Password</label>
                            <input type="password" name="sms_oauth_password" class="form-control" value="{{ $settings['oauth_password'] ?? '' }}" placeholder="Enter your Nenasasa password">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Channel ID (chid)</label>
                            <input type="text" name="sms_channel_id" class="form-control" value="{{ $settings['channel_id'] ?? '' }}" placeholder="Enter Channel ID">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Sender ID (alias)</label>
                            <input type="text" name="sms_sender_id" class="form-control" value="{{ $settings['sender_id'] ?? '' }}" placeholder="Enter Sender ID">
                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save me-2"></i> Save Settings
                        </button>
                    </form>
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-header">
                    <h3 class="card-title">Test SMS</h3>
                </div>
                <div class="card-body">
                    <form id="testSmsForm">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Phone Number</label>
                            <input type="text" name="phone" class="form-control" placeholder="e.g., 254712345678" required>
                            <small class="text-muted">Enter the phone number without the + symbol</small>
                        </div>
                        <button type="submit" class="btn btn-info">
                            <i class="bi bi-send me-2"></i> Send Test SMS
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="clearCache()">
                            <i class="bi bi-arrow-clockwise me-2"></i> Clear Cache
                        </button>
                    </form>
                    <div id="testSmsResult" class="mt-3"></div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Configuration Help</h3>
                </div>
                <div class="card-body">
                    <h5>NenaSasa Bulk SMS</h5>
                    <ol>
                        <li>Go to <a href="https://nenasasa.com" target="_blank">NenaSasa</a></li>
                        <li>Login to your account</li>
                        <li>Go to Developer → Settings to get OAuth2 credentials</li>
                        <li>Enter your Client ID and Username/Password</li>
                        <li>Get your Channel ID from your account</li>
                        <li>Register your Sender ID (Alias)</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('testSmsForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const resultDiv = document.getElementById('testSmsResult');
    
    resultDiv.innerHTML = '<div class="alert alert-info">Sending test SMS...</div>';
    
    fetch('{{ route("settings.sms.test") }}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultDiv.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
        } else {
            resultDiv.innerHTML = '<div class="alert alert-danger">' + data.message + '</div>';
        }
    })
    .catch(error => {
        resultDiv.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
    });
});

function clearCache() {
    fetch('{{ route("settings.sms.clear-cache") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        alert(data.message);
    })
    .catch(error => {
        alert('Error: ' + error.message);
    });
}
</script>
@endsection
