<?php $__env->startSection('title', $title); ?>
<?php $__env->startSection('content'); ?>

<div class="mks-header">
    <div class="mks-header-left">
        <div class="mks-header-icon"><i class="las la-store"></i></div>
        <div>
            <h2 class="mks-title">Marketplace Settings</h2>
            <p class="mks-sub">Configure fees, upgrade cost, and deposit instructions for the seller marketplace.</p>
        </div>
    </div>
</div>

<form method="POST" action="<?php echo e(route('backend.marketplace.settings.update')); ?>">
    <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>

    <div class="mks-grid">

        
        <div class="mks-section">
            <div class="mks-section-title"><i class="las la-percentage"></i> Fee Configuration</div>
            <div class="mks-fee-cards">

                <div class="mks-fee-card">
                    <div class="mks-fee-card-icon" style="background:linear-gradient(135deg,#6366f1,#4f46e5)">
                        <i class="las la-star"></i>
                    </div>
                    <div class="mks-fee-card-body">
                        <label class="mks-fee-label">Seller Upgrade Fee</label>
                        <div class="mks-fee-input-wrap">
                            <span class="mks-fee-prefix"><?php echo e(optional($settings)->website_currency ?? '$'); ?></span>
                            <input type="number" step="0.01" min="0" name="seller_upgrade_fee"
                                class="mks-fee-input" id="upgrade_fee"
                                value="<?php echo e(old('seller_upgrade_fee', $settings->seller_upgrade_fee ?? 0)); ?>" required>
                        </div>
                        <p class="mks-fee-hint">One-time fee users pay to become a seller</p>
                    </div>
                </div>

                <div class="mks-fee-card">
                    <div class="mks-fee-card-icon" style="background:linear-gradient(135deg,#10b981,#059669)">
                        <i class="las la-hand-holding-usd"></i>
                    </div>
                    <div class="mks-fee-card-body">
                        <label class="mks-fee-label">Platform Fee per Sale</label>
                        <div class="mks-fee-input-wrap">
                            <input type="number" step="0.01" min="0" max="100" name="seller_fee"
                                class="mks-fee-input" id="seller_fee"
                                value="<?php echo e(old('seller_fee', $settings->seller_fee ?? 0)); ?>" required>
                            <span class="mks-fee-suffix">%</span>
                        </div>
                        <p class="mks-fee-hint">Deducted from each sale before crediting seller</p>
                    </div>
                </div>

                <div class="mks-fee-card">
                    <div class="mks-fee-card-icon" style="background:linear-gradient(135deg,#f59e0b,#d97706)">
                        <i class="las la-money-bill-wave"></i>
                    </div>
                    <div class="mks-fee-card-body">
                        <label class="mks-fee-label">Withdrawal Fee</label>
                        <div class="mks-fee-input-wrap">
                            <input type="number" step="0.01" min="0" max="100" name="seller_withdrawal_fee"
                                class="mks-fee-input" id="withdrawal_fee"
                                value="<?php echo e(old('seller_withdrawal_fee', $settings->seller_withdrawal_fee ?? 0)); ?>" required>
                            <span class="mks-fee-suffix">%</span>
                        </div>
                        <p class="mks-fee-hint">Deducted from each withdrawal request</p>
                    </div>
                </div>

            </div>

            
            <div class="mks-preview">
                <div class="mks-preview-title"><i class="las la-calculator"></i> Live Fee Preview</div>
                <div class="mks-preview-grid">
                    <div class="mks-preview-item">
                        <span class="mks-preview-label">Example sale of <strong id="prev-sale-amount">100</strong></span>
                        <div class="mks-preview-row">
                            <span>Platform fee (<span id="prev-fee-pct">0</span>%)</span>
                            <span class="mks-preview-deduct">− <span id="prev-fee-amt">0.00</span></span>
                        </div>
                        <div class="mks-preview-row mks-preview-total">
                            <span>Seller receives</span>
                            <span class="mks-preview-earn" id="prev-earn">100.00</span>
                        </div>
                    </div>
                    <div class="mks-preview-item">
                        <span class="mks-preview-label">Example withdrawal of <strong id="prev-wd-amount">100</strong></span>
                        <div class="mks-preview-row">
                            <span>Withdrawal fee (<span id="prev-wd-pct">0</span>%)</span>
                            <span class="mks-preview-deduct">− <span id="prev-wd-fee">0.00</span></span>
                        </div>
                        <div class="mks-preview-row mks-preview-total">
                            <span>Seller receives</span>
                            <span class="mks-preview-earn" id="prev-wd-net">100.00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="mks-section">
            <div class="mks-section-title"><i class="las la-university"></i> Manual Deposit Instructions</div>
            <div class="mks-deposit-card">
                <div class="mks-deposit-icon"><i class="las la-university"></i></div>
                <p class="mks-deposit-desc">This text is shown to users who choose <strong>Manual Deposit</strong> when paying the seller upgrade fee. Include your bank name, account number, account name, or any other payment instructions.</p>
                <textarea name="seller_deposit_info" class="mks-deposit-textarea" rows="7"
                    placeholder="Example:&#10;Bank: First Bank&#10;Account Number: 1234567890&#10;Account Name: John Doe&#10;&#10;After payment, upload your receipt as proof."><?php echo e(old('seller_deposit_info', $settings->seller_deposit_info ?? '')); ?></textarea>
            </div>

            
            <div class="mks-deposit-preview">
                <div class="mks-preview-title"><i class="las la-eye"></i> User Preview</div>
                <div class="mks-deposit-preview-box" id="deposit-preview-box">
                    <span class="mks-deposit-preview-empty">No deposit info set yet.</span>
                </div>
            </div>
        </div>

    </div>

    <div class="mks-footer">
        <button type="submit" class="mks-save-btn">
            <i class="las la-save"></i> Save Settings
        </button>
    </div>

