@extends('layouts.app')

@section('title', __('messages.checkout') . ' - ' . $ticket->translatedTitle)

@section('content')
<div class="checkout-page">
    <div class="checkout-container">
        
        {{-- Breadcrumb --}}
        <div class="checkout-breadcrumb">
             <a href="{{ url()->previous() }}" class="back-link">
                <span class="breadcrumb-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
                        <polyline points="9 18 15 12 9 6"></polyline>
                    </svg>
                </span>
             </a>
             <span class="page-title">{{ __('messages.checkout') }}</span>
        </div>

        <div class="checkout-layout">
            
            {{-- Right Column: Main Content --}}
            <div class="checkout-main">
                
                <h2 class="section-title">{{ __('messages.payment_method') }}</h2>
                
                {{-- Payment Method Selection --}}
                <div class="payment-method-card active">
                    <div class="payment-method-header">
                        <div class="payment-method-radio">
                            <input type="radio" name="payment_method" value="card" checked id="paymentCard">
                            <label for="paymentCard">{{ __('messages.credit_card') }}</label>
                        </div>
                        <div class="payment-method-icons">
                             <span class="card-icon-wrapper">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/American_Express_logo_%282018%29.svg" alt="Amex">
                            </span>
                            <span class="card-icon-wrapper">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg" alt="Mastercard">
                            </span>
                            <span class="card-icon-wrapper">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" alt="Visa">
                            </span>
                        </div>
                    </div>
                    
                    <div class="card-form">
                        <form action="{{ route('checkout.process-payment', $ticket->id) }}" method="POST" id="checkoutForm">
                            @csrf
                            @php
                                $checkoutDate = request('date') ?: session('checkout_date');
                                $checkoutTime = request('time') ?: session('checkout_time', '21:00-04:00');
                                $checkoutAdults = request('adults') ?: session('checkout_adults', 1);
                                $checkoutChildren = request('children') ?: session('checkout_children', 0);
                            @endphp
                            <input type="hidden" name="date" value="{{ $checkoutDate }}">
                            <input type="hidden" name="time" value="{{ $checkoutTime }}">
                            <input type="hidden" name="adults" value="{{ $checkoutAdults }}">
                            <input type="hidden" name="children" value="{{ $checkoutChildren }}">
                            <input type="hidden" name="email" value="{{ session('user_email') ?? auth()->user()->email ?? '' }}">
                            <input type="hidden" name="country_code" value="{{ request('country_code') }}">
                            <input type="hidden" name="phone" value="{{ request('phone') }}">
                            <input type="hidden" name="language" value="ar">
                            {{-- Additional services removed --}}

                            {{-- Card Number --}}
                            <div class="form-group">
                                <label class="form-label">{{ __('messages.card_number') }}</label>
                                <input type="text" name="card_number" class="form-input card-number" placeholder="XXXX XXXX XXXX XXXX" maxlength="19" id="cardNumberInput" required>
                                <div class="form-error" style="display: none;">{{ __('messages.field_required') }}</div>
                            </div>
                            
                            <div class="form-error-message" style="color: #ef4444; font-size: 13px; margin-bottom: 20px; display: none;">
                                {{ __('messages.field_required') }}
                            </div>

                            {{-- Expiry & CVV --}}
                            <div class="form-row">
                                <div class="form-group">
                                    <label class="form-label">{{ __('messages.expiry_month') }}</label>
                                    <input type="text" name="expiry_month" class="form-input centered-input" placeholder="MM" maxlength="2" required>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">{{ __('messages.expiry_year') }}</label>
                                    <input type="text" name="expiry_year" class="form-input centered-input" placeholder="YY" maxlength="2" required>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">{{ __('messages.cvv') }}</label>
                                    <input type="text" name="cvv" class="form-input centered-input" placeholder="XXX" maxlength="4" required>
                                </div>
                            </div>
                            
                            {{-- Save Card Checkbox --}}
                            <div class="checkbox-group">
                                <label class="checkbox-label">
                                    <input type="checkbox" name="save_card">
                                    <div class="checkbox-custom"></div>
                                    <span class="checkbox-text">{{ __('messages.save_card') }}</span>
                                </label>
                            </div>
                        </form>
                    </div>
                </div>

            </div>

             {{-- Left Column: Sidebar (Order Summary) --}}
            <div class="checkout-sidebar">
                <h2 class="sidebar-title">{{ __('messages.order_summary') }}</h2>
                
                {{-- Event Card --}}
                <div class="event-card">
                    <div class="event-image">
                        @if($ticketImage)
                            <img src="{{ asset('storage/' . $ticketImage->file_path) }}" alt="{{ $ticket->translatedTitle }}">
                        @elseif($ticket->image)
                            <img src="{{ asset('storage/' . $ticket->image) }}" alt="{{ $ticket->translatedTitle }}">
                        @else
                            <div class="event-image-placeholder">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" width="48" height="48">
                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
                                    <polyline points="21 15 16 10 5 21"></polyline>
                                </svg>
                            </div>
                        @endif
                        <div class="event-overlay">
                            {{-- Optional overlay content --}}
                        </div>
                    </div>
                    
                    <div class="event-details">
                         <h3 class="event-title">{{ $ticket->translatedTitle }}</h3>
                        <p class="event-venue">{{ $ticket->location ?? Str::words(strip_tags($ticket->translatedDescription), 5, '...') }}</p>
                        
                        <div class="event-info">
                            <div class="event-info-row">
                                <span class="icon">📅</span>
                                @php
                                    $displayDate = request('date') ?: session('checkout_date');
                                    $displayTime = request('time') ?: session('checkout_time');
                                    if($displayDate) {
                                        $dateFormatted = \Carbon\Carbon::parse($displayDate)->locale(app()->getLocale())->translatedFormat('l d F');
                                    } else {
                                        $dateFormatted = '';
                                    }
                                @endphp
                                <span>{{ $dateFormatted }}{{ $displayTime ? ', ' . $displayTime : '' }}</span>
                            </div>
                        </div>
                        
                        <div class="ticket-type">
                             <span class="ticket-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
                                </svg>
                             </span>
                            @php
                                $displayAdults = request('adults') ?: session('checkout_adults', 0);
                                $displayChildren = request('children') ?: session('checkout_children', 0);
                                $summary = [];
                                if($displayAdults > 0) $summary[] = "$displayAdults " . __('messages.adults');
                                if($displayChildren > 0) $summary[] = "$displayChildren " . __('messages.children');
                                $summaryString = !empty($summary) ? implode(', ', $summary) : __('messages.tickets');
                            @endphp
                            <span>{{ $summaryString }}</span>
                        </div>
                    </div>
                </div>

                {{-- Delivery Info (Desktop) --}}
                <div class="delivery-info">
                    <h4 class="delivery-title">{{ __('messages.ticket_delivery') }}</h4>
                    <p class="delivery-text">
                        {{ __('messages.ticket_delivery_desc') }}
                    </p>
                    <p class="delivery-email">
                        {{ __('messages.confirmation_email') }}
                        <br><strong>{{ session('user_email') ?? auth()->user()->email ?? '' }}</strong>
                    </p>
                </div>
                
                 {{-- Sticky Total Section (Desktop) --}}
                <div class="summary-breakdown desktop-only">
                    @php
                        // استخدام الإجمالي المحفوظ من صفحة اختيار التذاكر
                        $checkoutOptions = session('checkout_options', []);
                        $checkoutTotal = session('checkout_total', 0);
                        $checkoutQuantity = session('checkout_quantity', 0);

                        // إذا كان هناك إجمالي محفوظ، استخدمه
                        if ($checkoutTotal > 0) {
                            $subtotal = $checkoutTotal;
                            $total = $checkoutTotal;
                            $ticketCount = $checkoutQuantity;
                        } else {
                            // الحساب القديم كـ fallback
                            $selectedDate = request('date') ?: session('checkout_date');
                            $ticketPrice = $ticket->price;
                            
                            if($selectedDate) {
                                 $datePrice = \App\Models\TicketDate::where('ticket_id', $ticket->id)
                                    ->where('date', $selectedDate)
                                    ->where('is_active', true)
                                    ->value('price');
                                 if($datePrice) {
                                     $ticketPrice = $datePrice;
                                 }
                            }

                            // Use the display values from earlier in the page - default to 1 adult if empty
                            $calcAdults = $displayAdults ?? (request('adults') ?: session('checkout_adults')) ?: 1;
                            $calcChildren = $displayChildren ?? (request('children') ?: session('checkout_children')) ?: 0;
                            
                            $subtotal = ($calcAdults * $ticketPrice) + ($calcChildren * $ticketPrice * 0.7);
                            $total = $subtotal;
                            $ticketCount = $calcAdults + $calcChildren;
                        }
                        
                        // Pass totals to JS
                        $totalForJs = $total; 
                    @endphp

                    <div class="summary-row">
                        <span>{{ __('messages.tickets') }} {{ $ticketCount ?? ($calcAdults ?? 0) + ($calcChildren ?? 0) }}</span>
                         <span>{{ $currencyCode }} {{ number_format($subtotal, 2) }}</span>
                    </div>
                    
                    <div class="summary-total-row">
                        <span>{{ __('messages.total') }}</span>
                        <span class="total-amount" id="desktopTotal">{{ $currencyCode }} {{ number_format($total, 2) }}</span>
                    </div>

                </div>

            </div>
        </div>
        
    </div>

    {{-- Mobile Floating Footer --}}
    <div class="mobile-footer">
        <div class="mobile-total">
         <div class="total-label">{{ $currencyCode }} <span id="mobileTotalAmount">{{ number_format($total, 2) }}</span></div>

        </div>
        
        <div class="mobile-timer">
             <span class="timer-badge" id="mobileTimer">09:09</span>
             <span class="timer-text">{{ __('messages.time_remaining') }}</span>
        </div>
        
        <div class="mobile-actions">
           <button type="submit" form="checkoutForm" class="pay-button" id="payButtonMobile">{{ __('messages.pay') }}</button>
        </div>
    </div>
    
     {{-- Desktop Floating Footer (If needed to match design exactly, usually simpler) --}}
     <div class="desktop-footer-bar">
          <div class="footer-container">
                <div class="footer-timers">
                     <span>{{ __('messages.time_remaining') }}</span>
                     <span class="timer-badge" id="desktopTimer">09:09</span>
                </div>
                <div class="footer-actions">
                    <div class="total-display">
                        <span class="total-value">{{ $currencyCode }} <span id="footerBarTotal">{{ number_format($total, 2) }}</span></span>

                    </div>
                    <button type="submit" form="checkoutForm" class="pay-button" id="payButtonDesktop">{{ __('messages.pay') }}</button>
                </div>
          </div>
     </div>

