@extends('layouts.panel-tamplate')

@section('header-content')
    <div class="flex items-center gap-4">
        <button onclick="history.back()"
            class="text-slate-500 hover:bg-slate-100 transition-colors p-2 rounded-full active:scale-95 duration-200">
            <span class="material-symbols-outlined" data-icon="arrow_back">arrow_back</span>
        </button>
        <h1 class="font-['Inter'] text-[20px] font-bold tracking-tight text-[#248aeb]">Tipos de Mantenimiento</h1>
    </div>
@endsection

@section('main-content')
    <div class="px-4 py-6 space-y-8">
        <section class="space-y-4">
            <div class="flex flex-col gap-1.5">
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-300 ml-1">Nombre del Tipo</label>
                <input
                    class="w-full bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-800 rounded-xl px-4 py-3 text-sm focus:ring-primary focus:border-primary transition-all"
                    placeholder="Ej. Cambio de Neumáticos" type="text" />
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-300 ml-1">Descripción o
                    Frecuencia</label>
                <textarea
                    class="w-full bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-800 rounded-xl px-4 py-3 text-sm focus:ring-primary focus:border-primary transition-all resize-none"
                    placeholder="Detalla las tareas incluidas o la periodicidad recomendada..." rows="3"></textarea>
            </div>
        </section>
        <section class="space-y-3">
            <div class="flex items-center justify-between">
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-300 ml-1">Selector de Icono</label>
                <span class="text-[10px] font-bold text-primary uppercase">Previsualización</span>
            </div>
            <div class="flex items-center gap-4">
                <div
                    class="flex items-center justify-center rounded-2xl bg-primary/10 text-primary size-16 shrink-0 border-2 border-primary/20">
                    <span class="material-symbols-outlined text-3xl">build</span>
                </div>
                <div class="flex-1 flex gap-2 overflow-x-auto no-scrollbar py-1">
                    <button
                        class="size-12 rounded-xl border border-slate-200 dark:border-slate-800 flex items-center justify-center shrink-0 hover:bg-slate-50 dark:hover:bg-slate-800">
                        <span class="material-symbols-outlined text-slate-500">oil_barrel</span>
                    </button>
                    <button
                        class="size-12 rounded-xl border-2 border-primary flex items-center justify-center shrink-0 bg-primary/5">
                        <span class="material-symbols-outlined text-primary">build</span>
                    </button>
                    <button
                        class="size-12 rounded-xl border border-slate-200 dark:border-slate-800 flex items-center justify-center shrink-0 hover:bg-slate-50 dark:hover:bg-slate-800">
                        <span class="material-symbols-outlined text-slate-500">settings_b_roll</span>
                    </button>
                    <button
                        class="size-12 rounded-xl border border-slate-200 dark:border-slate-800 flex items-center justify-center shrink-0 hover:bg-slate-50 dark:hover:bg-slate-800">
                        <span class="material-symbols-outlined text-slate-500">tire_repair</span>
                    </button>
                    <button
                        class="size-12 rounded-xl border border-slate-200 dark:border-slate-800 flex items-center justify-center shrink-0 hover:bg-slate-50 dark:hover:bg-slate-800">
                        <span class="material-symbols-outlined text-slate-500">minor_crash</span>
                    </button>
                    <button
                        class="size-12 rounded-xl border border-slate-200 dark:border-slate-800 flex items-center justify-center shrink-0 hover:bg-slate-50 dark:hover:bg-slate-800">
                        <span class="material-symbols-outlined text-slate-500">add</span>
                    </button>
                </div>
            </div>
        </section>
        <section class="space-y-4">
            <label class="text-sm font-semibold text-slate-700 dark:text-slate-300 ml-1">Etiquetas y Atributos</label>
            <div
                class="bg-slate-50 dark:bg-slate-900/50 p-4 rounded-2xl border border-slate-200 dark:border-slate-800 space-y-4">
                <div class="space-y-2">
                    <span class="text-xs font-bold text-slate-400 uppercase tracking-tight">Prioridad</span>
                    <div class="flex gap-2">
                        <button
                            class="flex-1 py-2 px-3 rounded-lg border border-slate-200 dark:border-slate-700 text-xs font-semibold bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:border-primary/50 transition-colors">Baja</button>
                        <button
                            class="flex-1 py-2 px-3 rounded-lg border-2 border-orange-500/50 text-xs font-bold bg-orange-50 dark:bg-orange-900/20 text-orange-600">Media</button>
                        <button
                            class="flex-1 py-2 px-3 rounded-lg border border-slate-200 dark:border-slate-700 text-xs font-semibold bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:border-primary/50 transition-colors">Alta</button>
                    </div>
                </div>
                <div class="space-y-2">
                    <span class="text-xs font-bold text-slate-400 uppercase tracking-tight">Recurrencia</span>
                    <div class="flex flex-wrap gap-2">
                        <div
                            class="flex items-center gap-2 bg-white dark:bg-slate-800 px-3 py-1.5 rounded-full border border-slate-200 dark:border-slate-700">
                            <input checked="" class="rounded text-primary focus:ring-primary size-4" id="recurrent"
                                type="checkbox" />
                            <label class="text-xs font-medium" for="recurrent">Recurrente</label>
                        </div>
                        <div
                            class="flex items-center gap-2 bg-white dark:bg-slate-800 px-3 py-1.5 rounded-full border border-slate-200 dark:border-slate-700">
                            <input class="rounded text-primary focus:ring-primary size-4" id="security" type="checkbox" />
                            <label class="text-xs font-medium" for="security">Seguridad</label>
                        </div>
                        <div
                            class="flex items-center gap-2 bg-white dark:bg-slate-800 px-3 py-1.5 rounded-full border border-slate-200 dark:border-slate-700">
                            <input class="rounded text-primary focus:ring-primary size-4" id="legal" type="checkbox" />
                            <label class="text-xs font-medium" for="legal">Legal / Normativo</label>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class=" bottom-0 left-0 w-full bg-white/80 backdrop-blur-lg border-t border-outline-variant p-4 z-40">
        <div class="max-w-2xl mx-auto">
            <button
                class="w-full bg-primary text-white font-bold py-4 rounded-xl shadow-lg shadow-primary/30 flex items-center justify-center gap-2 transition-all duration-200 active:scale-[0.98]">
                <span class="material-symbols-outlined" data-icon="save" data-weight="fill"
                    style="font-variation-settings: 'FILL' 1;">save</span>
                Guardar Tipo de mantenimiento
            </button>
        </div>
    </div>
@endsection