</form>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('style'); ?>
<style>
.mks-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:16px; }
.mks-header-left { display:flex; align-items:center; gap:16px; }
.mks-header-icon { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,#6366f1,#4f46e5); display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; flex-shrink:0; }
.mks-title { font-size:20px; font-weight:700; color:var(--text-primary); margin:0 0 4px; }
.mks-sub { font-size:13px; color:var(--text-secondary); margin:0; }

.mks-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; }
@media(max-width:900px){ .mks-grid { grid-template-columns:1fr; } }

.mks-section { display:flex; flex-direction:column; gap:16px; }
.mks-section-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-secondary); display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--border-color); }

.mks-fee-cards { display:flex; flex-direction:column; gap:12px; }
.mks-fee-card { background:var(--bg-primary); border:1px solid var(--border-color); border-radius:14px; padding:18px; display:flex; align-items:flex-start; gap:14px; transition:border-color .2s; }
.mks-fee-card:focus-within { border-color:var(--primary-color); }
.mks-fee-card-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; flex-shrink:0; }
.mks-fee-card-body { flex:1; min-width:0; }
.mks-fee-label { display:block; font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:8px; }
.mks-fee-input-wrap { display:flex; align-items:center; border:1.5px solid var(--border-color); border-radius:10px; overflow:hidden; background:var(--bg-secondary); transition:border-color .2s; }
.mks-fee-input-wrap:focus-within { border-color:var(--primary-color); background:var(--bg-primary); }
.mks-fee-prefix, .mks-fee-suffix { padding:0 12px; font-size:14px; font-weight:600; color:var(--text-secondary); background:transparent; white-space:nowrap; }
.mks-fee-input { flex:1; border:none; outline:none; background:transparent; padding:10px 12px; font-size:15px; font-weight:600; color:var(--text-primary); width:100%; }
.mks-fee-hint { font-size:12px; color:var(--text-secondary); margin:6px 0 0; }

