@extends('layouts.app')

@section('title', 'SMS Settings')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0"><i class="bi bi-gear me-2"></i>SMS Settings</h4>
    </div>

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

    <form method="POST" action="{{ route('sms.configs.save') }}">
        @csrf
        @php $idx = 0; @endphp

        @forelse ($groups as $group => $configs)
            <div class="card mb-4">
                <div class="card-header fw-bold text-uppercase small">{{ $group }}</div>
                <div class="card-body">
                    @foreach ($configs as $config)
                        <div class="row mb-3 align-items-center">
                            <div class="col-md-3">
                                <label class="form-label mb-0 fw-semibold">{{ $config->key }}</label>
                                @if($config->description)
                                    <br><small class="text-muted">{{ $config->description }}</small>
                                @endif
                                <input type="hidden" name="configs[{{ $idx }}][key]" value="{{ $config->key }}">
                                <input type="hidden" name="configs[{{ $idx }}][group]" value="{{ $config->group }}">
                                <input type="hidden" name="configs[{{ $idx }}][description]" value="{{ $config->description }}">
                            </div>
                            <div class="col-md-9">
                                <input type="text" name="configs[{{ $idx }}][value]" class="form-control"
                                    value="{{ $config->value }}">
                            </div>
                        </div>
                        @php $idx++; @endphp
                    @endforeach
                </div>
            </div>
        @empty
            <div class="alert alert-info">
                <i class="bi bi-info-circle me-2"></i>
                No SMS configurations found. Use the form below to add a new setting.
            </div>
        @endforelse

        <button type="submit" class="btn btn-primary mb-4">
            <i class="bi bi-check-lg me-1"></i>Save Settings
        </button>
    </form>

    {{-- Add New Config --}}
    <div class="card">
        <div class="card-header fw-bold">Add New Setting</div>
        <div class="card-body">
            <form method="POST" action="{{ route('sms.configs.save') }}">
                @csrf
                <div class="row g-3 align-items-end">
                    <div class="col-md-2">
                        <label class="form-label small">Key *</label>
                        <input type="text" name="configs[0][key]" class="form-control form-control-sm" required
                            placeholder="e.g., gateway_provider">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Value</label>
                        <input type="text" name="configs[0][value]" class="form-control form-control-sm"
                            placeholder="e.g., bulksmsbdapi">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Group</label>
                        <select name="configs[0][group]" class="form-select form-select-sm">
                            <option value="sms">sms</option>
                            <option value="schedule">schedule</option>
                            <option value="cost">cost</option>
                            <option value="gateway">gateway</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">Description</label>
                        <input type="text" name="configs[0][description]" class="form-control form-control-sm"
                            placeholder="Brief description">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-sm btn-outline-primary w-100">
                            <i class="bi bi-plus me-1"></i>Add
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection