@extends('layouts.app')

@section('title', 'Mes enceintes')

@section('content')
<div style="max-width:600px; margin:0 auto; padding:24px 16px;">

    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
        <h1 style="font-size:20px; font-weight:700; margin:0; color:#0f172a;">
            Mes enceintes
        </h1>
        <a href="{{ route('cold-storage-units.create') }}"
           style="background:#0f172a; color:#fff; padding:10px 18px; border-radius:10px; font-size:14px; font-weight:600; text-decoration:none;">
            + Ajouter
        </a>
    </div>

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

    @forelse($units as $unit)
        <div style="background:#fff; border:1.5px solid #e2e8f0; border-radius:14px; padding:16px; margin-bottom:10px; display:flex; align-items:center; gap:14px;">

            <div style="width:40px; height:40px; background:#f1f5f9; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#334155; flex-shrink:0;">
                {{ $unit->number }}
            </div>

            <div style="flex:1;">
                <p style="margin:0 0 2px; font-size:15px; font-weight:600; color:#0f172a;">
                    {{ $unit->name }}
                </p>
                <p style="margin:0; font-size:12px; color:#64748b;">
                    {{ \App\Models\ColdStorageUnit::$typeLabels[$unit->type] ?? $unit->type }}
                    ·
                    @if($unit->target_temp_min !== null)
                        {{ $unit->target_temp_min }} / {{ $unit->target_temp_max }} °C
                    @else
                        ≤ {{ $unit->target_temp_max }} °C
                    @endif
                </p>
            </div>

            <div style="display:flex; gap:8px;">
                <a href="{{ route('cold-storage-units.edit', $unit) }}"
                   style="font-size:12px; color:#3b82f6; text-decoration:none; padding:6px 12px; border:1px solid #bfdbfe; border-radius:8px;">
                    Modifier
                </a>
                <form method="POST" action="{{ route('cold-storage-units.destroy', $unit) }}"
                      onsubmit="return confirm('Supprimer cette enceinte ?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            style="font-size:12px; color:#dc2626; background:none; border:1px solid #fecaca; border-radius:8px; padding:6px 12px; cursor:pointer;">
                        Supprimer
                    </button>
                </form>
            </div>

        </div>
    @empty
        <div style="text-align:center; padding:60px 20px; color:#94a3b8;">
            <p style="font-size:15px; margin:0 0 16px;">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;">
                Ajouter ma première enceinte
            </a>
        </div>
    @endforelse

    @if($units->count() > 0)
        <div style="margin-top:24px; text-align:center;">
            <a href="{{ route('temperatures.today') }}"
               style="background:#16a34a; color:#fff; padding:14px 32px; border-radius:12px; font-size:15px; font-weight:700; text-decoration:none; display:inline-block;">
                Faire les relevés du jour →
            </a>
        </div>
    @endif

</div>
@endsection