@extends('layouts.app')

@section('title', 'SMS Settings')
@section('heading', 'SMS Settings')

@section('content')
    <div class="mb-6 flex flex-wrap gap-4 border-b border-slate-200 pb-4">
        <a href="{{ route('superadmin.settings.index') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">Platform</a>
        <a href="{{ route('superadmin.settings.email') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">Email Settings</a>
        <a href="{{ route('superadmin.settings.sms') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-primary text-white">SMS Settings</a>
        <a href="{{ route('superadmin.settings.whatsapp') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">WhatsApp Settings</a>
        <a href="{{ route('superadmin.settings.profile') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-slate-100 text-slate-700 hover:bg-slate-200">Profile</a>
    </div>

    <x-card>
        <h3 class="mb-4 text-sm font-semibold text-slate-700">Fast2SMS configuration</h3>
        <p class="mb-4 text-sm text-slate-500">Configure SMS delivery used for OTP, lead acknowledgement, and follow-up reminders.</p>

        <form action="{{ route('superadmin.settings.sms.store') }}" method="post" class="max-w-2xl space-y-4">
            @csrf
            <div>
                <label for="fast2sms_enabled" class="block text-sm font-medium text-slate-700">Enable SMS</label>
                <select name="fast2sms_enabled" id="fast2sms_enabled" class="mt-1 w-full max-w-xs rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500 js-select2">
                    <option value="no" {{ ($sms['fast2sms_enabled'] ?? 'no') === 'no' ? 'selected' : '' }}>No</option>
                    <option value="yes" {{ ($sms['fast2sms_enabled'] ?? '') === 'yes' ? 'selected' : '' }}>Yes</option>
                </select>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="fast2sms_sender_id" class="block text-sm font-medium text-slate-700">Sender ID</label>
                    <input type="text" name="fast2sms_sender_id" id="fast2sms_sender_id" value="{{ old('fast2sms_sender_id', $sms['fast2sms_sender_id'] ?? '') }}"
                           class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                </div>
                <div>
                    <label for="fast2sms_route" class="block text-sm font-medium text-slate-700">Route</label>
                    <input type="text" name="fast2sms_route" id="fast2sms_route" value="{{ old('fast2sms_route', $sms['fast2sms_route'] ?? 'dlt') }}"
                           class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                </div>
            </div>

            <div>
                <label for="fast2sms_api_key" class="block text-sm font-medium text-slate-700">API Key</label>
                <input type="password" name="fast2sms_api_key" id="fast2sms_api_key" value="" autocomplete="new-password"
                       class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500"
                       placeholder="{{ $hasApiKey ? 'Leave blank to keep existing key' : 'Enter Fast2SMS API key' }}">
                @error('fast2sms_api_key') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="fast2sms_entity_id" class="block text-sm font-medium text-slate-700">Entity ID</label>
                <input type="text" name="fast2sms_entity_id" id="fast2sms_entity_id" required
                       value="{{ old('fast2sms_entity_id', $sms['fast2sms_entity_id'] ?? '') }}"
                       class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                @error('fast2sms_entity_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="fast2sms_otp_template" class="block text-sm font-medium text-slate-700">OTP Template</label>
                <textarea name="fast2sms_otp_template" id="fast2sms_otp_template" rows="2" required
                          class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">{{ old('fast2sms_otp_template', $sms['fast2sms_otp_template'] ?? '') }}</textarea>
            </div>

            <div>
                <label for="fast2sms_ack_template" class="block text-sm font-medium text-slate-700">Acknowledgement Template</label>
                <textarea name="fast2sms_ack_template" id="fast2sms_ack_template" rows="2" required
                          class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">{{ old('fast2sms_ack_template', $sms['fast2sms_ack_template'] ?? '') }}</textarea>
            </div>

            <div>
                <label for="fast2sms_followup_template" class="block text-sm font-medium text-slate-700">Follow-up Template</label>
                <textarea name="fast2sms_followup_template" id="fast2sms_followup_template" rows="2" required
                          class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">{{ old('fast2sms_followup_template', $sms['fast2sms_followup_template'] ?? '') }}</textarea>
            </div>

            <div class="flex flex-wrap gap-3">
                <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white">Update SMS settings</button>
                <a href="{{ route('superadmin.settings.index') }}" class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
            </div>
        </form>
    </x-card>
@endsection