</div>
@endsection

@push('styles')
<style>
    :root {
        --primary-color: #7c3aed; /* Example purple */
        --text-color: #1f2937;
        --border-color: #e5e7eb;
        --bg-color: #f9fafb;
    }

    body {
        margin: 0;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: var(--bg-color);
        /* direction inherited */
    }
    
    .checkout-page {
        min-height: 100vh;
        padding-bottom: 120px; /* Space for fixed footer */
    }

    .checkout-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px;
    }

    /* Breadcrumb */
    .checkout-breadcrumb {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 32px;
        font-size: 24px;
        font-weight: 700;
        color: var(--text-color);
    }
    
    .checkout-breadcrumb .back-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-color);
        text-decoration: none;
    }
    
    .breadcrumb-icon svg {
        transform: rotate(180deg); /* Adjust for RTL if needed, or pick appropriate icon */
    }

    /* Layout */
    .checkout-layout {
        display: grid;
        grid-template-columns: 400px 1fr; /* Sidebar on Right, Main on Left */
        gap: 32px;
    }
    
    .checkout-main {
        order: 2;
    }
    
    .checkout-sidebar {
        order: 1;
    }
    
    .section-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 24px;
        color: var(--text-color);
    }
    
    .sidebar-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 24px;
        color: var(--text-color);
    }

    /* Payment Method Card */
    .payment-method-card {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 24px;
    }
    
    .payment-method-card.active {
        /* border-color: var(--primary-color); */
    }

    .payment-method-header {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        border-bottom: 1px solid var(--border-color);
    }
    
    .payment-method-radio {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .payment-method-radio input[type="radio"] {
        width: 20px;
        height: 20px;
        accent-color: #000;
    }
    
    .payment-method-radio label {
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }
    
    .payment-method-icons {
        display: flex;
        gap: 8px;
    }
    
    .card-icon-wrapper img {
        height: 24px;
        width: auto;
    }

    /* Card Form */
    .card-form {
        padding: 24px;
    }
    
    .form-group {
        margin-bottom: 24px;
    }
    
    .form-label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #6b7280;
        color: #6b7280;
        margin-bottom: 8px;
        text-align: start;
    }
    
    .form-input {
        width: 100%;
        padding: 12px 0;
        border: none;
        border-bottom: 1px solid var(--border-color);
        font-size: 18px;
        color: var(--text-color);
        outline: none;
        background: transparent;
        transition: border-color 0.2s;
        text-align: start; /* Default for text */
    }
    
    .form-input::placeholder {
        color: #9ca3af;
    }
    
    .form-input:focus {
        border-bottom-color: #000;
    }
    
    .form-input.card-number {
        font-family: monospace;
        letter-spacing: 2px;
        direction: ltr; /* Card number always LTR */
        text-align: right; /* Align to right for RTL layout feeling */
    }
    
    .form-input.centered-input {
        text-align: center;
        direction: ltr;
    }
    
    .form-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .checkbox-group {
        margin-top: 12px;
    }
    
    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        user-select: none;
    }
    
    .checkbox-label input[type="checkbox"] {
        display: none;
    }
    
    .checkbox-custom {
        width: 20px;
        height: 20px;
        border: 2px solid #3b82f6; /* Blue border */
        border-radius: 4px;
        background: #fff;
        position: relative;
        transition: all 0.2s;
    }
    
    .checkbox-label input:checked + .checkbox-custom {
        background: #3b82f6;
    }
    
    .checkbox-label input:checked + .checkbox-custom::after {
        content: '';
        position: absolute;
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    
    .checkbox-text {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
    }

    /* Services Section */
    .services-section {
        margin-top: 32px;
    }
    
    .service-card {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        margin-bottom: 12px;
        overflow: hidden;
    }
    
    .service-header {
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }
    
    .service-toggle-icon {
        color: #9ca3af;
        transition: transform 0.2s;
    }
    
    .service-card:not(.collapsed) .service-toggle-icon {
        transform: rotate(180deg);
    }
    
    .service-name {
        flex: 1;
        margin: 0 16px;
        font-size: 15px;
        font-weight: 500;
        font-weight: 500;
        color: var(--text-color);
        text-align: start;
    }
    
    .service-content {
        padding: 0 16px 16px 16px; 
        padding-inline-start: 52px; /* Indent to align with text */
        color: #6b7280;
        font-size: 14px;
        display: none;
    }
    
    .service-card:not(.collapsed) .service-content {
        display: block;
    }
    
    .service-checkbox-wrapper input[type="checkbox"] {
        display: none;
    }

    .checkbox-custom.disabled {
        border-color: #d1d5db;
        background-color: #f3f4f6;
    }

    /* Sidebar Event Card */
    .checkout-sidebar {
        /* position: sticky; */
        top: 24px;
    }
    
    .event-card {
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--border-color);
        margin-bottom: 24px;
    }
    
    .event-image {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
    }
    
    .event-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .event-details {
        padding: 16px;
    }
    
    .event-title {
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 4px 0;
        line-height: 1.4;
    }
    
    .event-venue {
        font-size: 14px;
        color: #6b7280;
        margin: 0 0 16px 0;
    }
    
    .event-info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: var(--text-color);
        margin-bottom: 12px;
    }
    
    .ticket-type {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        background-color: #fff0eb; /* Light orange/pink? */
        color: #f97316;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
    }

    /* Delivery Info */
    .delivery-info {
        background: #f9fafb;
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 24px;
    }
    
    .delivery-title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 12px;
    }
    
    .delivery-text {
        font-size: 14px;
        color: #4b5563;
        line-height: 1.5;
        margin-bottom: 8px;
    }
    
    .delivery-email {
        font-size: 14px;
        color: #4b5563;
    }

    /* Summary Breakdown (Desktop) */
    .summary-breakdown {
        background: #fff; 
        /* padding: 20px; */
        /* border-radius: 12px; */
    }
    
    .summary-row {
        display: flex;
        justify-content: space-between;
        font-size: 15px;
        color: var(--text-color);
        margin-bottom: 12px;
    }
    
    .summary-total-row {
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        font-weight: 700;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--border-color);
    }
    
    .tax-note {
        font-size: 12px;
        color: #9ca3af;
        margin-top: 8px;
        text-align: left;
    }

    /* Footers */
    .mobile-footer {
        display: none; /* Hidden on desktop */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 16px;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
        z-index: 100;
        align-items: center;
        justify-content: space-between;
    }
    
    .desktop-footer-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 16px 24px;
        border-top: 1px solid var(--border-color);
        z-index: 90;
    }
    
    .footer-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .footer-timers {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        color: #6b7280;
    }
    
    .timer-badge {
        background: #dcfce7;
        color: #15803d;
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: 600;
    }
    
    .footer-actions {
        display: flex;
        align-items: center;
        gap: 24px;
    }
    
    .total-display {
        text-align: start;
    }
    
    .total-value {
        display: block;
        font-size: 20px;
        font-weight: 700;
    }
    
    .total-tax {
        font-size: 11px;
        color: #9ca3af;
    }
    
    .pay-button {
        background: #000;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 12px 48px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        width: auto;
    }
    
    @media (max-width: 768px) {
        .checkout-layout {
            grid-template-columns: 1fr;
        }
        
        .checkout-sidebar {
            display: block; /* Show sidebar (Event Card) on mobile */
            order: 1; /* Ensure it appears at the top */
        }
        
        .checkout-main {
            order: 2; /* Payment section follows */
        }
        
        .summary-breakdown {
            display: none; /* Hide the detailed summary table on mobile, rely on footer */
        }
        
        .desktop-footer-bar {
            display: none;
        }
        
        .mobile-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
        }
        
        /* On mobile, we might want to show the event card at the top, so we could duplicate it or move it with JS/CSS order
           For now, the design shows main content. The sidebar content usually goes to a separate summary page or collapsed.
           But based on the "Mobile Event Card" from previous code, let's ensure we have a mobile summary view if needed.
           The prompt images show a "Order Summary" header on desktop right side.
        */
        
        /* Adjustments for mobile view based on images provided */
        .mobile-total {
            text-align: right;
        }
        
        .mobile-total .total-label {
            font-size: 18px;
            font-weight: 700;
            display: block;
        }
        
        .mobile-total .tax-label {
            font-size: 10px;
            color: #9ca3af;
        }
        
        .mobile-timer {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .pay-button {
            padding: 10px 32px;
        }
    }
