@extends('layouts.app')

@section('title', 'SMS Gateway')
@section('page', 'system-settings')
@section('systemNav', 'sms-gateway')

@php
    $enabled = old('sms_enabled', $smsEnabled ? '1' : '0') === '1';
@endphp

@section('content')
    @include('partials.settings-system-nav')

    @if (session('success'))
        <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
    @endif

    @if ($errors->any())
        <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
    @endif

    <div class="payroll-rates-page">
        <div class="payroll-rates-page__head">
            <div>
                <h1 class="payroll-rates-page__title">SMS Gateway</h1>
                <p class="payroll-rates-page__subtitle">SMSlenz credentials for campaign SMS.</p>
            </div>
            <div class="payroll-rates-page__tip" role="note">
                <i class="bi bi-info-circle-fill" aria-hidden="true"></i>
                <span>Keep API key private — only admins should edit this.</span>
            </div>
        </div>

        <form method="post" action="{{ route('settings.sms-gateway.update') }}" class="payroll-rates-form"
            id="sms-gateway-form">
            @csrf
            @method('PUT')

            <article class="rate-card rate-card--orange">
                <div class="rate-card__head">
                    <div class="rate-card__identity">
                        <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-chat-dots"></i></span>
                        <div>
                            <h2 class="rate-card__title">Connection</h2>
                            <p class="rate-card__desc">Enable gateway</p>
                        </div>
                    </div>
                    <div class="rate-card__toggle-wrap">
                        <span class="rate-card__toggle-label">Enable SMS?</span>
                        <div class="rate-toggle" role="group" aria-label="Enable SMS gateway">
                            <input type="hidden" name="sms_enabled" id="sms_enabled" value="{{ $enabled ? '1' : '0' }}">
                            <button type="button" class="rate-toggle__btn {{ $enabled ? 'is-active' : '' }}"
                                data-rate-toggle="sms_enabled" data-value="1"
                                aria-pressed="{{ $enabled ? 'true' : 'false' }}">Yes</button>
                            <button type="button" class="rate-toggle__btn {{ !$enabled ? 'is-active' : '' }}"
                                data-rate-toggle="sms_enabled" data-value="0"
                                aria-pressed="{{ !$enabled ? 'true' : 'false' }}">No</button>
                        </div>
                    </div>
                </div>
                <div class="rate-card__body rate-card__body--3">
                    <div class="rate-field">
                        <label class="rate-field__label" for="sms_user_id">
                            <i class="bi bi-person-badge" aria-hidden="true"></i>
                            User ID
                        </label>
                        <div class="rate-field__control rate-field__control--plain">
                            <input type="text" id="sms_user_id" name="sms_user_id"
                                value="{{ old('sms_user_id', $smsUserId) }}" placeholder="From SMSlenz settings">
                        </div>
                    </div>
                    <div class="rate-field">
                        <label class="rate-field__label" for="sms_api_key">
                            <i class="bi bi-key" aria-hidden="true"></i>
                            API key
                        </label>
                        <div class="rate-field__control rate-field__control--plain">
                            <input type="password" id="sms_api_key" name="sms_api_key"
                                value="{{ old('sms_api_key', $smsApiKey) }}" placeholder="From SMSlenz settings"
                                autocomplete="new-password">
                        </div>
                    </div>
                    <div class="rate-field">
                        <label class="rate-field__label" for="sms_sender_id">
                            <i class="bi bi-broadcast" aria-hidden="true"></i>
                            Sender ID
                        </label>
                        <div class="rate-field__control rate-field__control--plain">
                            <input type="text" id="sms_sender_id" name="sms_sender_id"
                                value="{{ old('sms_sender_id', $smsSenderId) }}" placeholder="SMSlenzDEMO">
                        </div>
                    </div>
                </div>
            </article>

            @if ($account || $accountError)
                <article class="rate-card rate-card--violet">
                    <div class="rate-card__head">
                        <div class="rate-card__identity">
                            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-graph-up"></i></span>
                            <div>
                                <h2 class="rate-card__title">Account status</h2>
                                <p class="rate-card__desc">Live balance and plan details</p>
                            </div>
                        </div>
                    </div>
                    @if ($accountError)
                        <x-alert variant="warning" icon="bi-exclamation-triangle">{{ $accountError }}</x-alert>
                    @else
                        <div class="rate-stat-grid">
                            <div class="rate-stat">
                                <div class="rate-stat__label">Status</div>
                                <div class="rate-stat__value">{{ $account['status'] ?? '—' }}</div>
                            </div>
                            <div class="rate-stat">
                                <div class="rate-stat__label">SMS balance count</div>
                                <div class="rate-stat__value">{{ number_format($smsBalanceCount) }}</div>
                            </div>
                            <div class="rate-stat">
                                <div class="rate-stat__label">Plan</div>
                                <div class="rate-stat__value">{{ $account['active_plan'] ?? '—' }}</div>
                            </div>
                            <div class="rate-stat">
                                <div class="rate-stat__label">Sender IDs</div>
                                <div class="rate-stat__value">{{ $account['total_sender_ids'] ?? '—' }}</div>
                            </div>
                        </div>
                    @endif
                </article>
            @endif

            <div class="payroll-rates-form__actions">
                <button type="submit" class="btn btn-primary payroll-rates-form__save">
                    <i class="bi bi-floppy" aria-hidden="true"></i> Save SMS settings
                </button>
            </div>
        </form>
    </div>
@endsection

@push('styles')
    <link href="{{ asset('assets/css/pages/payroll-rates.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <script>
        (function() {
            document.querySelectorAll('[data-rate-toggle]').forEach((btn) => {
                btn.addEventListener('click', () => {
                    const name = btn.dataset.rateToggle;
                    const value = btn.dataset.value;
                    const hidden = document.getElementById(name);
                    if (!hidden) return;
                    hidden.value = value;
                    btn.closest('.rate-toggle')?.querySelectorAll('[data-rate-toggle]').forEach((
                        peer) => {
                        const on = peer.dataset.value === value;
                        peer.classList.toggle('is-active', on);
                        peer.setAttribute('aria-pressed', on ? 'true' : 'false');
                    });
                });
            });
        })();
    </script>
@endpush