@extends('layouts.subscriptions')

@php
    $servicesCollection = $services instanceof \Illuminate\Support\Collection ? $services : collect($services);

    $servicesPayload = $servicesCollection->map(function ($service) {
        $planItems = $service->plans->map(function ($plan) {
            $features = $plan->features;

            if (is_string($features)) {
                $decoded = json_decode($features, true);
                $features = json_last_error() === JSON_ERROR_NONE ? $decoded : preg_split('/\r\n|\r|\n/', $features);
            }

            $features = collect($features)
                ->filter(fn ($feature) => filled($feature))
                ->values()
                ->all();

            return [
                'id' => (int) $plan->id,
                'name' => (string) $plan->name,
                'price' => (float) $plan->price,
                'currency' => (string) ($plan->currency ?: 'USD'),
                'max_slots' => max((int) ($plan->max_slots ?? 1), 1),
                'features' => $features,
            ];
        })->values();

        $serviceName = (string) $service->name;
        $serviceInitials = collect(preg_split('/[\s\-_]+/', $serviceName))
            ->filter()
            ->take(2)
            ->map(fn ($part) => strtoupper(substr($part, 0, 1)))
            ->implode('');

        return [
            'id' => (int) $service->id,
            'name' => $serviceName,
            'description' => (string) ($service->description ?? ''),
            'category_id' => (int) $service->category_id,
            'logo' => $service->logo ? asset($service->logo) : null,
            'initials' => $serviceInitials !== '' ? $serviceInitials : 'SV',
            'plans' => $planItems,
        ];
    })->values();

    $rawCategoriesPayload = $categories->map(function ($category) use ($servicesCollection) {
        return [
            'id' => (int) $category->id,
            'name' => (string) $category->name,
            'icon' => (string) ($category->icon ?? ''),
            'service_count' => (int) $servicesCollection->where('category_id', $category->id)->count(),
        ];
    })->values();

    $featuredCategoryDefinitions = collect([
        [
            'label' => 'SVOD',
            'candidates' => ['SVOD', 'Streaming'],
            'icon_class' => 'fa-solid fa-tv',
            'icon_color' => '#f1b22d',
            'icon_bg' => '#fff0c8',
        ],
        [
            'label' => 'Music',
            'candidates' => ['Music'],
            'icon_class' => 'fa-solid fa-music',
            'icon_color' => '#76a7ff',
            'icon_bg' => '#edf4ff',
        ],
        [
            'label' => 'Security',
            'candidates' => ['Security'],
            'icon_class' => 'fa-solid fa-lock',
            'icon_color' => '#d87e2d',
            'icon_bg' => '#fff0df',
        ],
        [
            'label' => 'Software',
            'candidates' => ['Software', 'Productivity'],
            'icon_class' => 'fa-solid fa-laptop-code',
            'icon_color' => '#6e9dcf',
            'icon_bg' => '#eef5ff',
        ],
        [
            'label' => 'Reading',
            'candidates' => ['Reading'],
            'icon_class' => 'fa-solid fa-book-open',
            'icon_color' => '#8b78d4',
            'icon_bg' => '#f1edff',
        ],
        [
            'label' => 'Cloud',
            'candidates' => ['Cloud'],
            'icon_class' => 'fa-solid fa-cloud',
            'icon_color' => '#b9b7b4',
            'icon_bg' => '#f1efec',
        ],
        [
            'label' => 'Health',
            'candidates' => ['Health'],
            'icon_class' => 'fa-solid fa-user-doctor',
            'icon_color' => '#f1a42d',
            'icon_bg' => '#fff1d9',
        ],
        [
            'label' => 'Video games',
            'candidates' => ['Video games'],
            'icon_class' => 'fa-solid fa-gamepad',
            'icon_color' => '#2c2c2c',
            'icon_bg' => '#ededed',
        ],
        [
            'label' => 'e-Learning',
            'candidates' => ['e-Learning', 'Education', 'E-learning'],
            'icon_class' => 'fa-solid fa-graduation-cap',
            'icon_color' => '#4f4f4f',
            'icon_bg' => '#ece9e2',
        ],
    ]);

    $matchedCategoryIds = [];

    $featuredCategories = $featuredCategoryDefinitions->values()->map(function ($definition, $index) use ($rawCategoriesPayload, &$matchedCategoryIds) {
        $matchedCategory = $rawCategoriesPayload->first(function ($item) use ($definition) {
            return collect($definition['candidates'])->contains(function ($candidate) use ($item) {
                return strcasecmp((string) $item['name'], (string) $candidate) === 0;
            });
        });

        if ($matchedCategory) {
            $matchedCategoryIds[] = (int) $matchedCategory['id'];
        }

        return [
            'id' => $matchedCategory ? (int) $matchedCategory['id'] : -1 * ($index + 1),
            'name' => (string) ($matchedCategory['name'] ?? $definition['label']),
            'label' => (string) $definition['label'],
            'icon' => (string) ($matchedCategory['icon'] ?? ''),
            'icon_class' => (string) $definition['icon_class'],
            'icon_color' => (string) $definition['icon_color'],
            'icon_bg' => (string) $definition['icon_bg'],
            'service_count' => (int) ($matchedCategory['service_count'] ?? 0),
        ];
    })->values();

    $remainingCategories = $rawCategoriesPayload
        ->reject(fn ($category) => in_array((int) $category['id'], $matchedCategoryIds, true))
        ->filter(fn ($category) => (int) ($category['service_count'] ?? 0) > 0)
        ->map(function ($category) {
            return [
                'id' => (int) $category['id'],
                'name' => (string) $category['name'],
                'label' => (string) $category['name'],
                'icon' => (string) ($category['icon'] ?? ''),
                'icon_class' => 'fa-solid fa-shapes',
                'icon_color' => 'var(--user-accent)',
                'icon_bg' => 'rgba(var(--user-accent-rgb), 0.12)',
                'service_count' => (int) $category['service_count'],
            ];
        })
        ->values();

    $categoriesPayload = $featuredCategories->merge($remainingCategories)->values();

    $defaultCategoryId = null;
