@extends('layouts.app')
@section('title', 'Historique — ' . $fryer->name)

@section('content')

<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px;">
    <div style="display:flex;align-items:center;gap:12px;">
        <a href="{{ route('fryers.index') }}" style="color:#64748b;text-decoration:none;font-size:13px;">← Retour</a>
        <div>
            <h1 style="font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;margin:0;color:#0f172a;">
                {{ $fryer->name }}
            </h1>
            <p style="margin:2px 0 0;font-size:13px;color:#64748b;">Friteuse n°{{ $fryer->number }} — {{ $controls->total() }} contrôle(s)</p>
        </div>
    </div>
    <a href="{{ route('fryers.control.create', $fryer) }}"
       style="display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:#0f172a;color:#fff;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;">
        + Nouveau contrôle
    </a>
</div>

@if(session('success'))
    <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#16a34a;">
        ✓ {{ session('success') }}
    </div>
@endif

@forelse($controls as $control)
@php
    $colors = ['ok' => ['bg'=>'#f0fdf4','text'=>'#16a34a','border'=>'#bbf7d0'], 'warning' => ['bg'=>'#fffbeb','text'=>'#d97706','border'=>'#fde68a'], 'change' => ['bg'=>'#fef2f2','text'=>'#dc2626','border'=>'#fecaca']];
    $c = $colors[$control->result] ?? $colors['ok'];
    $labels = ['ok'=>'✅ OK','warning'=>'⚠️ Attention','change'=>'🚨 Changer l\'huile'];
@endphp

<div style="background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;margin-bottom:10px;overflow:hidden;">

    {{-- Header --}}
    <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #f1f5f9;flex-wrap:wrap;gap:8px;">
        <div>
            <p style="margin:0;font-size:14px;font-weight:600;color:#0f172a;">
                {{ $control->control_date->format('d/m/Y') }}
                @if($control->control_time)
                    <span style="font-size:12px;color:#64748b;font-weight:400;">à {{ substr($control->control_time, 0, 5) }}</span>
                @endif
            </p>
            <p style="margin:2px 0 0;font-size:11px;color:#94a3b8;">par {{ $control->user->name }}</p>
        </div>
        <div style="display:flex;align-items:center;gap:8px;">
            <span style="padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;background:{{ $c['bg'] }};color:{{ $c['text'] }};border:1px solid {{ $c['border'] }};">
                {{ $labels[$control->result] }}
            </span>
            <form method="POST" action="{{ route('fryers.control.destroy', $control) }}" onsubmit="return confirm('Supprimer ce contrôle ?')">
                @csrf @method('DELETE')
                <button type="submit" style="background:none;border:1px solid #fecaca;border-radius:6px;padding:4px 10px;font-size:11px;color:#dc2626;cursor:pointer;">
                    🗑
                </button>
            </form>
        </div>
    </div>

    {{-- Corps --}}
    <div style="padding:14px 18px;display:flex;gap:16px;flex-wrap:wrap;">

        {{-- Photo bandelette --}}
        @if($control->photo_path)
        <div style="flex-shrink:0;">
            <a href="{{ Storage::url($control->photo_path) }}" target="_blank">
                <img src="{{ Storage::url($control->photo_path) }}"
                     alt="Bandelette"
                     style="height:80px;width:80px;object-fit:cover;border-radius:8px;border:1px solid #e2e8f0;">
            </a>
            <p style="font-size:10px;color:#94a3b8;text-align:center;margin:4px 0 0;">Voir photo</p>
        </div>
        @endif

        <div style="flex:1;min-width:0;">
            {{-- Changement huile --}}
            @if($control->oil_changed)
            <div style="display:inline-flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:6px 12px;margin-bottom:8px;font-size:12px;color:#0369a1;font-weight:500;">
                🛢️ Huile changée
                @if($control->oil_changed_at)
                    le {{ $control->oil_changed_at->format('d/m/Y') }}
                @endif
            </div>
            @endif

            {{-- Notes --}}
            @if($control->notes)
            <p style="margin:0;font-size:13px;color:#334155;line-height:1.5;">{{ $control->notes }}</p>
            @endif

            @if(!$control->photo_path && !$control->oil_changed && !$control->notes)
            <p style="margin:0;font-size:12px;color:#94a3b8;">Aucune note</p>
            @endif
        </div>
    </div>
</div>
@empty
<div style="text-align:center;padding:60px 20px;color:#94a3b8;">
    <p style="font-size:15px;margin:0 0 16px;">Aucun contrôle enregistré.</p>
    <a href="{{ route('fryers.control.create', $fryer) }}"
       style="background:#0f172a;color:#fff;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;display:inline-block;">
        Premier contrôle
    </a>
</div>
@endforelse

{{ $controls->links() }}

@endsection