@extends('layout')

@section('title', __('store.nav_basket'))

@section('content')
<div class="container py-4" id="basketPage"
     data-summary-url="{{ route('api.store.basket.summary') }}"
     data-update-url="{{ route('api.store.basket.update', [ 'index' => ':index' ]) }}"
     data-remove-url="{{ route('api.store.basket.remove', [ 'index' => ':index' ]) }}">
    <div class="row g-4">
        <div class="col-lg-8">
            <!-- Domain Configuration Banner (shown if basket has domains) -->
            <div id="domainConfigBanner" class="alert alert-info border-0 shadow-sm mb-4" style="display: none;">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>{{ __('store.basket_domain_configuration_title') }}</strong>
                        <p class="mb-0 mt-1 small">{{ __('store.basket_domain_configuration_description') }}</p>
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-primary" id="configureNameserversBtn">
                            <i class="fas fa-server me-1"></i>{{ __('store.basket_configure_nameservers') }}
                        </button>
                        <button type="button" class="btn btn-sm btn-primary" id="configureContactsBtn">
                            <i class="fas fa-user me-1"></i>{{ __('store.basket_configure_contacts') }}
                        </button>
                    </div>
                </div>
            </div>

            <div id="basketItemsContainer"><!-- JS renders items list --></div>
        </div>
        <div class="col-lg-4">
            <div class="card sticky-top shadow-sm" style="top: 20px;">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">{{ __('store.products_order_summary') }}</h5>
                </div>
                <div class="card-body">
                    <div id="basketSummaryLoading" class="text-center py-4" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">{{ __('store.products_calculating') }}</span>
                        </div>
                        <div class="mt-3 text-muted">{{ __('store.products_calculating') }}</div>
                    </div>

                    <div id="basketSummaryContent" style="display: none;">
                        <div id="basketSummaryItems" class="mb-3"><!-- optional list --></div>
                        <hr class="my-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>{{ __('store.basket_subtotal') }}</span>
                            <span id="basketSubtotal" class="fw-semibold">₺0.00</span>
                        </div>
                        <div id="basketSetupFeeRow" class="justify-content-between mb-2" style="display:none;">
                            <span>{{ __('store.basket_setup_fee') }}</span>
                            <span id="basketSetupFeeAmount" class="fw-semibold">₺0.00</span>
                        </div>
                        <div id="basketTaxRow" class="justify-content-between mb-2" style="display:none;">
                            <span id="basketTaxName">{{ __('store.basket_tax') }}</span>
                            <span id="basketTaxAmount" class="fw-semibold">₺0.00</span>
                        </div>
                        <div id="basketPromoDiscountRow" class="justify-content-between mb-2" style="display:none;">
                            <span id="basketDiscountLabel">{{ __('store.basket_discount') }}</span>
                            
                            <span id="basketPromoDiscountAmount" class="fw-semibold text-danger">-₺0.00</span>
                        </div>
                        
                        <div id="basketPaidTrialDiscountRow" class="justify-content-between mb-2" style="display:none;">
                            <span>{{ __('store.basket_paid_trial_discount') }}</span>
                            <span id="basketPaidTrialDiscountAmount" class="fw-semibold text-danger">-₺0.00</span>
                        </div>

                        <!-- Promo Code Section -->
                        <div class="border-top pt-3 mb-3">
                            <!-- Applied Promo Code Display -->
                            <div id="appliedPromoCodeSection" class="mb-3" style="display:none;">
                                <label class="form-label small">{{ __('store.basket_applied_promo_code') }}</label>
                                <div class="d-flex align-items-center justify-content-between p-2 bg-success bg-opacity-10 border border-success rounded">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-check-circle text-success me-2"></i>
                                        <span id="appliedPromoCodeText" class="fw-semibold text-success"></span>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-danger" id="removePromoCodeBtn" title="{{ __('store.basket_remove_promo_code') }}">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Promo Code Input (shown when no code applied) -->
                            <div id="promoCodeInputSection" class="mb-2">
                                <label class="form-label small">{{ __('store.basket_promo_code') }}</label>
                                <div class="input-group">
                                    <input type="text"
                                           class="form-control"
                                           id="promoCodeInput"
                                           placeholder="{{ __('store.basket_enter_promo_code') }}"
                                           maxlength="50">
                                    <button class="btn btn-outline-primary" type="button" id="applyPromoCodeBtn">
                                        {{ __('store.basket_apply_promo_code') }}
                                    </button>
                                </div>
                            </div>
                            <div id="promoCodeFeedback" class="small" style="display:none;"></div>
                        </div>

                        <hr class="my-3">
                        <div class="d-flex justify-content-between mb-3">
                            <span class="h6 mb-0">{{ __('store.basket_total') }}</span>
                            <span id="basketTotal" class="h5 mb-0 text-primary fw-bold">₺0.00</span>
                        </div>
                        <button type="button" class="btn btn-success btn-lg w-100" id="confirmOrderBtn">
                            <i class="fas fa-shopping-cart me-2"></i>
                            {{ __('store.basket_confirm_order') }}
                        </button>
                    </div>

                    <div id="basketEmpty" class="text-center py-4" style="display: none;">
                        <i class="fas fa-shopping-cart fa-3x text-muted mb-3"></i>
                        <div class="text-muted">{{ __('store.basket_empty') }}</div>
                        <a href="{{ lroute('store.products.index') }}" class="btn btn-primary mt-3">
                            {{ __('store.basket_continue_shopping') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Transfer Code Modal -->
    <div class="modal fade" id="transferCodeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('store.domain_transfer_code') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" id="transferCodeInput" placeholder="{{ __('store.domain_epp_placeholder') }}">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('store.buttons_cancel') }}</button>
                    <button type="button" class="btn btn-primary" id="saveTransferCodeBtn">{{ __('store.buttons_save') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Nameservers Modal (per-item) -->
    <div class="modal fade" id="nameserversModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('store.domain_nameservers') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2"><input type="text" class="form-control" id="ns1" placeholder="ns1.example.com"></div>
                    <div class="mb-2"><input type="text" class="form-control" id="ns2" placeholder="ns2.example.com"></div>
                    <div class="mb-2"><input type="text" class="form-control" id="ns3" placeholder="ns3.example.com"></div>
                    <div class="mb-2"><input type="text" class="form-control" id="ns4" placeholder="ns4.example.com"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('store.buttons_cancel') }}</button>
                    <button type="button" class="btn btn-primary" id="saveNameserversBtn">{{ __('store.buttons_save') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Extra Registration Fields Modal (per-item, TLD-specific) -->
    <div class="modal fade" id="extraFieldsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('store.basket_extra_fields_title') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="extraFieldsModalBody"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('store.buttons_cancel') }}</button>
                    <button type="button" class="btn btn-primary" id="saveExtraFieldsBtn">{{ __('store.buttons_save') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bulk Nameservers Modal (for all domains) -->
    <div class="modal fade" id="bulkNameserversModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('store.basket_bulk_nameservers_title') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info border-0 small mb-3">
                        <i class="fas fa-info-circle me-1"></i>
                        {{ __('store.basket_bulk_nameservers_description') }}
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('store.domain_nameserver') }} 1</label>
                        <input type="text" class="form-control" id="bulkNs1" placeholder="ns1.example.com">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('store.domain_nameserver') }} 2</label>
                        <input type="text" class="form-control" id="bulkNs2" placeholder="ns2.example.com">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('store.domain_nameserver') }} 3 <span class="text-muted">({{ __('store.optional') }})</span></label>
                        <input type="text" class="form-control" id="bulkNs3" placeholder="ns3.example.com">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('store.domain_nameserver') }} 4 <span class="text-muted">({{ __('store.optional') }})</span></label>
                        <input type="text" class="form-control" id="bulkNs4" placeholder="ns4.example.com">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('store.buttons_cancel') }}</button>
                    <button type="button" class="btn btn-primary" id="saveBulkNameserversBtn">
                        <i class="fas fa-save me-1"></i>{{ __('store.buttons_save') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bulk Contacts Modal (for all domains) -->
    <div class="modal fade" id="bulkContactsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('store.basket_bulk_contacts_title') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info border-0 small mb-3">
                        <i class="fas fa-info-circle me-1"></i>
                        {{ __('store.basket_bulk_contacts_description') }}
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('store.checkout_billing_form_first_name') }}</label>
                            <input type="text" class="form-control" id="bulkContactFirstName">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('store.checkout_billing_form_last_name') }}</label>
                            <input type="text" class="form-control" id="bulkContactLastName">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('store.checkout_billing_form_company_name') }} <span class="text-muted">({{ __('store.optional') }})</span></label>
                        <input type="text" class="form-control" id="bulkContactCompanyName">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('store.checkout_billing_form_email') }}</label>
                        <input type="email" class="form-control" id="bulkContactEmail">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('store.checkout_billing_form_phone') }}</label>
                        <input type="text" class="form-control" id="bulkContactPhone">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('store.checkout_billing_form_address1') }}</label>
                        <input type="text" class="form-control" id="bulkContactAddress1">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('store.checkout_billing_form_address2') }} <span class="text-muted">({{ __('store.optional') }})</span></label>
                        <input type="text" class="form-control" id="bulkContactAddress2">
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('store.checkout_billing_form_city') }}</label>
                            <input type="text" class="form-control" id="bulkContactCity">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('store.checkout_billing_form_state') }}</label>
                            <input type="text" class="form-control" id="bulkContactState">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('store.checkout_billing_form_postcode') }}</label>
                            <input type="text" class="form-control" id="bulkContactPostcode">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('store.checkout_billing_form_country') }}</label>
                            <input type="text" class="form-control" id="bulkContactCountry">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('store.buttons_cancel') }}</button>
                    <button type="button" class="btn btn-primary" id="saveBulkContactsBtn">
                        <i class="fas fa-save me-1"></i>{{ __('store.buttons_save') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Product Edit Modal -->
    <div class="modal fade" id="productEditModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('store.basket_edit_product') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Loading State -->
                    <div id="productEditLoading" class="text-center py-3">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">{{ __('store.products_loading_config_options') }}</span>
                        </div>
                        <div class="mt-2 text-muted">{{ __('store.products_loading_config_options') }}</div>
                    </div>

                    <!-- Content -->
                    <div id="productEditContent" style="display: none;">
                        <!-- Product Info -->
                        <div class="mb-4">
                            <h6 id="productEditName" class="mb-1"></h6>
                            <small class="text-muted" id="productEditSubtitle"></small>
                        </div>

                        <!-- Period Selection -->
                        <div class="mb-4">
                            <label class="form-label">{{ __('store.products_period') }}</label>
                            <div id="productEditPeriods"></div>
                        </div>

                        <!-- Configurable Options -->
                        <div id="productEditConfigOptions"></div>

                        <!-- Custom Fields -->
                        <div id="productEditCustomFields"></div>

                        <!-- Price Summary -->
                        <div class="border-top pt-3 mt-4">
                            <div class="d-flex justify-content-between">
                                <span>{{ __('store.products_total') }}</span>
                                <span id="productEditPrice" class="fw-bold text-primary">₺0.00</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('store.buttons_cancel') }}</button>
                    <button type="button" class="btn btn-primary" id="saveProductEditBtn">{{ __('store.buttons_save') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>

@hook('ShoppingCartViewCartOutput')

@push('scripts')
<script>
    // Basket specific URLs (common ones are in layout.blade.php)
    window.routes = Object.assign({}, window.routes || {}, {
        productConfigOptions: '{{ route("api.store.products.config-options", ":id") }}'
    });
    window.checkoutUrl = '{{ lroute("store.checkout.index") }}';

    // Registrar module extra-fields (basket modal section + checkout guard)
    window.storeConfig = window.storeConfig || {};
    window.storeConfig.routes = Object.assign({}, window.storeConfig.routes || {}, {
        domainExtraFields: '{{ route("api.store.domain-extra-fields") }}',
    });
    // Default nameservers + contacts come from BasketController::index
    // (admin Settings for NS; client profile + billing for contacts when
    // authenticated). Controller-level data — blade has no Model queries.
    window.storeConfig.defaultNameservers = @json($defaultNameservers ?? []);
    window.storeConfig.defaultContacts = @json($defaultContacts ?? []);
    window.translations = Object.assign({}, window.translations || {}, {
        store_basket_extra_fields_title: '{{ __("store.basket_extra_fields_title") }}',
        store_basket_extra_fields_missing: '{{ __("store.basket_extra_fields_missing") }}',
        store_basket_extra_fields_complete_first: '{{ __("store.basket_extra_fields_complete_first") }}',
        store_basket_extra_field_required: '{{ __("store.basket_extra_field_required") }}',
        // PRC-542 — paid trial summary preview reminder
        store_paid_trial_next_period_hint: '{{ __("store.paid_trial_next_period_hint") }}',
    });
</script>
@vite('resources/js/store/basket-page.js')
@endpush
@endsection


