@extends('layouts.landing-page')
@section('content')
<!-- component -->
<div class="px-4 py-14 md:px-6 2xl:px-20 2xl:container 2xl:mx-auto">
    <!--- more free and premium Tailwind CSS components at https://tailwinduikit.com/ --->

    <div class="flex flex-col justify-start space-y-2 item-start">
        <h1 class="text-3xl font-semibold leading-7 text-gray-800 dark:text-white lg:text-4xl lg:leading-9">Orden #13432
        </h1>
        <p class="text-base font-medium leading-6 text-gray-600 dark:text-gray-300">21 de Marzo 2025 10:34 PM</p>
    </div>
    <div
        class="flex flex-col items-stretch w-full mt-10 space-y-4 xl:flex-row jusitfy-center xl:space-x-8 md:space-y-6 xl:space-y-0">
        <div class="flex flex-col items-start justify-start w-full space-y-4 md:space-y-6 xl:space-y-8">
            <div
                class="flex flex-col items-start justify-start w-full px-4 py-4 dark:bg-gray-800 bg-gray-50 md:py-6 md:p-6 xl:p-8">
                <p class="text-lg font-semibold leading-6 text-gray-800 md:text-xl dark:text-white xl:leading-5">
                    Carrito de compra</p>
                <div
                    class="flex flex-col items-start justify-start w-full mt-4 md:mt-6 md:flex-row md:items-center md:space-x-6 xl:space-x-8">
                    <div class="w-full pb-4 md:pb-8 md:w-40">
                        <img class="hidden w-full md:block" src="{{asset('storage/productos/cafe_org_500.jpg')}}"
                            alt="dress" />
                        <img class="w-full md:hidden" src="{{asset('storage/productos/cafe_org_500.jpg')}}" alt="cafe" />
                    </div>
                    <div
                        class="flex flex-col items-start justify-between w-full pb-8 space-y-4 border-b border-gray-200 md:flex-row md:space-y-0">
                        <div class="flex flex-col items-start justify-start w-full space-y-8">
                            <h3 class="text-xl font-semibold leading-6 text-gray-800 dark:text-white xl:text-2xl">
                                Café orgánico especialidad</h3>
                            
                        </div>
                        <div class="flex items-start justify-between w-full space-x-8">
                            <p class="text-base leading-6 dark:text-white xl:text-lg">$36.00 
                                {{-- <span
                                    class="text-red-300 line-through"> $45.00</span> --}}
                                </p>
                            <p class="text-base leading-6 text-gray-800 dark:text-white xl:text-lg">01 bolsa(s)</p>
                            <p class="text-base font-semibold leading-6 text-gray-800 dark:text-white xl:text-lg">$36.00
                            </p>
                        </div>
                    </div>
                </div>
                <div
                    class="flex flex-col items-start justify-start w-full mt-6 space-y-4 md:mt-0 md:flex-row md:items-center md:space-x-6 xl:space-x-8">
                    <div class="w-full md:w-40">
                        <img class="hidden w-full md:block" src="{{asset('storage/productos/cafe_org_amer_7,5.jpg')}}"
                            alt="dress" />
                        <img class="w-full md:hidden" src="{{asset('storage/productos/cafe_org_amer_7,5.jpg')}}" alt="dress" />
                    </div>
                    <div class="flex flex-col items-start justify-between w-full space-y-4 md:flex-row md:space-y-0">
                        <div class="flex flex-col items-start justify-start w-full space-y-8">
                            <h3 class="text-xl font-semibold leading-6 text-gray-800 dark:text-white xl:text-2xl">
                             Café orgánico americano</h3>
                           
                        </div>
                        <div class="flex items-start justify-between w-full space-x-8">
                            <p class="text-base leading-6 dark:text-white xl:text-lg">$20.00 
                                {{-- <span
                                    class="text-red-300 line-through"> $30.00</span> --}}
                                </p>
                            <p class="text-base leading-6 text-gray-800 dark:text-white xl:text-lg">01 bolsa(s)</p>
                            <p class="text-base font-semibold leading-6 text-gray-800 dark:text-white xl:text-lg">$20.00
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="flex flex-col items-stretch justify-center w-full space-y-4 md:flex-row md:space-y-0 md:space-x-6 xl:space-x-8">
                <div class="flex flex-col w-full px-4 py-6 space-y-6 md:p-6 xl:p-8 bg-gray-50 dark:bg-gray-800">
                    <h3 class="text-xl font-semibold leading-5 text-gray-800 dark:text-white">Resumen </h3>
                    <div
                        class="flex flex-col items-center justify-center w-full pb-4 space-y-4 border-b border-gray-200">
                        <div class="flex justify-between w-full">
                            <p class="text-base leading-4 text-gray-800 dark:text-white">Subtotal</p>
                            <p class="text-base leading-4 text-gray-600 dark:text-gray-300">$56.00</p>
                        </div>
                        {{-- <div class="flex items-center justify-between w-full">
                            <p class="text-base leading-4 text-gray-800 dark:text-white">Descuento <span
                                    class="p-1 text-xs font-medium leading-3 text-gray-800 bg-gray-200 dark:bg-white dark:text-gray-800">Cliente frecuente</span>
                            </p>
                            <p class="text-base leading-4 text-gray-600 dark:text-gray-300">-$28.00 (50%)</p>
                        </div> --}}
                        <div class="flex items-center justify-between w-full">
                            <p class="text-base leading-4 text-gray-800 dark:text-white">Envío</p>
                            <p class="text-base leading-4 text-gray-600 dark:text-gray-300">$20.00</p>
                        </div>
                        <div class="flex items-center justify-between w-full">
                            <p class="text-base leading-4 text-gray-800 dark:text-white">I.V.A.</p>
                            <p class="text-base leading-4 text-gray-600 dark:text-gray-300">$10.00</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between w-full">
                        <p class="text-base font-semibold leading-4 text-gray-800 dark:text-white">Total</p>
                        <p class="text-base font-semibold leading-4 text-gray-600 dark:text-gray-300">$86.00</p>
                    </div>
                </div>
                <div
                    class="flex flex-col justify-center w-full px-4 py-6 space-y-6 md:p-6 xl:p-8 bg-gray-50 dark:bg-gray-800">
                    <h3 class="text-xl font-semibold leading-5 text-gray-800 dark:text-white">Envío</h3>
                    <div class="flex items-start justify-between w-full">
                        <div class="flex items-center justify-center space-x-4">
                            <div class="flex items-center w-8 h-8">
                                <img src="{{asset('storage/productos/icono_envio.png')}}" alt="iconoenvio">
                            </div>
                            <div class="flex flex-col items-center justify-start">
                                <p class="text-lg font-semibold leading-6 text-gray-800 dark:text-white">Estafota
                                    <br/><span class="font-normal">Entrega hábil 1-2 días guía: <a class="hover:underline" href="#" target="_blank">487252772</a></span></p>
                            </div>
                        </div>
                        {{-- <p class="text-lg font-semibold leading-6 text-gray-800 dark:text-white">$8.00</p> --}}
                    </div>
                    <div class="flex items-center justify-center w-full">
                        <button
                            class="py-5 text-base font-medium leading-4 text-white bg-gray-800 hover:bg-black dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 w-96 md:w-full">Ver detalles</button>
                    </div>
                </div>
            </div>
        </div>
        <div
            class="flex flex-col items-center justify-between w-full px-4 py-6 bg-gray-50 dark:bg-gray-800 xl:w-96 md:items-start md:p-6 xl:p-8">
            <h3 class="text-xl font-semibold leading-5 text-gray-800 dark:text-white">Cliente</h3>
            <div
                class="flex flex-col items-stretch justify-start w-full h-full md:flex-row xl:flex-col md:space-x-6 lg:space-x-8 xl:space-x-0">
                <div class="flex flex-col items-start justify-start flex-shrink-0">
                    <div
                        class="flex items-center justify-center w-full py-8 space-x-4 border-b border-gray-200 md:justify-start">
                        
                        <div class="flex flex-col items-start justify-start space-y-2">
                            <p class="text-base font-semibold leading-4 text-left text-gray-800 dark:text-white">Clark
                                Kent</p>
                            <p class="text-sm leading-5 text-gray-600 dark:text-gray-300">10 Pedidos</p>
                        </div>
                    </div>

                    <div
                        class="flex items-center justify-center w-full py-4 space-x-4 text-gray-800 border-b border-gray-200 dark:text-white md:justify-start">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5Z"
                                stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M3 7L12 13L21 7" stroke="currentColor" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                        <p class="text-sm leading-5 cursor-pointer ">clarkent@gmail.com</p>
                    </div>
                </div>
                <div class="flex flex-col items-stretch justify-between w-full mt-6 xl:h-full md:mt-0">
                    <div
                        class="flex flex-col items-center justify-center space-y-4 md:justify-start xl:flex-col md:space-x-6 lg:space-x-8 xl:space-x-0 xl:space-y-12 md:space-y-0 md:flex-row md:items-start">
                        <div
                            class="flex flex-col items-center justify-center space-y-4 md:justify-start md:items-start xl:mt-8">
                            <p
                                class="text-base font-semibold leading-4 text-center text-gray-800 dark:text-white md:text-left">
                                Dirección de envío</p>
                            <p
                                class="w-48 text-sm leading-5 text-center text-gray-600 lg:w-full dark:text-gray-300 xl:w-48 md:text-left">
                               Primavera 237-Int. 1, Jardines de Tuxtla, 29020 Tuxtla Gutiérrez, Chis.</p>
                        </div>
                        <div
                            class="flex flex-col items-center justify-center space-y-4 md:justify-start md:items-start">
                            <p
                                class="text-base font-semibold leading-4 text-center text-gray-800 dark:text-white md:text-left">
                                Facturación</p>
                            <p
                                class="w-48 text-sm leading-5 text-center text-gray-600 lg:w-full dark:text-gray-300 xl:w-48 md:text-left">
                                Primavera 237-Int. 1, Jardines de Tuxtla, 29020 Tuxtla Gutiérrez, Chis.</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-center w-full md:justify-start md:items-start">
                        <button
                            class="py-5 mt-6 text-base font-medium leading-4 text-gray-800 border border-gray-800 md:mt-0 dark:border-white dark:hover:bg-gray-900 dark:bg-transparent dark:text-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 w-96 2xl:w-full">Editar datos</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection