@extends('layout')

@section('title', $productData['name'])

@section('content')
<div class="container py-4" id="productDetail"
     data-product='@json($productData)'
     data-basket-add-url="{{ route('api.store.basket.add') }}">
    <div class="row">
        <div class="col-lg-8">
            <h1 class="h3 mb-3">{{ $productData['name'] }}</h1>
            <div class="mb-4">{!! $productDescription !!}</div>

            <div class="mb-4">
                <h2 class="h5">{{ __('store.products_purchase') }}</h2>
                <div class="mb-2">
                    @if(!empty($productData['pricing']))
                        <label class="form-label mb-1">{{ __('store.products_select_pricing') }}</label>
                        <div class="row g-2" role="group" aria-label="Pricing Options" id="pricingOptions" data-currency="{{ $productData['currency_id'] ?? '' }}">
                            @foreach($productData['pricing'] as $idx => $p)
                                <div class="col-12 col-md-4">
                                    <input type="radio"
                                           class="btn-check"
                                           name="pricing_option"
                                           id="pricing_{{ $idx }}"
                                           data-period="{{ $p['period'] }}"
                                           data-time="{{ $p['time'] }}"
                                           @checked($idx===0)>
                                    <label class="btn btn-outline-secondary w-100 d-flex justify-content-between align-items-center" for="pricing_{{ $idx }}">
                                        <span>{{ $p['period'] }} {{ $p['time'] }}</span>
                                        <span>{{ number_format($p['amount'], 2, ',', '.') }} {{ $productData['currency_code'] }}</span>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-muted">{{ __('store.products_no_pricing') }}</div>
                    @endif
                </div>

                @if(($productData['require_domain'] ?? false) === true)
                    <div class="mt-3" id="domainActions">
                        <div class="mb-2 fw-semibold">{{ __('store.domain_actions_title') }}</div>

                        <!-- Hidden fields for domain action tracking -->
                        <input type="hidden" id="selected_domain_action" value="">
                        <input type="hidden" id="selected_domain_name" value="">

                        <!-- Single Domain Search -->
                        <div class="border rounded p-3">
                            <div class="d-flex gap-2 mb-3">
                                <input type="text"
                                       id="domain_search_input"
                                       class="form-control"
                                       placeholder="{{ __('store.domain_placeholder_search') }}"
                                       autocomplete="off">
                                <button type="button"
                                        id="domainSearchBtn"
                                        class="btn btn-primary"
                                        style="white-space: nowrap;">
                                    <i class="fas fa-search me-1"></i>{{ __('store.domain_search') }}
                                </button>
                            </div>

                            <!-- Search Results -->
                            <div id="domainSearchResults"></div>
                        </div>

                        {{-- PRC-811 — login'li müşteriye ürüne iliştirilmemiş
                             hesabındaki domainler; JS uygun domain yoksa gizli tutar. --}}
                        @auth('client')
                            <div class="mt-3 d-none" id="myDomainsSection">
                                <div class="mb-1 small fw-semibold">
                                    <i class="fas fa-globe me-1"></i>{{ __('store.my_domains_title') }}
                                </div>
                                <select class="form-select" id="myDomainsSelect">
                                    <option value="">{{ __('store.my_domains_placeholder') }}</option>
                                </select>
                                <div class="form-text small">{{ __('store.my_domains_hint') }}</div>
                            </div>
                        @endauth
                    </div>
                @endif
            </div>

            @if(!empty($productData['custom_fields']))
            <div class="mb-4">
                <h2 class="h5">{{ __('store.products_custom_fields') }}</h2>
                <div id="customFields">
                    <div class="row g-3">
                        @foreach($productData['custom_fields'] as $field)
                            {{-- PRC-786 — ön-doldurma + dropdown/checkbox branch (parity: default theme) --}}
                            @php $cfDefault = old('custom_fields.'.$field['id'], $field['default_value'] ?? ''); @endphp
                            <div class="col-12">
                                @if($field['type'] === 'select' || $field['type'] === 'dropdown')
                                    <label class="form-label">{{ $field['label'] }} @if($field['required'])<span class="text-danger">*</span>@endif</label>
                                    <select class="form-select" name="custom_fields[{{ $field['id'] }}]" @if($field['required']) required @endif>
                                        <option value="">--</option>
                                        @foreach(($field['options'] ?? []) as $opt)
                                            @php $optVal = is_array($opt) ? ($opt['value'] ?? $opt['label'] ?? '') : $opt; @endphp
                                            <option value="{{ $optVal }}" @if((string) $cfDefault === (string) $optVal) selected @endif>{{ is_array($opt) ? ($opt['label'] ?? $opt['value'] ?? '') : $opt }}</option>
                                        @endforeach
                                    </select>
                                @elseif($field['type'] === 'textarea')
                                    <label class="form-label">{{ $field['label'] }} @if($field['required'])<span class="text-danger">*</span>@endif</label>
                                    <textarea class="form-control" name="custom_fields[{{ $field['id'] }}]" placeholder="{{ $field['placeholder'] }}" @if($field['required']) required @endif>{{ $cfDefault }}</textarea>
                                @elseif($field['type'] === 'checkbox')
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="cf_{{ $field['id'] }}" name="custom_fields[{{ $field['id'] }}]" value="1" @if((string) $cfDefault === '1') checked @endif>
                                        <label class="form-check-label" for="cf_{{ $field['id'] }}">{{ $field['label'] }} @if($field['required'])<span class="text-danger">*</span>@endif</label>
                                    </div>
                                @else
                                    <label class="form-label">{{ $field['label'] }} @if($field['required'])<span class="text-danger">*</span>@endif</label>
                                    <input type="text" class="form-control" name="custom_fields[{{ $field['id'] }}]" value="{{ $cfDefault }}" placeholder="{{ $field['placeholder'] }}" @if($field['required']) required @endif>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <div class="mb-4">
                <div id="configurableOptions"><!-- AJAX --></div>
            </div>

          

        </div>
        <div class="col-lg-4">
            <!-- Floating Cart -->
            <div class="card sticky-top" style="top: 20px;">
                <div class="card-header">
                    <h5 class="mb-0">{{ __('store.products_order_summary') }}</h5>
                </div>
                <div class="card-body">
                    <!-- Loading State -->
                    <div id="cartLoading" class="text-center py-3" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">{{ __('store.products_calculating') }}</span>
                        </div>
                        <div class="mt-2 text-muted">{{ __('store.products_calculating') }}</div>
                    </div>

                    <!-- Cart Content -->
                    <div id="cartContent" style="display: none;">
                        <!-- Items List -->
                        <div id="cartItems" class="mb-3">
                            <!-- Items will be populated by JavaScript -->
                        </div>

                        <hr>

                        <!-- Subtotal -->
                        <div class="d-flex justify-content-between mb-2">
                            <span>{{ __('store.products_subtotal') }}</span>
                            <span id="cartSubtotal">₺0.00</span>
                        </div>

                        <!-- Setup Fee -->
                        <div id="cartSetupFee" class="d-flex justify-content-between mb-2" style="display: none;">
                            <span>{{ __('store.basket_setup_fee') }}</span>
                            <span id="setupFeeAmount">₺0.00</span>
                        </div>

                        <!-- Tax -->
                        <div id="cartTax" class="d-flex justify-content-between mb-2" style="display: none;">
                            <span id="taxName">{{ __('store.products_tax') }}</span>
                            <span id="taxAmount">₺0.00</span>
                        </div>

                        {{-- PRC-580: d-flex KALDIRILDI (Bootstrap !important inline display:none'ı
                             eziyordu → hayalet "-₺0.00"). JS göstermede display:flex set eder. --}}
                        <!-- Discount (PRC-561) -->
                        <div id="cartDiscount" class="justify-content-between mb-2 text-success" style="display: none;">
                            <span id="discountLabel">{{ __('store.products_discount') }}</span>
                            <span id="discountAmount">-₺0.00</span>
                        </div>

                        <!-- Paid Trial Discount (PRC-580) -->
                        <div id="cartPaidTrial" class="justify-content-between mb-2 text-success" style="display: none;">
                            <span>{{ __('store.basket_paid_trial_discount') }}</span>
                            <span id="paidTrialAmount">-₺0.00</span>
                        </div>

                        <!-- Total -->
                        <div class="d-flex justify-content-between fw-bold">
                            <span>{{ __('store.products_total') }}</span>
                            <span id="cartTotal">₺0.00</span>
                        </div>

                        <hr>

                        <!-- Add to Cart Button -->
                        <button class="btn btn-primary w-100" id="addToCart" disabled>
                            {{ __('store.buttons_add_to_cart') }}
                        </button>
                    </div>

                    <!-- Initial State -->
                    <div id="cartInitial" class="text-center py-3">
                        <div class="text-muted">
                            {{ __('store.products_select_options_to_calculate') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Configurable options base URL'yi JavaScript'e aktar
    window.configOptionsUrl = '{{ route("api.store.products.config-options", ":id") }}';

    // Calculate URL'yi JavaScript'e aktar
    window.calculateProductUrl = '{{ route("api.store.products.calculate", ":id") }}';

    // Domain API URLs
    window.apiMyDomainsUrl = '{{ route("api.store.my-domains") }}'; // PRC-811
    window.apiDomainSearchUrl = '{{ route("api.store.domain.search") }}';
    window.apiDomainCheckUrl = '{{ route("api.store.domain.check") }}';

    // Domain settings — PRC-321 single source of truth (see partial below).

    // Product specific URLs
    // (Common URLs are defined in layout.blade.php)

    // Products index URL'yi JavaScript'e aktar
    window.productsIndexUrl = '{{ route("store.products.index") }}';

    // Basket index URL'yi JavaScript'e aktar
    window.basketIndexUrl = '{{ lroute("store.basket.index") }}';

    // Translations store layout'ta tanımlı
</script>
@include('store.partials.domain-policy') {{-- PRC-321 — single source of truth --}}
@vite('resources/js/store/product-show.js')
@endpush
@endsection


