@extends('tenant.layouts.app')

@section('content')
<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>

    {{-- Puntos --}}
    <div class="col-12 col-lg-8 mb-3">
        @if(!$incentive_enabled)
            <div class="alert alert-warning">
                El incentivo a vendedor está <strong>desactivado</strong>. Cuando lo activen, acá vas a ver tus puntos.
            </div>
        @endif

        <div class="row">
            <div class="col-12 col-sm-4 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">Puntos ganados</div>
                        <h3 class="my-0 fw-bold">{{ number_format($points_earned, 2) }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-4 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 class="col-12 col-sm-4 mb-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <i class="fas fa-gift mb-1" style="color:#67C23A;font-size:1.5rem;"></i>
                        <div class="text-muted small">Canjeables</div>
                        <h3 class="my-0 fw-bold">{{ number_format($points_redeemable, 2) }}</h3>
                        <small class="text-muted">canje próximamente</small>
                    </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>
    </div>
</div>

<script>
(function () {
    var sol = function (n) { return 'S/ ' + Number(n).toFixed(2); };
    function render(d) {
        var proj = document.getElementById('mp-projected');
        var card = document.getElementById('ms-card');
        if (!d.enabled || !d.has_open_cash) {
            if (proj) proj.textContent = '0';
            if (card) card.style.display = 'none';
            return;
        }
        if (proj) proj.textContent = Number(d.projected_points).toFixed(0);
        if (!card) return;
        card.style.display = '';
        document.getElementById('ms-shift').textContent = d.use_shifts
            ? (d.shift_type === 'night' ? '🌙 Noche' : (d.shift_type === 'day' ? '☀️ Día' : '— sin turno'))
            : 'Sin turnos';
        var bar = document.getElementById('ms-bar');
        bar.style.width = d.progress_pct + '%';
        bar.className = 'progress-bar ' + (d.reached ? 'bg-success' : 'bg-warning');
        document.getElementById('ms-projected-2').textContent = d.reached
            ? ('🏆 ganarás ' + Number(d.projected_points).toFixed(0) + ' pts al cerrar')
            : ('faltan ' + sol(d.remaining) + ' para tu punto');
        document.getElementById('ms-text').textContent = sol(d.sales_net) + ' / meta ' + sol(d.meta)
            + (d.reached ? ' · ¡meta cumplida! (se confirma al cerrar la caja)' : '');
    }
    function load() {
        fetch('{{ route('tenant.seller_incentive.my_shift') }}', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.json(); })
            .then(render)
            .catch(function () {});
    }
    load();
    setInterval(load, 15000);
})();
</script>
@endsection