</style>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
    body {
        font-family: 'IBM Plex Sans Arabic', sans-serif;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Card formatting
    const cardInput = document.getElementById('cardNumberInput');
    if(cardInput) {
        cardInput.addEventListener('input', function(e) {
             let value = e.target.value.replace(/\D/g, '');
             let formatted = value.match(/.{1,4}/g)?.join(' ') || value;
             e.target.value = formatted.substring(0, 19);
        });
    }
    
    // Checkbox custom logic
    const checkboxes = document.querySelectorAll('input[name="refund_guarantee"], input[name="whatsapp_reminder"]');
    checkboxes.forEach(cb => {
        cb.addEventListener('change', updateTotals);
    });
    
    // Toggle service content
    const serviceHeaders = document.querySelectorAll('.service-header');
    serviceHeaders.forEach(header => {
        header.addEventListener('click', function(e) {
            // Avoid toggling if clicking the checkbox directly
            if(e.target.closest('.checkbox-label')) return;
            
            const card = this.closest('.service-card');
            card.classList.toggle('collapsed');
        });
    });

    const baseTotal = {{ $totalForJs ?? 0 }}; // Fallback if variable missing
    const currency = "{{ $currencyCode ?? 'USD' }}";
    
    function updateTotals() {
        let currentTotal = baseTotal;
        // Services removed, so total is static for now unless we re-introduce logic
        
        // Update all total displays
        const formatted = currentTotal.toFixed(2);
        
        const desktopTotal = document.getElementById('desktopTotal');
        if(desktopTotal) desktopTotal.innerText = `${currency} ${formatted}`;
        
        const footerBarTotal = document.getElementById('footerBarTotal');
        if(footerBarTotal) footerBarTotal.innerText = formatted;
        
        const mobileTotal = document.getElementById('mobileTotalAmount');
        if(mobileTotal) mobileTotal.innerText = formatted;
    }
    
    // Simple Checkout Timer
    let duration = 15 * 60;
    const timerDisplays = [document.getElementById('mobileTimer'), document.getElementById('desktopTimer')];
    
    setInterval(() => {
        if(duration <= 0) return;
        duration--;
        
        const m = Math.floor(duration / 60).toString().padStart(2, '0');
        const s = (duration % 60).toString().padStart(2, '0');
        const text = `${m}:${s}`;
        
        timerDisplays.forEach(el => {
            if(el) el.innerText = text;
        });
    }, 1000);
});
</script>
@endpush