@endphp

@push('style')
<style>
    .split-builder-page {
        padding: 1.25rem 0 3rem;
    }

    .split-builder-shell {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
        width: 100%;
        max-width: 1140px;
        margin: 0 auto;
    }

    .split-builder-panel {
        border: 1px solid rgba(201, 142, 74, 0.12);
        border-radius: 1.75rem;
        background: #fffdfa;
        box-shadow: 0 1rem 2.2rem rgba(178, 145, 100, 0.08);
    }

    .split-builder-panel {
        padding: 2rem 2rem 1.9rem;
    }

    .split-builder-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0 0 1.65rem;
    }

    .split-builder-head[hidden] {
        display: none !important;
    }

    .split-builder-title {
        margin: 0;
        color: #151515;
        font-size: clamp(2.1rem, 3.2vw, 3rem);
        font-weight: 800;
        letter-spacing: -0.06em;
    }

    .split-builder-search {
        width: 50px;
        height: 50px;
        border: 1px solid #ece6de;
        border-radius: 14px;
        background: #faf8f4;
        color: #a7a095;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        box-shadow: 0 10px 18px rgba(42, 38, 33, 0.05);
        flex-shrink: 0;
        transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .split-builder-search:hover,
    .split-builder-search:focus {
        color: #7b746c;
        transform: translateY(-1px);
        box-shadow: 0 14px 24px rgba(42, 38, 33, 0.08);
    }

    body.split-search-modal-open {
        overflow: hidden;
    }

    .split-category-rail {
        display: flex;
        align-items: stretch;
        gap: 1rem;
        overflow-x: auto;
        padding: 0 0 0.8rem;
        scrollbar-width: thin;
        scrollbar-color: #d8d6d2 transparent;
    }

    .split-category-rail::-webkit-scrollbar {
        height: 6px;
    }

    .split-category-rail::-webkit-scrollbar-track {
        background: transparent;
    }

    .split-category-rail::-webkit-scrollbar-thumb {
        background: #d8d6d2;
        border-radius: 999px;
    }

    .split-category-card {
        min-height: 118px;
        min-width: 118px;
        max-width: 118px;
        border: 1px solid #ece7dc;
        background: #fffdfa;
        color: #5f564d;
        border-radius: 18px;
        padding: 1rem 0.9rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.85rem;
        font-size: 0.98rem;
        font-weight: 700;
        text-align: center;
        box-shadow: 0 10px 24px rgba(32, 29, 26, 0.04);
        transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        cursor: pointer;
        flex: 0 0 118px;
    }

    .split-category-card:hover,
    .split-category-card.is-active {
        border-color: var(--user-accent, #ff9208);
        background: #fffdfa;
        color: var(--user-accent, #ff9208);
        box-shadow: 0 14px 28px rgba(var(--user-accent-rgb, 255, 146, 8), 0.12);
    }

    .split-category-icon {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--split-category-accent-bg, rgba(var(--user-accent-rgb, 201, 142, 74), 0.12));
        color: var(--split-category-accent, var(--user-accent, #c98e4a));
        overflow: hidden;
        flex-shrink: 0;
    }

    .split-category-icon i {
        font-size: 20px;
        line-height: 1;
    }

    .split-category-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .split-category-divider {
        display: none;
    }

    .split-services-section {
        margin-top: 1.8rem;
        padding: 0;
    }

    .split-offers-stage[hidden],
    .split-selection-stage[hidden],
    .split-slots-stage[hidden] {
        display: none !important;
    }

    .split-offers-head {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0 0 1.35rem;
    }

    .split-offers-back {
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        color: #151515;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.45rem;
        border-radius: 999px;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .split-offers-back:hover,
    .split-offers-back:focus-visible {
        background: rgba(201, 142, 74, 0.12);
        transform: translateY(-1px);
        outline: none;
    }

    .split-offers-title {
        margin: 0;
        color: #151515;
        font-size: clamp(1.38rem, 2vw, 1.8rem);
        font-weight: 800;
        letter-spacing: -0.04em;
    }

    .split-offers-shell {
        max-width: 700px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1.15rem;
    }

    .split-offer-card {
        width: 100%;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(201, 142, 74, 0.1);
        border-radius: 1.4rem;
        background: linear-gradient(180deg, #ffffff 0%, #fffdfa 100%);
        box-shadow: 0 14px 30px rgba(34, 29, 23, 0.07);
        padding: 1rem 1.15rem;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.2rem;
        text-align: left;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
        cursor: pointer;
    }

    .split-offer-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: linear-gradient(180deg, #ffb347 0%, #ff980f 100%);
        opacity: 0.8;
    }

    .split-offer-card:hover,
    .split-offer-card:focus-visible {
        transform: translateY(-3px);
        border-color: rgba(201, 142, 74, 0.28);
        box-shadow: 0 20px 42px rgba(34, 29, 23, 0.12);
        background: linear-gradient(180deg, #fffdf8 0%, #fff8ef 100%);
        outline: none;
    }

    .split-offer-main {
        display: flex;
        align-items: flex-start;
        gap: 0.95rem;
        min-width: 0;
        flex: 1 1 auto;
    }

    .split-offer-icon {
        width: 52px;
        height: 52px;
        border-radius: 999px;
        background: #f7f4ef;
        color: #ff980f;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        flex-shrink: 0;
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .split-offer-card:hover .split-offer-icon,
    .split-offer-card:focus-visible .split-offer-icon {
        transform: scale(1.05);
        background: #fff1dd;
    }

    .split-offer-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.42rem;
    }

    .split-offer-name {
        margin: 0;
        color: #ff980f;
        font-size: 1.22rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.15;
    }

    .split-offer-meta {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #9d9488;
        font-size: 0.92rem;
        font-weight: 600;
    }

    .split-offer-meta i {
        font-size: 0.92rem;
    }

    .split-offer-cycle {
        color: #9d9488;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .split-offer-price {
        display: inline-flex;
        align-items: baseline;
        gap: 0.25rem;
        color: #0f172a;
        font-weight: 800;
        white-space: nowrap;
        flex-shrink: 0;
        margin-top: 0.1rem;
    }

    .split-offer-price strong {
        font-size: 1.8rem;
        line-height: 1;
    }

    .split-offer-price span {
        font-size: 0.92rem;
        font-weight: 500;
        color: #111827;
    }

    .split-offers-empty {
        padding: 1.4rem 1.2rem;
        border-radius: 1.15rem;
        border: 1px dashed rgba(201, 142, 74, 0.24);
        background: #faf8f4;
        color: #8c7c6f;
        text-align: center;
        font-weight: 600;
    }

    .split-slots-head {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0 0 1.4rem;
    }

    .split-slots-back {
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        color: #151515;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.45rem;
        border-radius: 999px;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .split-slots-back:hover,
    .split-slots-back:focus-visible {
        background: rgba(201, 142, 74, 0.12);
        transform: translateY(-1px);
        outline: none;
    }

    .split-slots-title {
        margin: 0;
        color: #151515;
        font-size: clamp(1.55rem, 2.4vw, 2.15rem);
        font-weight: 800;
        letter-spacing: -0.04em;
    }

    .split-slots-shell {
        max-width: 760px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.45rem;
        padding-top: 0.2rem;
    }

    .split-slots-plan {
        color: #8c7c6f;
        font-size: 0.98rem;
        font-weight: 700;
        text-align: center;
    }

    .split-slots-stepper {
        width: min(100%, 330px);
        min-height: 54px;
        border: 1px solid rgba(201, 142, 74, 0.18);
        border-radius: 14px;
        background: #fff;
        display: grid;
        grid-template-columns: 60px 1fr 60px;
        align-items: center;
        box-shadow: 0 12px 24px rgba(34, 29, 23, 0.06);
    }

    .split-slots-stepper-btn {
        width: 100%;
        height: 100%;
        border: 0;
        background: transparent;
        color: #1c1c1c;
        font-size: 1.9rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .split-slots-stepper-btn:hover:not(:disabled),
    .split-slots-stepper-btn:focus-visible:not(:disabled) {
        color: var(--user-accent, #c98e4a);
        background: rgba(201, 142, 74, 0.08);
        outline: none;
    }

    .split-slots-stepper-btn:disabled {
        color: #bdb5ab;
        cursor: not-allowed;
        opacity: 0.75;
    }

    .split-slots-value {
        text-align: center;
        color: #111827;
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
    }

    .split-slots-price {
        display: inline-flex;
        align-items: baseline;
        gap: 0.45rem;
        color: #151515;
        font-size: 1.05rem;
        font-weight: 600;
    }

    .split-slots-price strong {
        color: #ff980f;
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
    }

    .split-slots-next {
        min-width: 280px;
        min-height: 46px;
        border-radius: 10px;
        border: 1px solid #ff980f;
        background: #fff;
        color: #ff980f;
        font-size: 1rem;
        font-weight: 800;
        transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    }

    .split-slots-next:hover:not(:disabled),
    .split-slots-next:focus-visible:not(:disabled) {
        background: #ff980f;
        color: #fff;
        transform: translateY(-1px);
        outline: none;
    }

    .split-slots-next:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .split-slots-note {
        width: min(100%, 760px);
        display: flex;
        align-items: center;
        gap: 0.9rem;
        border-radius: 12px;
        background: #fff3e3;
        color: #1f1d1a;
        padding: 1rem 1.1rem;
        font-size: 1rem;
        font-weight: 600;
    }

    .split-slots-note i {
        color: #ff980f;
        font-size: 1.15rem;
        flex-shrink: 0;
    }

    .split-services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 170px));
        justify-content: flex-start;
        gap: 1rem;
    }

    .split-service-card {
        min-height: 56px;
        border: 1px solid #f0ebe4;
        border-radius: 1rem;
        background: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 0.75rem 1rem;
        text-align: center;
        color: #151515;
        font-size: 0.98rem;
        font-weight: 800;
        box-shadow: 0 10px 24px rgba(32, 29, 26, 0.05);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease, background 0.2s ease;
        cursor: pointer;
        text-decoration: none;
    }

    .split-service-card:hover,
    .split-service-card.is-active {
        border-color: var(--user-accent, #c98e4a);
        background: var(--user-accent, #c98e4a);
        color: #fff;
        box-shadow: 0 14px 28px rgba(var(--user-accent-rgb, 201, 142, 74), 0.2);
        transform: translateY(-2px);
    }

    .split-service-card.is-active {
        color: #fff;
    }

    .split-service-logo {
        display: none;
    }

    .split-service-name {
        display: block;
        line-height: 1.25;
    }

    .split-builder-empty {
        padding: 1.1rem 1.2rem;
        border-radius: 1rem;
        background: #faf8f4;
        border: 1px dashed rgba(201, 142, 74, 0.2);
        color: #8c7c6f;
        text-align: center;
        font-weight: 600;
    }

    .split-search-modal {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: none;
        background: rgba(255, 255, 255, 0.97);
    }

    .split-search-modal.is-open {
        display: block;
    }

    .split-search-dialog {
        position: relative;
        width: min(100%, 1060px);
        margin: 0 auto;
        padding: 3rem 1.5rem 2.5rem;
    }

    .split-search-close {
        position: absolute;
        top: 1.25rem;
        right: 1.5rem;
        width: 52px;
        height: 52px;
        border: 0;
        background: transparent;
        color: #151515;
        font-size: 2rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .split-search-shell {
        max-width: 840px;
        margin: 2rem auto 0;
    }

    .split-search-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 56px;
        border: 2px solid rgba(var(--user-accent-rgb, 255, 146, 8), 0.7);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 12px 26px rgba(43, 36, 28, 0.08);
        padding: 0 1rem 0 3.1rem;
    }

    .split-search-input-icon,
    .split-search-clear {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #9f9a93;
        line-height: 1;
    }

    .split-search-input-icon {
        left: 1.2rem;
        font-size: 1.35rem;
    }

    .split-search-clear {
        right: 1rem;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 999px;
        background: #f1eeea;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        cursor: pointer;
    }

    .split-search-clear.is-visible {
        display: inline-flex;
    }

    .split-search-input {
        width: 100%;
        border: 0;
        background: transparent;
        color: #151515;
        font-size: 1.2rem;
        font-weight: 700;
        outline: none;
        padding: 0.9rem 2.5rem 0.9rem 0;
    }

    .split-search-input::placeholder {
        color: #b1aba3;
        font-weight: 600;
    }

    .split-search-results {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 180px));
        justify-content: flex-start;
        gap: 1.25rem;
        margin-top: 2.7rem;
    }

    .split-search-result {
        min-height: 58px;
        border: 1px solid #f0ebe4;
        border-radius: 1rem;
        background: #fff;
        color: #151515;
        box-shadow: 0 10px 24px rgba(32, 29, 26, 0.05);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 0.98rem;
        font-weight: 800;
        line-height: 1.25;
        padding: 0.9rem 1rem;
        cursor: pointer;
        transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        text-decoration: none;
    }

    .split-search-result:hover,
    .split-search-result:focus {
        border-color: var(--user-accent, #c98e4a);
        background: var(--user-accent, #c98e4a);
        color: #fff;
        box-shadow: 0 14px 28px rgba(var(--user-accent-rgb, 201, 142, 74), 0.2);
    }

    .split-search-empty {
        margin-top: 2.1rem;
        color: #8b8278;
        font-size: 0.98rem;
        font-weight: 600;
        text-align: center;
    }

    @media (max-width: 991.98px) {
        .split-builder-page {
            padding-top: 1.35rem;
        }

        .split-builder-head {
            flex-direction: column;
            align-items: flex-start;
        }

        .split-offers-head {
            gap: 0.75rem;
        }

        .split-slots-head {
            gap: 0.75rem;
        }

        .split-search-dialog {
            padding-top: 2rem;
        }

        .split-search-shell {
            margin-top: 3.25rem;
        }
    }

    @media (max-width: 575.98px) {
        .split-builder-panel {
            border-radius: 1.5rem;
        }

        .split-builder-panel {
            padding: 1.2rem 1rem 1.15rem;
        }

        .split-category-card {
            min-height: 106px;
            min-width: 106px;
            max-width: 106px;
            padding: 0.9rem 0.75rem;
            font-size: 14px;
            flex-basis: 106px;
        }

        .split-services-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .split-builder-title {
            font-size: 1.95rem;
        }

        .split-offers-title {
            font-size: 1.55rem;
        }

        .split-slots-title {
            font-size: 1.55rem;
        }

        .split-offer-card {
            flex-direction: column;
            align-items: stretch;
            gap: 0.85rem;
            padding: 0.95rem;
        }

        .split-offer-name {
            font-size: 1.08rem;
        }

        .split-offer-price {
            justify-content: flex-end;
        }

        .split-offer-price strong {
            font-size: 1.45rem;
        }

        .split-slots-stepper {
            width: 100%;
            max-width: 320px;
        }

        .split-slots-value {
            font-size: 1.7rem;
        }

        .split-slots-price {
            font-size: 0.96rem;
        }

        .split-slots-price strong {
            font-size: 1.65rem;
        }

        .split-slots-next {
            width: 100%;
            min-width: 0;
            max-width: 320px;
        }

        .split-slots-note {
            font-size: 0.92rem;
            align-items: flex-start;
        }

        .split-search-close {
            top: 0.9rem;
            right: 0.85rem;
        }

        .split-search-shell {
            margin-top: 3rem;
        }

        .split-search-input-wrap {
            min-height: 52px;
            padding-left: 2.9rem;
        }

        .split-search-input {
            font-size: 1.05rem;
        }

        .split-search-results {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-3 px-xl-4 split-builder-page">
    <div class="split-builder-shell">
        <div class="split-builder-panel">
            <div class="split-builder-head" id="split-selection-head">
                <h1 class="split-builder-title">Select the subscription to share</h1>
                <button type="button" class="split-builder-search" aria-label="Search subscriptions">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </div>

            <div class="split-offers-head" id="split-offers-head" hidden>
                <button type="button" class="split-offers-back" id="split-offers-back" aria-label="Go back">
                    <i class="fa-solid fa-chevron-left"></i>
                </button>
                <h2 class="split-offers-title">Which offer to share?</h2>
            </div>

            <div class="split-slots-head" id="split-slots-head" hidden>
                <button type="button" class="split-slots-back" id="split-slots-back" aria-label="Go back">
                    <i class="fa-solid fa-chevron-left"></i>
                </button>
                <h2 class="split-slots-title">How many slots to share?</h2>
            </div>

            @if ($categoriesPayload->isEmpty() || $servicesPayload->isEmpty())
                <div class="split-builder-empty">No active services are available right now.</div>
            @else
                <div class="split-selection-stage" id="split-selection-stage">
                    <div class="split-category-rail" id="split-category-rail">
                        @foreach ($categoriesPayload as $category)
                            @php
                                $categoryIcon = $category['icon'] ?? '';
                                $isIconPath = filled($categoryIcon) && (str_contains($categoryIcon, '/') || str_contains($categoryIcon, '.'));
                            @endphp
                            <button
                                type="button"
                                class="split-category-card {{ (int) $category['id'] === (int) $defaultCategoryId ? 'is-active' : '' }}"
                                data-category-id="{{ $category['id'] }}"
                                style="--split-category-accent: {{ $category['icon_color'] ?? 'var(--user-accent)' }}; --split-category-accent-bg: {{ $category['icon_bg'] ?? 'rgba(var(--user-accent-rgb), 0.12)' }};"
                            >
                                <span class="split-category-icon" aria-hidden="true">
                                    @if (filled($category['icon_class'] ?? ''))
                                        <i class="{{ $category['icon_class'] }}"></i>
                                    @elseif ($isIconPath)
                                        <img src="{{ asset($categoryIcon) }}" alt="{{ $category['name'] }}">
                                    @elseif (filled($categoryIcon))
                                        <i class="{{ $categoryIcon }}"></i>
                                    @else
                                        <i class="fa-solid fa-shapes"></i>
                                    @endif
                                </span>
                                <span>{{ $category['label'] ?? $category['name'] }}</span>
                            </button>
                        @endforeach
                    </div>
                    <div class="split-category-divider" aria-hidden="true"></div>

                    <div class="split-services-section">
                        <p class="visually-hidden" id="split-services-caption" aria-live="polite">Click any service to load its packages below.</p>
                        <div class="split-services-grid" id="split-services-grid"></div>
                    </div>
                </div>

                <div class="split-offers-stage" id="split-offers-stage" hidden>
                    <div class="split-offers-shell" id="split-offers-list"></div>
                </div>

                <div class="split-slots-stage" id="split-slots-stage" hidden>
                    <div class="split-slots-shell">
                        <div class="split-slots-plan" id="split-slots-plan-label"></div>

                        <div class="split-slots-stepper">
                            <button type="button" class="split-slots-stepper-btn" id="split-slots-minus" aria-label="Decrease slots">-</button>
                            <div class="split-slots-value" id="split-slots-value">1</div>
                            <button type="button" class="split-slots-stepper-btn" id="split-slots-plus" aria-label="Increase slots">+</button>
                        </div>

                        <div class="split-slots-price">
                            <span>Price / connection</span>
                            <strong id="split-slots-price-value">0.00€</strong>
                            <span>/ month</span>
                        </div>

                        <button type="button" class="split-slots-next" id="split-slots-next">Next</button>

                        <div class="split-slots-note">
                            <i class="fa-solid fa-lightbulb"></i>
                            <span>Choose shareable slots only. Your own slot is not included. Admin fee: 0.64 per connection.</span>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<div class="split-search-modal" id="split-search-modal" aria-hidden="true">
    <div class="split-search-dialog">
        <button type="button" class="split-search-close" id="split-search-close" aria-label="Close search">
            <i class="fa-solid fa-xmark"></i>
        </button>

        <div class="split-search-shell">
            <div class="split-search-input-wrap">
                <span class="split-search-input-icon" aria-hidden="true">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </span>
                <input
                    type="text"
                    class="split-search-input"
                    id="split-search-input"
                    placeholder="Search services"
                    autocomplete="off"
                >
                <button type="button" class="split-search-clear" id="split-search-clear" aria-label="Clear search">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <div class="split-search-results" id="split-search-results"></div>
            <div class="split-search-empty" id="split-search-empty">Type at least 1 letter to search.</div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
(() => {
    const categories = @json($categoriesPayload);
    const services = @json($servicesPayload);
    const initialCategoryId = @json($defaultCategoryId);
    const state = {
        categoryId: initialCategoryId === null ? null : Number(initialCategoryId),
        serviceId: null,
    };

    const searchButton = document.querySelector('.split-builder-search');
    const searchModal = document.getElementById('split-search-modal');
    const searchClose = document.getElementById('split-search-close');
    const searchInput = document.getElementById('split-search-input');
    const searchClear = document.getElementById('split-search-clear');
    const searchResults = document.getElementById('split-search-results');
    const searchEmpty = document.getElementById('split-search-empty');
    const categoryRail = document.getElementById('split-category-rail');
    const servicesGrid = document.getElementById('split-services-grid');
    const servicesCaption = document.getElementById('split-services-caption');
    const selectionHead = document.getElementById('split-selection-head');
    const selectionStage = document.getElementById('split-selection-stage');
    const offersHead = document.getElementById('split-offers-head');
    const offersBack = document.getElementById('split-offers-back');
    const offersStage = document.getElementById('split-offers-stage');
    const offersList = document.getElementById('split-offers-list');
    const slotsHead = document.getElementById('split-slots-head');
    const slotsBack = document.getElementById('split-slots-back');
    const slotsStage = document.getElementById('split-slots-stage');
    const slotsPlanLabel = document.getElementById('split-slots-plan-label');
    const slotsMinus = document.getElementById('split-slots-minus');
    const slotsPlus = document.getElementById('split-slots-plus');
    const slotsValue = document.getElementById('split-slots-value');
    const slotsPriceValue = document.getElementById('split-slots-price-value');
    const slotsNext = document.getElementById('split-slots-next');
    const subscriptionStoreUrl = @json(route('subscriptions.store'));
    const csrfToken = @json(csrf_token());

    if (!categoryRail || !servicesGrid || !searchButton || !searchModal || !searchClose || !searchInput || !searchClear || !searchResults || !searchEmpty || !selectionHead || !selectionStage || !offersHead || !offersBack || !offersStage || !offersList || !slotsHead || !slotsBack || !slotsStage || !slotsPlanLabel || !slotsMinus || !slotsPlus || !slotsValue || !slotsPriceValue || !slotsNext) {
        return;
    }

    function formatPlanPrice(amount, currency) {
        const symbolMap = {
            USD: '$',
            EUR: '€',
            GBP: '£',
        };

        const normalizedCurrency = String(currency || 'USD').toUpperCase();
        const symbol = symbolMap[normalizedCurrency] || normalizedCurrency;

        return `${Number(amount || 0).toFixed(2)}${symbol}`;
    }

    function submitSharedSubscription(serviceId, planId) {
        const service = services.find(item => Number(item.id) === Number(serviceId)) || null;
        const plan = service?.plans.find(item => Number(item.id) === Number(planId)) || null;

        if (!service || !plan) {
            return;
        }

        const shareableSlots = Math.max(Number(state.slotCount || 1), 1);
        const slotPrice = Number(plan.price || 0) / shareableSlots;
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = subscriptionStoreUrl;
        form.style.display = 'none';

        const fields = {
            _token: csrfToken,
            service_id: String(serviceId),
            service_plan_id: String(planId),
            title: `${service.name} - ${plan.name}`,
            total_slots: String(shareableSlots),
            available_slots: String(shareableSlots),
            total_price: Number(plan.price || 0).toFixed(2),
            price_per_slot: slotPrice.toFixed(2),
            is_public: '0',
        };

        Object.entries(fields).forEach(([name, value]) => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = name;
            input.value = value;
            form.appendChild(input);
        });

        document.body.appendChild(form);
        slotsNext.disabled = true;
        form.submit();
    }

    function getServicesForCategory(categoryId) {
        if (categoryId === null) {
            return services;
        }

        return services.filter(service => Number(service.category_id) === Number(categoryId));
    }

    function updateServicesCaption(categoryServices) {
        if (!servicesCaption) {
            return;
        }

        const activeCategory = categories.find(category => Number(category.id) === Number(state.categoryId));
        const categoryName = activeCategory ? activeCategory.name : 'all categories';

        if (!categoryServices.length) {
            servicesCaption.textContent = `No services are available in ${categoryName} right now.`;
            return;
        }

        if (!activeCategory) {
            servicesCaption.textContent = `${categoryServices.length} services available across all categories. Click one to load its packages below.`;
            return;
        }

        servicesCaption.textContent = `${categoryServices.length} service${categoryServices.length === 1 ? '' : 's'} in ${categoryName}. Click one to load its packages below.`;
    }

    function renderCategories() {
        categoryRail.querySelectorAll('.split-category-card').forEach(button => {
            button.classList.toggle('is-active', Number(button.dataset.categoryId) === Number(state.categoryId));
        });
    }

    function closeOffersStage() {
        offersStage.hidden = true;
        offersHead.hidden = true;
        selectionHead.hidden = false;
        selectionStage.hidden = false;
    }

    function closeSlotsStage() {
        slotsStage.hidden = true;
        slotsHead.hidden = true;
        offersHead.hidden = false;
        offersStage.hidden = false;
    }

    function openOffersStage(service) {
        const plans = Array.isArray(service.plans) ? service.plans : [];

        if (!plans.length) {
            offersList.innerHTML = '<div class="split-offers-empty">No offers are available for this service right now.</div>';
        } else {
            offersList.innerHTML = plans.map(plan => `
                <button type="button" class="split-offer-card" data-offer-service-id="${service.id}" data-offer-plan-id="${plan.id}">
                    <div class="split-offer-main">
                        <span class="split-offer-icon" aria-hidden="true">
                            <i class="fa-solid fa-bookmark"></i>
                        </span>

                        <div class="split-offer-copy">
                            <h3 class="split-offer-name">${service.name} ${plan.name}</h3>
                            <span class="split-offer-meta">
                                <i class="fa-regular fa-user"></i>
                                <span>${plan.max_slots} users max.</span>
                            </span>
                            <span class="split-offer-cycle">Monthly</span>
                        </div>
                    </div>

                    <div class="split-offer-price">
                        <strong>${formatPlanPrice(plan.price, plan.currency)}</strong>
                        <span>/ month</span>
                    </div>
                </button>
            `).join('');
        }

        selectionHead.hidden = true;
        selectionStage.hidden = true;
        slotsHead.hidden = true;
        slotsStage.hidden = true;
        offersHead.hidden = false;
        offersStage.hidden = false;
    }

    function resolveParticipantLimit(service, plan) {
        const serviceName = String(service?.name || '').toLowerCase();
        const planName = String(plan?.name || '').toLowerCase();

        if (serviceName.includes('netflix') && planName.includes('standard')) {
            return 3;
        }

        if (serviceName.includes('netflix') && planName.includes('premium')) {
            return 5;
        }

        const configuredLimit = Math.max(Number(plan?.max_slots || 0), 0);
        return configuredLimit > 1 ? configuredLimit : 6;
    }

    function resolveShareableSlotLimit(service, plan) {
        return Math.max(resolveParticipantLimit(service, plan) - 1, 1);
    }

    function renderSlotsStage() {
        const service = services.find(item => Number(item.id) === Number(state.serviceId)) || null;
        const plan = service?.plans.find(item => Number(item.id) === Number(state.planId)) || null;

        if (!service || !plan) {
            return;
        }

        const shareableSlotLimit = resolveShareableSlotLimit(service, plan);
        const currentCount = Math.min(Math.max(Number(state.slotCount || 1), 1), shareableSlotLimit);
        const slotPrice = Number(plan.price || 0) / currentCount;

        state.slotCount = currentCount;
        slotsPlanLabel.textContent = `${service.name} ${plan.name}`;
        slotsValue.textContent = String(currentCount);
        slotsPriceValue.textContent = formatPlanPrice(slotPrice, plan.currency);
        slotsMinus.disabled = currentCount <= 1;
        slotsPlus.disabled = currentCount >= shareableSlotLimit;
        slotsNext.disabled = currentCount <= 0;
    }

    function openSlotsStage(serviceId, planId) {
        const service = services.find(item => Number(item.id) === Number(serviceId)) || null;
        const plan = service?.plans.find(item => Number(item.id) === Number(planId)) || null;

        if (!service || !plan) {
            return;
        }

        state.serviceId = Number(service.id);
        state.planId = Number(plan.id);
        state.slotCount = 1;

        selectionHead.hidden = true;
        selectionStage.hidden = true;
        offersHead.hidden = true;
        offersStage.hidden = true;
        slotsHead.hidden = false;
        slotsStage.hidden = false;

        renderSlotsStage();
    }

    function selectService(serviceId, categoryId = null) {
        const service = services.find(item => Number(item.id) === Number(serviceId)) || null;

        if (!service) {
            return;
        }

        if (categoryId !== null) {
            state.categoryId = Number(categoryId);
            renderCategories();
        }

        state.serviceId = Number(service.id);
        renderServices();
        openOffersStage(service);
    }

    function sortSearchMatches(query) {
        const term = query.trim().toLowerCase();

        return services
            .filter(service => service.name.toLowerCase().includes(term))
            .sort((left, right) => {
                const leftName = left.name.toLowerCase();
                const rightName = right.name.toLowerCase();
                const leftStarts = leftName.startsWith(term) ? 0 : 1;
                const rightStarts = rightName.startsWith(term) ? 0 : 1;

                if (leftStarts !== rightStarts) {
                    return leftStarts - rightStarts;
                }

                return leftName.localeCompare(rightName);
            });
    }

    function openSearchModal() {
        searchModal.classList.add('is-open');
        searchModal.setAttribute('aria-hidden', 'false');
        document.body.classList.add('split-search-modal-open');
        window.setTimeout(() => searchInput.focus(), 20);
    }

    function closeSearchModal() {
        searchModal.classList.remove('is-open');
        searchModal.setAttribute('aria-hidden', 'true');
        document.body.classList.remove('split-search-modal-open');
        searchInput.value = '';
        searchResults.innerHTML = '';
        searchEmpty.textContent = 'Type at least 1 letter to search.';
        searchEmpty.style.display = '';
        searchClear.classList.remove('is-visible');
    }

    function renderSearchResults() {
        const query = searchInput.value.trim();
        searchClear.classList.toggle('is-visible', query.length > 0);

        if (query.length < 1) {
            searchResults.innerHTML = '';
            searchEmpty.textContent = 'Type at least 1 letter to search.';
            searchEmpty.style.display = '';
            return;
        }

        const matches = sortSearchMatches(query);

        if (!matches.length) {
            searchResults.innerHTML = '';
            searchEmpty.textContent = 'No matching services found.';
            searchEmpty.style.display = '';
            return;
        }

        searchEmpty.style.display = 'none';
        searchResults.innerHTML = matches.map(service => `
            <button type="button" class="split-search-result" data-service-id="${service.id}" data-category-id="${service.category_id}">
                ${service.name}
            </button>
        `).join('');
    }

    function renderServices() {
        const categoryServices = getServicesForCategory(state.categoryId);
        updateServicesCaption(categoryServices);

        if (!categoryServices.length) {
            state.serviceId = null;
            servicesGrid.innerHTML = '<div class="split-builder-empty">No services available in this category yet.</div>';
            return;
        }

        servicesGrid.innerHTML = categoryServices.map(service => `
            <button type="button" class="split-service-card ${Number(service.id) === Number(state.serviceId) ? 'is-active' : ''}" data-service-id="${service.id}">
                <span class="split-service-logo">
                    ${service.logo ? `<img src="${service.logo}" alt="${service.name}">` : service.initials}
                </span>
                <span class="split-service-name">${service.name}</span>
            </button>
        `).join('');
    }

    categoryRail.addEventListener('click', (event) => {
        const button = event.target.closest('.split-category-card');
        if (!button) {
            return;
        }

        state.categoryId = Number(button.dataset.categoryId);
        state.serviceId = null;
        renderCategories();
        renderServices();
    });

    servicesGrid.addEventListener('click', (event) => {
        const button = event.target.closest('.split-service-card');
        if (!button) {
            return;
        }

        selectService(Number(button.dataset.serviceId));
    });

    searchButton.addEventListener('click', () => {
        openSearchModal();
    });

    offersBack.addEventListener('click', () => {
        closeOffersStage();
    });

    slotsBack.addEventListener('click', () => {
        closeSlotsStage();
    });

    searchClose.addEventListener('click', () => {
        closeSearchModal();
    });

    searchModal.addEventListener('click', (event) => {
        if (event.target === searchModal) {
            closeSearchModal();
        }
    });

    searchInput.addEventListener('input', () => {
        renderSearchResults();
    });

    searchClear.addEventListener('click', () => {
        searchInput.value = '';
        renderSearchResults();
        searchInput.focus();
    });

    searchResults.addEventListener('click', (event) => {
        const button = event.target.closest('.split-search-result');
        if (!button) {
            return;
        }

        selectService(Number(button.dataset.serviceId), Number(button.dataset.categoryId));
        closeSearchModal();
    });

    offersList.addEventListener('click', (event) => {
        const button = event.target.closest('.split-offer-card');
        if (!button) {
            return;
        }

        openSlotsStage(Number(button.dataset.offerServiceId), Number(button.dataset.offerPlanId));
    });

    slotsMinus.addEventListener('click', () => {
        state.slotCount = Math.max(Number(state.slotCount || 1) - 1, 1);
        renderSlotsStage();
    });

    slotsPlus.addEventListener('click', () => {
        const service = services.find(item => Number(item.id) === Number(state.serviceId)) || null;
        const plan = service?.plans.find(item => Number(item.id) === Number(state.planId)) || null;

        if (!service || !plan) {
            return;
        }

        const participantLimit = resolveParticipantLimit(service, plan);
        state.slotCount = Math.min(Number(state.slotCount || 1) + 1, participantLimit);
        renderSlotsStage();
    });

    slotsNext.addEventListener('click', () => {
        submitSharedSubscription(Number(state.serviceId), Number(state.planId));
    });

    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && searchModal.classList.contains('is-open')) {
            closeSearchModal();
        }
    });

    renderCategories();
    renderServices();
})();
</script>
@endpush