@extends('layouts.app')

@section('title', 'Ajouter une enceinte')

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

    <div style="display:flex; align-items:center; gap:12px; margin-bottom:24px;">
        <a href="{{ route('cold-storage-units.index') }}"
           style="color:#64748b; text-decoration:none; font-size:13px;">
            ← Retour
        </a>
        <h1 style="font-size:20px; font-weight:700; margin:0; color:#0f172a;">
            Ajouter une enceinte
        </h1>
    </div>

    @if($errors->any())
        <div style="background:#fef2f2; border:1px solid #fecaca; border-radius:10px; padding:12px 16px; margin-bottom:20px;">
            @foreach($errors->all() as $error)
                <p style="margin:0; font-size:13px; color:#dc2626;">{{ $error }}</p>
            @endforeach
        </div>
    @endif

    <form method="POST" action="{{ route('cold-storage-units.store') }}">
        @csrf

        {{-- Numéro --}}
        <div style="margin-bottom:16px;">
            <label style="display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px;">
                Numéro <span style="color:#dc2626;">*</span>
            </label>
            <input type="text" name="number" value="{{ old('number') }}"
                   placeholder="Ex : 1, 2, CF1…"
                   style="width:100%; height:44px; border:1.5px solid #e2e8f0; border-radius:10px; padding:0 12px; font-size:15px; box-sizing:border-box; outline:none;"
                   required maxlength="10">
            <p style="font-size:11px; color:#94a3b8; margin:4px 0 0;">
                Colle un autocollant avec ce numéro sur l'appareil.
            </p>
        </div>

        {{-- Nom --}}
        <div style="margin-bottom:16px;">
            <label style="display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px;">
                Nom <span style="color:#dc2626;">*</span>
            </label>
            <input type="text" name="name" value="{{ old('name') }}"
                   placeholder="Ex : Frigo viandes, Chambre froide légumes…"
                   style="width:100%; height:44px; border:1.5px solid #e2e8f0; border-radius:10px; padding:0 12px; font-size:15px; box-sizing:border-box; outline:none;"
                   required maxlength="255">
        </div>

        {{-- Type --}}
        <div style="margin-bottom:16px;">
            <label style="display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px;">
                Type <span style="color:#dc2626;">*</span>
            </label>
            <select name="type" id="type-select"
                    onchange="applyDefaults(this.value)"
                    style="width:100%; height:44px; border:1.5px solid #e2e8f0; border-radius:10px; padding:0 12px; font-size:15px; box-sizing:border-box; background:#fff; outline:none;"
                    required>
                <option value="">-- Choisir --</option>
                @foreach($typeLabels as $value => $label)
                    <option value="{{ $value }}" {{ old('type') === $value ? 'selected' : '' }}>
                        {{ $label }}
                    </option>
                @endforeach
            </select>
        </div>

        {{-- Températures cibles --}}
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px;">
            <div>
                <label style="display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px;">
                    Température max (°C) <span style="color:#dc2626;">*</span>
                </label>
                <input type="number" name="target_temp_max" id="temp-max"
                       value="{{ old('target_temp_max') }}"
                       step="0.5" min="-40" max="50"
                       placeholder="Ex : 4"
                       style="width:100%; height:44px; border:1.5px solid #e2e8f0; border-radius:10px; padding:0 12px; font-size:15px; box-sizing:border-box; outline:none;"
                       required>
            </div>
            <div>
                <label style="display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px;">
                    Température min (°C)
                </label>
                <input type="number" name="target_temp_min" id="temp-min"
                       value="{{ old('target_temp_min') }}"
                       step="0.5" min="-40" max="50"
                       placeholder="Optionnel"
                       style="width:100%; height:44px; border:1.5px solid #e2e8f0; border-radius:10px; padding:0 12px; font-size:15px; box-sizing:border-box; outline:none;">
            </div>
        </div>

        {{-- Notes --}}
        <div style="margin-bottom:24px;">
            <label style="display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px;">
                Notes (optionnel)
            </label>
            <textarea name="notes" rows="2"
                      placeholder="Ex : coin gauche cuisine, près du passe-plat…"
                      style="width:100%; border:1.5px solid #e2e8f0; border-radius:10px; padding:10px 12px; font-size:14px; box-sizing:border-box; resize:none; outline:none;">{{ old('notes') }}</textarea>
        </div>

        {{-- Bouton --}}
        <button type="submit"
                style="width:100%; height:50px; background:#0f172a; color:#fff; border:none; border-radius:12px; font-size:16px; font-weight:700; cursor:pointer;">
            Ajouter l'enceinte
        </button>

    </form>
</div>

<script>
const defaults = @json($defaultTargets);

function applyDefaults(type) {
    if (!defaults[type]) return;
    const max = document.getElementById('temp-max');
    const min = document.getElementById('temp-min');
    if (defaults[type].max !== null) max.value = defaults[type].max;
    if (defaults[type].min !== null) min.value = defaults[type].min;
    else min.value = '';
}
</script>
@endsection