.mks-preview { background:var(--bg-secondary); border-radius:12px; padding:16px 18px; }
.mks-preview-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-secondary); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.mks-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px){ .mks-preview-grid { grid-template-columns:1fr; } }
.mks-preview-item { background:var(--bg-primary); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.mks-preview-label { font-size:12px; color:var(--text-secondary); }
.mks-preview-row { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--text-primary); }
.mks-preview-deduct { color:#dc2626; font-weight:600; }
.mks-preview-total { border-top:1px solid var(--border-color); padding-top:8px; margin-top:4px; font-weight:700; }
.mks-preview-earn { color:#16a34a; font-size:15px; }

.mks-deposit-card { background:var(--bg-primary); border:1px solid var(--border-color); border-radius:14px; padding:20px; }
.mks-deposit-icon { width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,#0ea5e9,#0284c7); display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; margin-bottom:12px; }
.mks-deposit-desc { font-size:13px; color:var(--text-secondary); line-height:1.6; margin:0 0 14px; }
.mks-deposit-textarea { width:100%; border:1.5px solid var(--border-color); border-radius:10px; padding:12px 14px; font-size:13px; color:var(--text-primary); background:var(--bg-secondary); resize:vertical; outline:none; font-family:inherit; line-height:1.6; transition:border-color .2s; }
.mks-deposit-textarea:focus { border-color:var(--primary-color); background:var(--bg-primary); }

.mks-deposit-preview { background:var(--bg-secondary); border-radius:12px; padding:16px 18px; }
.mks-deposit-preview-box { background:var(--bg-primary); border-radius:10px; padding:14px; font-size:13px; color:var(--text-primary); white-space:pre-line; line-height:1.7; min-height:60px; }
.mks-deposit-preview-empty { color:var(--text-secondary); font-style:italic; }

.mks-footer { display:flex; justify-content:flex-end; }
.mks-save-btn { display:inline-flex; align-items:center; gap:8px; padding:0 28px; height:48px; background:var(--primary-color); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; transition:opacity .2s, transform .2s; }
.mks-save-btn:hover { opacity:.9; transform:translateY(-1px); }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('script'); ?>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const sampleSale = 100;
    const sampleWd   = 100;
    const cur        = '<?php echo e(optional($settings)->website_currency ?? "$"); ?>';

    function updatePreview() {
        const saleFee = parseFloat(document.getElementById('seller_fee').value) || 0;
        const wdFee   = parseFloat(document.getElementById('withdrawal_fee').value) || 0;

        const saleFeeAmt = (sampleSale * saleFee / 100).toFixed(2);
        const saleEarn   = (sampleSale - saleFeeAmt).toFixed(2);
        const wdFeeAmt   = (sampleWd * wdFee / 100).toFixed(2);
        const wdNet      = (sampleWd - wdFeeAmt).toFixed(2);

        document.getElementById('prev-sale-amount').textContent = cur + sampleSale;
        document.getElementById('prev-fee-pct').textContent     = saleFee;
        document.getElementById('prev-fee-amt').textContent     = cur + saleFeeAmt;
        document.getElementById('prev-earn').textContent        = cur + saleEarn;

        document.getElementById('prev-wd-amount').textContent   = cur + sampleWd;
        document.getElementById('prev-wd-pct').textContent      = wdFee;
        document.getElementById('prev-wd-fee').textContent      = cur + wdFeeAmt;
        document.getElementById('prev-wd-net').textContent      = cur + wdNet;
    }

    document.getElementById('seller_fee').addEventListener('input', updatePreview);
    document.getElementById('withdrawal_fee').addEventListener('input', updatePreview);
    updatePreview();

    // Deposit info live preview
    const textarea = document.querySelector('[name="seller_deposit_info"]');
    const previewBox = document.getElementById('deposit-preview-box');

    function updateDepositPreview() {
        const val = textarea.value.trim();
        if (val) {
            previewBox.innerHTML = '';
            previewBox.textContent = val;
        } else {
            previewBox.innerHTML = '<span class="mks-deposit-preview-empty">No deposit info set yet.</span>';
        }
    }

    textarea.addEventListener('input', updateDepositPreview);
    updateDepositPreview();
});
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('backend.layout.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\jjd\socialnum\sstack\mine\core\resources\views/backend/marketplace/settings.blade.php ENDPATH**/ ?>