<x-layout title="Productos - Lauck">

    <!-- Header -->
    <x-section-header subtitle="Panel de Control" title="¡Bienvenido, " highlight="Jose!"/>

    <div class="w-full min-h-7/12 mx-auto px-4 my-5 flex flex-col gap-5 items-center justify-center">
        <dl class="w-lg text-gray-900 dark:text-white *:border-b *:border-gray-200 *:dark:border-gray-400">
            <div class="flex flex-col pt-3">
                <dt class="mb-1 text-gray-500 md:text-lg dark:text-gray-400">Marca</dt>
                <dd class="text-lg font-semibold">{{$producto->marca}}</dd>
            </div>
            <div class="flex flex-col pt-3">
                <dt class="mb-1 text-gray-500 md:text-lg dark:text-gray-400">Modelo</dt>
                <dd class="text-lg font-semibold">{{$producto->modelo}}</dd>
            </div>
            <div class="flex flex-col pt-3">
                <dt class="mb-1 text-gray-500 md:text-lg dark:text-gray-400">Color</dt>
                <dd class="text-lg font-semibold">{{$producto->color}}</dd>
            </div>
            <div class="flex flex-col pt-3">
                <dt class="mb-1 text-gray-500 md:text-lg dark:text-gray-400">Rodado</dt>
                <dd class="text-lg font-semibold">{{$producto->rodado}}</dd>
            </div>
            <div class="flex flex-col pt-3">
                <dt class="mb-1 text-gray-500 md:text-lg dark:text-gray-400">Tipo</dt>
                <dd class="text-lg font-semibold">{{$producto->tipo}}</dd>
            </div>
            <div class="flex flex-col pt-3">
                <dt class="mb-1 text-gray-500 md:text-lg dark:text-gray-400">Descripcion</dt>
                <dd class="text-lg font-semibold">{{$producto->descripcion}}</dd>
            </div>
            <div class="flex flex-col pt-3">
                <dt class="mb-1 text-gray-500 md:text-lg dark:text-gray-400">Precio</dt>
                <dd class="text-lg font-semibold">{{$producto->precio}}</dd>
            </div>
        </dl>
        <div class="flex gap-5">
            <a href="{{route('productos.index')}}" class="w-full sm:w-auto px-5 py-2 rounded-full text-white font-semibold bg-stone-500 hover:bg-stone-600">Volver</a>
            <a href="{{route('productos.edit',$producto)}}" class="w-full sm:w-auto px-5 py-2 rounded-full text-white font-semibold bg-blue-600 hover:bg-blue-700">Editar</a>
            <form action="{{route('productos.destroy',$producto)}}" method="post">
                @csrf
                @method('DELETE')
                <button type="submit" class="w-full sm:w-auto px-5 py-2 rounded-full text-white font-semibold bg-red-600 hover:bg-red-700">
                    Borrar
                </button>
            </form>
        </div>
    </div>

</x-layout>
    
    {{--  componente alerta --}}
    {{-- <x-alert type="success">
        <x-slot name="title">Jose!</x-slot>
        <x-slot name="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, vel omnis</x-slot>
    </x-alert> --}}