@extends('layouts.app')

@php
    $service = $subscription->service;
    $plan = $subscription->servicePlan;
    $logo = marketplaceImageUrl($service?->logo ?: $service?->category?->image_url);
    $serviceName = $service?->name ?? 'Subscription';
    $planName = $plan?->name ?? 'Plan';
    $planCurrency = strtoupper((string) ($plan?->currency ?? 'USD'));
    $currencySymbol = [
        'USD' => '$',
        'EUR' => '€',
        'GBP' => '£',
    ][$planCurrency] ?? '$';
    $chatUrl = route('messages.index', ['subscription_id' => $subscription->id, 'tab' => 'messages']);
    $chatLabel = (int) auth()->id() === (int) $subscription->owner_id ? 'Open subscriber chats' : 'Chat with owner';
    $currentUserPhone = trim((string) (auth()->user()->phone ?? ''));
    $phoneCountryPresets = [
        'United Kingdom' => ['code' => '+44', 'flag_class' => 'fi fi-gb', 'example' => '07400 123456'],
        'Albania' => ['code' => '+355', 'flag_class' => 'fi fi-al', 'example' => '067 212 3456'],
        'Austria' => ['code' => '+43', 'flag_class' => 'fi fi-at', 'example' => '0664 1234567'],
        'Belgium' => ['code' => '+32', 'flag_class' => 'fi fi-be', 'example' => '0470 12 34 56'],
        'Bulgaria' => ['code' => '+359', 'flag_class' => 'fi fi-bg', 'example' => '088 123 4567'],
        'Croatia' => ['code' => '+385', 'flag_class' => 'fi fi-hr', 'example' => '091 234 5678'],
        'Cyprus' => ['code' => '+357', 'flag_class' => 'fi fi-cy', 'example' => '96 123456'],
        'Czechia' => ['code' => '+420', 'flag_class' => 'fi fi-cz', 'example' => '601 123 456'],
        'Denmark' => ['code' => '+45', 'flag_class' => 'fi fi-dk', 'example' => '20 12 34 56'],
        'Estonia' => ['code' => '+372', 'flag_class' => 'fi fi-ee', 'example' => '5123 4567'],
        'Finland' => ['code' => '+358', 'flag_class' => 'fi fi-fi', 'example' => '040 123 4567'],
        'France' => ['code' => '+33', 'flag_class' => 'fi fi-fr', 'example' => '06 12 34 56 78'],
        'Germany' => ['code' => '+49', 'flag_class' => 'fi fi-de', 'example' => '01512 3456789'],
        'Greece' => ['code' => '+30', 'flag_class' => 'fi fi-gr', 'example' => '0694 123 4567'],
        'Hungary' => ['code' => '+36', 'flag_class' => 'fi fi-hu', 'example' => '20 123 4567'],
        'Ireland' => ['code' => '+353', 'flag_class' => 'fi fi-ie', 'example' => '085 123 4567'],
        'Italy' => ['code' => '+39', 'flag_class' => 'fi fi-it', 'example' => '312 345 6789'],
        'Japan' => ['code' => '+81', 'flag_class' => 'fi fi-jp', 'example' => '090 1234 5678'],
        'Latvia' => ['code' => '+371', 'flag_class' => 'fi fi-lv', 'example' => '21 234 567'],
        'Lithuania' => ['code' => '+370', 'flag_class' => 'fi fi-lt', 'example' => '0612 34567'],
        'Luxembourg' => ['code' => '+352', 'flag_class' => 'fi fi-lu', 'example' => '621 123 456'],
        'Malta' => ['code' => '+356', 'flag_class' => 'fi fi-mt', 'example' => '9912 3456'],
        'Netherlands' => ['code' => '+31', 'flag_class' => 'fi fi-nl', 'example' => '06 12345678'],
        'Pakistan' => ['code' => '+92', 'flag_class' => 'fi fi-pk', 'example' => '0300 1234567'],
        'Poland' => ['code' => '+48', 'flag_class' => 'fi fi-pl', 'example' => '512 345 678'],
        'Portugal' => ['code' => '+351', 'flag_class' => 'fi fi-pt', 'example' => '912 345 678'],
        'Romania' => ['code' => '+40', 'flag_class' => 'fi fi-ro', 'example' => '0712 345 678'],
        'Saudi Arabia' => ['code' => '+966', 'flag_class' => 'fi fi-sa', 'example' => '050 123 4567'],
        'Serbia' => ['code' => '+381', 'flag_class' => 'fi fi-rs', 'example' => '061 234 5678'],
        'Slovakia' => ['code' => '+421', 'flag_class' => 'fi fi-sk', 'example' => '0912 345 678'],
        'Slovenia' => ['code' => '+386', 'flag_class' => 'fi fi-si', 'example' => '031 234 567'],
        'Spain' => ['code' => '+34', 'flag_class' => 'fi fi-es', 'example' => '612 34 56 78'],
        'Sweden' => ['code' => '+46', 'flag_class' => 'fi fi-se', 'example' => '070 123 45 67'],
        'Switzerland' => ['code' => '+41', 'flag_class' => 'fi fi-ch', 'example' => '078 123 45 67'],
        'United Arab Emirates' => ['code' => '+971', 'flag_class' => 'fi fi-ae', 'example' => '050 123 4567'],
        'United States' => ['code' => '+1', 'flag_class' => 'fi fi-us', 'example' => '(201) 555-0123'],
    ];
    $defaultPhonePreset = $phoneCountryPresets[$selectedCountry] ?? $phoneCountryPresets['United Kingdom'];
    $defaultPhoneCountryCode = $defaultPhonePreset['code'];
    $defaultPhoneNumber = '';

    if ($currentUserPhone !== '' && preg_match('/^(\+\d{1,4})\s*(.+)$/', $currentUserPhone, $matches)) {
        $defaultPhoneCountryCode = $matches[1];
        $defaultPhoneNumber = trim($matches[2]);
    } elseif ($currentUserPhone !== '') {
        $defaultPhoneNumber = $currentUserPhone;
    }

    $prefilledPhoneCountryCode = old('phone_country_code', $defaultPhoneCountryCode);
    $prefilledPhoneNumber = old('phone_number', $defaultPhoneNumber);
    $pendingVisibilityOtp = is_array($pendingPublicVisibilityVerification ?? null)
        ? $pendingPublicVisibilityVerification
        : null;

    if ($pendingVisibilityOtp) {
        $prefilledPhoneCountryCode = (string) ($pendingVisibilityOtp['phone_country_code'] ?? $prefilledPhoneCountryCode);
        $prefilledPhoneNumber = (string) ($pendingVisibilityOtp['phone_number'] ?? $prefilledPhoneNumber);
    }

    $shouldOpenHumanVerification = $errors->has('human_verification_passed');
    $shouldOpenOtpVerification = $pendingVisibilityOtp !== null
        || (bool) session('subscription_public_otp_step')
        || $errors->has('otp_code');
    $shouldOpenPublicModal = $errors->has('phone_country_code')
        || $errors->has('phone_number')
        || $errors->has('otp_code')
        || $shouldOpenHumanVerification
        || $shouldOpenOtpVerification;
    $phoneCountryOptions = [];

    foreach ($phoneCountryPresets as $countryLabel => $preset) {
        $phoneCountryOptions[$preset['code']] = [
            'flag_class' => $preset['flag_class'],
            'label' => $countryLabel,
            'example' => $preset['example'],
        ];
    }

    $selectedPhoneCountry = $phoneCountryOptions[$prefilledPhoneCountryCode] ?? [
        'flag_class' => $defaultPhonePreset['flag_class'],
        'label' => $selectedCountry,
        'example' => $defaultPhonePreset['example'],
    ];
    $selectedPhoneExample = $selectedPhoneCountry['example'] ?? '07400 123456';
    $selectedPhoneDigits = strlen(preg_replace('/\D+/', '', $selectedPhoneExample));
    $otpDestinationPhone = trim((string) ($pendingVisibilityOtp['normalized_phone'] ?? ''));
