@extends('backEnd.layouts.master')
@section('title', 'SMS Settings')

@section('content')
<div class="page-header">
    <div>
        <h4><i class="fas fa-cog me-2 text-success"></i>SMS Settings</h4>
    </div>
</div>

@include('backEnd.sms.partials.subnav')

<form action="{{ route('admin.sms.settings.save') }}" method="POST">
    @csrf
    <div class="row g-4">
        <div class="col-lg-8">
            <div class="admin-card mb-4">
                <div class="admin-card-header">
                    <h5 class="mb-0"><i class="fas fa-key me-2"></i>IT Square BD SMS Gateway</h5>
                </div>
                <div class="admin-card-body">
                    <div class="alert alert-info">
                        SMS Gateway by <strong>IT Square BD</strong>. Contact: <a href="mailto:info@itsquarebd.com">info@itsquarebd.com</a>
                    </div>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="sms_enabled" value="1" id="smsEnabled"
                                   @checked(old('sms_enabled', $settings['enabled']))>
                            <label class="form-check-label" for="smsEnabled">Enable SMS sending</label>
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">API Key</label>
                            <input type="text" name="api_key" id="api_key" class="form-control font-monospace"
                                   value="{{ old('api_key', $settings['api_key']) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Sender ID</label>
                            <input type="text" name="sender_id" id="sender_id" class="form-control"
                                   value="{{ old('sender_id', $settings['sender_id']) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Send API URL</label>
                            <input type="text" name="base_url" id="base_url" class="form-control"
                                   value="{{ old('base_url', $settings['base_url']) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Bulk API URL</label>
                            <input type="text" name="bulk_url" class="form-control"
                                   value="{{ old('bulk_url', $settings['bulk_url']) }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Balance API URL</label>
                            <input type="text" name="balance_url" id="balance_url" class="form-control"
                                   value="{{ old('balance_url', $settings['balance_url']) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Low Balance Alert</label>
                            <input type="number" name="low_balance_alert" class="form-control"
                                   value="{{ old('low_balance_alert', $settings['low_balance_alert']) }}" min="0" required>
                        </div>
                    </div>

                    <div class="mt-3">
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="test-connection">
                            <i class="fas fa-plug me-1"></i> Test API Connection
                        </button>
                        <div id="test-result" class="mt-2"></div>
                    </div>
                </div>
            </div>

            <div class="admin-card">
                <div class="admin-card-header">
                    <h5 class="mb-0"><i class="fas fa-bell me-2"></i>Auto SMS Triggers</h5>
                </div>
                <div class="admin-card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="sms_order_confirm" value="1"
                                       @checked(old('sms_order_confirm', $setting->sms_order_confirm ?? false))>
                                <label class="form-check-label">Order Confirmation SMS</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="sms_status_update" value="1"
                                       @checked(old('sms_status_update', $setting->sms_status_update ?? false))>
                                <label class="form-check-label">Status Update SMS</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="sms_forgot_pass" value="1"
                                       @checked(old('sms_forgot_pass', $setting->sms_forgot_pass ?? false))>
                                <label class="form-check-label">Password Reset OTP</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="admin-card mb-4">
                <div class="admin-card-header"><h5 class="mb-0">Send Test SMS</h5></div>
                <div class="admin-card-body">
                    <p class="small text-muted mb-3">Save করার আগেও form-এর credentials দিয়ে test করা যাবে।</p>
                    <div class="mb-2">
                        <label class="form-label">Phone</label>
                        <input type="text" id="test_phone" class="form-control font-monospace" placeholder="017XXXXXXXX">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Message</label>
                        <textarea id="test_message" class="form-control" rows="3" maxlength="160">Test SMS from {{ config('app.name') }}</textarea>
                    </div>
                    <button type="button" class="btn btn-outline-primary btn-sm w-100" id="test-send">
                        <i class="fas fa-paper-plane me-1"></i> Send Test SMS
                    </button>
                    <div id="test-send-result" class="mt-2"></div>
                </div>
            </div>

            <div class="admin-card">
                <div class="admin-card-header"><h5 class="mb-0">Quick Links</h5></div>
                <div class="admin-card-body d-grid gap-2">
                    <a href="{{ route('admin.sms.dashboard') }}" class="btn btn-outline-primary btn-sm">Open Dashboard</a>
                    <a href="{{ route('admin.sms.templates.index') }}" class="btn btn-outline-primary btn-sm">Manage Templates</a>
                    <a href="{{ route('admin.sms.logs') }}" class="btn btn-outline-primary btn-sm">View SMS Logs</a>
                    <a href="{{ route('admin.social.sms-auto') }}" class="btn btn-outline-secondary btn-sm">SMS Automation Rules</a>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-4">
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save me-1"></i> Save Settings
        </button>
    </div>
</form>
@endsection

@push('scripts')
<script>
function smsPayload() {
    return {
        api_key: document.getElementById('api_key').value,
        sender_id: document.getElementById('sender_id').value,
        base_url: document.getElementById('base_url').value,
        balance_url: document.getElementById('balance_url').value
    };
}

document.getElementById('test-connection').addEventListener('click', function () {
    const csrf = document.querySelector('meta[name="csrf-token"]').content;
    const result = document.getElementById('test-result');
    result.innerHTML = '<span class="text-muted">Testing...</span>';

    fetch('{{ route('admin.sms.settings.test') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrf,
            'Accept': 'application/json'
        },
        body: JSON.stringify(smsPayload())
    })
    .then(r => r.json())
    .then(data => {
        const cls = data.status === 'ok' ? 'alert-success' : 'alert-danger';
        const balance = data.balance ? ` Balance: ${data.balance}` : '';
        result.innerHTML = `<div class="alert ${cls} py-2 mb-0 small">${data.message}${balance}</div>`;
    })
    .catch(() => { result.innerHTML = '<div class="alert alert-danger py-2 mb-0 small">Request failed</div>'; });
});

document.getElementById('test-send').addEventListener('click', function () {
    const csrf = document.querySelector('meta[name="csrf-token"]').content;
    const result = document.getElementById('test-send-result');
    const phone = document.getElementById('test_phone').value.trim();
    const message = document.getElementById('test_message').value.trim();

    if (!phone) {
        result.innerHTML = '<div class="alert alert-warning py-2 mb-0 small">Phone number required.</div>';
        return;
    }

    result.innerHTML = '<span class="text-muted">Sending...</span>';

    fetch('{{ route('admin.sms.settings.test-send') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrf,
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            ...smsPayload(),
            phone,
            message
        })
    })
    .then(r => r.json())
    .then(data => {
        const cls = data.status === 'ok' ? 'alert-success' : 'alert-danger';
        result.innerHTML = `<div class="alert ${cls} py-2 mb-0 small">${data.message}</div>`;
    })
    .catch(() => { result.innerHTML = '<div class="alert alert-danger py-2 mb-0 small">Request failed</div>'; });
});
</script>
@endpush