body { background: #0d0d0d !important; color: #e5e5e5 !important; }
.dsub-wrap {
    display: flex;
    gap: 0;
    min-height: calc(100vh - 120px);
    max-width: 1060px;
    margin: 1.5rem auto;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    overflow: hidden;
    background: #1a1a1a;
}

/* Colonne gauche : dialogue */
.dsub-chat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #2a2a2a;
}
.dsub-chat-header {
    padding: .85rem 1.25rem;
    border-bottom: 1px solid #2a2a2a;
    background: #111;
    font-size: .82rem;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.dsub-thread {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    background: #1a1a1a;
}
.dsub-input-row {
    padding: .85rem 1rem;
    border-top: 1px solid #2a2a2a;
    background: #111;
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

/* Colonne droite : infos + actions */
.dsub-sidebar {
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #111;
}
.dsub-sidebar-block {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #2a2a2a;
}
.dsub-back-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    background: #222;
    border: 1px solid #333;
    border-radius: 8px;
    color: #ccc;
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.dsub-back-btn:hover { background: #2a2a2a; color: #fff; }

@media (max-width: 700px) {
    .dsub-wrap { flex-direction: column; margin: 0; border-radius: 0; border: none; }
    .dsub-sidebar { width: 100%; min-width: unset; }
    .dsub-chat { min-height: 55vh; }
}
</style>

<div style="max-width:1060px;margin:1rem auto;padding:0 1rem;">
    <a href="http://localhost/Cooky/public/dashboard/mes-demandes" class="dsub-back-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" style="flex-shrink:0;">
            <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
        </svg>
        Mes demandes
    </a>
</div>

<div class="dsub-wrap">

    <!-- ══ COLONNE GAUCHE : FIL DE DIALOGUE ══ -->
    <div class="dsub-chat">
        <div class="dsub-chat-header">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" style="flex-shrink:0;">
                <path d="M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105"/>
            </svg>
            Échange avec <strong style="color:var(--color-text);margin-left:.2rem;">annecharlotte</strong>
                        <span style="margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;
                         padding:.2rem .65rem;border-radius:999px;font-size:.72rem;font-weight:700;
                         background:rgba(124,58,237,.15);color:#a78bfa;">
                <i class="bi bi-tag-fill" style="font-size:.65rem;"></i>
                Photo dédicacée            </span>
                    </div>

        <div class="dsub-thread" id="msgThread">
                <div style="display:flex;flex-direction:column;align-items:flex-end;">
            <div style="font-size:.7rem;color:#888;margin-bottom:.2rem;">
                julienpeagas · 01/07 18:34            </div>
            <div style="max-width:78%;padding:.65rem 1rem;border-radius:14px;font-size:.88rem;line-height:1.55;
                        background:#7c3aed;color:#fff;border:none;">
                photo dédicacée avec mon prénom            </div>
        </div>
                <div style="display:flex;flex-direction:column;align-items:flex-start;">
            <div style="font-size:.7rem;color:#888;margin-bottom:.2rem;">
                annecharlotte · 01/07 18:43            </div>
            <div style="max-width:78%;padding:.65rem 1rem;border-radius:14px;font-size:.88rem;line-height:1.55;
                        background:#2a2a2a;color:#fff;border:none;">
                merci quel fomat voule vous ma photo dédicacée  <br />
- photo A4<br />
- Poster A2 (double A3)            </div>
        </div>
                        </div>

                <div class="dsub-input-row">
            <textarea id="newMsgBody" rows="2" placeholder="Votre message…"
                      style="flex:1;padding:.65rem 1rem;border-radius:10px;border:1px solid #333;
                             background:#1a1a1a;color:#fff;font-size:.88rem;resize:none;outline:none;"
                      onfocus="this.style.borderColor='var(--color-accent)'"
                      onblur="this.style.borderColor='#333'"></textarea>
            <button onclick="sendMsg(2)"
                    style="padding:.65rem 1.1rem;background:var(--color-accent,#8B1A2F);border:none;
                           border-radius:10px;color:#fff;cursor:pointer;flex-shrink:0;align-self:flex-end;
                           font-size:1rem;display:flex;align-items:center;justify-content:center;">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338L.604 6.317l14.042-4.561z"/>
                </svg>
            </button>
        </div>
        <div id="msgStatus" style="font-size:.78rem;padding:0 1rem .5rem;"></div>
            </div>

    <!-- ══ COLONNE DROITE : INFOS + ACTIONS ══ -->
    <div class="dsub-sidebar">

        <!-- Créateur + statut -->
        <div class="dsub-sidebar-block">
            <div style="display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem;">
                                <img src="http://localhost/Cooky/public/uploads/avatars/40458ece0e701ed606992695daf7104a.webp"
                     style="width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;" alt="">
                                <div>
                    <a href="http://localhost/Cooky/public/createur/annecharlotte"
                       style="font-weight:700;font-size:.95rem;color:var(--color-text);text-decoration:none;">
                        annecharlotte                    </a>
                    <div style="margin-top:.2rem;">
                        <span style="display:inline-block;padding:.2rem .65rem;border-radius:999px;font-size:.7rem;font-weight:700;
                                     background:#f59e0b22;color:#f59e0b;">
                            En attente de réponse                        </span>
                    </div>
                </div>
            </div>

            <!-- Prix -->
                        <div style="font-size:.78rem;color:#888;font-style:italic;">
                En attente de la proposition du créateur.
            </div>
                    </div>

        <!-- Proposition créateur à accepter/refuser -->
        
        <!-- Contenu livré -->
        
    </div><!-- /.dsub-sidebar -->
</div><!-- /.dsub-wrap -->

<script src="https://js.stripe.com/v3/"></script>
<script>
let stripe, elements;

async function subscriberRespond(id, action) {
    const csrf   = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
    const btnA   = document.getElementById('btnAcceptProposal');
    const btnD   = document.getElementById('btnDeclineProposal');
    const status = document.getElementById('proposalStatus');
    if (btnA) btnA.disabled = true;
    if (btnD) btnD.disabled = true;
    const endpoint = action === 'accept' ? 'subscriber-accept' : 'subscriber-decline';
    const res = await fetch(window.BASE_URL + '/api/private-request/' + id + '/' + endpoint, {
        method:  'POST',
        headers: { 'X-CSRF-Token': csrf, 'X-Requested-With': 'XMLHttpRequest' },
    }).then(r => r.json()).catch(() => ({ success: false }));
    if (res.success) {
        location.reload();
    } else {
        if (status) { status.textContent = res.message || 'Erreur.'; status.style.color = '#ef4444'; }
        if (btnA) btnA.disabled = false;
        if (btnD) btnD.disabled = false;
    }
}

async function startPayment(id) {
    const btn    = document.getElementById('payBtn');
    const status = document.getElementById('payStatus');
    btn.disabled  = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Initialisation…';
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
    const res  = await fetch('http://localhost/Cooky/public/api/private-request/' + id + '/payment-intent', {
        method:  'POST',
        headers: { 'X-CSRF-Token': csrf, 'X-Requested-With': 'XMLHttpRequest' }
    }).then(r => r.json()).catch(() => ({ success: false }));
    if (!res.success) {
        status.textContent = res.message || 'Erreur.';
        status.style.color = '#f44336';
        btn.disabled  = false;
        btn.innerHTML = '<i class="bi bi-lock-fill me-1"></i>Payer';
        return;
    }
    stripe   = Stripe('<br />
<b>Fatal error</b>:  Uncaught Error: Undefined constant &quot;STRIPE_PUBLISHABLE_KEY&quot; in C:\xampp\htdocs\Cooky\views\dashboard\private-request-show.php:419
Stack trace:
#0 C:\xampp\htdocs\Cooky\app\Core\Response.php(43): require()
#1 C:\xampp\htdocs\Cooky\app\Controllers\PrivateRequestController.php(255): App\Core\Response::view('dashboard/priva...', Array)
#2 C:\xampp\htdocs\Cooky\app\Core\Router.php(83): App\Controllers\PrivateRequestController-&gt;subscriberShow(Object(App\Core\Request))
#3 C:\xampp\htdocs\Cooky\app\Core\Router.php(35): App\Core\Router-&gt;callController('PrivateRequestC...', 'subscriberShow', Object(App\Core\Request))
#4 C:\xampp\htdocs\Cooky\app\Core\App.php(14): App\Core\Router-&gt;dispatch(Object(App\Core\Request))
#5 C:\xampp\htdocs\Cooky\public\index.php(9): App\Core\App::run()
#6 {main}
  thrown in <b>C:\xampp\htdocs\Cooky\views\dashboard\private-request-show.php</b> on line <b>419</b><br />