@extends('layouts.app')

@section('title', 'WhatsApp Settings')
@section('heading', 'WhatsApp 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-slate-100 text-slate-700 hover:bg-slate-200">SMS Settings</a>
        <a href="{{ route('superadmin.settings.whatsapp') }}" class="rounded-lg px-4 py-2 text-sm font-medium bg-primary text-white">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">Kiyowap API configuration</h3>
        <p class="mb-4 text-sm text-slate-500">Configure Kiyowap credentials used for lead WhatsApp notifications and reminders.</p>

        <form action="{{ route('superadmin.settings.whatsapp.store') }}" method="post" class="max-w-2xl space-y-4">
            @csrf
            <div>
                <label for="kiyowap_enabled" class="block text-sm font-medium text-slate-700">Enable WhatsApp</label>
                <select name="kiyowap_enabled" id="kiyowap_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" {{ ($whatsapp['kiyowap_enabled'] ?? 'no') === 'no' ? 'selected' : '' }}>No</option>
                    <option value="yes" {{ ($whatsapp['kiyowap_enabled'] ?? '') === 'yes' ? 'selected' : '' }}>Yes</option>
                </select>
            </div>

            <div>
                <label for="kiyowap_api_base_url" class="block text-sm font-medium text-slate-700">API Base URL</label>
                <input type="url" name="kiyowap_api_base_url" id="kiyowap_api_base_url" required
                       value="{{ old('kiyowap_api_base_url', $whatsapp['kiyowap_api_base_url'] ?? '') }}"
                       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="kiyowap_access_token" class="block text-sm font-medium text-slate-700">Access Token</label>
                <input type="password" name="kiyowap_access_token" id="kiyowap_access_token" 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="{{ $hasAccessToken ? 'Leave blank to keep existing token' : 'Enter Kiyowap access token' }}">
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="kiyowap_vendor_uid" class="block text-sm font-medium text-slate-700">Vendor UID</label>
                    <input type="text" name="kiyowap_vendor_uid" id="kiyowap_vendor_uid" required
                           value="{{ old('kiyowap_vendor_uid', $whatsapp['kiyowap_vendor_uid'] ?? '') }}"
                           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="kiyowap_phone_number_id" class="block text-sm font-medium text-slate-700">Phone Number ID</label>
                    <input type="text" name="kiyowap_phone_number_id" id="kiyowap_phone_number_id" required
                           value="{{ old('kiyowap_phone_number_id', $whatsapp['kiyowap_phone_number_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>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="kiyowap_template_new_lead" class="block text-sm font-medium text-slate-700">New Lead Template ID</label>
                    <input type="text" name="kiyowap_template_new_lead" id="kiyowap_template_new_lead"
                           value="{{ old('kiyowap_template_new_lead', $whatsapp['kiyowap_template_new_lead'] ?? '') }}"
                           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="kiyowap_template_followup" class="block text-sm font-medium text-slate-700">Follow-up Template ID</label>
                    <input type="text" name="kiyowap_template_followup" id="kiyowap_template_followup"
                           value="{{ old('kiyowap_template_followup', $whatsapp['kiyowap_template_followup'] ?? '') }}"
                           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 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 WhatsApp 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