{{-- resources/views/extensions/parts/change-sip-password.blade.php --}}
@php
    // Expect an $endpoint (or $ext) variable with ->id available.
    $ext = $endpoint ?? ($ext ?? null);
@endphp

@if(!$ext)
    <div class="mt-8 p-4 rounded border border-red-200 bg-red-50 text-red-800">
        <strong>Template error:</strong> Missing <code>$endpoint</code> (or <code>$ext</code>) variable.
        Pass the extension model to this partial (with <code>->id</code>).
    </div>
@else
<div class="mt-8 p-4 rounded border border-gray-200 bg-white">
    <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold">Change SIP Password</h2>
        <span class="text-sm text-gray-500">Ext: <code>{{ $ext->id }}</code></span>
    </div>

    @if (session('success'))
        <div class="mt-3 p-3 rounded bg-green-50 text-green-800 border border-green-200">
            {{ session('success') }}
        </div>
    @endif
    @if (session('error'))
        <div class="mt-3 p-3 rounded bg-red-50 text-red-700 border border-red-200">
            {{ session('error') }}
        </div>
    @endif

    <form method="POST" action="{{ route('extensions.password.update', ['id' => $ext->id]) }}" class="mt-4 space-y-4">
        @csrf
        @method('PUT')

        <div>
            <label for="sip_password" class="block text-sm font-medium text-gray-700">New SIP Password</label>
            <input
                id="sip_password"
                name="sip_password"
                type="password"
                inputmode="text"
                autocomplete="new-password"
                class="mt-1 w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
                placeholder="Enter new SIP password"
                required
            >
            @error('sip_password')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
            <p class="mt-1 text-xs text-gray-500">
                This updates <code>ps_auths.password</code> for extension <strong>{{ $ext->id }}</strong>.
            </p>
        </div>

        <div class="pt-2 flex items-center gap-3">
            <button
                type="submit"
                class="inline-flex items-center px-4 py-2 rounded bg-indigo-600 hover:bg-indigo-700 text-white font-semibold"
            >
                Save SIP Password
            </button>

            <button
                type="button"
                x-data
                @click="$refs.pw?.type === 'password' ? $refs.pw.type='text' : $refs.pw.type='password'"
                class="hidden" aria-hidden="true">
                Toggle
            </button>
        </div>

        <div class="text-xs text-gray-500">
            Tips:
            <ul class="list-disc ml-5 mt-1 space-y-0.5">
                <li>After saving, reload PJSIP and re-register the device if needed.</li>
                <li>We trim hidden characters so accidental <code>\r\n</code> can’t sneak in.</li>
            </ul>
        </div>
    </form>
</div>
@endif