@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')
<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

    <div class="container-fluid">
        <div class="page-title">
            <div class="row align-items-center">
                <div class="col-sm-6 ps-0">
                    <h3><i class="fas fa-sms mr-2" style="color:#c9a96e"></i>SMS Settings</h3>
                    <p class="text-muted mb-0" style="font-size:13px">Configure your SMS provider for OTP delivery</p>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">SMS Settings</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
    <div class="container-fluid mb-3">
        <div class="alert alert-success alert-dismissible fade show">
            <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
            <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
        </div>
    </div>
    @endif
    @if(session('error'))
    <div class="container-fluid mb-3">
        <div class="alert alert-danger alert-dismissible fade show">
            <i class="fas fa-times-circle mr-2"></i>{{ session('error') }}
            <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
        </div>
    </div>
    @endif

    {{-- Active provider banner --}}
    <div class="container-fluid mb-3">
        <div class="card shadow-sm" style="border-left:4px solid #22c55e">
            <div class="card-body py-2 px-4 d-flex align-items-center justify-content-between flex-wrap" style="gap:12px">
                <div>
                    <span class="text-muted" style="font-size:12px;text-transform:uppercase;letter-spacing:1px">Active Provider</span>
                    <div style="font-size:18px;font-weight:700;color:#1e293b;margin-top:2px">
                        @if($active)
                            <span style="color:#22c55e">● </span>{{ ucfirst($active->provider) }}
                        @else
                            <span style="color:#ef4444">● </span>None configured
                        @endif
                    </div>
                </div>
                {{-- Test SMS --}}
                <form action="{{ route('admin.sms.test') }}" method="POST" class="d-flex align-items-center" style="gap:8px">
                    @csrf
                    <input type="text" name="phone" placeholder="+91XXXXXXXXXX"
                        class="form-control form-control-sm" style="max-width:180px"
                        {{ !$active ? 'disabled' : '' }}>
                    <button class="btn btn-success btn-sm" {{ !$active ? 'disabled' : '' }}>
                        <i class="fas fa-paper-plane mr-1"></i>Send Test
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- Provider cards --}}
    <div class="container-fluid">
        <div class="row">
            @foreach($providers as $setting)
            @php
                $p      = $setting->provider;
                $fields = $providerFields[$p];
                $cfg    = $setting->config ?? [];
                $isActive = $setting->is_active;
                $providerIcons = ['twilio'=>'📞','msg91'=>'🇮🇳','fast2sms'=>'⚡','textlocal'=>'📱'];
                $providerDescs = [
                    'twilio'    => 'Global SMS. Works worldwide. Paid per message.',
                    'msg91'     => 'India-focused. DLT registration required.',
                    'fast2sms'  => 'India only. Simple OTP route. No DLT for OTP.',
                    'textlocal' => 'UK & India. Reliable bulk & OTP delivery.',
                ];
            @endphp
            <div class="col-lg-6 mb-4">
                <div class="card shadow-sm h-100" style="border-top: 3px solid {{ $isActive ? '#22c55e' : '#e2e8f0' }}">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center" style="gap:10px">
                            <span style="font-size:22px">{{ $providerIcons[$p] ?? '📨' }}</span>
                            <div>
                                <div style="font-weight:700;font-size:15px;color:#1e293b">{{ ucfirst($p) }}</div>
                                <div style="font-size:11px;color:#94a3b8">{{ $providerDescs[$p] ?? '' }}</div>
                            </div>
                        </div>
                        @if($isActive)
                            <span class="badge badge-success" style="font-size:11px;padding:5px 10px">
                                <i class="fas fa-check mr-1"></i>Active
                            </span>
                        @else
                            <form action="{{ route('admin.sms.activate') }}" method="POST">
                                @csrf
                                <input type="hidden" name="provider" value="{{ $p }}">
                                <button class="btn btn-outline-success btn-sm"
                                    onclick="return confirm('Switch active provider to {{ ucfirst($p) }}?')">
                                    Set Active
                                </button>
                            </form>
                        @endif
                    </div>

                    <form action="{{ route('admin.sms.update', $p) }}" method="POST">
                        @csrf
                        <div class="card-body">
                            @foreach($fields as $field)
                            <div class="form-group mb-3">
                                <label style="font-size:12px;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:0.5px">
                                    {{ $field['label'] }}
                                    @if($field['required'])<span class="text-danger ml-1">*</span>@endif
                                </label>
                                <div class="input-group">
                                    <input
                                        type="{{ $field['type'] === 'password' ? 'password' : 'text' }}"
                                        name="config_{{ $field['key'] }}"
                                        class="form-control form-control-sm"
                                        placeholder="{{ $field['placeholder'] ?? ($field['type'] === 'password' ? '••••••••' : '') }}"
                                        value="{{ $field['type'] !== 'password' ? ($cfg[$field['key']] ?? '') : '' }}"
                                        autocomplete="new-password"
                                        id="{{ $p }}_{{ $field['key'] }}"
                                    >
                                    @if($field['type'] === 'password')
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-outline-secondary btn-sm toggle-pass"
                                            data-target="{{ $p }}_{{ $field['key'] }}">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    @endif
                                </div>
                                @if($field['type'] === 'password' && !empty($cfg[$field['key']]))
                                <small class="text-muted"><i class="fas fa-lock mr-1"></i>Saved. Leave blank to keep current value.</small>
                                @endif
                            </div>
                            @endforeach
                        </div>
                        <div class="card-footer d-flex align-items-center justify-content-between">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="set_active"
                                    id="activate_{{ $p }}" value="1" {{ $isActive ? 'checked disabled' : '' }}>
                                <label class="form-check-label" for="activate_{{ $p }}" style="font-size:13px">
                                    Set as active provider
                                </label>
                            </div>
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="fas fa-save mr-1"></i>Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            @endforeach
        </div>
    </div>

</div>
</div>
</section>

@include('Partials.footer')

<script>
document.querySelectorAll('.toggle-pass').forEach(btn => {
    btn.addEventListener('click', function () {
        const input = document.getElementById(this.dataset.target);
        const isPass = input.type === 'password';
        input.type = isPass ? 'text' : 'password';
        this.querySelector('i').className = isPass ? 'fas fa-eye-slash' : 'fas fa-eye';
    });
});
</script>