@extends('admin.layouts.layout')
@section('title', 'تنظیمات پیام متنی')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="mb-1">تنظیمات پیام متنی</h4>
            <p class="text-muted mb-0 small">پیکربندی سرویس ارسال پیام متنی پیام‌متنی</p>
        </div>
    </div>

    @if(session('success'))
    <div class="alert alert-success alert-dismissible mb-4" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    @if($errors->any())
    <div class="alert alert-danger alert-dismissible mb-4" role="alert">
        <ul class="mb-0 ps-3">
            @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <div class="row gy-4">

        {{-- ══ Enable / Disable ══ --}}
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-2">
                        <i class="ti ti-message-circle ti-md text-primary"></i>
                        <h5 class="mb-0">وضعیت سرویس</h5>
                    </div>
                    <span class="badge {{ $config['sms_enabled'] ? 'bg-success' : 'bg-secondary' }}">
                        {{ $config['sms_enabled'] ? 'فعال' : 'غیرفعال' }}
                    </span>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.settings.sms.save') }}">
                        @csrf
                        <input type="hidden" name="_enable_only" value="1">
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" name="sms_enabled"
                                   id="smsEnabled" value="1" {{ $config['sms_enabled'] ? 'checked' : '' }}>
                            <label class="form-check-label" for="smsEnabled">
                                فعال‌سازی ارسال پیام متنی
                            </label>
                        </div>
                        <p class="text-muted small mb-3">
                            در صورت غیرفعال بودن، سیستم هیچ پیام متنی (کد تأیید، ورود با OTP و ...) ارسال نمی‌کند.
                        </p>
                        <button type="submit" class="btn btn-primary btn-sm">ذخیره وضعیت</button>
                    </form>
                </div>
            </div>
        </div>

        {{-- ══ Credentials ══ --}}
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex align-items-center gap-2">
                    <i class="ti ti-key ti-md text-warning"></i>
                    <h5 class="mb-0">اطلاعات حساب پیام‌متنی</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.settings.sms.save') }}">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label" for="smsUsername">نام کاربری پنل</label>
                            <input type="text" class="form-control @error('sms_username') is-invalid @enderror"
                                   id="smsUsername" name="sms_username"
                                   value="{{ old('sms_username', $config['sms_username']) }}"
                                   placeholder="مثال: username">
                            @error('sms_username')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="smsPassword">رمز عبور پنل</label>
                            <div class="input-group">
                                <input type="password" class="form-control @error('sms_password') is-invalid @enderror"
                                       id="smsPassword" name="sms_password"
                                       value="{{ old('sms_password', $config['sms_password']) }}"
                                       placeholder="رمز عبور">
                                <button type="button" class="btn btn-outline-secondary" id="toggleSmsPass" tabindex="-1">
                                    <i class="ti ti-eye" id="toggleSmsPassIcon"></i>
                                </button>
                            </div>
                            @error('sms_password')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label" for="smsFromNumber">شماره فرستنده</label>
                            <input type="text" class="form-control @error('sms_from_number') is-invalid @enderror"
                                   id="smsFromNumber" name="sms_from_number"
                                   value="{{ old('sms_from_number', $config['sms_from_number']) }}"
                                   placeholder="مثال: +989998763773"
                                   dir="ltr">
                            @error('sms_from_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            <div class="form-text">شماره خط پیام متنی اختصاصی در پنل payammatni.com</div>
                        </div>

                        <button type="submit" class="btn btn-primary">ذخیره تنظیمات</button>
                    </form>
                </div>
            </div>
        </div>

        {{-- ══ Credit ══ --}}
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center gap-2">
                    <i class="ti ti-wallet ti-md text-success"></i>
                    <h5 class="mb-0">اعتبار باقی‌مانده</h5>
                </div>
                <div class="card-body d-flex flex-column align-items-center justify-content-center text-center gap-3">
                    <div id="creditDisplay">
                        <div class="text-muted small mb-2">برای مشاهده اعتبار روی دکمه کلیک کنید</div>
                    </div>
                    <button type="button" class="btn btn-outline-success btn-sm" id="btnGetCredit">
                        <i class="ti ti-refresh me-1"></i> دریافت اعتبار
                    </button>
                    <p class="text-muted small mb-0">اعتبار به ریال نمایش داده می‌شود</p>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('customjs')
<script>
// Toggle password visibility
document.getElementById('toggleSmsPass')?.addEventListener('click', function () {
    var input = document.getElementById('smsPassword');
    var icon  = document.getElementById('toggleSmsPassIcon');
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'ti ti-eye-off';
    } else {
        input.type = 'password';
        icon.className = 'ti ti-eye';
    }
});

// Get credit via AJAX
document.getElementById('btnGetCredit')?.addEventListener('click', function () {
    var btn     = this;
    var display = document.getElementById('creditDisplay');

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> در حال دریافت...';
    display.innerHTML = '';

    fetch('{{ route('admin.settings.sms.credit') }}')
        .then(function (r) { return r.json(); })
        .then(function (data) {
            if (data.success) {
                display.innerHTML =
                    '<div class="fs-2 fw-bold text-success">' + data.credit + '</div>' +
                    '<div class="text-muted small mt-1">ریال</div>';
            } else {
                display.innerHTML =
                    '<div class="text-danger small">' + (data.message || 'خطا در دریافت اعتبار') + '</div>';
            }
        })
        .catch(function () {
            display.innerHTML = '<div class="text-danger small">خطا در ارتباط با سرور</div>';
        })
        .finally(function () {
            btn.disabled = false;
            btn.innerHTML = '<i class="ti ti-refresh me-1"></i> دریافت اعتبار';
        });
});
</script>
@endsection
