@extends('layouts.app')

@section('title', 'Sales commissions – Setting')

@section('body_class', 'sales-commissions-admin')

@section('content')
@php
    $formSalesperson = $editingSalesperson ?? null;
    $isEdit = $formSalesperson !== null;
    $shopifyHolder = $shopifySalesperson;
    $canAssignShopify = ! $shopifyHolder || ($isEdit && $formSalesperson->id === $shopifyHolder->id);
    $ownerHolder = $ownerSalesperson ?? null;
    $canAssignOwner = ! $ownerHolder || ($isEdit && $formSalesperson->id === $ownerHolder->id);
    $nmiFeeHolder = $nmiTxnFeeSalesperson ?? null;
    $canAssignNmiTxnFee = ! $nmiFeeHolder || ($isEdit && $formSalesperson->id === $nmiFeeHolder->id);
    $defaultCommissionLabel = $defaultCommissionType === 'percentage'
        ? rtrim(rtrim(number_format($defaultCommissionAmount, 2), '0'), '.') . '%'
        : '$' . number_format($defaultCommissionAmount, 2);
@endphp
<div class="sc-page">
    <p class="sc-back"><a href="{{ route('setting.index') }}">← Setting</a></p>

    <header class="sc-header">
        <div class="sc-header__text">
            <h1>Sales commissions</h1>
            <p class="sc-subtitle">
                Manage who earns sale commission and NMI coverage.
                Only one Shopify assignee and one coverage person at a time.
                Defaults from <a href="{{ route('setting.fees') }}">Fees &amp; profit</a>.
            </p>
        </div>
        <a href="{{ route('commissions.index') }}" class="sc-link-btn">View commission report →</a>
    </header>

    @if(session('success'))
        <div class="alert alert-success sc-flash">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger sc-flash">{{ session('error') }}</div>
    @endif

    <div class="sc-summary">
        <div class="sc-summary__card">
            <span class="sc-summary__label">Owner</span>
            <span class="sc-summary__value">{{ $ownerSalesperson?->full_name ?? 'Not set' }}</span>
            <span class="sc-summary__hint">Default on NMI payment links</span>
        </div>
        <div class="sc-summary__card">
            <span class="sc-summary__label">Shopify</span>
            @if($shopifySalesperson)
                <span class="sc-summary__value">{{ $shopifySalesperson->full_name }}</span>
                <span class="sc-summary__hint">Sale commission {{ $shopifySalesperson->commissionLabel() }}</span>
            @else
                <span class="sc-summary__value sc-muted">None active</span>
                <span class="sc-summary__hint">Assign Shopify on one salesperson</span>
            @endif
        </div>
        <div class="sc-summary__card">
            <span class="sc-summary__label">NMI coverage</span>
            @if($nmiTxnFeeSalesperson)
                <span class="sc-summary__value">{{ $nmiTxnFeeSalesperson->full_name }}</span>
                <span class="sc-summary__hint">{{ $nmiTxnFeeSalesperson->nmiCoverageRateLabel() }} when not the seller</span>
            @else
                <span class="sc-summary__value sc-muted">None</span>
                <span class="sc-summary__hint">Optional coverage on others’ NMI sales</span>
            @endif
        </div>
    </div>

    <section class="sc-card">
        <div class="sc-card__head">
            <div>
                <h2>Salespeople</h2>
                <p class="sc-card__sub">Active roster, rates, and channels.</p>
            </div>
            <span class="sc-card__count">{{ $salespeople->count() }} {{ $salespeople->count() === 1 ? 'person' : 'people' }}</span>
        </div>

        @if($salespeople->isEmpty())
            <p class="sc-empty">No salespeople yet. Add one below.</p>
        @else
            <div class="sc-table-wrap">
                <table class="sc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>IG tag</th>
                            <th>Sale commission</th>
                            <th>NMI coverage</th>
                            <th>Channels</th>
                            <th>This month</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($salespeople as $person)
                            @php
                                $monthRow = $monthEarnedBySalesperson->get($person->id);
                                $monthTotal = $monthRow ? (float) $monthRow->total_earned : 0;
                                $monthCount = $monthRow ? (int) $monthRow->order_count : 0;
                            @endphp
                            <tr class="{{ $person->is_active ? '' : 'is-inactive' }} {{ $isEdit && $formSalesperson->id === $person->id ? 'is-editing' : '' }}">
                                <td>
                                    <div class="sc-name">
                                        <strong>{{ $person->full_name }}</strong>
                                        @if($person->is_owner)
                                            <span class="sc-pill sc-pill--owner">Owner</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="sc-nowrap">{{ $person->phone }}</td>
                                <td>
                                    @if($person->instagram_hashtag)
                                        <code class="sc-tag">{{ $person->instagram_hashtag }}</code>
                                    @else
                                        <span class="sc-muted">—</span>
                                    @endif
                                </td>
                                <td class="sc-nowrap">
                                    @if($person->is_owner)
                                        <span class="sc-muted">N/A</span>
                                    @else
                                        <div class="sc-rate-cell">
                                            <strong>{{ $person->commissionLabel() }}</strong>
                                            <span class="sc-rate-meta">{{ $person->commission_type === 'percentage' ? 'of subtotal' : 'fixed / sale' }}</span>
                                        </div>
                                    @endif
                                </td>
                                <td class="sc-nowrap">
                                    @if($person->is_owner)
                                        <span class="sc-muted">—</span>
                                    @elseif($person->nmi_txn_fee_enabled)
                                        <div class="sc-rate-cell">
                                            <strong class="sc-rate-coverage">{{ $person->nmiCoverageRateLabel() }}</strong>
                                            <span class="sc-rate-meta">{{ $person->nmiTxnFeeType() === 'percentage' ? 'of subtotal' : 'fixed / sale' }}</span>
                                        </div>
                                    @else
                                        <span class="sc-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    @if($person->is_owner)
                                        <span class="sc-muted">N/A</span>
                                    @else
                                        <div class="sc-channels">
                                            @forelse($person->channelBadges() as $badge)
                                                <span class="sc-pill">{{ $badge }}</span>
                                            @empty
                                                <span class="sc-muted">—</span>
                                            @endforelse
                                        </div>
                                    @endif
                                </td>
                                <td class="sc-nowrap">
                                    @if($monthCount > 0)
                                        <span class="sc-amount">${{ number_format($monthTotal, 2) }}</span>
                                        <span class="sc-muted sc-month-count">{{ $monthCount }}</span>
                                    @else
                                        <span class="sc-muted">$0.00</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="sc-status {{ $person->is_active ? 'is-on' : 'is-off' }}">
                                        {{ $person->is_active ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td class="sc-actions-cell">
                                    <div class="sc-actions">
                                        @if($person->is_active)
                                            <a href="{{ route('setting.sales-commissions', ['edit' => $person->id]) }}" class="sc-btn {{ $isEdit && $formSalesperson->id === $person->id ? 'sc-btn--active' : '' }}">Edit</a>
                                            @unless($person->is_owner)
                                                <form action="{{ route('setting.salespeople.deactivate', $person) }}" method="POST" onsubmit="return confirm('Deactivate {{ $person->full_name }}?');">
                                                    @csrf
                                                    <button type="submit" class="sc-btn sc-btn--warn">Deactivate</button>
                                                </form>
                                            @endunless
                                        @endif
                                        @if(! $person->is_owner && ($person->sales_commissions_count ?? 0) === 0)
                                            <form action="{{ route('setting.salespeople.destroy', $person) }}" method="POST" onsubmit="return confirm('Delete {{ $person->full_name }} permanently?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="sc-btn sc-btn--danger">Delete</button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>

    <section class="sc-card sc-card--form {{ $isEdit ? 'is-editing' : '' }}" id="salesperson-form">
        <div class="sc-card__head">
            <div>
                <h2>{{ $isEdit ? 'Edit salesperson' : 'Add salesperson' }}</h2>
                <p class="sc-card__sub">
                    @if($isEdit)
                        Editing <strong>{{ $formSalesperson->full_name }}</strong>
                    @else
                        Create a new seller profile and commission rules.
                    @endif
                </p>
            </div>
            @if($isEdit)
                <a href="{{ route('setting.sales-commissions') }}" class="sc-cancel">Cancel edit</a>
            @endif
        </div>

        <form action="{{ $isEdit ? route('setting.salespeople.update', $formSalesperson) : route('setting.salespeople.store') }}" method="POST" class="sc-form">
            @csrf
            @if($isEdit)
                @method('PUT')
            @endif

            <div class="sc-panel">
                <div class="sc-panel__head">
                    <h3>Profile</h3>
                    <p>Contact details and Story Purchase Instagram tag.</p>
                </div>
                <div class="sc-panel__body">
                    <div class="sc-form-grid">
                        <div class="sc-field">
                            <label for="full_name">Full name <span class="sc-req">*</span></label>
                            <input type="text" name="full_name" id="full_name" required maxlength="255"
                                value="{{ old('full_name', $formSalesperson->full_name ?? '') }}">
                            @error('full_name')<p class="sc-error">{{ $message }}</p>@enderror
                        </div>
                        <div class="sc-field">
                            <label for="phone">Phone <span class="sc-req">*</span></label>
                            <input type="text" name="phone" id="phone" required maxlength="30"
                                value="{{ old('phone', $formSalesperson->phone ?? '') }}" placeholder="+1 786 555 0100">
                            @error('phone')<p class="sc-error">{{ $message }}</p>@enderror
                            <span class="sc-hint">E.164 or 10-digit US number.</span>
                        </div>
                        <div class="sc-field">
                            <label for="email">Email <span class="sc-optional">optional</span></label>
                            <input type="email" name="email" id="email" maxlength="255"
                                value="{{ old('email', $formSalesperson->email ?? '') }}">
                            @error('email')<p class="sc-error">{{ $message }}</p>@enderror
                        </div>
                        <div class="sc-field">
                            <label for="instagram_hashtag">Instagram hashtag <span class="sc-optional">optional</span></label>
                            <input type="text" name="instagram_hashtag" id="instagram_hashtag" maxlength="50"
                                value="{{ old('instagram_hashtag', $formSalesperson->instagram_hashtag ?? '') }}" placeholder="#maria">
                            @error('instagram_hashtag')<p class="sc-error">{{ $message }}</p>@enderror
                            <span class="sc-hint">Matched in Story Purchase caption or media (AI). Unique per salesperson.</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="sc-panel">
                <div class="sc-panel__head">
                    <h3>Role</h3>
                    <p>Only one Owner. Pre-selected on NMI links; does not earn commission.</p>
                </div>
                <div class="sc-panel__body">
                    <label class="sc-toggle {{ $canAssignOwner ? '' : 'is-locked' }}">
                        <input type="hidden" name="is_owner" value="0">
                        <input type="checkbox" name="is_owner" value="1" id="is_owner"
                            {{ old('is_owner', $formSalesperson->is_owner ?? false) ? 'checked' : '' }}
                            @disabled(! $canAssignOwner)>
                        <span class="sc-toggle__box"></span>
                        <span class="sc-toggle__text">
                            <strong>Owner</strong>
                            <small>Only one at a time</small>
                        </span>
                    </label>
                    @if(! $canAssignOwner && $ownerHolder)
                        <p class="sc-lock-hint">
                            Assigned to <strong>{{ $ownerHolder->full_name }}</strong>.
                            <a href="{{ route('setting.sales-commissions', ['edit' => $ownerHolder->id]) }}#salesperson-form">Edit {{ $ownerHolder->full_name }}</a> to remove Owner first.
                        </p>
                    @endif
                </div>
            </div>

            <div id="salespeople-seller-sections" class="{{ old('is_owner', $formSalesperson->is_owner ?? false) ? 'is-hidden' : '' }}">
                <div class="sc-panel">
                    <div class="sc-panel__head">
                        <h3>Sale commission</h3>
                        <p>Earned when this person is the assigned seller (Shopify, NMI link, or layaway).</p>
                    </div>
                    <div class="sc-panel__body">
                        <div class="sc-form-grid sc-form-grid--2">
                            <div class="sc-field">
                                <label for="commission_type">Type <span class="sc-req">*</span></label>
                                <select name="commission_type" id="commission_type" class="salespeople-seller-field">
                                    @php $ctype = old('commission_type', $formSalesperson->commission_type ?? $defaultCommissionType); @endphp
                                    <option value="fixed" @selected($ctype === 'fixed')>Fixed $</option>
                                    <option value="percentage" @selected($ctype === 'percentage')>% of sale subtotal</option>
                                </select>
                            </div>
                            <div class="sc-field">
                                <label for="commission_amount">Amount <span class="sc-req">*</span></label>
                                <input type="number" name="commission_amount" id="commission_amount" class="salespeople-seller-field" min="0" step="0.01"
                                    value="{{ old('commission_amount', $formSalesperson->commission_amount ?? $defaultCommissionAmount) }}">
                            </div>
                        </div>
                        <p class="sc-hint">Default from Fees &amp; profit: <strong>{{ $defaultCommissionLabel }}</strong>.</p>
                    </div>
                </div>

                <div class="sc-panel">
                    <div class="sc-panel__head">
                        <h3>Sales channels</h3>
                        <p>Only one Shopify assignee. NMI channels are chosen when sending payment links.</p>
                    </div>
                    <div class="sc-panel__body">
                        <div class="sc-channel-grid">
                            <label class="sc-channel">
                                <input type="hidden" name="nmi_link_enabled" value="0">
                                <input type="checkbox" name="nmi_link_enabled" value="1" class="salespeople-seller-field" {{ old('nmi_link_enabled', $formSalesperson->nmi_link_enabled ?? false) ? 'checked' : '' }}>
                                <span class="sc-channel__title">NMI payment link</span>
                                <span class="sc-channel__desc">Can be selected on one-time NMI links</span>
                            </label>
                            <label class="sc-channel">
                                <input type="hidden" name="nmi_layaway_enabled" value="0">
                                <input type="checkbox" name="nmi_layaway_enabled" value="1" class="salespeople-seller-field" {{ old('nmi_layaway_enabled', $formSalesperson->nmi_layaway_enabled ?? false) ? 'checked' : '' }}>
                                <span class="sc-channel__title">NMI layaway</span>
                                <span class="sc-channel__desc">Can be selected on layaway plans</span>
                            </label>
                            <label class="sc-channel {{ $canAssignShopify ? '' : 'is-locked' }}">
                                <input type="hidden" name="shopify_enabled" value="0">
                                <input type="checkbox" name="shopify_enabled" value="1" id="shopify_enabled" class="salespeople-seller-field"
                                    {{ old('shopify_enabled', $formSalesperson->shopify_enabled ?? false) ? 'checked' : '' }}
                                    @disabled(! $canAssignShopify)>
                                <span class="sc-channel__title">Shopify <span class="sc-channel__badge">only one</span></span>
                                <span class="sc-channel__desc">Receives Shopify website sale commissions</span>
                            </label>
                        </div>
                        @if(! $canAssignShopify && $shopifyHolder)
                            <p class="sc-lock-hint">
                                Shopify is assigned to <strong>{{ $shopifyHolder->full_name }}</strong>.
                                <a href="{{ route('setting.sales-commissions', ['edit' => $shopifyHolder->id]) }}#salesperson-form">Edit {{ $shopifyHolder->full_name }}</a> first.
                            </p>
                        @endif
                    </div>
                </div>

                <div class="sc-panel sc-panel--accent">
                    <div class="sc-panel__head">
                        <h3>NMI coverage commission</h3>
                        <p>Only <strong>one</strong> salesperson. Paid on NMI / layaway when they are <strong>not</strong> the assigned seller. Never stacked with sale commission.</p>
                    </div>
                    <div class="sc-panel__body">
                        <label class="sc-toggle {{ $canAssignNmiTxnFee ? '' : 'is-locked' }}">
                            <input type="hidden" name="nmi_txn_fee_enabled" value="0">
                            <input type="checkbox" name="nmi_txn_fee_enabled" value="1" id="nmi_txn_fee_enabled" class="salespeople-seller-field"
                                {{ old('nmi_txn_fee_enabled', $formSalesperson->nmi_txn_fee_enabled ?? false) ? 'checked' : '' }}
                                @disabled(! $canAssignNmiTxnFee)>
                            <span class="sc-toggle__box"></span>
                            <span class="sc-toggle__text">
                                <strong>Earn NMI coverage commission</strong>
                                <small>Enable only for the coverage person</small>
                            </span>
                        </label>

                        @if(! $canAssignNmiTxnFee && $nmiFeeHolder)
                            <p class="sc-lock-hint">
                                Assigned to <strong>{{ $nmiFeeHolder->full_name }}</strong>
                                ({{ $nmiFeeHolder->nmiCoverageRateLabel() }}).
                                <a href="{{ route('setting.sales-commissions', ['edit' => $nmiFeeHolder->id]) }}#salesperson-form">Edit {{ $nmiFeeHolder->full_name }}</a> first.
                            </p>
                        @endif

                        <div class="sc-form-grid sc-form-grid--2 sc-coverage-fields">
                            <div class="sc-field">
                                <label for="nmi_txn_fee_type">Type <span class="sc-req">*</span></label>
                                <select name="nmi_txn_fee_type" id="nmi_txn_fee_type" class="salespeople-seller-field">
                                    @php $nmiFeeType = old('nmi_txn_fee_type', $formSalesperson->nmi_txn_fee_type ?? $defaultNmiTxnFeeType); @endphp
                                    <option value="fixed" @selected($nmiFeeType === 'fixed')>Fixed $</option>
                                    <option value="percentage" @selected($nmiFeeType === 'percentage')>% of sale subtotal</option>
                                </select>
                                @error('nmi_txn_fee_type')<p class="sc-error">{{ $message }}</p>@enderror
                            </div>
                            <div class="sc-field">
                                <label for="nmi_txn_fee_amount">Amount <span class="sc-req">*</span></label>
                                <input type="number" name="nmi_txn_fee_amount" id="nmi_txn_fee_amount" class="salespeople-seller-field" min="0" step="0.01"
                                    value="{{ old('nmi_txn_fee_amount', $formSalesperson->nmi_txn_fee_amount ?? $defaultNmiTxnFeeAmount) }}">
                                @error('nmi_txn_fee_amount')<p class="sc-error">{{ $message }}</p>@enderror
                            </div>
                        </div>
                        <p class="sc-hint">Example: Fixed <strong>$30</strong> per covered sale, or <strong>2%</strong> of that sale’s subtotal. Default remains Fixed $.</p>
                    </div>
                </div>
            </div>

            <div class="sc-form-actions">
                <button type="submit" class="sc-submit">{{ $isEdit ? 'Save changes' : 'Add salesperson' }}</button>
                @if($isEdit)
                    <a href="{{ route('setting.sales-commissions') }}" class="sc-btn sc-btn--ghost">Cancel</a>
                @endif
            </div>
        </form>
    </section>
</div>
@push('styles')
<style>
body.sales-commissions-admin main.main > .container {
    max-width: 1680px !important;
    width: 100% !important;
}
.sc-page { width: 100%; max-width: none; color: #0f172a; }
.sc-back { margin: 0 0 0.75rem; font-size: 0.875rem; }
.sc-back a { color: #2563eb; text-decoration: none; font-weight: 600; }
.sc-back a:hover { text-decoration: underline; }
.sc-flash { margin-bottom: 1rem; }

.sc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.15rem;
}
.sc-header h1 {
    margin: 0 0 0.35rem;
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.sc-subtitle {
    margin: 0;
    max-width: 48rem;
    font-size: 0.92rem;
    color: #64748b;
    line-height: 1.5;
}
.sc-subtitle a { color: #2563eb; font-weight: 600; text-decoration: none; }
.sc-subtitle a:hover { text-decoration: underline; }
.sc-link-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.95rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 650;
    text-decoration: none;
}
.sc-link-btn:hover { background: #f8fafc; border-color: #94a3b8; }

.sc-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}
.sc-summary__card {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.sc-summary__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.35rem;
}
.sc-summary__value {
    display: block;
    font-size: 1.08rem;
    font-weight: 750;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.sc-summary__hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.35;
}

.sc-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 1.15rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.sc-card--form.is-editing { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); }
.sc-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
}
.sc-card__head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 750;
    color: #0f172a;
}
.sc-card__sub {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: #64748b;
}
.sc-card__count {
    flex-shrink: 0;
    margin-top: 0.15rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
}
.sc-cancel { font-size: 0.875rem; color: #2563eb; text-decoration: none; font-weight: 650; }
.sc-cancel:hover { text-decoration: underline; }
.sc-empty { margin: 0; padding: 1.35rem 1.25rem; color: #64748b; }

.sc-table-wrap { width: 100%; overflow-x: auto; }
.sc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.sc-table th {
    padding: 0.7rem 0.95rem;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f8fafc;
    background: #1e293b;
    border-bottom: 1px solid #0f172a;
    white-space: nowrap;
}
.sc-table td {
    padding: 0.8rem 0.95rem;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
    color: #1e293b;
    background: #fff;
}
.sc-table tbody tr:nth-child(even) td { background: #fafbfc; }
.sc-table tbody tr:hover td { background: #f1f5f9; }
.sc-table tr.is-inactive { opacity: 0.58; }
.sc-table tr.is-editing td { background: #eff6ff !important; }
.sc-nowrap { white-space: nowrap; }
.sc-muted { color: #94a3b8; font-weight: 400; }
.sc-amount { font-variant-numeric: tabular-nums; font-weight: 700; color: #0f172a; }
.sc-month-count {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 0.7rem;
    font-weight: 700;
}

.sc-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.sc-name strong { font-weight: 700; }
.sc-channels { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sc-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.48rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.sc-pill--owner { background: #f3e8ff; color: #7c3aed; }
.sc-tag {
    display: inline-block;
    padding: 0.14rem 0.42rem;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.78rem;
}
.sc-rate-cell {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    line-height: 1.25;
}
.sc-rate-cell strong { font-size: 0.92rem; font-weight: 750; color: #0f172a; }
.sc-rate-coverage { color: #0f766e !important; }
.sc-rate-meta {
    font-size: 0.68rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.sc-status {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
}
.sc-status.is-on { background: #dcfce7; color: #166534; }
.sc-status.is-off { background: #f1f5f9; color: #64748b; }

.sc-actions-cell { width: 1%; white-space: nowrap; }
.sc-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
}
.sc-actions form { display: contents; }
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.85rem;
    padding: 0 0.7rem;
    border-radius: 7px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.sc-btn:hover { background: #f8fafc; border-color: #94a3b8; color: #0f172a; }
.sc-btn--active { background: #1e293b; border-color: #1e293b; color: #fff; }
.sc-btn--active:hover { background: #0f172a; color: #fff; }
.sc-btn--warn { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
.sc-btn--warn:hover { background: #fef3c7; }
.sc-btn--danger { color: #b91c1c; border-color: #fecaca; background: #fff; }
.sc-btn--danger:hover { background: #fef2f2; }
.sc-btn--ghost { height: 2.45rem; padding: 0 0.95rem; font-size: 0.875rem; }

.sc-form { padding: 1rem 1.25rem 1.25rem; display: grid; gap: 0.9rem; }
.sc-panel {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.sc-panel--accent {
    border-color: #99f6e4;
    background: linear-gradient(180deg, #f0fdfa 0%, #fff 55%);
}
.sc-panel__head {
    padding: 0.85rem 1rem 0.75rem;
    border-bottom: 1px solid #eef2f7;
    background: #f8fafc;
}
.sc-panel--accent .sc-panel__head {
    background: rgba(240, 253, 250, 0.85);
    border-bottom-color: #ccfbf1;
}
.sc-panel__head h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 750;
    color: #0f172a;
}
.sc-panel__head p {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
    max-width: 48rem;
}
.sc-panel__body { padding: 1rem; }

.sc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}
.sc-form-grid--2 { max-width: 30rem; }
.sc-field { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; }
.sc-field label {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
}
.sc-optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: #94a3b8;
    font-size: 0.75rem;
}
.sc-field input,
.sc-field select {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.45rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    font-size: 0.92rem;
    background: #fff;
    color: #0f172a;
}
.sc-field input:focus,
.sc-field select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.sc-hint { margin: 0.7rem 0 0; font-size: 0.8rem; color: #64748b; line-height: 1.4; }
.sc-hint strong { color: #0f172a; }
.sc-error { margin: 0; color: #dc2626; font-size: 0.82rem; }
.sc-req { color: #dc2626; }

.sc-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    cursor: pointer;
    margin: 0;
}
.sc-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sc-toggle__box {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    border: 1.5px solid #94a3b8;
    border-radius: 5px;
    background: #fff;
    box-shadow: inset 0 0 0 0 #2563eb;
    transition: 0.15s ease;
}
.sc-toggle input:checked + .sc-toggle__box {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: inset 0 0 0 3px #fff;
}
.sc-toggle__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.sc-toggle__text strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}
.sc-toggle__text small {
    font-size: 0.78rem;
    color: #64748b;
}
.sc-toggle.is-locked { opacity: 0.6; cursor: not-allowed; }
.sc-lock-hint {
    margin: 0.7rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}
.sc-lock-hint a { color: #2563eb; font-weight: 650; text-decoration: none; }
.sc-lock-hint a:hover { text-decoration: underline; }

.sc-channel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}
.sc-channel {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.65rem;
    row-gap: 0.15rem;
    align-items: start;
    margin: 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
}
.sc-channel:hover { border-color: #cbd5e1; background: #fff; }
.sc-channel input[type="checkbox"] {
    grid-row: 1 / span 2;
    margin-top: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
}
.sc-channel__title {
    grid-column: 2;
    font-size: 0.88rem;
    font-weight: 750;
    color: #0f172a;
}
.sc-channel__badge {
    display: inline-flex;
    margin-left: 0.25rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.65rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: 0.05em;
}
.sc-channel__desc {
    grid-column: 2;
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.35;
}
.sc-channel.is-locked { opacity: 0.6; cursor: not-allowed; }

.sc-coverage-fields { margin-top: 0.95rem; }

.sc-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding-top: 0.25rem;
}
.sc-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0 1.15rem;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    cursor: pointer;
}
.sc-submit:hover { background: #1d4ed8; }

#salespeople-seller-sections.is-hidden { display: none; }

@media (max-width: 1100px) {
    .sc-channel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .sc-summary { grid-template-columns: 1fr; }
    .sc-header { flex-direction: column; }
    .sc-form-grid { grid-template-columns: 1fr; }
    .sc-form-grid--2 { max-width: none; }
    .sc-actions { flex-wrap: wrap; }
}
</style>
@endpush
@push('scripts')
<script>
(function () {
    var ownerCheckbox = document.getElementById('is_owner');
    var sellerSections = document.getElementById('salespeople-seller-sections');
    if (!ownerCheckbox || !sellerSections) {
        return;
    }

    function syncOwnerForm() {
        var isOwner = ownerCheckbox.checked;
        sellerSections.classList.toggle('is-hidden', isOwner);
        sellerSections.querySelectorAll('.salespeople-seller-field').forEach(function (field) {
            if (field.type === 'checkbox') {
                if (isOwner) {
                    field.checked = false;
                }
                field.disabled = isOwner;
            } else {
                field.required = !isOwner;
                field.disabled = isOwner;
            }
        });
    }

    ownerCheckbox.addEventListener('change', syncOwnerForm);
    syncOwnerForm();

    @if($isEdit)
    var formCard = document.getElementById('salesperson-form');
    if (formCard) {
        formCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    @endif
})();
</script>
@endpush
@endsection