@endphp

@push('style')
<style>
    .subscription-manage-shell {
        max-width: 1120px;
        margin: 0 auto;
    }

    .subscription-manage-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 2.1rem;
        align-items: start;
    }

    .subscription-manage-main {
        padding-top: 0.15rem;
    }

    .subscription-manage-head {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        margin-bottom: 1rem;
    }

    .subscription-manage-back {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        color: #111827;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .subscription-manage-back:hover,
    .subscription-manage-back:focus-visible {
        background: rgba(var(--user-accent-rgb, 201, 142, 74), 0.1);
        color: var(--user-accent, #c98e4a);
        outline: none;
    }

    .subscription-manage-title {
        margin: 0;
        color: #111827;
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .subscription-manage-visibility {
        display: flex;
        align-items: center;
        gap: 1.7rem;
        flex-wrap: wrap;
        margin-bottom: 1.25rem;
    }

    .subscription-manage-visibility-form {
        margin: 0;
    }

    .subscription-manage-visibility-btn,
    .subscription-manage-visibility-static {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        border: 0;
        background: transparent;
        padding: 0;
        color: #202020;
        font-size: 1.05rem;
        font-weight: 700;
    }

    .subscription-manage-visibility-static {
        opacity: 0.7;
    }

    .subscription-manage-visibility-btn:hover,
    .subscription-manage-visibility-btn:focus-visible {
        color: var(--user-accent, #c98e4a);
        outline: none;
    }

    .subscription-manage-visibility-dot {
        width: 20px;
        height: 20px;
        border-radius: 999px;
        border: 1.5px solid #d1d5db;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }

    .subscription-manage-visibility-dot::after {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: transparent;
        transition: background-color 0.2s ease;
    }

    .subscription-manage-visibility-btn.is-active .subscription-manage-visibility-dot,
    .subscription-manage-visibility-static.is-active .subscription-manage-visibility-dot {
        border-color: var(--user-accent, #ff980f);
        background: rgba(255, 152, 15, 0.08);
    }

    .subscription-manage-visibility-btn.is-active .subscription-manage-visibility-dot::after,
    .subscription-manage-visibility-static.is-active .subscription-manage-visibility-dot::after {
        background: var(--user-accent, #ff980f);
    }

    .subscription-manage-copy {
        max-width: 680px;
        margin: 0 0 1.15rem;
        color: #9a9187;
        font-size: 1.02rem;
        line-height: 1.45;
    }

    .subscription-manage-dots {
        margin: 0 0 0.8rem;
        color: #202020;
        font-size: 2rem;
        line-height: 1;
        letter-spacing: 0.15em;
    }

    .subscription-manage-stats {
        border-top: 1px solid #ece7e2;
        margin-bottom: 1rem;
    }

    .subscription-manage-stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.45rem 0;
        border-bottom: 1px solid #ece7e2;
    }

    .subscription-manage-stat-label {
        color: #111827;
        font-size: 1.08rem;
        font-weight: 700;
    }

    .subscription-manage-stat-value {
        color: #111827;
        font-size: 1rem;
        font-weight: 800;
        display: inline-flex;
        align-items: baseline;
        gap: 0.35rem;
        text-align: right;
    }

    .subscription-manage-stat-value.is-accent {
        color: var(--user-accent, #ff980f);
    }

    .subscription-manage-stat-muted {
        color: #9ca3af;
        font-size: 0.95rem;
        font-weight: 500;
    }

    .subscription-manage-arrow {
        color: #111827;
        font-size: 1.1rem;
        line-height: 1;
        margin-left: 0.3rem;
    }

    .subscription-manage-slots {
        margin-top: 0.35rem;
    }

    .subscription-manage-slot-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid #ece7e2;
    }

    .subscription-manage-slot-left {
        display: flex;
        align-items: center;
        gap: 0.95rem;
        min-width: 0;
    }

    .subscription-manage-slot-avatar,
    .subscription-manage-slot-icon {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1rem;
        font-weight: 800;
    }

    .subscription-manage-slot-avatar {
        background: #1f88d2;
        color: #fff;
        overflow: hidden;
    }

    .subscription-manage-slot-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .subscription-manage-slot-icon.is-free {
        background: #ff980f;
        color: #fff;
    }

    .subscription-manage-slot-icon.is-reserved {
        background: #efefef;
        color: #b6b6b6;
    }

    .subscription-manage-slot-name {
        color: #111827;
        font-size: 1rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        flex-wrap: wrap;
    }

    .subscription-manage-slot-flag {
        font-size: 1.2rem;
        line-height: 1;
    }

    .subscription-manage-slot-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        min-height: 22px;
        padding: 0.2rem 0.5rem;
        border-radius: 6px;
        background: #ff980f;
        color: #fff;
        font-size: 0.78rem;
        font-weight: 700;
    }

    .subscription-manage-slot-right {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        color: #b1a79a;
        font-size: 0.95rem;
        font-weight: 500;
        white-space: nowrap;
    }

    .subscription-manage-slot-right > i {
        color: #111827;
        font-size: 1rem;
    }

    .subscription-manage-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
    }

    .subscription-manage-card {
        border: 1px solid #d6cec4;
        border-radius: 22px;
        background: #fff;
        padding: 1.3rem;
    }

    .subscription-manage-summary {
        border: 1.5px solid rgba(255, 152, 15, 0.8);
        border-radius: 14px;
        padding: 1.15rem;
    }

    .subscription-manage-summary-head {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        margin-bottom: 1rem;
    }

    .subscription-manage-summary-logo {
        width: 48px;
        height: 48px;
        border-radius: 999px;
        background: #ff0000;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        font-size: 1.1rem;
        font-weight: 800;
    }

    .subscription-manage-summary-logo img {
        width: 72%;
        height: 72%;
        object-fit: contain;
    }

    .subscription-manage-summary-name {
        color: #111827;
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.35;
    }

    .subscription-manage-summary-note {
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 0.9rem 0.95rem;
        border-top: 1px dashed #e5ded6;
        border-radius: 0;
        color: #111827;
        font-size: 0.96rem;
        line-height: 1.4;
    }

    .subscription-manage-summary-note i {
        color: #a3a3a3;
        font-size: 1rem;
        margin-top: 0.15rem;
    }

    .subscription-manage-sidebar-btn {
        min-height: 48px;
        border-radius: 10px;
        border: 1.5px solid rgba(255, 152, 15, 0.92);
        background: #fff;
        color: #ff980f;
        font-size: 1rem;
        font-weight: 800;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    }

    .subscription-manage-sidebar-btn:hover,
    .subscription-manage-sidebar-btn:focus-visible {
        background: rgba(255, 152, 15, 0.08);
        color: #ff980f;
        outline: none;
    }

    .subscription-manage-sidebar-btn.is-theme {
        border-color: var(--user-accent, #ff980f);
        background: var(--user-accent, #ff980f);
        color: #fff;
    }

    .subscription-manage-sidebar-btn.is-theme:hover,
    .subscription-manage-sidebar-btn.is-theme:focus-visible {
        background: #f08d08;
        border-color: #f08d08;
        color: #fff;
    }

    .subscription-manage-sidebar-btn.is-disabled,
    .subscription-manage-sidebar-btn:disabled {
        border-color: #ece7e2;
        color: #c6beb4;
        background: #faf8f6;
        pointer-events: none;
    }

    .subscription-manage-verify-title {
        margin: 0 0 1rem;
        color: #111827;
        font-size: 1.8rem;
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .subscription-manage-verify-copy {
        margin: 0 0 0.75rem;
        color: #111827;
        font-size: 0.98rem;
        line-height: 1.4;
    }

    .subscription-manage-verify-link {
        color: #ff980f;
        font-size: 0.95rem;
        font-weight: 600;
        text-decoration: underline;
    }

    .subscription-manage-upload-box {
        min-height: 136px;
        border: 1px dashed #ded6cc;
        border-radius: 12px;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        margin: 1.35rem 0 1rem;
        color: #b4aba0;
        text-align: center;
    }

    .subscription-manage-upload-icon {
        font-size: 2.4rem;
        line-height: 1;
    }

    .subscription-manage-upload-text {
        font-size: 0.96rem;
        font-weight: 500;
    }

    .subscription-public-modal .modal-dialog {
        max-width: none;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .subscription-public-modal .modal-content {
        min-height: 100vh;
        height: 100%;
        border: 0;
        border-radius: 0;
        background: #fff;
        padding: 1.5rem 1.8rem 2rem;
    }

    .subscription-public-modal .modal-header {
        border: 0;
        padding: 0;
        justify-content: flex-end;
    }

    .subscription-public-close {
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #111827;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .subscription-public-close:hover,
    .subscription-public-close:focus-visible {
        background: rgba(var(--user-accent-rgb, 201, 142, 74), 0.1);
        color: var(--user-accent, #ff980f);
        outline: none;
    }

    .subscription-public-shell {
        max-width: 720px;
        margin: 0 auto;
        padding-top: 0.35rem;
    }

    .subscription-public-step[hidden] {
        display: none !important;
    }

    .subscription-public-title {
        margin: 0 0 2rem;
        color: #111827;
        font-size: 2.1rem;
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .subscription-public-note {
        margin-bottom: 1.8rem;
        padding: 1.15rem 1.25rem;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06);
        color: #111827;
        font-size: 1rem;
        font-weight: 500;
    }

    .subscription-public-label {
        margin: 0 0 0.45rem;
        color: #111827;
        font-size: 1.45rem;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .subscription-public-copy {
        margin: 0 0 1.15rem;
        color: #9a9187;
        font-size: 1rem;
    }

    .subscription-otp-wrap {
        margin-bottom: 1.45rem;
    }

    .subscription-otp-input {
        width: 100%;
        min-height: 52px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #fff;
        color: #111827;
        font-size: 1rem;
        font-weight: 500;
        padding: 0.9rem 1rem;
    }

    .subscription-otp-input::placeholder {
        color: #c6beb4;
        opacity: 1;
    }

    .subscription-otp-input:focus {
        outline: none;
        border-color: rgba(255, 152, 15, 0.92);
        box-shadow: 0 0 0 0.18rem rgba(255, 152, 15, 0.1);
    }

    .subscription-otp-input.is-invalid {
        border-color: #dc2626;
        box-shadow: 0 0 0 0.18rem rgba(220, 38, 38, 0.08);
    }

    .subscription-otp-copy {
        margin: 1.3rem 0 0;
        color: #111827;
        font-size: 0.98rem;
        line-height: 1.5;
    }

    .subscription-otp-copy strong {
        color: #111827;
        font-weight: 800;
    }

    .subscription-public-phone-wrap {
        margin-bottom: 1.8rem;
    }

    .subscription-public-phone-group {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr);
        border: 1px solid #d4d4d8;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
    }

    .subscription-public-country-display {
        border: 0;
        border-right: 1px solid #d4d4d8;
        background: #fff;
        min-height: 52px;
        padding: 0.35rem 0.7rem 0.35rem 0.8rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.15rem;
    }

    .subscription-public-country-label {
        color: #6b7280;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.1;
    }

    .subscription-public-country-value {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #111827;
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .subscription-public-country-flag {
        font-size: 1rem;
        line-height: 1;
    }

    .subscription-public-phone-field {
        min-width: 0;
        min-height: 52px;
        padding: 0.35rem 0.85rem 0.4rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.15rem;
        background: #fff;
    }

    .subscription-public-phone-example {
        color: #6b7280;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.1;
        display: inline-block;
    }

    .subscription-public-phone-example strong {
        color: #111827;
        font-weight: 700;
    }

    .subscription-public-phone {
        border: 0;
        min-height: 0;
        padding: 0;
        color: #111827;
        font-size: 1rem;
        font-weight: 500;
        background: transparent;
        width: 100%;
    }

    .subscription-public-phone:focus {
        outline: none;
    }

    .subscription-public-phone-group.is-invalid {
        border-color: #dc2626;
        box-shadow: 0 0 0 0.18rem rgba(220, 38, 38, 0.08);
    }

    .subscription-public-error {
        margin-top: 0.55rem;
        color: #dc2626;
        font-size: 0.92rem;
        font-weight: 600;
    }

    .subscription-public-submit {
        min-width: 280px;
        min-height: 48px;
        border: 0;
        border-radius: 10px;
        background: #ff980f;
        color: #fff;
        font-size: 1.05rem;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: filter 0.2s ease;
    }

    .subscription-public-submit:hover,
    .subscription-public-submit:focus-visible {
        filter: brightness(0.98);
        outline: none;
    }

    .subscription-human-overlay {
        position: fixed;
        inset: 0;
        z-index: 1086;
        background: rgba(17, 24, 39, 0.58);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
    }

    .subscription-human-overlay[hidden] {
        display: none !important;
    }

    .subscription-human-dialog {
        width: 100%;
        max-width: 430px;
        background: #fff;
        border-radius: 22px;
        box-shadow: 0 28px 60px rgba(17, 24, 39, 0.24);
        padding: 1.3rem 1.35rem 1.45rem;
    }

    .subscription-human-close-row {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 0.4rem;
    }

    .subscription-human-close {
        border: 0;
        background: transparent;
        color: #6b7280;
        font-size: 0.98rem;
        font-weight: 700;
        padding: 0;
    }

    .subscription-human-title {
        margin: 0 0 0.45rem;
        color: #32475c;
        font-size: 1.55rem;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .subscription-human-copy {
        margin: 0 0 1.2rem;
        color: #9a9187;
        font-size: 1rem;
    }

    .subscription-human-check-shell {
        border: 1px solid #d4d4d8;
        border-radius: 4px;
        background: #fff;
        padding: 0.95rem 0.9rem;
    }

    .subscription-human-check {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.85rem;
        margin: 0;
        cursor: pointer;
    }

    .subscription-human-checkbox {
        width: 28px;
        height: 28px;
        margin: 0;
        accent-color: var(--user-accent, #ff980f);
    }

    .subscription-human-check-copy {
        color: #111827;
        font-size: 1.08rem;
        font-weight: 500;
        line-height: 1.2;
    }

    .subscription-human-brand {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        color: #6b7280;
        font-size: 0.72rem;
        font-weight: 700;
    }

    .subscription-human-brand i {
        color: #4f83ff;
        font-size: 1.85rem;
        line-height: 1;
    }

    .subscription-human-error {
        margin-top: 0.7rem;
        color: #dc2626;
        font-size: 0.92rem;
        font-weight: 600;
    }

    .subscription-remove-modal .modal-dialog {
        max-width: 460px;
    }

    .subscription-remove-modal .modal-content {
        border: 0;
        border-radius: 22px;
        padding: 1.7rem 1.55rem 1.55rem;
        box-shadow: 0 28px 60px rgba(17, 24, 39, 0.16);
    }

    .subscription-remove-modal .modal-header {
        border: 0;
        padding: 0;
        justify-content: flex-end;
        margin-bottom: 0.25rem;
    }

    .subscription-remove-close {
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #111827;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.9rem;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .subscription-remove-close:hover,
    .subscription-remove-close:focus-visible {
        background: rgba(var(--user-accent-rgb, 201, 142, 74), 0.1);
        color: var(--user-accent, #ff980f);
        outline: none;
    }

    .subscription-remove-body {
        padding: 0;
        text-align: center;
    }

    .subscription-remove-title {
        margin: 0 0 0.55rem;
        color: #111827;
        font-size: 1.85rem;
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .subscription-remove-copy {
        margin: 0 0 1.45rem;
        color: #9a9187;
        font-size: 0.98rem;
        line-height: 1.45;
    }

    .subscription-remove-confirm {
        min-width: 200px;
        min-height: 48px;
        border: 0;
        border-radius: 10px;
        background: #ff980f;
        color: #fff;
        font-size: 1rem;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: filter 0.2s ease;
    }

    .subscription-remove-confirm:hover,
    .subscription-remove-confirm:focus-visible {
        filter: brightness(0.98);
        outline: none;
    }

    @media (max-width: 991.98px) {
        .subscription-manage-layout {
            grid-template-columns: 1fr;
        }

        .subscription-manage-title {
            font-size: 1.7rem;
        }
    }

    @media (max-width: 575.98px) {
        .subscription-manage-shell {
            padding-left: 0.1rem;
            padding-right: 0.1rem;
        }

        .subscription-manage-head {
            align-items: flex-start;
        }

        .subscription-manage-title {
            font-size: 1.45rem;
        }

        .subscription-manage-stat {
            flex-direction: column;
            align-items: flex-start;
        }

        .subscription-manage-slot-row {
            flex-direction: column;
            align-items: flex-start;
        }

        .subscription-manage-slot-right {
            white-space: normal;
        }

        .subscription-public-modal .modal-content {
            padding: 1rem 1rem 1.35rem;
        }

        .subscription-public-title {
            font-size: 1.6rem;
            margin-bottom: 1.4rem;
        }

        .subscription-public-phone-group {
            grid-template-columns: 1fr;
        }

        .subscription-public-country-display {
            border-right: 0;
            border-bottom: 1px solid #d4d4d8;
        }

        .subscription-public-submit {
            width: 100%;
            min-width: 0;
        }

        .subscription-human-overlay {
            padding: 1rem;
        }

        .subscription-human-dialog {
            padding: 1.1rem 1rem 1.2rem;
        }

        .subscription-human-title {
            font-size: 1.3rem;
        }

        .subscription-human-check {
            grid-template-columns: 28px minmax(0, 1fr);
        }

        .subscription-human-brand {
            grid-column: 1 / -1;
            justify-self: end;
        }

    }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="subscription-manage-shell">
        @if(session('status'))
            <div class="alert alert-success mb-4" data-auto-dismiss="2000">{{ session('status') }}</div>
        @endif

        <div class="subscription-manage-layout">
            <div class="subscription-manage-main">
                <div class="subscription-manage-head">
                    <a href="{{ route('dashboard.my-subscriptions') }}" class="subscription-manage-back" aria-label="Back">
                        <i class="icon-base ti tabler-chevron-left icon-md"></i>
                    </a>

                    <h1 class="subscription-manage-title">{{ $managementHeadline }}</h1>
                </div>

                @php
                    $isYouTubeService = str_contains(strtolower($serviceName), 'youtube');
                    $isConfirmedMember = $viewerMembership !== null && ! in_array((string) $viewerMembership->status, ['cancelled', 'expired'], true);
                    $isOwnerUser = (int) auth()->id() === (int) $subscription->owner_id || auth()->user()->hasRole('super admin');
                    $canSeeCredentials = ($isConfirmedMember || $isOwnerUser) && ! $isArchivedManagement;
                @endphp

                @if($canSeeCredentials)
                    @if(! $isYouTubeService && (filled($subscription->subscription_email) || filled($subscription->subscription_password)))
                        <div class="subscription-manage-card mb-4" style="background: #f0fdf4; border: 1.5px solid #86efac; border-radius: 16px; padding: 22px;">
                            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
                                <div class="d-flex align-items-center gap-2">
                                    <span style="width: 38px; height: 38px; background: #22c55e; color: #fff; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px;">
                                        <i class="icon-base ti tabler-key"></i>
                                    </span>
                                    <div>
                                        <h3 class="mb-0 fw-bold" style="font-size: 1.15rem; color: #14532d;">Subscription Login Credentials</h3>
                                        <small class="text-muted">Use these account credentials to log in to {{ $serviceName }}</small>
                                    </div>
                                </div>
                                @if($isConfirmedMember)
                                    <span class="badge bg-success py-1 px-2"><i class="icon-base ti tabler-check me-1"></i> Paid & Verified</span>
                                @else
                                    <span class="badge bg-label-primary py-1 px-2">Owner Credentials</span>
                                @endif
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted mb-1">Email / Account</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control bg-white fw-bold text-dark" id="displayCredEmail" value="{{ $subscription->subscription_email }}" readonly>
                                        <button class="btn btn-outline-success" type="button" onclick="navigator.clipboard.writeText('{{ addslashes($subscription->subscription_email) }}'); const el=this; el.innerText='Copied!'; setTimeout(() => el.innerHTML='<i class=\'icon-base ti tabler-copy\'></i>', 2000);">
                                            <i class="icon-base ti tabler-copy"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-bold text-muted mb-1">Password</label>
                                    <div class="input-group">
                                        <input type="password" class="form-control bg-white fw-bold text-dark" id="displayCredPassword" value="{{ $subscription->subscription_password }}" readonly>
                                        <button class="btn btn-outline-secondary" type="button" onclick="const p = document.getElementById('displayCredPassword'); if (p.type==='password'){p.type='text'; this.innerHTML='<i class=\'icon-base ti tabler-eye-off\'></i>';}else{p.type='password'; this.innerHTML='<i class=\'icon-base ti tabler-eye\'></i>';}">
                                            <i class="icon-base ti tabler-eye"></i>
                                        </button>
                                        <button class="btn btn-outline-success" type="button" onclick="navigator.clipboard.writeText('{{ addslashes($subscription->subscription_password) }}'); const el=this; el.innerText='Copied!'; setTimeout(() => el.innerHTML='<i class=\'icon-base ti tabler-copy\'></i>', 2000);">
                                            <i class="icon-base ti tabler-copy"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-3 small text-success d-flex align-items-center gap-1">
                                <i class="icon-base ti tabler-shield-check"></i>
                                <span>Please keep these credentials safe and do not alter the account password or profile settings.</span>
                            </div>
                        </div>
                    @elseif($isYouTubeService && $isConfirmedMember)
                        <div class="subscription-manage-card mb-4" style="background: #fff5f5; border: 1.5px solid #feb2b2; border-radius: 16px; padding: 22px;">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <span style="width: 38px; height: 38px; background: #ef4444; color: #fff; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px;">
                                    <i class="icon-base ti tabler-brand-youtube"></i>
                                </span>
                                <div>
                                    <h3 class="mb-0 fw-bold" style="font-size: 1.15rem; color: #7f1d1d;">YouTube Family Access</h3>
                                    <small class="text-muted">Invitation-based access via Google Family group</small>
                                </div>
                            </div>
                            <p class="mb-0 text-muted" style="font-size: 14px;">
                                YouTube packages work through Google Family invitations. The owner will invite your Google email directly to their YouTube family group. You can chat with the owner using the chat button on the right to coordinate access.
                            </p>
                        </div>
                    @endif
                @endif

                @unless($isArchivedManagement)
                    <div class="subscription-manage-visibility">
                        @if($canUpdateVisibility)
                            <form method="POST" action="{{ route('subscriptions.visibility', $subscription) }}" class="subscription-manage-visibility-form">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="is_public" value="0">
                                <button type="submit" class="subscription-manage-visibility-btn {{ ! $subscription->is_public ? 'is-active' : '' }}">
                                    <span class="subscription-manage-visibility-dot"></span>
                                    <span>Keep hidden</span>
                                </button>
                            </form>

                            @if($subscription->is_public)
                                <span class="subscription-manage-visibility-static is-active">
                                    <span class="subscription-manage-visibility-dot"></span>
                                    <span>Displayed publicly</span>
                                </span>
                            @else
                                <button
                                    type="button"
                                    class="subscription-manage-visibility-btn"
                                    data-bs-toggle="modal"
                                    data-bs-target="#publicVisibilityModal"
                                >
                                    <span class="subscription-manage-visibility-dot"></span>
                                    <span>Displayed publicly</span>
                                </button>
                            @endif
                        @else
                            <span class="subscription-manage-visibility-static {{ ! $subscription->is_public ? 'is-active' : '' }}">
                                <span class="subscription-manage-visibility-dot"></span>
                                <span>Keep hidden</span>
                            </span>

                            <span class="subscription-manage-visibility-static {{ $subscription->is_public ? 'is-active' : '' }}">
                                <span class="subscription-manage-visibility-dot"></span>
                                <span>Displayed publicly</span>
                            </span>
                        @endif
                    </div>
                @endunless

                <p class="subscription-manage-copy">
                    {{ $visibilityDescription }}
                    @if(! $isArchivedManagement && ! $subscription->is_public)
                        You can adjust the status of the shared group to public by clicking the button above.
                    @endif
                </p>

                <div class="subscription-manage-dots">...</div>

                <div class="subscription-manage-stats">
                    <div class="subscription-manage-stat">
                        <span class="subscription-manage-stat-label">Income from sharing:</span>
                        <span class="subscription-manage-stat-value">
                            {{ number_format($incomeFromSharing, 2) }} {{ $currencySymbol }}
                            <i class="icon-base ti tabler-chevron-right subscription-manage-arrow"></i>
                        </span>
                    </div>

                    <div class="subscription-manage-stat">
                        <span class="subscription-manage-stat-label">Subscription price per slot:</span>
                        <span class="subscription-manage-stat-value">
                            {{ number_format((float) $subscription->price_per_slot, 2) }} {{ $currencySymbol }}
                            <span class="subscription-manage-stat-muted">/ month</span>
                        </span>
                    </div>

                    <div class="subscription-manage-stat">
                        <span class="subscription-manage-stat-label">Slot sales status:</span>
                        <span class="subscription-manage-stat-value is-accent">
                            {{ $slotSalesFilled }}/{{ $slotSalesTotal }}
                            <span class="subscription-manage-stat-muted">Co-subscribers</span>
                        </span>
                    </div>
                </div>

                <div class="subscription-manage-slots">
                    @foreach($slotRows as $row)
                        @php
                            $avatar = trim((string) ($row['avatar'] ?? ''));
                            $avatarSrc = $avatar !== ''
                                ? (preg_match('/^https?:\/\//', $avatar) ? $avatar : asset($avatar))
                                : '';
                        @endphp

                        <div class="subscription-manage-slot-row">
                            <div class="subscription-manage-slot-left">
                                @if(in_array($row['kind'], ['owner', 'member'], true))
                                    <span class="subscription-manage-slot-avatar">
                                        @if($avatarSrc !== '')
                                            <img src="{{ $avatarSrc }}" alt="{{ $row['name'] }}" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-flex';">
                                            <span style="display:none;">{{ $row['initials'] ?? 'U' }}</span>
                                        @else
                                            {{ $row['initials'] ?? 'U' }}
                                        @endif
                                    </span>
                                @elseif($row['kind'] === 'free')
                                    <span class="subscription-manage-slot-icon is-free">
                                        <i class="icon-base ti tabler-user"></i>
                                    </span>
                                @else
                                    <span class="subscription-manage-slot-icon is-reserved">
                                        <i class="icon-base ti tabler-lock"></i>
                                    </span>
                                @endif

                                <div class="subscription-manage-slot-name">
                                    <span>{{ $row['name'] }}</span>

                                    @if(! empty($row['flag_class']))
                                        <span class="subscription-manage-slot-flag {{ $row['flag_class'] }}"></span>
                                    @endif
                                </div>
                            </div>

                            @if($row['status'] !== '' || ! empty($row['badge']))
                                <div class="subscription-manage-slot-right">
                                    @if($row['status'] !== '')
                                        <span>{{ $row['status'] }}</span>
                                        <i class="icon-base ti tabler-chevron-right"></i>
                                    @endif

                                    @if(! empty($row['badge']))
                                        <span class="subscription-manage-slot-badge">
                                            <i class="icon-base ti tabler-crown icon-xs"></i>
                                            {{ $row['badge'] }}
                                        </span>
                                    @endif
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="subscription-manage-sidebar">
                <div class="subscription-manage-card">
                    <div class="subscription-manage-summary">
                        <div class="subscription-manage-summary-head">
                            <span class="subscription-manage-summary-logo">
                                @if($logo)
                                    <img src="{{ $logo }}" alt="{{ $serviceName }}" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-flex';">
                                    <span style="display:none;">{{ strtoupper(substr($serviceName, 0, 1)) }}</span>
                                @else
                                    {{ strtoupper(substr($serviceName, 0, 1)) }}
                                @endif
                            </span>

                            <div class="subscription-manage-summary-name">{{ $serviceName }} {{ $planName }}</div>
                        </div>

                        <div class="subscription-manage-summary-note">
                            <i class="icon-base ti tabler-link"></i>
                            <span>{{ $accessNote }}</span>
                        </div>
                    </div>

                    @if($isArchivedManagement)
                        @if($canManageListing)
                            <form method="POST" action="{{ route('subscriptions.republish', $subscription) }}" class="mt-4 w-100">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="subscription-manage-sidebar-btn is-theme w-100">Republish subscription</button>
                            </form>
                        @else
                            <button type="button" class="subscription-manage-sidebar-btn mt-4 w-100 is-disabled" disabled>Republish subscription</button>
                        @endif
                    @elseif($chatUrl)
                        <a href="{{ $chatUrl }}" class="subscription-manage-sidebar-btn mt-4">{{ $chatLabel }}</a>
                    @else
                        <button type="button" class="subscription-manage-sidebar-btn mt-4 is-disabled" disabled>{{ $chatLabel }}</button>
                    @endif

                    @if($isArchivedManagement)
                        @if($canManageListing)
                            <button
                                type="button"
                                class="subscription-manage-sidebar-btn is-theme mt-3 w-100"
                                data-bs-toggle="modal"
                                data-bs-target="#removeSubscriptionModal"
                            >
                                Remove
                            </button>
                        @else
                            <button type="button" class="subscription-manage-sidebar-btn mt-3 w-100 is-disabled" disabled>Remove</button>
                        @endif
                    @elseif($canManageListing)
                        <button
                            type="button"
                            class="subscription-manage-sidebar-btn mt-3"
                            data-bs-toggle="modal"
                            data-bs-target="#stopSharingModal"
                        >
                            Stop sharing
                        </button>
                    @else
                        <button type="button" class="subscription-manage-sidebar-btn mt-3 is-disabled" disabled>Stop sharing</button>
                    @endif
                </div>

                <div class="subscription-manage-card">
                    <h2 class="subscription-manage-verify-title">Verify invoice</h2>
                    <p class="subscription-manage-verify-copy">
                        Verify your invoice to increase your trust score and receive a verified invoice label, thereby attracting potential co-subscribers more quickly.
                    </p>
                    <a href="#" class="subscription-manage-verify-link" onclick="return false;">What is a valid invoice</a>

                    <div class="subscription-manage-upload-box">
                        <span class="subscription-manage-upload-icon">+</span>
                        <span class="subscription-manage-upload-text">Upload invoice or transaction details</span>
                    </div>

                    <button type="button" class="subscription-manage-sidebar-btn w-100" onclick="return false;">Upload</button>
                </div>
            </div>
        </div>
    </div>
</div>

@if($canUpdateVisibility && ! $subscription->is_public && ! $isArchivedManagement)
    <div class="modal fade subscription-public-modal" id="publicVisibilityModal" tabindex="-1" aria-labelledby="publicVisibilityModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="subscription-public-close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="icon-base ti tabler-x"></i>
                    </button>
                </div>

                <div class="modal-body p-0">
                    <div class="subscription-public-shell">
                        <h2 class="subscription-public-title" id="publicVisibilityModalLabel">Switch Subscription to Public</h2>

                        <div class="subscription-public-step" id="subscriptionPublicCredentialsStep" @if($shouldOpenOtpVerification || $errors->has('phone_country_code') || $errors->has('phone_number') || $shouldOpenHumanVerification) hidden @endif>
                            <div class="subscription-public-note">Your subscription will be offered to other users.</div>

                            <h3 class="subscription-public-label">Enter your subscription email and password</h3>
                            <p class="subscription-public-copy">Please enter the email and password for this subscription account. These credentials will be securely provided to buyers after payment.</p>

                            <div class="mb-3">
                                <label class="form-label fw-bold text-dark small mb-1" for="subModalEmail">Subscription Email</label>
                                <input 
                                    type="email" 
                                    id="subModalEmail" 
                                    class="subscription-otp-input" 
                                    placeholder="e.g. your-account@service.com" 
                                    value="{{ old('subscription_email', $subscription->subscription_email) }}"
                                    autocomplete="email"
                                    required
                                >
                                <div class="text-danger small mt-1" id="subModalEmailError" style="display: none;">Please enter a valid email address.</div>
                            </div>

                            <div class="mb-4">
                                <label class="form-label fw-bold text-dark small mb-1" for="subModalPassword">Subscription Password</label>
                                <div style="position: relative;">
                                    <input 
                                        type="password" 
                                        id="subModalPassword" 
                                        class="subscription-otp-input" 
                                        style="padding-right: 46px;"
                                        placeholder="Enter subscription password" 
                                        value="{{ old('subscription_password', $subscription->subscription_password) }}"
                                        autocomplete="current-password"
                                        required
                                    >
                                    <button 
                                        type="button" 
                                        id="subModalPasswordToggle" 
                                        style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #64748b; cursor: pointer; padding: 4px; font-size: 1.15rem;"
                                    >
                                        <i class="icon-base ti tabler-eye" id="subModalEyeIcon"></i>
                                    </button>
                                </div>
                                <div class="text-danger small mt-1" id="subModalPasswordError" style="display: none;">Please enter the password.</div>
                            </div>

                            <button type="button" class="subscription-public-submit" id="btnContinueToPhone">Continue</button>
                        </div>

                        <div class="subscription-public-step" id="subscriptionPublicPhoneStep" @if($shouldOpenOtpVerification || !($errors->has('phone_country_code') || $errors->has('phone_number') || $shouldOpenHumanVerification)) hidden @endif>
                            <button type="button" id="btnBackToCredentials" class="btn btn-link p-0 mb-3 text-muted" style="text-decoration: none; font-size: 14px;">
                                <i class="icon-base ti tabler-arrow-left me-1"></i> Edit subscription email & password
                            </button>

                            <div class="subscription-public-note">Your subscription will be offered to other users.</div>

                            <form method="POST" action="{{ route('subscriptions.visibility.otp.send', $subscription) }}" novalidate>
                                @csrf
                                <input type="hidden" name="human_verification_passed" id="humanVerificationPassedInput" value="{{ old('human_verification_passed', '0') }}">
                                <input type="hidden" name="subscription_email" id="hiddenSubscriptionEmail" value="{{ old('subscription_email', $subscription->subscription_email) }}">
                                <input type="hidden" name="subscription_password" id="hiddenSubscriptionPassword" value="{{ old('subscription_password', $subscription->subscription_password) }}">

                                <h3 class="subscription-public-label">Verify Your Phone</h3>
                                <p class="subscription-public-copy">Verify your account by phone number.</p>

                                <div class="subscription-public-phone-wrap">
                                    <div class="subscription-public-phone-group {{ $errors->has('phone_country_code') || $errors->has('phone_number') ? 'is-invalid' : '' }}">
                                        <input type="hidden" name="phone_country_code" value="{{ $prefilledPhoneCountryCode }}">

                                        <div class="subscription-public-country-display" aria-hidden="true">
                                            <span class="subscription-public-country-label">Country Code</span>
                                            <span class="subscription-public-country-value">
                                                <span class="subscription-public-country-flag {{ $selectedPhoneCountry['flag_class'] }}"></span>
                                                <span>{{ $prefilledPhoneCountryCode }}</span>
                                            </span>
                                        </div>

                                        <div class="subscription-public-phone-field">
                                            <span
                                                class="subscription-public-phone-example"
                                                id="subscriptionPublicPhoneHelper"
                                            >
                                                <span class="subscription-public-phone-helper-label">Example:</span>
                                                <strong class="subscription-public-phone-helper-value">{{ $selectedPhoneExample }}</strong>
                                            </span>

                                            <input
                                                type="tel"
                                                name="phone_number"
                                                class="subscription-public-phone"
                                                value="{{ $prefilledPhoneNumber }}"
                                                placeholder="{{ $selectedPhoneExample }}"
                                                data-phone-digits="{{ $selectedPhoneDigits }}"
                                                data-phone-example="{{ $selectedPhoneExample }}"
                                                inputmode="tel"
                                                autocomplete="tel-national"
                                                required
                                            >
                                        </div>
                                    </div>

                                    <div
                                        class="subscription-public-error"
                                        id="subscriptionPublicPhoneError"
                                        @if(! $errors->has('phone_country_code') && ! $errors->has('phone_number')) hidden @endif
                                    >
                                        {{ $errors->first('phone_country_code') ?: $errors->first('phone_number') }}
                                    </div>
                                </div>

                                <button type="submit" class="subscription-public-submit">Check</button>
                            </form>

                            <div
                                class="subscription-human-overlay"
                                id="subscriptionHumanOverlay"
                                @if(! $shouldOpenHumanVerification) hidden @endif
                            >
                                <div class="subscription-human-dialog" role="dialog" aria-modal="true" aria-labelledby="subscriptionHumanTitle">
                                    <div class="subscription-human-close-row">
                                        <button type="button" class="subscription-human-close" id="subscriptionHumanClose">Close</button>
                                    </div>

                                    <h3 class="subscription-human-title" id="subscriptionHumanTitle">One more step before completion</h3>
                                    <p class="subscription-human-copy">Select the checkbox below</p>

                                    <div class="subscription-human-check-shell">
                                        <label class="subscription-human-check" for="subscriptionHumanCheckbox">
                                            <input
                                                type="checkbox"
                                                id="subscriptionHumanCheckbox"
                                                class="subscription-human-checkbox"
                                                @checked(old('human_verification_passed') == '1')
                                            >
                                            <span class="subscription-human-check-copy">I'm not a robot</span>
                                            <span class="subscription-human-brand">
                                                <i class="fa-solid fa-shield-check"></i>
                                                <span>reCAPTCHA</span>
                                            </span>
                                        </label>
                                    </div>

                                    <div
                                        class="subscription-human-error"
                                        id="subscriptionHumanError"
                                        @if(! $shouldOpenHumanVerification) hidden @endif
                                    >
                                        {{ $errors->first('human_verification_passed') }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="subscription-public-step" id="subscriptionPublicOtpStep" @if(! $shouldOpenOtpVerification) hidden @endif>
                            <div class="subscription-public-note">Your subscription will be offered to other users.</div>

                            <h3 class="subscription-public-label">Verify Your Phone</h3>
                            <p class="subscription-public-copy">Verify your account by phone number.</p>

                            <form method="POST" action="{{ route('subscriptions.visibility.otp.verify', $subscription) }}" novalidate>
                                @csrf

                                <div class="subscription-otp-wrap">
                                    <input
                                        type="text"
                                        name="otp_code"
                                        class="subscription-otp-input {{ $errors->has('otp_code') ? 'is-invalid' : '' }}"
                                        value="{{ old('otp_code') }}"
                                        placeholder="Enter the code you received"
                                        inputmode="numeric"
                                        autocomplete="one-time-code"
                                        maxlength="6"
                                        required
                                    >

                                    @if($errors->has('otp_code'))
                                        <div class="subscription-public-error">{{ $errors->first('otp_code') }}</div>
                                    @endif
                                </div>

                                <button type="submit" class="subscription-public-submit">Verify</button>
                            </form>

                            <p class="subscription-otp-copy">
                                Not received SMS? Verification code has been sent to:
                                <strong>{{ $otpDestinationPhone }}</strong>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

@if($canManageListing && ! $isArchivedManagement)
    <div class="modal fade subscription-remove-modal" id="stopSharingModal" tabindex="-1" aria-labelledby="stopSharingModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="subscription-remove-close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="icon-base ti tabler-x"></i>
                    </button>
                </div>

                <div class="modal-body subscription-remove-body">
                    <h2 class="subscription-remove-title" id="stopSharingModalLabel">Stop sharing {{ $serviceName }}</h2>
                    <p class="subscription-remove-copy">Are you sure you want to stop sharing this service?</p>

                    <form method="POST" action="{{ route('subscriptions.destroy', $subscription) }}">
                        @csrf
                        @method('DELETE')

                        <button type="submit" class="subscription-remove-confirm">Confirm</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endif

@if($canManageListing && $isArchivedManagement)
    <div class="modal fade subscription-remove-modal" id="removeSubscriptionModal" tabindex="-1" aria-labelledby="removeSubscriptionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="subscription-remove-close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="icon-base ti tabler-x"></i>
                    </button>
                </div>

                <div class="modal-body subscription-remove-body">
                    <h2 class="subscription-remove-title" id="removeSubscriptionModalLabel">Remove {{ $serviceName }}</h2>
                    <p class="subscription-remove-copy">Are you sure you want to remove this service?</p>

                    <form method="POST" action="{{ route('subscriptions.remove', $subscription) }}">
                        @csrf
                        @method('DELETE')

                        <button type="submit" class="subscription-remove-confirm">Confirm</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endif
@endsection

@push('script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const shouldOpenPublicModal = @json($shouldOpenPublicModal);
    const shouldOpenHumanVerification = @json($shouldOpenHumanVerification);
    const shouldOpenOtpVerification = @json($shouldOpenOtpVerification);
    const publicVisibilityModal = document.getElementById('publicVisibilityModal');
    const credentialsStep = document.getElementById('subscriptionPublicCredentialsStep');
    const phoneStep = document.getElementById('subscriptionPublicPhoneStep');
    const otpStep = document.getElementById('subscriptionPublicOtpStep');
    const btnContinueToPhone = document.getElementById('btnContinueToPhone');
    const btnBackToCredentials = document.getElementById('btnBackToCredentials');
    const subModalEmail = document.getElementById('subModalEmail');
    const subModalPassword = document.getElementById('subModalPassword');
    const subModalEmailError = document.getElementById('subModalEmailError');
    const subModalPasswordError = document.getElementById('subModalPasswordError');
    const hiddenSubscriptionEmail = document.getElementById('hiddenSubscriptionEmail');
    const hiddenSubscriptionPassword = document.getElementById('hiddenSubscriptionPassword');
    const subModalPasswordToggle = document.getElementById('subModalPasswordToggle');
    const subModalEyeIcon = document.getElementById('subModalEyeIcon');
    const publicVisibilityForm = phoneStep ? phoneStep.querySelector('form') : null;
    const phoneInput = publicVisibilityForm ? publicVisibilityForm.querySelector('input[name="phone_number"]') : null;
    const phoneGroup = publicVisibilityModal ? publicVisibilityModal.querySelector('.subscription-public-phone-group') : null;
    const phoneError = document.getElementById('subscriptionPublicPhoneError');
    const humanPassedInput = document.getElementById('humanVerificationPassedInput');
    const humanOverlay = document.getElementById('subscriptionHumanOverlay');
    const humanCheckbox = document.getElementById('subscriptionHumanCheckbox');
    const humanClose = document.getElementById('subscriptionHumanClose');
    const humanError = document.getElementById('subscriptionHumanError');
    const phoneHelper = document.getElementById('subscriptionPublicPhoneHelper');
    const phoneHelperLabel = phoneHelper ? phoneHelper.querySelector('.subscription-public-phone-helper-label') : null;
    const phoneHelperValue = phoneHelper ? phoneHelper.querySelector('.subscription-public-phone-helper-value') : null;

    const normalizeDigits = function (value) {
        return (value || '').replace(/\D+/g, '');
    };

    const showPublicStep = function (stepName) {
        if (credentialsStep) {
            credentialsStep.hidden = stepName !== 'credentials';
        }

        if (phoneStep) {
            phoneStep.hidden = stepName !== 'phone';
        }

        if (otpStep) {
            otpStep.hidden = stepName !== 'otp';
        }
    };

    if (subModalPasswordToggle && subModalPassword) {
        subModalPasswordToggle.addEventListener('click', function () {
            if (subModalPassword.type === 'password') {
                subModalPassword.type = 'text';
                if (subModalEyeIcon) {
                    subModalEyeIcon.className = 'icon-base ti tabler-eye-off';
                }
            } else {
                subModalPassword.type = 'password';
                if (subModalEyeIcon) {
                    subModalEyeIcon.className = 'icon-base ti tabler-eye';
                }
            }
        });
    }

    if (btnContinueToPhone) {
        btnContinueToPhone.addEventListener('click', function () {
            let hasError = false;
            const emailVal = (subModalEmail ? subModalEmail.value : '').trim();
            const passVal = (subModalPassword ? subModalPassword.value : '');

            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailVal || !emailPattern.test(emailVal)) {
                if (subModalEmailError) subModalEmailError.style.display = 'block';
                if (subModalEmail) subModalEmail.classList.add('is-invalid');
                hasError = true;
            } else {
                if (subModalEmailError) subModalEmailError.style.display = 'none';
                if (subModalEmail) subModalEmail.classList.remove('is-invalid');
            }

            if (!passVal) {
                if (subModalPasswordError) subModalPasswordError.style.display = 'block';
                if (subModalPassword) subModalPassword.classList.add('is-invalid');
                hasError = true;
            } else {
                if (subModalPasswordError) subModalPasswordError.style.display = 'none';
                if (subModalPassword) subModalPassword.classList.remove('is-invalid');
            }

            if (hasError) {
                return;
            }

            if (hiddenSubscriptionEmail) hiddenSubscriptionEmail.value = emailVal;
            if (hiddenSubscriptionPassword) hiddenSubscriptionPassword.value = passVal;

            showPublicStep('phone');
        });
    }

    if (btnBackToCredentials) {
        btnBackToCredentials.addEventListener('click', function () {
            showPublicStep('credentials');
        });
    }

    if (publicVisibilityModal) {
        publicVisibilityModal.addEventListener('show.bs.modal', function () {
            if (!shouldOpenOtpVerification && !shouldOpenHumanVerification && !{{ $errors->has('phone_number') || $errors->has('phone_country_code') ? 'true' : 'false' }}) {
                showPublicStep('credentials');
            }
        });
    }

    const showPhoneError = function (message) {
        if (phoneGroup) {
            phoneGroup.classList.add('is-invalid');
        }

        if (phoneInput) {
            phoneInput.setAttribute('aria-invalid', 'true');
        }

        if (phoneError) {
            phoneError.textContent = message;
            phoneError.hidden = false;
        }
    };

    const clearPhoneError = function () {
        if (phoneGroup) {
            phoneGroup.classList.remove('is-invalid');
        }

        if (phoneInput) {
            phoneInput.removeAttribute('aria-invalid');
        }

        if (phoneError) {
            phoneError.textContent = '';
            phoneError.hidden = true;
        }
    };

    const syncPhoneHelper = function () {
        if (!phoneInput || !phoneHelperLabel || !phoneHelperValue) {
            return;
        }

        const expectedDigits = Number(phoneInput.dataset.phoneDigits || 0);
        const defaultExample = phoneInput.dataset.phoneExample || '';
        const digits = normalizeDigits(phoneInput.value);
        const isComplete = expectedDigits > 0
            ? digits.length === expectedDigits
            : digits.length >= 6;

        if (isComplete) {
            phoneHelperLabel.textContent = 'Phone Number';
            phoneHelperValue.textContent = '';
            phoneHelperValue.hidden = true;
            return;
        }

        phoneHelperLabel.textContent = 'Example:';
        phoneHelperValue.textContent = defaultExample;
        phoneHelperValue.hidden = false;
    };

    const clearHumanError = function () {
        if (!humanError) {
            return;
        }

        humanError.textContent = '';
        humanError.hidden = true;
    };

    const openHumanOverlay = function () {
        if (!humanOverlay) {
            return;
        }

        humanOverlay.hidden = false;

        if (humanCheckbox) {
            humanCheckbox.focus();
        }
    };

    const closeHumanOverlay = function () {
        if (!humanOverlay) {
            return;
        }

        humanOverlay.hidden = true;
    };

    const validatePhoneNumber = function () {
        if (!phoneInput) {
            return true;
        }

        const expectedDigits = Number(phoneInput.dataset.phoneDigits || 0);
        const digits = normalizeDigits(phoneInput.value);
        const isValid = expectedDigits > 0
            ? digits.length === expectedDigits
            : digits.length >= 6;

        if (!isValid) {
            showPhoneError('Number is not correct.');
            return false;
        }

        clearPhoneError();
        return true;
    };

    if (phoneInput && publicVisibilityForm) {
        phoneInput.addEventListener('input', function () {
            const digits = normalizeDigits(phoneInput.value);
            const expectedDigits = Number(phoneInput.dataset.phoneDigits || 0);

            if (humanPassedInput) {
                humanPassedInput.value = '0';
            }

            if (humanCheckbox) {
                humanCheckbox.checked = false;
            }

            closeHumanOverlay();
            clearHumanError();

            syncPhoneHelper();

            if (digits.length === 0) {
                clearPhoneError();
                return;
            }

            if (expectedDigits > 0 && digits.length > expectedDigits) {
                showPhoneError('Number is not correct.');
                return;
            }

            if (expectedDigits > 0 && digits.length === expectedDigits) {
                clearPhoneError();
                return;
            }

            clearPhoneError();
        });

        publicVisibilityForm.addEventListener('submit', function (event) {
            if (!validatePhoneNumber()) {
                event.preventDefault();
                phoneInput.focus();
                closeHumanOverlay();
                return;
            }

            if (humanPassedInput && humanPassedInput.value !== '1') {
                event.preventDefault();
                openHumanOverlay();
            }
        });

        syncPhoneHelper();
    }

    if (humanCheckbox) {
        humanCheckbox.addEventListener('change', function () {
            if (humanCheckbox.checked) {
                if (humanPassedInput) {
                    humanPassedInput.value = '1';
                }

                clearHumanError();
                closeHumanOverlay();

                if (publicVisibilityForm) {
                    publicVisibilityForm.requestSubmit();
                }

                return;
            }

            if (humanPassedInput) {
                humanPassedInput.value = '0';
            }
        });
    }

    if (humanClose) {
        humanClose.addEventListener('click', function () {
            closeHumanOverlay();
        });
    }

    if (shouldOpenPublicModal && publicVisibilityModal && window.bootstrap && window.bootstrap.Modal) {
        window.bootstrap.Modal.getOrCreateInstance(publicVisibilityModal).show();
    }

    if (shouldOpenOtpVerification) {
        showPublicStep('otp');
    } else {
        showPublicStep('phone');
    }

    if (shouldOpenHumanVerification && !shouldOpenOtpVerification) {
        openHumanOverlay();
    }
});
</script>
@endpush