{{-- resources/views/temperatures/today.blade.php --}}
@extends('layouts.app')

@section('title', 'Relevés températures')

@section('styles')
<style>
    :root {
        --tc-ok:    #16a34a;
        --tc-ok-bg: #f0fdf4;
        --tc-ko:    #dc2626;
        --tc-ko-bg: #fef2f2;
        --tc-warn:  #d97706;
        --tc-empty: #64748b;
        --tc-card:  #ffffff;
        --tc-border:#e2e8f0;
        --tc-radius: 14px;
    }

    body { background: #f8fafc; }

    /* ── Header ── */
    .tc-header {
        background: #0f172a;
        color: #fff;
        padding: 20px 20px 18px;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .tc-header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
    }
    .tc-header h1 {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        letter-spacing: -.3px;
    }
    .tc-period-badge {
        font-size: 11px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    .tc-period-badge.morning { background: #fef3c7; color: #92400e; }
    .tc-period-badge.evening { background: #ede9fe; color: #4c1d95; }
    .tc-header-date {
        font-size: 13px;
        color: #94a3b8;
        margin: 0;
    }

    /* ── Progress bar ── */
    .tc-progress-wrap {
        background: #0f172a;
        padding: 0 20px 16px;
    }
    .tc-progress-info {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #64748b;
        margin-bottom: 6px;
    }
    .tc-progress-track {
        height: 4px;
        background: #1e293b;
        border-radius: 2px;
        overflow: hidden;
    }
    .tc-progress-bar {
        height: 100%;
        background: #22c55e;
        border-radius: 2px;
        transition: width .4s ease;
    }

    /* ── List ── */
    .tc-list {
        padding: 16px 16px 100px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* ── Card enceinte ── */
    .tc-card {
        background: var(--tc-card);
        border: 1.5px solid var(--tc-border);
        border-radius: var(--tc-radius);
        overflow: hidden;
        transition: border-color .15s;
    }
    .tc-card.is-ok   { border-color: #bbf7d0; }
    .tc-card.is-ko   { border-color: #fecaca; background: #fffafa; }
    .tc-card.is-warn { border-color: #fed7aa; }

    .tc-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px 10px;
    }
    .tc-num {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-weight: 700;
        color: #334155;
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }
    .tc-name { font-size: 14px; font-weight: 600; color: #1e293b; margin: 0 0 2px; }
    .tc-target { font-size: 12px; color: #64748b; margin: 0; }
    .tc-status-icon {
        margin-left: auto;
        font-size: 20px;
        flex-shrink: 0;
    }

    /* ── Saisie température ── */
    .tc-input-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 16px 14px;
    }
    .tc-temp-wrap {
        position: relative;
        flex: 1;
    }
    .tc-temp-input {
        width: 100%;
        height: 48px;
        border: 1.5px solid #e2e8f0;
        border-radius: 10px;
        font-size: 22px;
        font-weight: 700;
        text-align: center;
        color: #0f172a;
        background: #f8fafc;
        -webkit-appearance: none;
        appearance: none;
        outline: none;
        transition: border-color .15s, background .15s;
        font-variant-numeric: tabular-nums;
    }
    .tc-temp-input:focus {
        border-color: #3b82f6;
        background: #fff;
    }
    .tc-temp-unit {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        color: #94a3b8;
        pointer-events: none;
    }
    .tc-validate-btn {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        background: #0f172a;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background .15s, transform .1s;
        -webkit-tap-highlight-color: transparent;
    }
    .tc-validate-btn:active { transform: scale(.94); }
    .tc-validate-btn svg { width: 20px; height: 20px; stroke: #fff; fill: none; }
    .tc-validate-btn.loading { background: #64748b; pointer-events: none; }

    /* ── Champ action corrective ── */
    .tc-corrective-wrap {
        padding: 0 16px 14px;
        display: none;
    }
    .tc-corrective-wrap.visible { display: block; }
    .tc-corrective-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--tc-ko);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .tc-corrective-input {
        width: 100%;
        border: 1.5px solid #fecaca;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 14px;
        color: #1e293b;
        background: #fff;
        resize: none;
        outline: none;
        box-sizing: border-box;
    }
    .tc-corrective-input:focus { border-color: var(--tc-ko); }

    /* ── Relevé déjà fait ── */
    .tc-done-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px 14px;
    }
    .tc-done-temp {
        font-size: 28px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }
    .tc-done-temp.ok   { color: var(--tc-ok); }
    .tc-done-temp.ko   { color: var(--tc-ko); }
    .tc-done-meta {
        font-size: 12px;
        color: #64748b;
        text-align: right;
    }
    .tc-done-meta span { display: block; }
    .tc-edit-btn {
        margin-top: 4px;
        font-size: 12px;
        color: #3b82f6;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        text-decoration: underline;
    }

    /* ── Alerte non-conformité ── */
    .tc-alert {
        background: #fef2f2;
        border-top: 1px solid #fecaca;
        padding: 10px 16px;
        font-size: 12px;
        color: var(--tc-ko);
        display: flex;
        gap: 6px;
        align-items: flex-start;
    }
    .tc-alert svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

    /* ── FAB valider tout ── */
    .tc-fab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #16a34a;
        color: #fff;
        border: none;
        border-radius: 50px;
        padding: 16px 32px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        margin: 8px 16px 32px;
        -webkit-tap-highlight-color: transparent;
    }
    .tc-fab:active { opacity: .85; }
    .tc-fab svg { width: 18px; height: 18px; stroke: #fff; fill: none; }
    .tc-fab.all-done { background: #0f172a; }
    .tc-fab-wrap {
        display: flex;
        justify-content: center;
        padding: 8px 0 32px;
    }

    /* ── Toast ── */
    .tc-toast {
        position: fixed;
        bottom: 90px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: #1e293b;
        color: #fff;
        border-radius: 10px;
        padding: 10px 20px;
        font-size: 13px;
        font-weight: 500;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s, transform .2s;
        white-space: nowrap;
        z-index: 100;
    }
    .tc-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* ── État vide ── */
    .tc-empty {
        text-align: center;
        padding: 60px 20px;
        color: #94a3b8;
    }
    .tc-empty svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: .4; }
    .tc-empty p { font-size: 15px; margin: 0 0 16px; }
</style>
@endsection

@section('content')

{{-- Header collant --}}
<div class="tc-header">
    <div class="tc-header-top">
        <h1>Températures</h1>
        <span class="tc-period-badge {{ $period }}">
            {{ $period === 'morning' ? '☀ Matin' : '☽ Soir' }}
        </span>
    </div>
    <p class="tc-header-date">{{ $date }}</p>
</div>

{{-- Barre de progression --}}
@php
    $total    = $status->count();
    $done     = $status->filter(fn($s) => $s[$period] !== null)->count();
    $pct      = $total > 0 ? round(($done / $total) * 100) : 0;
    $allDone  = $done === $total && $total > 0;
@endphp
<div class="tc-progress-wrap">
    <div class="tc-progress-info">
        <span>{{ $done }}/{{ $total }} enceintes relevées</span>
        <span>{{ $pct }} %</span>
    </div>
    <div class="tc-progress-track">
        <div class="tc-progress-bar" style="width: {{ $pct }}%"></div>
    </div>
</div>

{{-- Liste des enceintes --}}
<div class="tc-list" id="tc-list">

    @forelse($status as $item)
        @php
            $unit    = $item['unit'];
            $reading = $item[$period];
            $isDone  = $reading !== null;
            $isOk    = $isDone && $reading->is_compliant;
            $isKo    = $isDone && ! $reading->is_compliant;
            $cardClass = $isDone ? ($isOk ? 'is-ok' : 'is-ko') : '';
        @endphp

        <div class="tc-card {{ $cardClass }}" id="card-{{ $unit->id }}" data-unit="{{ $unit->id }}">

            {{-- En-tête de la carte --}}
            <div class="tc-card-header">
                <div class="tc-num">{{ $unit->number }}</div>
                <div>
                    <p class="tc-name">{{ $unit->name }}</p>
                    <p class="tc-target">
                        Cible :
                        @if($unit->target_temp_min !== null)
                            {{ $unit->target_temp_min }} °C /
                        @endif
                        ≤ {{ $unit->target_temp_max }} °C
                    </p>
                </div>
                <div class="tc-status-icon">
                    @if($isDone && $isOk)
                        <span style="color:#16a34a">✓</span>
                    @elseif($isDone && $isKo)
                        <span style="color:#dc2626">!</span>
                    @else
                        <span style="color:#cbd5e1">○</span>
                    @endif
                </div>
            </div>

            {{-- Relevé déjà fait --}}
            @if($isDone)
                <div class="tc-done-row" id="done-{{ $unit->id }}">
                    <span class="tc-done-temp {{ $isOk ? 'ok' : 'ko' }}">
                        {{ number_format($reading->temperature, 1) }} °C
                    </span>
                    <div class="tc-done-meta">
                        <span>{{ $reading->recorded_at->format('H:i') }}</span>
                        <span>par {{ $reading->user->name }}</span>
                        <button class="tc-edit-btn"
                                onclick="editReading({{ $unit->id }})">
                            Modifier
                        </button>
                    </div>
                </div>

                @if($isKo && $reading->corrective_action)
                    <div class="tc-alert">
                        <svg viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg>
                        {{ $reading->corrective_action }}
                    </div>
                @endif

            {{-- Formulaire de saisie --}}
            @else
                <div class="tc-input-row" id="form-{{ $unit->id }}">
                    <div class="tc-temp-wrap">
                        <input
                            type="number"
                            step="0.1"
                            min="-40"
                            max="50"
                            inputmode="decimal"
                            class="tc-temp-input"
                            id="temp-{{ $unit->id }}"
                            placeholder="—"
                            data-unit="{{ $unit->id }}"
                            data-max="{{ $unit->target_temp_max }}"
                            data-min="{{ $unit->target_temp_min ?? '' }}"
                            onchange="checkCompliance({{ $unit->id }})"
                            oninput="checkCompliance({{ $unit->id }})"
                        >
                        <span class="tc-temp-unit">°C</span>
                    </div>
                    <button
                        class="tc-validate-btn"
                        id="btn-{{ $unit->id }}"
                        onclick="submitReading({{ $unit->id }}, '{{ $period }}')"
                        aria-label="Valider">
                        <svg viewBox="0 0 24 24" stroke-width="2.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                        </svg>
                    </button>
                </div>

                {{-- Champ action corrective (affiché si hors norme) --}}
                <div class="tc-corrective-wrap" id="corrective-{{ $unit->id }}">
                    <div class="tc-corrective-label">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0 3.75h.008v.008H12v-.008z"/></svg>
                        Action corrective obligatoire
                    </div>
                    <textarea
                        class="tc-corrective-input"
                        id="action-{{ $unit->id }}"
                        rows="2"
                        placeholder="Ex : porte mal fermée, appel technicien…"></textarea>
                </div>
            @endif

        </div>
    @empty
        <div class="tc-empty">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <p>Aucune enceinte configurée.</p>
            <a href="{{ route('cold-storage-units.create') }}"
               style="background:#0f172a;color:#fff;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;display:inline-block;">
                Ajouter une enceinte
            </a>
        </div>
    @endforelse

</div>

{{-- FAB --}}
@if($total > 0)
<div class="tc-fab-wrap">
    <button class="tc-fab {{ $allDone ? 'all-done' : '' }}" id="tc-fab" onclick="validateAll()">
        @if($allDone)
            <svg viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
            Tout est relevé
        @else
            <svg viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/></svg>
            Valider tout
        @endif
    </button>
</div>
@endif

{{-- Toast feedback --}}
<div class="tc-toast" id="tc-toast"></div>

@endsection

@push('scripts')
<script>
const STORE_URL = '{{ route('temperatures.store') }}';
const CSRF      = '{{ csrf_token() }}';
const PERIOD    = '{{ $period }}';

// Affiche/masque le champ action corrective selon la valeur saisie
function checkCompliance(unitId) {
    const input      = document.getElementById(`temp-${unitId}`);
    const corrWrap   = document.getElementById(`corrective-${unitId}`);
    const val        = parseFloat(input.value);
    const max        = parseFloat(input.dataset.max);
    const min        = input.dataset.min !== '' ? parseFloat(input.dataset.min) : null;

    if (isNaN(val)) { corrWrap.classList.remove('visible'); return; }

    const outOfRange = val > max || (min !== null && val < min);
    corrWrap.classList.toggle('visible', outOfRange);
}

// Soumet un relevé en AJAX
async function submitReading(unitId, period) {
    const input    = document.getElementById(`temp-${unitId}`);
    const actionEl = document.getElementById(`action-${unitId}`);
    const btn      = document.getElementById(`btn-${unitId}`);
    const temp     = input.value.trim();

    if (temp === '') {
        showToast('Entrez une température', 'warn');
        input.focus();
        return;
    }

    // Vérif action corrective si hors norme
    const corrWrap = document.getElementById(`corrective-${unitId}`);
    if (corrWrap.classList.contains('visible') && actionEl.value.trim() === '') {
        showToast('Action corrective requise', 'warn');
        actionEl.focus();
        return;
    }

    btn.classList.add('loading');

    try {
        const res = await fetch(STORE_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': CSRF,
                'Accept':       'application/json',
            },
            body: JSON.stringify({
                cold_storage_unit_id: unitId,
                period:               period,
                temperature:          parseFloat(temp),
                corrective_action:    actionEl ? actionEl.value.trim() : null,
            }),
        });

        const data = await res.json();

        if (!res.ok) {
            const msg = data.errors
                ? Object.values(data.errors).flat().join(' ')
                : 'Erreur serveur';
            showToast(msg, 'error');
            btn.classList.remove('loading');
            return;
        }

        updateCardDone(unitId, data);
        updateProgress();
        showToast(data.message, data.compliant ? 'ok' : 'warn');

    } catch (e) {
        showToast('Erreur réseau', 'error');
        btn.classList.remove('loading');
    }
}

// Met à jour la carte après enregistrement réussi
function updateCardDone(unitId, data) {
    const card    = document.getElementById(`card-${unitId}`);
    const formRow = document.getElementById(`form-${unitId}`);
    const corrWrap = document.getElementById(`corrective-${unitId}`);
    const statusIcon = card.querySelector('.tc-status-icon');

    card.classList.remove('is-ko', 'is-ok', 'is-warn');
    card.classList.add(data.compliant ? 'is-ok' : 'is-ko');

    // Remplace le formulaire par l'affichage "done"
    formRow.remove();
    if (corrWrap) corrWrap.remove();

    const doneRow = document.createElement('div');
    doneRow.className = 'tc-done-row';
    doneRow.id = `done-${unitId}`;
    doneRow.innerHTML = `
        <span class="tc-done-temp ${data.compliant ? 'ok' : 'ko'}">
            ${parseFloat(data.reading.temperature).toFixed(1)} °C
        </span>
        <div class="tc-done-meta">
            <span>à l'instant</span>
            <button class="tc-edit-btn" onclick="editReading(${unitId})">Modifier</button>
        </div>`;
    card.appendChild(doneRow);

    statusIcon.innerHTML = data.compliant
        ? '<span style="color:#16a34a">✓</span>'
        : '<span style="color:#dc2626">!</span>';

    if (!data.compliant && data.reading.corrective_action) {
        const alertDiv = document.createElement('div');
        alertDiv.className = 'tc-alert';
        alertDiv.innerHTML = `<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z"/></svg>
            ${data.reading.corrective_action}`;
        card.appendChild(alertDiv);
    }
}

// Recalcule la barre de progression
function updateProgress() {
    const cards  = document.querySelectorAll('.tc-card');
    const done   = document.querySelectorAll('.tc-done-row').length;
    const total  = cards.length;
    const pct    = total > 0 ? Math.round((done / total) * 100) : 0;

    document.querySelector('.tc-progress-bar').style.width = pct + '%';
    document.querySelector('.tc-progress-info span:first-child').textContent =
        `${done}/${total} enceintes relevées`;
    document.querySelector('.tc-progress-info span:last-child').textContent = pct + ' %';

    if (done === total && total > 0) {
        const fab = document.getElementById('tc-fab');
        if (fab) {
            fab.classList.add('all-done');
            fab.innerHTML = `<svg viewBox="0 0 24 24" stroke-width="2.5" stroke="white" fill="none" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg> Tout est relevé`;
        }
    }
}

// Repasse un relevé en mode édition
function editReading(unitId) {
    // Simple reload de la page — on pourrait faire un fetch de la valeur actuelle
    // pour pré-remplir, mais le reload est le plus sûr en Blade
    window.location.reload();
}

// Valide toutes les enceintes non encore relevées
function validateAll() {
    const pendingBtns = document.querySelectorAll('[id^="btn-"]');
    if (pendingBtns.length === 0) return;
    pendingBtns.forEach(btn => {
        const unitId = btn.id.replace('btn-', '');
        const input  = document.getElementById(`temp-${unitId}`);
        if (input && input.value.trim() !== '') {
            submitReading(parseInt(unitId), PERIOD);
        }
    });
}

// Toast
function showToast(msg, type = 'ok') {
    const t = document.getElementById('tc-toast');
    const colors = { ok: '#16a34a', warn: '#d97706', error: '#dc2626' };
    t.textContent   = msg;
    t.style.background = colors[type] ?? '#1e293b';
    t.classList.add('show');
    setTimeout(() => t.classList.remove('show'), 2800);
}
</script>
@endpush