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

@push('style')
    <link rel="stylesheet" href="{{ asset('assets/css/dashboard.css') }}" />
    <style>
        .settings-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
        }

        .settings-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            font-weight: 600;
            margin-bottom: 6px;
        }

        .form-actions {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }

        .help {
            color: #6b7280;
            font-size: .9rem;
        }

        @media (max-width: 900px) {
            .form-row {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="dashboard-content">

                <div class="stats-grid" style="margin-bottom:18px;">
                    <div class="stat-card customers-card">
                        <div class="stat-icon"><i class="fas fa-sms"></i></div>
                        <div class="stat-info">
                            <h3>{{ strtoupper($setting->provider ?? 'twilio') }}</h3>
                            <p>Provider</p>
                            <span class="stat-change"><i class="fas fa-power-off"></i>
                                {{ $setting->active ? 'Active' : 'Inactive' }}</span>
                        </div>
                    </div>
                    <div class="stat-card revenue-card">
                        <div class="stat-icon"><i class="fas fa-phone"></i></div>
                        <div class="stat-info">
                            <h3>{{ $setting->from_number ?: 'Not set' }}</h3>
                            <p>From</p>
                            <span class="stat-change"><i class="fas fa-clock"></i>
                                {{ $setting->last_tested_at ? $setting->last_tested_at->diffForHumans() : 'Never tested' }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="dashboard-grid">
                    <div class="dashboard-card settings-card">
                        <div class="card-header">
                            <h3>SMS Configuration</h3>
                            <div class="card-actions">
                                <a href="{{ route('sms-settings.edit') }}" class="view-all">Refresh</a>
                            </div>
                        </div>

                        @if (session('status'))
                            <div class="alert alert-success" style="margin-bottom:16px;">{{ session('status') }}</div>
                        @endif

                        @if ($errors->any())
                            <div class="alert alert-danger" style="margin-bottom:16px;">
                                <ul style="margin:0;padding-left:18px;">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form method="POST" action="{{ route('sms-settings.update') }}">
                            @csrf
                            @method('PUT')

                            <div class="settings-grid">

                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="provider">Provider</label>
                                        <select id="provider" name="provider" class="form-control">
                                            <option value="twilio"
                                                {{ old('provider', $setting->provider) === 'twilio' ? 'selected' : '' }}>
                                                Twilio</option>
                                        </select>
                                        <span class="help">This setup supports Twilio (SMS & WhatsApp).</span>
                                    </div>

                                    <div class="form-group">
                                        <label for="active">Active</label>
                                        <select id="active" name="active" class="form-control">
                                            <option value="1"
                                                {{ old('active', (int) $setting->active) ? 'selected' : '' }}>Active
                                            </option>
                                            <option value="0"
                                                {{ !old('active', (int) $setting->active) ? 'selected' : '' }}>Inactive
                                            </option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="channel">Channel</label>
                                        <select id="channel" name="channel" class="form-control">
                                            <option value="sms"
                                                {{ old('channel', $setting->channel) === 'sms' ? 'selected' : '' }}>SMS
                                            </option>
                                            <option value="whatsapp"
                                                {{ old('channel', $setting->channel) === 'whatsapp' ? 'selected' : '' }}>
                                                WhatsApp</option>
                                        </select>
                                        <span class="help">WhatsApp requires approved senders in Twilio.</span>
                                    </div>

                                    <div class="form-group">
                                        <label for="from_number">From (phone or WhatsApp)</label>
                                        <input id="from_number" name="from_number" class="form-control" type="text"
                                            value="{{ old('from_number', $setting->from_number) }}"
                                            placeholder="+14155550123">
                                        <span class="help">E.164 format, e.g. +14155550123. For WhatsApp, enter the number
                                            only; prefix is added automatically.</span>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="twilio_messaging_service_sid">Messaging Service SID (optional)</label>
                                        <input id="twilio_messaging_service_sid" name="twilio_messaging_service_sid"
                                            class="form-control" type="text"
                                            value="{{ old('twilio_messaging_service_sid', $setting->twilio_messaging_service_sid) }}">
                                        <span class="help">If provided, Twilio will use your Messaging Service instead of
                                            the From number.</span>
                                    </div>

                                    <div class="form-group">
                                        <label for="twilio_account_sid">Twilio Account SID</label>
                                        <input id="twilio_account_sid" name="twilio_account_sid" class="form-control"
                                            type="text"
                                            value="{{ old('twilio_account_sid', $setting->twilio_account_sid) }}" required>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="twilio_auth_token">Twilio Auth Token</label>
                                        <input id="twilio_auth_token" name="twilio_auth_token" class="form-control"
                                            type="password" placeholder="••••••••">
                                        <span class="help">Leave blank to keep current token.</span>
                                    </div>
                                </div>

                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Save Settings
                                    </button>

                                    <div style="display:flex; gap:8px; align-items:center;">
                                        <input type="text" name="test_to" class="form-control" placeholder="+14155550123"
                                            value="{{ old('test_to') }}" style="max-width:240px;">
                                        <input type="text" name="test_message" class="form-control"
                                            placeholder="Optional custom test message" value="{{ old('test_message') }}"
                                            style="min-width:260px;">
                                        <button type="submit" class="btn btn-secondary">
                                            <i class="fas fa-paper-plane"></i> Save & Queue Test
                                        </button>
                                    </div>
                                </div>

                                <div class="help">Tip: You can also send a one‑off test below without saving again.</div>
                            </div>
                        </form>

                        <hr style="margin:20px 0;">

                        <form method="POST" action="{{ route('sms-settings.test') }}" class="form-inline">
                            @csrf
                            <div class="form-actions">
                                <input type="text" name="test_to" class="form-control" placeholder="+14155550123"
                                    required style="max-width:240px;">
                                <input type="text" name="test_message" class="form-control"
                                    placeholder="Optional custom test message" style="min-width:260px;">
                                <button type="submit" class="btn btn-outline-primary">
                                    <i class="fas fa-flask"></i> Queue Test SMS
                                </button>
                                <span class="help">A queued job will send a simple test message using the current active
                                    settings.</span>
                            </div>
                        </form>

                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        /* JS hooks can be added here if needed */
    </script>
@endpush