{{-- Müşteri --}}
<div class="form-card">
    <div class="fsh">
        <div class="fsh-icon" style="background:#fce7f3;color:#db2777"><i
                class="fas fa-user"></i></div>
        <div class="fsh-title">Müşteri</div>
        <div class="info-tip" data-bs-toggle="tooltip" data-bs-placement="top" title="Müşteri kartını veya listedeki satırı 1 saniye basılı tutarak detay çekmecesini açabilirsiniz.">
            <i class="fas fa-lightbulb"></i> İPUCU: 1 SN BASILI TUTUN
        </div>
    </div>
    <div class="fsb">
        <input type="hidden" name="customer_id" id="cspHidden" value="{{ old('customer_id', $reservation->customer_id) }}">
        <div class="fl">
            <label>Müşteri <span style="color:#ef4444">*</span></label>
            <div class="csp-trig" id="cspTrigger" tabindex="0">
                <div class="csp-av" id="cspAv"><i class="fas fa-user"></i></div>
                <div class="csp-ph" id="cspPh">Müşteri seçin…</div>
                <div class="csp-info" id="cspInfo">
                    <div class="csp-nm" id="cspNm"></div>
                    <div class="csp-sb" id="cspSb"></div>
                </div>
                <i class="fas fa-chevron-down ms-auto" style="font-size:12px;color:#94a3b8"></i>
            </div>
        </div>

        {{-- Selected Customer Card --}}
        <div id="cspCard" class="mt-3" style="display:none;padding:1.15rem;background:#f8fafc;border:1.5px solid #eef2f6;border-radius:14px;position:relative;">
            <div class="d-flex align-items-center gap-3">
                <div id="cspCardAv" class="csp-rav" style="width:50px;height:50px;border-radius:12px;font-size:1.1rem"></div>
                <div style="flex:1">
                    <div id="cspCardNm" style="font-size:1.05rem;font-weight:700;color:var(--text-main)"></div>
                    <div id="cspCardMt" style="font-size:.85rem;color:var(--text-muted)"></div>
                </div>
                <a id="cspCardLk" href="#" target="_blank" class="btn btn-sm btn-light" style="border-radius:8px" title="Profil">
                    <i class="fas fa-external-link-alt"></i>
                </a>
                <button type="button" class="btn btn-sm btn-light text-danger" style="border-radius:8px" onclick="cspClear()" title="Seçimi Kaldır">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    </div>
</div>