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

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

    <div style="display:flex;align-items:center;gap:12px;margin-bottom:24px;">
        <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:20px;font-weight:700;margin:0;color:#0f172a;">
                Contrôle friteuse
            </h1>
            <p style="margin:2px 0 0;font-size:13px;color:#64748b;">{{ $fryer->number }} — {{ $fryer->name }}</p>
        </div>
    </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('fryers.control.store', $fryer) }}"
          enctype="multipart/form-data"
          style="background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:20px;">
        @csrf

        {{-- Date et heure --}}
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
            <div>
                <label style="display:block;font-size:11px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;">
                    Date <span style="color:#dc2626;">*</span>
                </label>
                <input type="date" name="control_date" value="{{ old('control_date', date('Y-m-d')) }}"
                       style="width:100%;height:44px;border:1.5px solid #e2e8f0;border-radius:10px;padding:0 12px;font-size:14px;box-sizing:border-box;outline:none;"
                       required>
            </div>
            <div>
                <label style="display:block;font-size:11px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;">
                    Heure
                </label>
                <input type="time" name="control_time" value="{{ old('control_time', date('H:i')) }}"
                       style="width:100%;height:44px;border:1.5px solid #e2e8f0;border-radius:10px;padding:0 12px;font-size:14px;box-sizing:border-box;outline:none;">
            </div>
        </div>

        {{-- Résultat bandelette --}}
        <div>
            <label style="display:block;font-size:11px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;">
                Résultat bandelette <span style="color:#dc2626;">*</span>
            </label>
            <div style="display:flex;flex-direction:column;gap:8px;">
                @foreach(['ok' => ['label'=>'✅ OK — Huile conforme','bg'=>'#f0fdf4','border'=>'#16a34a','text'=>'#16a34a'], 'warning' => ['label'=>'⚠️ Attention — À surveiller','bg'=>'#fffbeb','border'=>'#d97706','text'=>'#d97706'], 'change' => ['label'=>'🚨 Changer l\'huile — Non conforme','bg'=>'#fef2f2','border'=>'#dc2626','text'=>'#dc2626']] as $val => $opt)
                <label style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:10px;border:2px solid {{ old('result') === $val ? $opt['border'] : '#e2e8f0' }};background:{{ old('result') === $val ? $opt['bg'] : '#fff' }};cursor:pointer;transition:all .15s;"
                       id="result-label-{{ $val }}"
                       onclick="selectResult('{{ $val }}')">
                    <input type="radio" name="result" value="{{ $val }}"
                           {{ old('result') === $val ? 'checked' : '' }}
                           style="display:none;">
                    <span style="font-size:14px;font-weight:600;color:{{ old('result') === $val ? $opt['text'] : '#1e293b' }};">
                        {{ $opt['label'] }}
                    </span>
                </label>
                @endforeach
            </div>
        </div>

        {{-- Photo bandelette --}}
        <div>
            <label style="display:block;font-size:11px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;">
                Photo de la bandelette
            </label>
            <div style="border:2px dashed #e2e8f0;border-radius:10px;padding:20px;text-align:center;cursor:pointer;"
                 onclick="document.getElementById('photo-input').click()">
                <input type="file" id="photo-input" name="photo" accept="image/*" capture="environment"
                       style="display:none;" onchange="previewPhoto(this)">
                <div id="photo-placeholder">
                    <p style="font-size:24px;margin:0 0 8px;">📸</p>
                    <p style="font-size:13px;color:#64748b;margin:0;">Appuyez pour prendre une photo</p>
                    <p style="font-size:11px;color:#94a3b8;margin:4px 0 0;">JPG, PNG — max 5 Mo</p>
                </div>
                <img id="photo-preview" src="" alt="Aperçu"
                     style="display:none;max-height:200px;border-radius:8px;margin:0 auto;">
            </div>
        </div>

        {{-- Changement d'huile --}}
        <div style="background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;padding:16px;">
            <label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
                <input type="checkbox" name="oil_changed" value="1"
                       {{ old('oil_changed') ? 'checked' : '' }}
                       onchange="toggleOilDate(this)"
                       style="width:18px;height:18px;accent-color:#0f172a;cursor:pointer;">
                <span style="font-size:14px;font-weight:600;color:#0369a1;">🛢️ L'huile a été changée aujourd'hui</span>
            </label>
            <div id="oil-date-wrap" style="margin-top:12px;display:{{ old('oil_changed') ? 'block' : 'none' }};">
                <label style="display:block;font-size:11px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;">
                    Date du changement
                </label>
                <input type="date" name="oil_changed_at" value="{{ old('oil_changed_at', date('Y-m-d')) }}"
                       style="width:100%;height:44px;border:1.5px solid #bfdbfe;border-radius:10px;padding:0 12px;font-size:14px;box-sizing:border-box;outline:none;background:#fff;">
            </div>
        </div>

        {{-- Notes --}}
        <div>
            <label style="display:block;font-size:11px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;">
                Notes / Action corrective
            </label>
            <textarea name="notes" rows="3"
                      placeholder="Observations, actions effectuées…"
                      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>

        <button type="submit"
                style="height:50px;background:#0f172a;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;">
            Enregistrer le contrôle
        </button>
    </form>
</div>
@endsection

@section('scripts')
<script>
const resultOptions = {
    ok:      { bg: '#f0fdf4', border: '#16a34a', text: '#16a34a' },
    warning: { bg: '#fffbeb', border: '#d97706', text: '#d97706' },
    change:  { bg: '#fef2f2', border: '#dc2626', text: '#dc2626' },
};

function selectResult(val) {
    // Réinitialiser tous
    ['ok', 'warning', 'change'].forEach(v => {
        const lbl = document.getElementById('result-label-' + v);
        lbl.style.border = '2px solid #e2e8f0';
        lbl.style.background = '#fff';
        lbl.querySelector('span').style.color = '#1e293b';
        lbl.querySelector('input').checked = false;
    });
    // Activer le sélectionné
    const lbl = document.getElementById('result-label-' + val);
    const opt = resultOptions[val];
    lbl.style.border = '2px solid ' + opt.border;
    lbl.style.background = opt.bg;
    lbl.querySelector('span').style.color = opt.text;
    lbl.querySelector('input').checked = true;
}

function toggleOilDate(cb) {
    document.getElementById('oil-date-wrap').style.display = cb.checked ? 'block' : 'none';
}

function previewPhoto(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            document.getElementById('photo-placeholder').style.display = 'none';
            const img = document.getElementById('photo-preview');
            img.src = e.target.result;
            img.style.display = 'block';
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection