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

@section('content')
<div class="page-header">
    <div>
        <h4><i class="fas fa-sms me-2 text-success"></i>SMS Gateway</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active">SMS Gateway</li>
            </ol>
        </nav>
    </div>
    <div class="d-flex gap-2">
        @if(!$config['api_key_set'])
            <a href="{{ route('admin.sms.settings') }}" class="btn btn-warning btn-sm">
                <i class="fas fa-key me-1"></i> Configure API
            </a>
        @else
            <a href="{{ route('admin.sms.templates.create') }}" class="btn btn-outline-primary btn-sm">
                <i class="fas fa-plus me-1"></i> New Template
            </a>
        @endif
    </div>
</div>

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

<div class="row g-3 mb-4">
    <div class="col-md-4 col-lg-3">
        <div class="admin-card h-100">
            <div class="admin-card-body">
                <p class="text-muted small mb-1">Credit Balance</p>
                <h3 class="mb-1" id="balance-value">{{ $balance['raw'] ?? '—' }}</h3>
                @if(!empty($balance['error']))
                    <small class="text-danger">{{ $balance['error'] }}</small>
                @elseif(($balance['value'] ?? 0) < $lowAlert)
                    <small class="text-warning">Low balance alert</small>
                @else
                    <small class="text-muted">Available credits</small>
                @endif
                <div class="mt-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="refresh-balance">
                        <i class="fas fa-sync-alt me-1"></i> Refresh
                    </button>
                </div>
            </div>
        </div>
    </div>
    @foreach([
        ['Today', $stats['today'], 'primary'],
        ['This Week', $stats['week'], 'info'],
        ['This Month', $stats['month'], 'secondary'],
        ['Success', $stats['success'], 'success'],
        ['Failed', $stats['failed'], 'danger'],
    ] as [$label, $value, $color])
    <div class="col-6 col-md-4 col-lg">
        <div class="admin-card h-100">
            <div class="admin-card-body text-center">
                <p class="text-muted small mb-1">{{ $label }}</p>
                <h4 class="text-{{ $color }} mb-0">{{ number_format($value) }}</h4>
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="row g-4">
    <div class="col-lg-7">
        <div class="admin-card">
            <div class="admin-card-header">
                <ul class="nav nav-tabs card-header-tabs" id="sendTabs">
                    <li class="nav-item">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#single-tab" type="button">Single Number</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#bulk-tab" type="button">Bulk Send</button>
                    </li>
                </ul>
            </div>
            <div class="admin-card-body">
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="single-tab">
                        <div class="mb-3">
                            <label class="form-label">Use Template</label>
                            <select id="single-template" class="form-select form-select-sm">
                                <option value="">— Select template (optional) —</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Phone Number</label>
                            <input type="text" id="test-phone" class="form-control font-monospace" placeholder="01712345678">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Message</label>
                            <textarea id="test-message" class="form-control" rows="4" maxlength="640"></textarea>
                            <div class="form-text"><span id="char-count">0</span>/640 characters</div>
                        </div>
                        <button type="button" class="btn btn-primary" id="send-single-btn">
                            <i class="fas fa-paper-plane me-1"></i> Send SMS
                        </button>
                        <div id="single-result" class="mt-3"></div>
                    </div>
                    <div class="tab-pane fade" id="bulk-tab">
                        <div class="mb-3">
                            <label class="form-label">Phone Numbers</label>
                            <textarea id="bulk-numbers" class="form-control font-monospace" rows="5" placeholder="One number per line or comma separated"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Message</label>
                            <textarea id="bulk-message" class="form-control" rows="4" maxlength="640"></textarea>
                        </div>
                        <button type="button" class="btn btn-primary" id="send-bulk-btn">
                            <i class="fas fa-paper-plane me-1"></i> Send Bulk SMS
                        </button>
                        <div id="bulk-result" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        <div class="admin-card">
            <div class="admin-card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Recent Logs</h5>
                <a href="{{ route('admin.sms.logs') }}" class="small">View all</a>
            </div>
            <div class="admin-card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>To</th>
                                <th>Status</th>
                                <th>Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentLogs as $log)
                            <tr>
                                <td class="font-monospace small">{{ $log->to }}</td>
                                <td>
                                    <span class="badge bg-{{ $log->status === 'sent' ? 'success' : 'danger' }}">
                                        {{ ucfirst($log->status) }}
                                    </span>
                                </td>
                                <td class="small text-muted">{{ $log->created_at?->diffForHumans() }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="3" class="text-center text-muted py-4">No logs yet</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="admin-card mt-3">
            <div class="admin-card-body">
                <p class="mb-1 small text-muted">Gateway Status</p>
                <p class="mb-0">
                    @if($config['enabled'] && $config['api_key_set'])
                        <span class="badge bg-success">Active</span>
                        <span class="text-muted small ms-2">Sender: {{ $config['sender_id'] ?: '—' }}</span>
                    @else
                        <span class="badge bg-secondary">Not Configured</span>
                    @endif
                </p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const csrf = document.querySelector('meta[name="csrf-token"]').content;
    let templates = [];

    fetch('{{ route('admin.sms.templates.api') }}')
        .then(r => r.json())
        .then(data => {
            templates = data;
            const sel = document.getElementById('single-template');
            data.forEach(t => {
                const opt = document.createElement('option');
                opt.value = t.id;
                opt.textContent = `[${t.category}] ${t.name}`;
                opt.dataset.body = t.body;
                sel.appendChild(opt);
            });
        });

    document.getElementById('single-template').addEventListener('change', function () {
        const opt = this.selectedOptions[0];
        if (opt && opt.dataset.body) {
            document.getElementById('test-message').value = opt.dataset.body;
            updateCharCount();
            resolveVariables();
        }
    });

    document.getElementById('test-phone').addEventListener('change', resolveVariables);
    document.getElementById('test-message').addEventListener('input', updateCharCount);

    function updateCharCount() {
        const len = document.getElementById('test-message').value.length;
        document.getElementById('char-count').textContent = len;
    }

    function resolveVariables() {
        const phone = document.getElementById('test-phone').value.trim();
        const message = document.getElementById('test-message').value.trim();
        if (!phone || !message.includes('{')) return;

        fetch('{{ route('admin.sms.resolve-variables') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            body: JSON.stringify({ phone, message })
        })
        .then(r => r.json())
        .then(data => {
            if (data.message) {
                document.getElementById('test-message').value = data.message;
                updateCharCount();
            }
        });
    }

    document.getElementById('refresh-balance').addEventListener('click', function () {
        this.disabled = true;
        fetch('{{ route('admin.sms.refresh-balance') }}', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' }
        })
        .then(r => r.json())
        .then(data => {
            document.getElementById('balance-value').textContent = data.raw ?? '—';
        })
        .finally(() => { this.disabled = false; });
    });

    document.getElementById('send-single-btn').addEventListener('click', function () {
        const phone = document.getElementById('test-phone').value.trim();
        const message = document.getElementById('test-message').value.trim();
        const result = document.getElementById('single-result');
        result.innerHTML = '<div class="text-muted">Sending...</div>';

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

    document.getElementById('send-bulk-btn').addEventListener('click', function () {
        const numbers = document.getElementById('bulk-numbers').value;
        const message = document.getElementById('bulk-message').value.trim();
        const result = document.getElementById('bulk-result');
        result.innerHTML = '<div class="text-muted">Sending...</div>';

        fetch('{{ route('admin.sms.send-bulk') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            body: JSON.stringify({ numbers, message })
        })
        .then(r => r.json())
        .then(data => {
            if (data.error) {
                result.innerHTML = `<div class="alert alert-warning mb-0">${data.error}</div>`;
                return;
            }
            result.innerHTML = `<div class="alert alert-info mb-0">Sent: ${data.sent}, Failed: ${data.failed}, Total: ${data.total}</div>`;
        })
        .catch(() => { result.innerHTML = '<div class="alert alert-danger mb-0">Request failed</div>'; });
    });
})();
</script>
@endpush