@extends('tenant.layouts.app')

@section('content')
{{-- Div envolvente: ver nota en reports/list.blade.php --}}
<div>
<div class="page-headers pe-0">
    <ol class="breadcrumbs">
        <li class="breadcrumb-item">
            <a><i data-feather="award" class="stroke-icon"></i> <span>Vendedores</span></a>
        </li>
        <li class="breadcrumb-item">
            <a><span class="text-primary">Incentivo a Vendedor</span></a>
        </li>
    </ol>
</div>

{{-- Progreso EN VIVO del turno actual (Fase 1.5) — solo-lectura, se confirma al cerrar caja --}}
<div id="ms-card" class="card mb-3 border-0 shadow-sm" style="display:none;">
    <div class="card-body py-3">
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-2" style="gap:.5rem;">
            <h5 class="my-0">
                <i class="fas fa-bolt" style="color:#E6A23C;margin-right:6px;"></i>
                Mi turno actual
                <span id="ms-shift" class="badge bg-secondary ms-1"></span>
            </h5>
            <span id="ms-projected" class="fw-bold"></span>
        </div>
        <div class="progress" style="height:12px;border-radius:8px;">
            <div id="ms-bar" class="progress-bar bg-warning" role="progressbar" style="width:0%;transition:width .4s;"></div>
        </div>
        <small id="ms-text" class="text-muted d-block mt-1"></small>
    </div>
</div>

<tenant-seller-incentive-settings
    :type-user="{{json_encode(Auth::user()->type)}}"
    :enabled="{{ $enabled ? 'true' : 'false' }}"
    :meta-morning="{{ $meta_morning }}"
    :bonus-morning="{{ $bonus_morning }}"
    :meta-afternoon="{{ $meta_afternoon }}"
    :bonus-afternoon="{{ $bonus_afternoon }}"
    :meta-night="{{ $meta_night }}"
    :bonus-night="{{ $bonus_night }}"
></tenant-seller-incentive-settings>
{{-- El polling de #ms-card vive en tenant.layouts.app: un <script>
     aca adentro cae dentro del arbol que Vue compila al montar #main y nunca corre. --}}
</div>
@endsection