@extends('layout')

@section('title', __('store/upgrade.title'))

@section('content')
@php
    // Group target tuples by product_id so we can render one card per product
    // with period buttons inside.
    $targetsByProduct = $targets->groupBy('product_id')->map(function ($group) {
        $first = $group->first();
        return [
            'product_id'   => $first['product_id'],
            'product_name' => $first['product_name'],
            'min_amount'   => $group->min('amount'),
            'currency_id'  => $first['currency_id'],
            'periods'      => $group->sortBy('period')->values()->all(),
        ];
    })->values();
@endphp
<div class="container py-5">
    <div class="row">
        <div class="col-md-12">
            <x-clientarea.page-header
                icon="fas fa-arrow-up-right-dots"
                :title="__('store/upgrade.title') . ' — #' . $service->id"
                :subtitle="$service->product->name ?? __('store.service_unknown_product')"
            >
                <a href="{{ route('store.auth.services.details', $service) }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>{{ __('store/upgrade.back_to_service') }}
                </a>
            </x-clientarea.page-header>

            @if(session('error'))
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>{{ session('error') }}
                </div>
            @endif

            <div class="row">
                <!-- Main column -->
                <div class="col-lg-8">
                    
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-info-circle me-2"></i>{{ __('store.service_information') }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <dl class="row">
                                        <dt class="col-sm-5">{{ __('store.service_service_id') }}:</dt>
                                        <dd class="col-sm-7">#{{ $service->id }}</dd>

                                        <dt class="col-sm-5">{{ __('store.service_product_name') }}:</dt>
                                        <dd class="col-sm-7">{{ $service->product->name ?? __('store.service_unknown_product') }}</dd>

                                        @if($service->product->group)
                                            <dt class="col-sm-5">{{ __('store.service_product_group') }}:</dt>
                                            <dd class="col-sm-7">
                                                <span class="badge bg-primary">{{ $service->product->group->name }}</span>
                                            </dd>
                                        @endif

                                        @if($service->domain)
                                            <dt class="col-sm-5">{{ __('store.service_name') }}:</dt>
                                            <dd class="col-sm-7">
                                                <strong>{{ is_array($service->domain) ? implode(', ', $service->domain) : $service->domain }}</strong>
                                            </dd>
                                        @endif

                                        @if($service->billingcycle)
                                            <dt class="col-sm-5">{{ __('store.service_billing_cycle') }}:</dt>
                                            <dd class="col-sm-7">{{ ucfirst($service->billingcycle) }}</dd>
                                        @endif
                                    </dl>
                                </div>
                                <div class="col-md-6">
                                    <dl class="row">
                                        <dt class="col-sm-5">{{ __('store.service_status') }}:</dt>
                                        <dd class="col-sm-7">
                                            <span class="badge bg-{{ $service->status === 'active' ? 'success' : ($service->status === 'pending' ? 'warning' : ($service->status === 'suspended' ? 'danger' : 'secondary')) }}">
                                                {{ ucfirst($service->status) }}
                                            </span>
                                        </dd>

                                        @if($service->create_date || $service->activation_date)
                                            <dt class="col-sm-5">{{ __('store.service_setup_date') }}:</dt>
                                            <dd class="col-sm-7">
                                                {{ \Carbon\Carbon::parse($service->activation_date ?: $service->create_date)->format($dateTimeFormat ?? 'd/m/Y H:i') }}
                                            </dd>
                                        @endif

                                        @php $expiryRaw = $service->expire_date ?: $service->next_due_date; @endphp
                                        @if($expiryRaw)
                                            <dt class="col-sm-5">{{ __('store.service_expiry_date') }}:</dt>
                                            <dd class="col-sm-7">
                                                @php
                                                    $expireDate = \Carbon\Carbon::parse($expiryRaw);
                                                    $remainingDays = (int) ceil(now()->diffInDays($expireDate, false));
                                                    $isExpired = $expireDate->isPast();
                                                    $isExpiringSoon = ! $isExpired && $remainingDays <= 30;
                                                @endphp
                                                <span class="@if($isExpired) text-danger @elseif($isExpiringSoon) text-warning @endif">
                                                    {{ $expireDate->format($dateTimeFormat ?? 'd/m/Y H:i') }}
                                                </span>
                                                @if($isExpired)
                                                    <br><small class="text-danger">{{ __('store.service_days_remaining_expired') }}</small>
                                                @else
                                                    <br><small class="@if($isExpiringSoon) text-warning @else text-muted @endif">{{ __('store.service_days_remaining_value', ['days' => $remainingDays]) }}</small>
                                                @endif
                                            </dd>
                                        @endif

                                        <dt class="col-sm-5">{{ __('store.service_auto_renew') }}:</dt>
                                        <dd class="col-sm-7">
                                            @if($service->auto_renew)
                                                <span class="badge bg-success">{{ __('store.common_enabled') }}</span>
                                            @else
                                                <span class="badge bg-secondary">{{ __('store.common_disabled') }}</span>
                                            @endif
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>

                    
                    <div id="step-select">
                        @if($targetsByProduct->isEmpty())
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-1"></i>{{ __('store/upgrade.no_eligible_products') }}
                            </div>
                        @else
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-exchange-alt me-2"></i>{{ __('store/upgrade.choose_target') }}
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3" id="product-grid">
                                        @foreach($targetsByProduct as $p)
                                            <div class="col-md-6">
                                                <div class="card border h-100 product-card"
                                                     style="cursor: pointer; transition: all 0.15s;"
                                                     data-product-id="{{ $p['product_id'] }}"
                                                     data-product-name="{{ $p['product_name'] }}">
                                                    <div class="card-body text-center">
                                                        <h5 class="card-title mb-2">{{ $p['product_name'] }}</h5>
                                                        <div class="text-muted small mb-3">{{ __('store/upgrade.starting_from') }}</div>
                                                        <div class="fw-bold text-primary fs-4">
                                                            {{ number_format($p['min_amount'], 2) }}
                                                        </div>
                                                        <div class="text-muted small mt-2">
                                                            <i class="fas fa-list-ol me-1"></i>{{ count($p['periods']) }} {{ __('store/upgrade.period_count_label') }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            
                            <div class="card mb-4 d-none" id="period-section">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-calendar-alt me-2"></i>{{ __('store/upgrade.choose_period') }}
                                        — <span class="text-primary" id="selected-product-name"></span>
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-2" id="period-buttons">
                                        
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end mb-4">
                                <button type="button" class="btn btn-primary" id="continue-btn" disabled>
                                    {{ __('store/upgrade.continue') }}
                                    <i class="fas fa-arrow-right ms-1"></i>
                                </button>
                            </div>
                        @endif
                    </div>

                    
                    <div class="card mb-4 d-none" id="step-options">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-sliders me-2"></i>{{ __('store/upgrade.options_step_title') }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="options-drops-block" class="mb-3 d-none">
                                <h6 class="text-warning"><i class="fas fa-exclamation-triangle me-2"></i>
                                    {{ __('store/upgrade.options_drops_warning') }}
                                </h6>
                                <ul id="options-drops-list" class="list-unstyled small ms-4"></ul>
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="checkbox" id="opt-drops-ack">
                                    <label class="form-check-label" for="opt-drops-ack">
                                        {{ __('store/upgrade.options_drops_acknowledge') }}
                                    </label>
                                </div>
                            </div>

                            <div id="options-required-block" class="mb-3 d-none">
                                <h6><i class="fas fa-asterisk me-2"></i>
                                    {{ __('store/upgrade.options_required_label') }}
                                </h6>
                                <div id="options-required-fields"></div>
                            </div>

                            <div id="options-auto-carry-block" class="mb-3 d-none">
                                <h6 class="text-success"><i class="fas fa-check me-2"></i>
                                    {{ __('store/upgrade.options_auto_carry_label') }}
                                </h6>
                                <div id="options-auto-carry-fields"></div>
                            </div>

                            <div id="options-optional-block" class="mb-3 d-none">
                                <h6 class="text-muted"><i class="fas fa-plus-circle me-2"></i>
                                    {{ __('store/upgrade.options_optional_label') }}
                                </h6>
                                <div id="options-optional-fields"></div>
                            </div>

                            <div class="d-flex justify-content-between border-top pt-3">
                                <button type="button" class="btn btn-outline-secondary" id="opt-back-btn">
                                    <i class="fas fa-arrow-left me-1"></i>{{ __('store/upgrade.back') }}
                                </button>
                                <button type="button" class="btn btn-primary" id="opt-continue-btn" disabled>
                                    {{ __('store/upgrade.continue') }}
                                    <i class="fas fa-arrow-right ms-1"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    
                    <div class="card mb-4 d-none" id="step-preview">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-receipt me-2"></i>{{ __('store/upgrade.preview_title') }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div id="preview-content" class="mb-3"></div>
                            <div class="d-flex justify-content-between border-top pt-3">
                                <button type="button" class="btn btn-outline-secondary" id="back-btn">
                                    <i class="fas fa-arrow-left me-1"></i>{{ __('store/upgrade.back') }}
                                </button>
                                <button type="button" class="btn btn-primary" id="confirm-btn">
                                    {{ __('store/upgrade.confirm') }}
                                    <i class="fas fa-check ms-1"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Service Sidebar — birebir details sayfasından -->
                <div class="col-lg-4">
                    @php
                        $statusClass = match($service->status) {
                            'active' => 'success',
                            'pending' => 'warning',
                            'suspended' => 'danger',
                            default => 'secondary'
                        };
                        $statusIcon = match($service->status) {
                            'active' => 'check-circle',
                            'pending' => 'clock',
                            'suspended' => 'ban',
                            default => 'question-circle'
                        };
                        $unpaidInvoices = $service->getUnpaidInvoices();
                    @endphp

                    <!-- Service Status Card -->
                    <div class="card mb-3 border-{{ $statusClass }}" style="border-width: 2px;">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-3">
                                <div class="flex-shrink-0">
                                    <div class="bg-{{ $statusClass }} bg-opacity-25 rounded-circle p-3">
                                        <i class="fas fa-{{ $statusIcon }} fa-2x text-{{ $statusClass }}"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-1 fw-bold">{{ __('store.common_status') }}</h6>
                                    <span class="badge bg-{{ $statusClass }} fs-6">
                                        {{ ucfirst($service->status) }}
                                    </span>
                                </div>
                            </div>

                            <hr class="my-3">

                            <!-- Service Info -->
                            <div class="mb-3">
                                <div class="d-flex align-items-center text-muted small mb-2">
                                    <i class="fas fa-box fa-fw me-2"></i>
                                    <span class="me-2">{{ __('store.service_product_name') }}:</span>
                                    <strong class="ms-auto">{{ $service->product->name ?? __('store.service_unknown_product') }}</strong>
                                </div>
                                @if($service->billingcycle)
                                    <div class="d-flex align-items-center text-muted small mb-2">
                                        <i class="fas fa-sync fa-fw me-2"></i>
                                        <span class="me-2">{{ __('store.service_billing_cycle') }}:</span>
                                        <strong class="ms-auto">{{ ucfirst($service->billingcycle) }}</strong>
                                    </div>
                                @endif
                                @if($service->create_date || $service->activation_date)
                                    <div class="d-flex align-items-center text-muted small mb-2">
                                        <i class="fas fa-calendar-plus fa-fw me-2"></i>
                                        <span class="me-2">{{ __('store.service_setup_date') }}:</span>
                                        <strong class="ms-auto">{{ \Carbon\Carbon::parse($service->activation_date ?: $service->create_date)->format($dateFormat ?? 'd/m/Y') }}</strong>
                                    </div>
                                @endif
                                @php $expiryRaw2 = $service->expire_date ?: $service->next_due_date; @endphp
                                @if($expiryRaw2)
                                    <div class="d-flex align-items-center text-muted small">
                                        <i class="fas fa-calendar-check fa-fw me-2"></i>
                                        <span class="me-2">{{ __('store.service_expiry_date') }}:</span>
                                        <strong class="ms-auto">{{ \Carbon\Carbon::parse($expiryRaw2)->format($dateFormat ?? 'd/m/Y') }}</strong>
                                    </div>
                                @endif
                            </div>

                            @if($expiryRaw2)
                                @php
                                    $expireDate = \Carbon\Carbon::parse($expiryRaw2);
                                    $daysToExpiry = (int) ceil(now()->diffInDays($expireDate, false));
                                    $progressPercent = 0;
                                    $progressClass = 'success';

                                    $setupDate = $service->activation_date ? \Carbon\Carbon::parse($service->activation_date) : ($service->create_date ? \Carbon\Carbon::parse($service->create_date) : null);
                                    if ($setupDate) {
                                        $totalDays = $setupDate->diffInDays($expireDate);
                                        $elapsedDays = $setupDate->diffInDays(now());
                                        $progressPercent = $totalDays > 0 ? min(100, ($elapsedDays / $totalDays) * 100) : 0;

                                        if ($progressPercent > 90) {
                                            $progressClass = 'danger';
                                        } elseif ($progressPercent > 75) {
                                            $progressClass = 'warning';
                                        }
                                    }
                                @endphp

                                <!-- Expiry Progress -->
                                <div class="mt-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <small class="text-body-secondary">{{ __('store.days_until_expiry') }}</small>
                                        <span class="badge bg-{{ $daysToExpiry < 30 ? 'danger' : ($daysToExpiry < 90 ? 'warning' : 'success') }}">
                                            {{ $daysToExpiry }} {{ __('store.days') }}
                                        </span>
                                    </div>
                                    <div class="progress bg-body-secondary" style="height: 8px;">
                                        <div class="progress-bar bg-{{ $progressClass }}" role="progressbar"
                                             style="width: {{ $progressPercent }}%"
                                             aria-valuenow="{{ $progressPercent }}"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                </div>

                                @if($daysToExpiry < 30 && $daysToExpiry > 0)
                                    <div class="alert alert-warning mt-3 mb-0 py-2 px-3">
                                        <i class="fas fa-exclamation-triangle me-2"></i>
                                        <small>{{ __('store.expires_soon') }}</small>
                                    </div>
                                @elseif($daysToExpiry <= 0)
                                    <div class="alert alert-danger mt-3 mb-0 py-2 px-3">
                                        <i class="fas fa-exclamation-triangle me-2"></i>
                                        <small>{{ __('store.expired') }}</small>
                                    </div>
                                @endif
                            @endif
                        </div>
                    </div>

                    @include('clientarea.partials.unpaid-invoices-warning', ['unpaidInvoices' => $unpaidInvoices])

                    <!-- Features Menu -->
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="fas fa-tools me-2"></i>{{ __('store.service_service_actions') }}
                            </h6>
                        </div>
                        <div class="list-group list-group-flush">
                            
                            @if(!empty($clientActions) && $service->status === 'active')
                                @foreach($clientActions as $actionKey => $actionConfig)
                                    @if($actionConfig['enabled'])
                                        <a href="{{ route('store.auth.services.action.show', [$service->id, $actionKey]) }}"
                                           class="list-group-item list-group-item-action">
                                            <i class="{{ $actionConfig['icon'] ?? 'fas fa-cog' }} me-2"></i>{{ $actionConfig['label'] }}
                                        </a>
                                    @endif
                                @endforeach
                            @endif

                            
                            @if(!empty($clientActions) && $service->status === 'active')
                                <div class="list-group-item px-3 py-2 border-top" style="background: transparent;">
                                    <small class="text-muted fw-semibold text-uppercase" style="font-size: 0.7rem;">{{ __('store.service_information') }}</small>
                                </div>
                            @endif

                            @if($service->status === 'active' && $service->domain && $service->clientDomain)
                                <a href="{{ route('store.auth.domains.details', $service->clientDomain->id) }}"
                                   class="list-group-item list-group-item-action">
                                    <i class="fas fa-globe me-2"></i>{{ __('store.manage_domain') }}
                                </a>
                            @endif

                            <a href="{{ route('store.auth.invoices') }}?service={{ $service->id }}"
                               class="list-group-item list-group-item-action">
                                <i class="fas fa-file-invoice me-2"></i>{{ __('store.view_invoices') }}
                            </a>

                            @if($service->status === 'active')
                                <a href="{{ route('store.auth.services.resources', $service->id) }}"
                                   class="list-group-item list-group-item-action">
                                    <i class="fas fa-chart-pie me-2"></i>{{ __('store.resource_usage_title') }}
                                </a>
                            @endif

                            @if($canUpgrade ?? false)
                                <a href="{{ route('store.auth.services.upgrade', $service->id) }}"
                                   class="list-group-item list-group-item-action active">
                                    <i class="fas fa-exchange-alt me-2"></i>{{ __('store/upgrade.title') }}
                                </a>
                            @endif

                            
                            <div class="list-group-item px-3 py-2 border-top" style="background: transparent;">
                                <small class="text-muted fw-semibold text-uppercase" style="font-size: 0.7rem;">{{ __('store.service_billing_cycle') }}</small>
                            </div>

                            @php $expiryRaw3 = $service->expire_date ?: $service->next_due_date; @endphp
                            @if($expiryRaw3 && \Carbon\Carbon::parse($expiryRaw3)->diffInDays(now()) < 30 && \Illuminate\Support\Facades\Route::has('store.auth.services.renew'))
                                <a href="{{ route('store.auth.services.renew', $service->id) }}"
                                   class="list-group-item list-group-item-action">
                                    <i class="fas fa-calendar-plus me-2"></i>{{ __('store.service_renew_service') }}
                                </a>
                            @endif

                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                <span><i class="fas fa-sync me-2"></i>{{ __('store.service_auto_renew') }}</span>
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input" type="checkbox" id="autoRenewToggle"
                                           {{ $service->auto_renew ? 'checked' : '' }}
                                           onchange="toggleAutoRenew({{ $service->id }}, this.checked)">
                                </div>
                            </div>

                            
                            @if($service->status === 'active' && \App\Models\Setting::get('show_cancellation_link', true))
                                @php
                                    $hasPendingCancellation = \App\Models\CancellationRequest::where('client_id', $service->client_id)
                                        ->where('client_product_id', $service->id)
                                        ->pending()
                                        ->exists();
                                @endphp
                                @if($service->pending_cancellation)
                                    <a href="{{ route('store.auth.services.cancel', $service->id) }}"
                                       class="list-group-item list-group-item-action text-warning">
                                        <i class="fas fa-calendar-times me-2"></i>{{ __('store.cancellation_scheduled_status') }}
                                    </a>
                                @elseif(!$hasPendingCancellation)
                                    <a href="{{ route('store.auth.services.cancel', $service->id) }}"
                                       class="list-group-item list-group-item-action text-danger">
                                        <i class="fas fa-times-circle me-2"></i>{{ __('store.cancellation_request_cancellation') }}
                                    </a>
                                @else
                                    <a href="{{ route('store.auth.services.cancel', $service->id) }}"
                                       class="list-group-item list-group-item-action text-warning">
                                        <i class="fas fa-clock me-2"></i>{{ __('store.cancellation_pending_status') }}
                                    </a>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.product-card {
    user-select: none;
}
.product-card:hover {
    border-color: var(--bs-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.product-card.selected {
    border-color: var(--bs-primary) !important;
    border-width: 2px;
    box-shadow: 0 4px 12px rgba(13,110,253,0.15);
}
.period-btn {
    cursor: pointer;
}
.period-btn input {
    display: none;
}
.period-btn .period-label {
    display: block;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    text-align: center;
    transition: all 0.15s;
}
.period-btn:hover .period-label {
    border-color: var(--bs-primary);
}
.period-btn input:checked + .period-label {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}
</style>
@endpush

@push('scripts')
<script>
window.storeUpgradeConfig = {
    serviceId: {{ $service->id }},
    csrfToken: '{{ csrf_token() }}',
    routes: {
        preview: '{{ route("store.auth.services.upgrade.preview", $service) }}',
        execute: '{{ route("store.auth.services.upgrade.execute", $service) }}',
    },
    targetsByProduct: @json($targetsByProduct),
    periodLabels: {
        1:  '{{ __("store/upgrade.monthly") }}',
        3:  '{{ __("store/upgrade.quarterly") }}',
        6:  '{{ __("store/upgrade.semiannually") }}',
        12: '{{ __("store/upgrade.annually") }}',
        24: '{{ __("store/upgrade.biennially") }}',
        36: '{{ __("store/upgrade.triennially") }}',
    },
    translations: {
        remaining_days:   '{{ __("store/upgrade.remaining_days") }}',
        current_value:    '{{ __("store/upgrade.current_value") }}',
        target_value:     '{{ __("store/upgrade.target_value") }}',
        subtotal:         '{{ __("store/upgrade.subtotal") }}',
        tax_label:        '{{ __("store/upgrade.tax_label") }}',
        total_label:      '{{ __("store/upgrade.total_label") }}',
        diff_pay:         '{{ __("store/upgrade.diff_pay") }}',
        diff_refund:      '{{ __("store/upgrade.diff_refund") }}',
        diff_zero:        '{{ __("store/upgrade.diff_zero") }}',
        cancelled_notice: '{{ __("store/upgrade.cancelled_notice") }}',
        error_generic:    '{{ __("store/upgrade.error_generic") }}',
        calc_title:         '{{ __("store/upgrade.calc_title") }}',
        calc_current:       '{{ __("store/upgrade.calc_current") }}',
        calc_new:           '{{ __("store/upgrade.calc_new") }}',
        calc_period_total:  '{{ __("store/upgrade.calc_period_total") }}',
        calc_period_days:   '{{ __("store/upgrade.calc_period_days") }}',
        calc_daily_rate:    '{{ __("store/upgrade.calc_daily_rate") }}',
        calc_formula_label: '{{ __("store/upgrade.calc_formula_label") }}',
        calc_new_daily:     '{{ __("store/upgrade.calc_new_daily") }}',
        calc_current_daily: '{{ __("store/upgrade.calc_current_daily") }}',
        aborted_paid_in_progress: '{{ __("store/upgrade.aborted_paid_in_progress") }}',
        applied_downgrade:        '{{ __("store/upgrade.applied_downgrade") }}',
        applied_same:             '{{ __("store/upgrade.applied_same") }}',
        no_change_notice:         '{{ __("store/upgrade.no_change_notice") }}',
        from_label:               '{{ __("store/upgrade.from_label") }}',
        to_label:                 '{{ __("store/upgrade.to_label") }}',
        calc_per_day:             '{{ __("store/upgrade.calc_per_day") }}',
        options_step_title:        '{{ __("store/upgrade.options_step_title") }}',
        options_drops_warning:     '{{ __("store/upgrade.options_drops_warning") }}',
        options_drops_acknowledge: '{{ __("store/upgrade.options_drops_acknowledge") }}',
        options_required_label:    '{{ __("store/upgrade.options_required_label") }}',
        options_auto_carry_label:  '{{ __("store/upgrade.options_auto_carry_label") }}',
        options_edit_optional:     '{{ __("store/upgrade.options_edit_optional") }}',
        options_select_placeholder:'{{ __("store/upgrade.options_select_placeholder") }}',
        options_select_required:   '{{ __("store/upgrade.options_select_required") }}',
        options_compat_warning_badge: '{{ __("store/upgrade.options_compat_warning_badge") }}',
        line_kind_product:         '{{ __("store/upgrade.line_kind_product") }}',
        line_kind_option_carry:    '{{ __("store/upgrade.line_kind_option_carry") }}',
        line_kind_option_drop:     '{{ __("store/upgrade.line_kind_option_drop") }}',
        line_kind_option_add:      '{{ __("store/upgrade.line_kind_option_add") }}',
        line_dropped_no_refund:    '{{ __("store/upgrade.line_dropped_no_refund") }}',
        calc_line_label:           '{{ __("store/upgrade.calc_line_label") }}',
        calc_line_diff:            '{{ __("store/upgrade.calc_line_diff") }}',
        error_missing_selections:  '{{ __("store/upgrade.error_missing_selections") }}',
    },
};

// Auto-renew toggle in sidebar — same handler as service details page.
function toggleAutoRenew(serviceId, enabled) {
    fetch('{{ url("clientarea/services") }}/' + serviceId + '/auto-renew', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ auto_renew: enabled })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            const toggle = document.getElementById('autoRenewToggle');
            if (toggle) toggle.checked = enabled;
        }
    })
    .catch(() => {
        const toggle = document.getElementById('autoRenewToggle');
        if (toggle) toggle.checked = !enabled;
    });
}
</script>
@vite('resources/js/store/services/upgrade.js')
@endpush
@endsection
