@extends('tenant.layouts.app')

@section('content')
{{-- Div envolvente: ver nota en reports/list.blade.php / companies/form.blade.php --}}
<div>
<div class="page-headers pe-0">
    <ol class="breadcrumbs">
        <li class="breadcrumb-item">
            <a><i data-feather="user" class="stroke-icon"></i> <span>Mi perfil</span></a>
        </li>
    </ol>
</div>

@if(session('message'))<div class="alert alert-success">{{ session('message') }}</div>@endif
@if($errors->any())<div class="alert alert-danger">{{ $errors->first() }}</div>@endif

<div class="row">
    {{-- Datos del usuario --}}
    <div class="col-12 col-lg-4 mb-3">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body text-center">
                <img src="{{ $user->getPhotoForView() ?? asset('logo/login.png') }}" height="96" width="96"
                     style="object-fit:cover;border-radius:50%;border:3px solid #f1f3f5;" class="mb-2" alt="Foto de perfil">
                <h4 class="my-1">{{ $user->name }}</h4>
                <p class="text-muted mb-1">{{ $user->email }}</p>
                <span class="badge bg-info text-uppercase">{{ $user->type ?? 'usuario' }}</span>

                <form method="POST" action="{{ route('tenant.my_profile.update_photo') }}" enctype="multipart/form-data" class="mt-3">
                    @csrf
                    <input type="file" name="photo" accept="image/*" required
                           class="form-control form-control-sm mb-2"
                           onchange="this.form.querySelector('button').disabled = !this.files.length">
                    <button type="submit" class="btn btn-sm btn-primary w-100" disabled>
                        <i class="fas fa-camera"></i> Cambiar foto
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- Incentivos --}}
    <div class="col-12 col-lg-8 mb-3">
        <h6 class="text-muted text-uppercase small mb-2">Comisión del mes</h6>
        <div class="row">
            <div class="col-12 col-sm-6 mb-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <i class="fas fa-hand-holding-usd mb-1" style="color:#67C23A;font-size:1.5rem;"></i>
                        <div class="text-muted small">Comisión ganada</div>
                        <h3 class="my-0 fw-bold">S/ {{ number_format($commission, 2) }}</h3>
                    </div>
                </div>
            </div>
        </div>

        <h6 class="text-muted text-uppercase small mb-2 mt-2">Incentivo por turno</h6>
        @if(!$incentive_enabled)
            <div class="alert alert-warning">
                El incentivo por turno está <strong>desactivado</strong>. Cuando lo activen, acá vas a ver tu bono.
            </div>
        @else
        <div class="row">
            <div class="col-12 col-sm-6 mb-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <i class="fas fa-trophy mb-1" style="color:#E6A23C;font-size:1.5rem;"></i>
                        <div class="text-muted small">Bono ganado</div>
                        <h3 class="my-0 fw-bold">S/ {{ number_format($bonus_earned, 2) }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 mb-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <i class="fas fa-bolt mb-1" style="color:#409EFF;font-size:1.5rem;"></i>
                        <div class="text-muted small">Por ganar (turno actual)</div>
                        <h3 class="my-0 fw-bold" id="mp-projected">—</h3>
                    </div>
                </div>
            </div>
        </div>

        {{-- Progreso EN VIVO del turno actual --}}
        <div id="ms-card" class="card 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;">
                    <h6 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>
                    </h6>
                    <span id="ms-projected-2" 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>
        @endif
    </div>
</div>
{{-- El polling de #ms-card/#mp-projected vive en tenant.layouts.app:
     un <script> aca adentro cae dentro del arbol que Vue compila al montar #main y nunca corre. --}}
</div>
@endsection