@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]">Estados de Unidad</h1>
    </div>
@endsection

@section('main-content')
    <div class="p-6 space-y-8">
        <div class="flex flex-col items-center justify-center space-y-4">
            <div class="relative">
                <div class="flex items-center justify-center rounded-3xl bg-primary/10 text-primary size-24 shadow-sm transition-colors duration-300"
                    id="icon-preview-bg">
                    <span class="material-symbols-outlined text-5xl icon-preview-fill" id="icon-preview-glyph">stars</span>
                </div>
                <div
                    class="absolute -bottom-2 -right-2 bg-white dark:bg-slate-800 p-1.5 rounded-full shadow-md border border-slate-100 dark:border-slate-700">
                    <span class="material-symbols-outlined text-slate-400 text-sm">edit</span>
                </div>
            </div>
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider">Vista previa del ícono</p>
        </div>
        <div class="space-y-5">
            <div class="space-y-2">
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-300 px-1">Nombre del estado</label>
                <input
                    class="w-full h-12 px-4 rounded-xl border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/50 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none"
                    placeholder="Ej. En espera, Lavado..." type="text" />
            </div>
            <div class="space-y-2">
                <label class="text-sm font-semibold text-slate-700 dark:text-slate-300 px-1">Descripción del estado</label>
                <textarea
                    class="w-full p-4 rounded-xl border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/50 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none resize-none"
                    placeholder="Describe brevemente cuándo se debe usar este estado..." rows="3"></textarea>
            </div>
        </div>
        <div class="space-y-4">
            <label class="text-sm font-semibold text-slate-700 dark:text-slate-300 px-1">Color distintivo</label>
            <div class="flex flex-wrap gap-4 justify-between px-1">
                <button
                    class="size-10 rounded-full bg-emerald-500 ring-offset-2 ring-emerald-500/30 transition-all hover:scale-110 active:scale-95"></button>
                <button
                    class="size-10 rounded-full bg-blue-500 ring-2 ring-offset-2 ring-blue-500/50 transition-all hover:scale-110 active:scale-95"></button>
                <button
                    class="size-10 rounded-full bg-amber-500 ring-offset-2 ring-amber-500/30 transition-all hover:scale-110 active:scale-95"></button>
                <button
                    class="size-10 rounded-full bg-rose-500 ring-offset-2 ring-rose-500/30 transition-all hover:scale-110 active:scale-95"></button>
                <button
                    class="size-10 rounded-full bg-violet-500 ring-offset-2 ring-violet-500/30 transition-all hover:scale-110 active:scale-95"></button>
                <button
                    class="size-10 rounded-full bg-slate-500 ring-offset-2 ring-slate-500/30 transition-all hover:scale-110 active:scale-95"></button>
            </div>
        </div>
        <div class="space-y-4">
            <label class="text-sm font-semibold text-slate-700 dark:text-slate-300 px-1">Seleccionar ícono</label>
            <div
                class="grid grid-cols-5 gap-3 bg-slate-50 dark:bg-slate-900/50 p-4 rounded-2xl border border-slate-100 dark:border-slate-800">
                <button
                    class="flex items-center justify-center size-12 rounded-xl text-slate-400 hover:text-primary hover:bg-white dark:hover:bg-slate-800 transition-all active:scale-90">
                    <span class="material-symbols-outlined">local_taxi</span>
                </button>
                <button
                    class="flex items-center justify-center size-12 rounded-xl text-slate-400 hover:text-primary hover:bg-white dark:hover:bg-slate-800 transition-all active:scale-90">
                    <span class="material-symbols-outlined">build</span>
                </button>
                <button
                    class="flex items-center justify-center size-12 rounded-xl text-primary bg-white dark:bg-slate-800 shadow-sm transition-all active:scale-90">
                    <span class="material-symbols-outlined">stars</span>
                </button>
                <button
                    class="flex items-center justify-center size-12 rounded-xl text-slate-400 hover:text-primary hover:bg-white dark:hover:bg-slate-800 transition-all active:scale-90">
                    <span class="material-symbols-outlined">schedule</span>
                </button>
                <button
                    class="flex items-center justify-center size-12 rounded-xl text-slate-400 hover:text-primary hover:bg-white dark:hover:bg-slate-800 transition-all active:scale-90">
                    <span class="material-symbols-outlined">cleaning_services</span>
                </button>
                <button
                    class="flex items-center justify-center size-12 rounded-xl text-slate-400 hover:text-primary hover:bg-white dark:hover:bg-slate-800 transition-all active:scale-90">
                    <span class="material-symbols-outlined">verified_user</span>
                </button>
                <button
                    class="flex items-center justify-center size-12 rounded-xl text-slate-400 hover:text-primary hover:bg-white dark:hover:bg-slate-800 transition-all active:scale-90">
                    <span class="material-symbols-outlined">no_crash</span>
                </button>
                <button
                    class="flex items-center justify-center size-12 rounded-xl text-slate-400 hover:text-primary hover:bg-white dark:hover:bg-slate-800 transition-all active:scale-90">
                    <span class="material-symbols-outlined">priority_high</span>
                </button>
                <button
                    class="flex items-center justify-center size-12 rounded-xl text-slate-400 hover:text-primary hover:bg-white dark:hover:bg-slate-800 transition-all active:scale-90">
                    <span class="material-symbols-outlined">electric_car</span>
                </button>
                <button
                    class="flex items-center justify-center size-12 rounded-xl text-slate-400 hover:text-primary hover:bg-white dark:hover:bg-slate-800 transition-all active:scale-90">
                    <span class="material-symbols-outlined">more_horiz</span>
                </button>
            </div>
        </div>
    </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 Estado de Taxi
            </button>
        </div>
    </div>
@endsection