@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')

<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

    {{-- Page Title --}}
    <div class="container-fluid">
        <div class="page-title">
            <div class="row align-items-center">
                <div class="col-sm-6 ps-0">
                    <h3><i class="fas fa-user-tie mr-2" style="color:#c9a96e"></i>Sales</h3>
                    <p class="text-muted mb-0" style="font-size:13px">Frontend registered sales agents</p>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/{{ $tenantSlug }}/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">Sales</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    {{-- Flash --}}
    @foreach(['success','error','warning'] as $t)
        @if(session($t))
        <div class="container-fluid mb-2">
            <div class="alert alert-{{ $t==='error'?'danger':$t }} alert-dismissible fade show">
                {{ session($t) }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        </div>
        @endif
    @endforeach

    {{-- Stat cards --}}
    <div class="container-fluid mb-3">
        <div class="row">
            @foreach([
                ['label'=>'Total Sales',  'value'=>$stats['total'],    'color'=>'#c9a96e', 'icon'=>'fa-user-tie'],
                ['label'=>'Active',       'value'=>$stats['active'],   'color'=>'#22c55e', 'icon'=>'fa-check-circle'],
                ['label'=>'Inactive',     'value'=>$stats['inactive'], 'color'=>'#ef4444', 'icon'=>'fa-ban'],
            ] as $c)
            <div class="col-md-4 col-6 mb-3">
                <div class="card shadow-sm h-100" style="border-left:4px solid {{ $c['color'] }}">
                    <div class="card-body py-3 px-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <div class="text-muted text-uppercase" style="font-size:11px">{{ $c['label'] }}</div>
                            <i class="fas {{ $c['icon'] }} text-muted" style="opacity:0.4"></i>
                        </div>
                        <div style="font-size:26px;font-weight:700;color:{{ $c['color'] }}">{{ $c['value'] }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">

            {{-- Left: Sales table --}}
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap" style="gap:8px">
                        <h6 class="mb-0">{{ $salesUsers->total() }} Sales Agents</h6>
                        <form method="GET" class="d-flex flex-wrap" style="gap:6px">
                            <input type="text" name="search" class="form-control form-control-sm"
                                placeholder="Search name / email / team"
                                value="{{ request('search') }}" style="max-width:200px">
                            <select name="status" class="form-control form-control-sm" style="max-width:120px">
                                <option value="">All Status</option>
                                <option value="active"   {{ request('status')==='active'?'selected':'' }}>Active</option>
                                <option value="inactive" {{ request('status')==='inactive'?'selected':'' }}>Inactive</option>
                            </select>
                            <button class="btn btn-primary btn-sm"><i class="fas fa-filter mr-1"></i>Filter</button>
                            <a href="/{{ $tenantSlug }}/admin/sales/dashboard" class="btn btn-outline-secondary btn-sm"><i class="fas fa-times"></i></a>
                        </form>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0" style="font-size:13px">
                                <thead style="background:#f8f9fa">
                                    <tr>
                                        <th>Sales Agent</th>
                                        <th>Team / Dept</th>
                                        <th>Commission</th>
                                        <th>Bookings</th>
                                        <th>Earned</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($salesUsers as $sp)
                                    <tr>
                                        <td>
                                            <a href="/{{ $tenantSlug }}/admin/users/{{ $sp->id }}" style="text-decoration:none">
                                                <div style="font-weight:600;color:#1e293b">{{ $sp->name }}</div>
                                                <div style="font-size:12px;color:#94a3b8">{{ $sp->email }}</div>
                                            </a>
                                        </td>
                                        <td style="color:#475569;font-size:12px">
                                            {{ $sp->broker_company ?: '—' }}
                                        </td>
                                        <td>
                                            <span style="font-weight:700;color:#c9a96e">
                                                {{ $sp->commission_rate ?? '—' }}%
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge badge-secondary">{{ $sp->broker_bookings_count }}</span>
                                        </td>
                                        <td style="font-weight:600;color:#22c55e;font-size:12px">
                                            ₹{{ number_format($sp->commission_earned ?? 0, 0) }}
                                        </td>
                                        <td>
                                            @if($sp->status === 'active')
                                                <span class="badge badge-success">Active</span>
                                            @else
                                                <span class="badge badge-danger">Inactive</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex" style="gap:4px">
                                                <a href="/{{ $tenantSlug }}/admin/users/{{ $sp->id }}"
                                                    class="btn btn-sm btn-outline-primary"
                                                    title="View Profile">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <button class="btn btn-sm btn-outline-secondary"
                                                    title="Edit Commission Rate"
                                                    onclick="editCommission({{ $sp->id }}, '{{ addslashes($sp->name) }}', '{{ $sp->commission_rate ?? 2 }}')">
                                                    <i class="fas fa-percentage"></i>
                                                </button>
                                                <form method="POST" action="/{{ $tenantSlug }}/admin/users/{{ $sp->id }}/toggle-status">
                                                    @csrf
                                                    <button class="btn btn-sm {{ $sp->status==='active'?'btn-outline-danger':'btn-outline-success' }}"
                                                        title="{{ $sp->status==='active'?'Deactivate':'Activate' }}"
                                                        onclick="return confirm('{{ $sp->status==='active'?'Deactivate':'Activate' }} {{ $sp->name }}?')">
                                                        <i class="fas {{ $sp->status==='active'?'fa-ban':'fa-check' }}"></i>
                                                    </button>
                                                </form>
                                                <button class="btn btn-sm btn-outline-warning"
                                                    title="Send Notification"
                                                    onclick="quickNotify({{ $sp->id }}, '{{ addslashes($sp->name) }}')">
                                                    <i class="fas fa-bell"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-4">No sales agents found.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @if($salesUsers->hasPages())
                    <div class="card-footer">{{ $salesUsers->links() }}</div>
                    @endif
                </div>
            </div>

            {{-- Right: Broadcast Notification --}}
            <div class="col-lg-4">
                <div data-sales-page></div>
                @include('Users._notify_panel', [
                    'targetOptions' => [
                        'all_sales' => '📢 All Sales (' . $stats['active'] . ' active)',
                    ],
                    'defaultTarget'  => 'all_sales',
                    'isBrokerPage'   => true,
                    'tenantSlug' => $tenantSlug
                ])
            </div>

        </div>
    </div>

</div>
</div>
</section>

{{-- Edit Commission Modal --}}
<div class="modal fade" id="commissionModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Edit Commission Rate</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form method="POST" id="commissionForm">
                @csrf @method('PATCH')
                <div class="modal-body">
                    <p id="commissionBrokerName" style="font-weight:600;margin-bottom:12px"></p>
                    <div class="form-group">
                        <label style="font-size:12px;font-weight:600">Commission Rate (%)</label>
                        <input type="number" name="commission_rate" id="commissionRate"
                            class="form-control form-control-sm"
                            min="0" max="100" step="0.5" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning btn-sm" style="color:#fff">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@include('Partials.footer')

<script>
function quickNotify(userId, userName) {
    document.getElementById('notifyTarget').value = 'user:' + userId;
    document.getElementById('notifyTargetLabel').textContent = '→ ' + userName + ' only';
    document.getElementById('notifyPanel').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function editCommission(spId, spName, currentRate) {
    document.getElementById('commissionBrokerName').textContent = spName;
    document.getElementById('commissionRate').value = currentRate;
    document.getElementById('commissionForm').action = '/{{ $tenantSlug }}/admin/sales/' + spId + '/commission';
    $('#commissionModal').modal('show');
}
</script>