{{-- 2. ÜRÜN SEÇİMİ --}}
<div class="rcard" id="productCard" style="{{ $products->isEmpty() ? 'display:none' : '' }}">
    <div class="rcard-head">
        <div class="rcard-icon" style="background:#d1fae5;color:#10b981"><i
                class="fas fa-box-open"></i></div>
        <div class="rcard-title" id="productCardTitle">Ürün / Hizmet Seçimi</div>
    </div>
    <div class="rcard-body">
        <div class="search-container-modern" id="productSearchContainer" style="display:none">
            <div class="scm-wrapper">
                <i class="fas fa-search scm-icon"></i>
                <input type="text" class="scm-input" id="productSearchInput" placeholder="Hızlıca ürün veya hizmet ara...">
                <button type="button" class="scm-clear" id="productSearchClear" style="display:none">
                    <i class="fas fa-times-circle"></i>
                </button>
            </div>
        </div>
        
        <input type="hidden" name="product_id" id="productIdInput" value="{{ old('product_id') }}">
        <div id="productList" style="display:flex;flex-direction:column;gap:.5rem;">
            @foreach($products as $p)
                @php
                    $prodMeta = $p->productable;
                    $duration = $prodMeta->duration_hours ?? ($prodMeta->duration_days ?? null);
                    $city = $prodMeta->departureCity?->name;
                    $locations = is_array($prodMeta->visit_locations) ? implode(' - ', array_slice($prodMeta->visit_locations, 0, 3)) : null;
                @endphp
                <div class="prod-item {{ old('product_id') == $p->id ? 'sel' : '' }}" 
                    data-id="{{ $p->id }}"
                    data-code="{{ $p->code }}"
                    data-price="{{ $p->base_price }}" 
                    data-currency="{{ $p->currency }}"
                    data-hasdates="{{ $p->productable_type ? '1' : '0' }}"
                    data-duration="{{ $duration }}"
                    data-city="{{ $city }}"
                    data-locations="{{ $locations }}"
                    data-meal="{{ $prodMeta->meal_included ?? 0 }}">
                    <div style="flex:1">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            @if($p->code)
                                <span class="badge bg-light text-muted border" style="font-size:10px;padding:2px 6px">{{ $p->code }}</span>
                            @endif
                            <div style="font-size:.86rem;font-weight:700;color:var(--text)">{{ $p->name }}</div>
                        </div>
                        <div class="d-flex align-items-center gap-3" style="font-size:.72rem;color:var(--muted)">
                            @if($city)
                                <span><i class="fas fa-map-marker-alt me-1 text-primary"></i>{{ $city }}</span>
                            @endif
                            @if($duration)
                                <span><i class="fas fa-clock me-1"></i>{{ $duration }} {{ isset($prodMeta->duration_hours) ? 'Saat' : 'Gün' }}</span>
                            @endif
                            @if($prodMeta->meal_included ?? false)
                                <span><i class="fas fa-utensils me-1"></i>Yemek Dahil</span>
                            @endif
                        </div>
                        @if($locations)
                            <div style="font-size:.68rem;color:#94a3b8;margin-top:2px" class="text-truncate">
                                <i class="fas fa-route me-1"></i>{{ $locations }}
                            </div>
                        @endif
                    </div>
                    <div class="prod-price">{{ number_format($p->base_price, 2) }} {{ $p->currency }}</div>
                </div>
            @endforeach
        </div>

        <div class="pgn-box" id="productPagination" style="display:none">
            <button type="button" class="pgn-btn" id="prevProduct"><i class="fas fa-chevron-left"></i></button>
            <div class="pgn-info">Sayfa <b id="prodPage">1</b> / <b id="prodTotalPage">1</b></div>
            <button type="button" class="pgn-btn" id="nextProduct"><i class="fas fa-chevron-right"></i></button>
        </div>
    </div>
</div>

{{-- 3. TUR TARİHİ --}}
<div class="rcard" id="tourDateCard" style="display:none">
    <div class="rcard-head">
        <div class="rcard-icon" style="background:#fef3c7;color:#f59e0b"><i
                class="fas fa-calendar-star"></i></div>
        <div class="rcard-title">Tur Tarihi Seçimi</div>
    </div>
    <div class="rcard-body">
        <div class="search-container-modern" id="dateSearchContainer" style="display:none">
            <div class="scm-wrapper">
                <i class="fas fa-calendar-alt scm-icon"></i>
                <input type="text" class="scm-input" id="dateSearchInput" placeholder="Tarih ara (Örn: 25 haziran)...">
                <button type="button" class="scm-clear" id="dateSearchClear" style="display:none">
                    <i class="fas fa-times-circle"></i>
                </button>
            </div>
        </div>

        <input type="hidden" name="tour_date_id" id="tourDateIdInput">

        <div id="dateLoading"
            style="display:none;text-align:center;padding:1.5rem;color:var(--muted)">
            <i class="fas fa-spinner fa-spin me-2"></i>Tarihler yükleniyor…
        </div>

        <div id="dateGrid" class="date-grid"></div>

        <div class="pgn-box" id="datePagination" style="display:none">
            <button type="button" class="pgn-btn" id="prevDate"><i class="fas fa-chevron-left"></i></button>
            <div class="pgn-info">Sayfa <b id="datePage">1</b> / <b id="dateTotalPage">1</b></div>
            <button type="button" class="pgn-btn" id="nextDate"><i class="fas fa-chevron-right"></i></button>
        </div>

        <div id="noDateMsg"
            style="display:none;padding:.75rem;font-size:.82rem;color:var(--muted);background:#f8fafc;border-radius:10px;text-align:center">
            <i class="fas fa-calendar-times me-2" style="color:#c7d2fe"></i>Bu ürün için yaklaşan
            tarih bulunamadı.
        </div>

        <div class="custom-date-toggle" id="customDateToggle">
            <i class="fas fa-plus"></i> Özel tarih gir
        </div>

        <div id="customDateFields" style="display:none;margin-top:1rem">
            <div class="section-divider"><span>Özel Tarih</span></div>
            <div class="fg3">
                <div class="fl">
                    <label>Başlangıç Tarihi <span class="req">*</span></label>
                    <input type="date" name="start_date" id="startDate" class="fi"
                        value="{{ old('start_date', today()->format('Y-m-d')) }}">
                    @error('start_date')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div class="fl">
                    <label>Bitiş Tarihi</label>
                    <input type="date" name="end_date" id="endDate" class="fi"
                        value="{{ old('end_date') }}">
                </div>
                <div class="fl">
                    <label>Kalkış Saati</label>
                    <input type="time" name="pickup_time" id="pickupTime" class="fi"
                        value="{{ old('pickup_time') }}">
                </div>
            </div>
        </div>
    </div>
</div>