@php
$currency = $brandCurrency;
@endphp
<div class="p-2 md:p-4 z-0 mt-20 mx-auto max-w-screen-xl">
    <div class="flex flex-col md:flex-row gap-4">
        <div class="w-full md:w-1/4">
            <div
                class="w-full text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <button type="button" wire:click="$set('statusSelect', 'In Progress')"
                    class="{{ $statusSelect == 'In Progress' ? 'bg-gray-100 text-blue-700 dark:bg-gray-600 dark:text-white' : '' }} inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 rounded-t-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                    <svg class="w-6 h-6 me-2.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
                    </svg>
                    En Curso
                </button>
                <button type="button" wire:click="$set('statusSelect', 'All')"
                    class="{{ $statusSelect == 'All' ? 'bg-gray-100 text-blue-700 dark:bg-gray-600 dark:text-white' : '' }} inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                    <svg class="w-6 h-6 me-2.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z" />
                    </svg>
                    Todos
                </button>
                <button type="button" wire:click="$set('statusSelect', 'Completed')"
                    class="{{ $statusSelect == 'Completed' ? 'bg-gray-100 text-blue-700 dark:bg-gray-600 dark:text-white' : '' }} inline-flex items-center w-full px-4 py-2 text-sm font-medium border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                    <svg class="w-6 h-6 me-2.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                    </svg>
                    Completados
                </button>
                <button type="button" wire:click="$set('statusSelect', 'Cancelled')"
                    class="{{ $statusSelect == 'Cancelled' ? 'bg-gray-100 text-blue-700 dark:bg-gray-600 dark:text-white' : '' }} inline-flex items-center w-full px-4 py-2 text-sm font-medium rounded-b-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                    <svg class="w-6 h-6 me-2.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636" />
                    </svg>
                    Anulados
                </button>
            </div>
        </div>
        <div class="w-full md:w-3/4 flex flex-col gap-4">
            @if ($sales)
            @foreach ($sales as $sale)
            <div
                class="w-full p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">
                <div>
                    @if ($sale->status != 'Anulada')
                    <ol class="flex items-center">
                        <li class="w-full mb-6">
                            <div class="flex items-center">
                                <div class="flex w-full h-0.5 {{ $sale->status == 'En Producción' ||
                                                $sale->status == 'En Despacho' ||
                                                $sale->status == 'Listo Retiro' ||
                                                $sale->status == 'Pagada' ||
                                                $sale->status == 'Entregado'
                                                    ? 'bg-green-600 dark:bg-green-600'
                                                    : 'bg-gray-400 dark:bg-gray-700' }}">
                                </div>
                                <div class="flex items-center justify-center w-6 h-6 {{ $sale->status == 'En Producción' ||
                                                $sale->status == 'En Despacho' ||
                                                $sale->status == 'Listo Retiro' ||
                                                $sale->status == 'Pagada' ||
                                                $sale->status == 'Entregado'
                                                    ? 'bg-green-600 dark:bg-green-600'
                                                    : 'bg-gray-400 dark:bg-gray-700' }} rounded-full ring-0 shrink-0">
                                    <svg class="w-2.5 h-2.5 text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" />
                                    </svg>
                                </div>
                            </div>
                            <div class="mt-3 text-right">
                                <h3 class="text-xs text-gray-900 dark:text-white">
                                    @if (
                                    $sale->status == 'En Producción' ||
                                    $sale->status == 'En Despacho' ||
                                    $sale->status == 'Listo Retiro' ||
                                    $sale->status == 'Pagada' ||
                                    $sale->status == 'Entregado')
                                    Confirmada
                                    @else
                                    Esperando
                                    @endif
                                </h3>
                            </div>
                        </li>
                        <li class="w-full mb-6">
                            <div class="flex items-center">
                                <div class="flex w-full h-0.5 {{ $sale->status == 'En Producción' ||
                                                $sale->status == 'En Despacho' ||
                                                $sale->status == 'Listo Retiro' ||
                                                $sale->status == 'Pagada' ||
                                                $sale->status == 'Entregado'
                                                    ? 'bg-green-600 dark:bg-green-600'
                                                    : 'bg-gray-400 dark:bg-gray-700' }}">
                                </div>
                                <div class="flex items-center justify-center w-6 h-6 {{ $sale->status == 'En Producción' ||
                                                $sale->status == 'En Despacho' ||
                                                $sale->status == 'Listo Retiro' ||
                                                $sale->status == 'Pagada' ||
                                                $sale->status == 'Entregado'
                                                    ? 'bg-green-600 dark:bg-green-600'
                                                    : 'bg-gray-400 dark:bg-gray-700' }} rounded-full ring-0 shrink-0">
                                    <svg class="w-2.5 h-2.5 text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" />
                                    </svg>
                                </div>
                            </div>
                            <div class="mt-3 text-right">
                                <h3 class="text-xs text-gray-900 dark:text-white">En Producción</h3>
                            </div>
                        </li>
                        <li class="w-full mb-6">
                            <div class="flex items-center">
                                <div class="flex w-full h-0.5 {{ $sale->status == 'En Despacho' ||
                                                $sale->status == 'Listo Retiro' ||
                                                $sale->status == 'Pagada' ||
                                                $sale->status == 'Entregado'
                                                    ? 'bg-green-600 dark:bg-green-600'
                                                    : 'bg-gray-400 dark:bg-gray-700' }}">
                                </div>
                                <div class="flex items-center justify-center w-6 h-6 {{ $sale->status == 'En Despacho' ||
                                                $sale->status == 'Listo Retiro' ||
                                                $sale->status == 'Pagada' ||
                                                $sale->status == 'Entregado'
                                                    ? 'bg-green-600 dark:bg-green-600'
                                                    : 'bg-gray-400 dark:bg-gray-700' }} rounded-full ring-0 shrink-0">
                                    <svg class="w-2.5 h-2.5 text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" />
                                    </svg>
                                </div>
                            </div>
                            <div class="mt-3 text-right">
                                <h3 class="text-xs text-gray-900 dark:text-white">
                                    @if ($sale->type_sale == 'Despacho')
                                    En Despacho
                                    @else
                                    Listo Para Retiro
                                    @endif
                                </h3>
                            </div>
                        </li>
                        <li class="w-full mb-6">
                            <div class="flex items-center">
                                <div class="flex w-full h-0.5 {{ $sale->status == 'Pagada' || $sale->status == 'Entregado'
                                                    ? 'bg-green-600 dark:bg-green-600'
                                                    : 'bg-gray-400 dark:bg-gray-700' }}">
                                </div>
                                <div class="flex items-center justify-center w-6 h-6 {{ $sale->status == 'Pagada' || $sale->status == 'Entregado'
                                                    ? 'bg-green-600 dark:bg-green-600'
                                                    : 'bg-gray-400 dark:bg-gray-700' }} rounded-full ring-0 shrink-0">
                                    <svg class="w-2.5 h-2.5 text-white" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" />
                                    </svg>
                                </div>
                            </div>
                            <div class="mt-3 text-right">
                                <h3 class="text-xs text-gray-900 dark:text-white">
                                    @if ($sale->status == 'Anulada')
                                    Anulada
                                    @else
                                    Entregado
                                    @endif
                                </h3>
                            </div>
                        </li>
                    </ol>
                    @endif

                </div>
                <div class="flex flex-col md:flex-row">
                    <div class="w-full md:w-3/4">
                        <h5 class="mb-1 font-bold text-gray-900 dark:text-white">
                            {{ $sale->type_sale }}
                        </h5>
                        <h6 class="mb-2 text-lg font-bold text-gray-900 dark:text-white">
                            ORDEN: #{{ strtoupper(substr($sale->uuid, -10)) }}
                        </h6>
                        @if ($sale->type_sale == 'Despacho')
                        @if ($sale->address)
                        <p class="mb-2 text-base text-gray-500 dark:text-gray-400">
                            {{ $sale->address->address }} - {{ $sale->address->state }}
                        </p>
                        @endif
                        @endif
                        @if ($sale->type_sale == 'Retiro')
                        <p class="mb-0 text-base text-gray-500 dark:text-gray-400">
                            {{ $sale->company->name }}</p>
                        <p class="mb-0 text-base text-gray-500 dark:text-gray-400">
                            {{ $sale->company->address }}
                            - {{ $sale->company->commune }}
                        </p>
                        @endif
                    </div>
                    <div class="w-full md:w-1/4 text-center">
                        <p class="text-sm rounded mb-1
                                        {{ $sale->status == 'Sin Confirmar' ? 'text-gray-100 bg-slate-500' : ($sale->status == 'En Producción' ? 'text-gray-800 bg-amber-400' : ($sale->status == 'En Despacho' || $sale->status == 'Listo Retiro' ? 'text-gray-800 bg-cyan-500' : ($sale->status == 'Anulada' ? 'text-gray-100 bg-red-600' : 'text-gray-200 bg-green-600'))) }}
                                        ">
                            {{ $sale->status == 'Pagada' ? 'Entregado' : ($sale->status == 'Listo Retiro' ? 'Listo Para
                            Retiro' : ($sale->status == 'Sin Confirmar' ? 'Esperando Confirmación' : $sale->status)) }}
                        </p>
                        <p class="mb-2 text-sm text-gray-500 dark:text-gray-400 flex justify-center items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 me-2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                            </svg>
                            {{ \Carbon\Carbon::create($sale->created_at)->format('d/m/y H:i') }}
                        </p>
                    </div>
                </div>

                <hr class="mt-2 mb-2">

                <div class="flex flex-col md:flex-row pt-3">
                    <div class="pr-1 w-full md:w-3/4 lg:w-9/12 xl:w-10/12 mb-5">
                        @foreach ($sale->saleDetails as $detail)
                        <p class="font-light text-gray-500 dark:text-gray-400 text-sm mb-1 md:mb-0">
                            {{ $detail->quantity }}
                            X {{ $detail->name }}<br>
                            @foreach ($detail->optionsDetails as $option)
                            &#8194 * {{ $option->name }}<br>
                            @endforeach
                        </p>
                        @endforeach
                    </div>
                    <div class="w-full md:w-1/4 lg:w-3/12 xl:w-2/12 font-light text-sm pl-1 m-0 md:ml-auto">
                        <p class="flex text-gray-500 dark:text-gray-400 justify-between">
                            SubTotal: <span class="ml-2 mb-0">{{ $currency['symbol'] }} {{
                                number_format($sale->subtotal, $currency['decimals'], $currency['decimal_separator'],
                                $currency['thousands_separator']) }}</span>
                        </p>
                        <p class="flex text-gray-500 dark:text-gray-400 justify-between">
                            Propina: <span class="ml-2 mb-0">{{ $currency['symbol'] }} {{ number_format($sale->tip,
                                $currency['decimals'], $currency['decimal_separator'], $currency['thousands_separator'])
                                }}</span>
                        </p>
                        <p class="flex text-gray-500 dark:text-gray-400 justify-between">
                            Despacho: <span class="ml-2 mb-0">{{ $currency['symbol'] }} {{
                                number_format($sale->price_delivery, $currency['decimals'],
                                $currency['decimal_separator'], $currency['thousands_separator']) }}</span>
                        </p>
                        <p class="flex text-gray-500 dark:text-gray-400 justify-between">
                            Descuento: <span class="ml-2 mb-0">{{ $currency['symbol'] }} {{
                                number_format($sale->discount, $currency['decimals'], $currency['decimal_separator'],
                                $currency['thousands_separator']) }}</span>
                        </p>
                        <p class="flex text-gray-500 dark:text-gray-400 justify-between">
                            Total: <span class="ml-2 mb-0">{{ $currency['symbol'] }} {{ number_format($sale->total,
                                $currency['decimals'], $currency['decimal_separator'], $currency['thousands_separator'])
                                }}</span>
                        </p>
                    </div>
                </div>
            </div>
            @endforeach
            <div class="flex justify-center">
                {{ $sales->links() }}
            </div>
            @endif
        </div>
    </div>
</div>