@php
$currency = $brandCurrency;
@endphp
<div class="container" style="margin-top: 80px;">
    <div class="py-5 osahan-track-order-page row">
        <div class="col-md-3 mb-3">
            <ul class="nav nav-tabsa custom-tabsa border-0 flex-column bg-white rounded overflow-hidden shadow-sm p-2 c-t-order"
                id="myTab" role="tablist">
                <li class="nav-item border-top" role="presentation" wire:click="$set('statusSelect', 'In Progress')">
                    <a class="nav-link border-0 text-dark py-3 {{$statusSelect == 'In Progress' ? 'active' : ''}}"
                        id="progress-tab" data-toggle="tab" href="javascript:void(0)" role="tab"
                        aria-controls="progress" aria-selected="false">
                        <i class="feather-clock mr-2 text-warning mb-0"></i> En Curso</a>
                </li>
                <li class="nav-item" role="presentation" wire:click="$set('statusSelect', 'All')">
                    <a class="nav-link border-0 text-dark py-3 {{$statusSelect == 'All' ? 'active' : ''}}"
                        id="completed-tab" data-toggle="tab" href="javascript:void(0)" role="tab"
                        aria-controls="completed" aria-selected="true">
                        <i class="feather-list mr-2 text-dark mb-0"></i> Todos</a>
                </li>
                <li class="nav-item" role="presentation" wire:click="$set('statusSelect', 'Completed')">
                    <a class="nav-link border-0 text-dark py-3 {{$statusSelect == 'Completed' ? 'active' : ''}}"
                        id="completed-tab" data-toggle="tab" href="javascript:void(0)" role="tab"
                        aria-controls="completed" aria-selected="false">
                        <i class="feather-check mr-2 text-success mb-0"></i> Completados</a>
                </li>
                <li class="nav-item border-top" role="presentation" wire:click="$set('statusSelect', 'Cancelled')">
                    <a class="nav-link border-0 text-dark py-3 {{$statusSelect == 'Cancelled' ? 'active' : ''}}"
                        id="canceled-tab" data-toggle="tab" href="javascript:void(0)" role="tab"
                        aria-controls="canceled" aria-selected="false">
                        <i class="feather-x-circle mr-2 text-danger mb-0"></i> Cancelados</a>
                </li>
            </ul>
        </div>
        <div class="tab-content col-md-9" id="myTabContent">
            @if($sales)
            @foreach($sales as $sale)
            <div class="order-body">
                <div class="pb-3">
                    <div class="p-3 rounded shadow-sm bg-white">
                        {{$sale->type_sale}}
                        <div class="mb-3">
                            <div
                                class="d-flex flex-row justify-content-between align-items-center align-content-center">
                                @if($sale->status == 'Sin Confirmar')
                                <span class="big-dot"></span>
                                <hr class="flex-fill track-line-off">
                                <span class="dot-off"></span>
                                <hr class="flex-fill track-line-off">
                                <span class="dot-off"></span>
                                <hr class="flex-fill track-line-off">
                                <span class="dot-off d-flex justify-content-center align-items-center">
                                </span>
                                @endif
                                @if($sale->status == 'En Producción')
                                <span class="dot"></span>
                                <hr class="flex-fill track-line">
                                <span class="big-dot"></span>
                                <hr class="flex-fill track-line-off">
                                <span class="dot-off"></span>
                                <hr class="flex-fill track-line-off">
                                <span class="dot-off d-flex justify-content-center align-items-center">
                                </span>
                                @endif
                                @if($sale->status == 'En Despacho' || $sale->status == 'Listo Retiro')
                                <span class="dot"></span>
                                <hr class="flex-fill track-line">
                                <span class="dot"></span>
                                <hr class="flex-fill track-line">
                                <span class="big-dot"></span>
                                <hr class="flex-fill track-line-off">
                                <span class="dot-off d-flex justify-content-center align-items-center">
                                </span>
                                @endif
                                @if($sale->status == 'Pagada')
                                <span class="dot"></span>
                                <hr class="flex-fill track-line">
                                <span class="dot"></span>
                                <hr class="flex-fill track-line">
                                <span class="dot"></span>
                                <hr class="flex-fill track-line">
                                <span class="big-dot d-flex justify-content-center align-items-center">
                                    <i class="feather-check text-white"></i>
                                </span>
                                @endif
                                @if($sale->status == 'Anulada')
                                <span class="dot-danger"></span>
                                <hr class="flex-fill track-line-danger">
                                <span class="dot-danger"></span>
                                <hr class="flex-fill track-line-danger">
                                <span class="dot-danger"></span>
                                <hr class="flex-fill track-line-danger">
                                <span class="big-dot-danger d-flex justify-content-center align-items-center">
                                    <i class="feather-check text-white"></i>
                                </span>
                                @endif
                            </div>
                            <div class="d-flex flex-row justify-content-between align-items-center">
                                @if($sale->status == 'Sin Confirmar')
                                <div class="d-flex flex-column align-items-start text-success">
                                    <span>Esperando Confirmación</span>
                                </div>
                                <div class="d-flex flex-column align-items-center">
                                    <span>En Producción</span>
                                </div>
                                <div class="d-flex flex-column align-items-center">
                                    @if($sale->type_sale == 'Despacho')
                                    <span>En Despacho</span>
                                    @else
                                    <span>Listo Para Retiro</span>
                                    @endif
                                </div>
                                <div class="d-flex flex-column align-items-end">
                                    @if($sale->status == 'Anulada')
                                    <span>Anulada</span>
                                    @else
                                    <span>Entregado</span>
                                    @endif
                                </div>
                                @endif
                                @if($sale->status == 'En Producción')
                                <div class="d-flex flex-column align-items-start text-success">
                                    <span>Confirmada</span>
                                </div>
                                <div class="d-flex flex-column align-items-center text-success">
                                    <span>En Producción</span>
                                </div>
                                <div class="d-flex flex-column align-items-center">
                                    @if($sale->type_sale == 'Despacho')
                                    <span>En Despacho</span>
                                    @else
                                    <span>Listo Para Retiro</span>
                                    @endif
                                </div>
                                <div class="d-flex flex-column align-items-end">
                                    <span>Entregado</span>
                                </div>
                                @endif
                                @if($sale->status == 'En Despacho' || $sale->status == 'Listo Retiro')
                                <div class="d-flex flex-column align-items-start text-success">
                                    <span>Confirmada</span>
                                </div>
                                <div class="d-flex flex-column align-items-center text-success">
                                    <span>En Producción</span>
                                </div>
                                <div class="d-flex flex-column align-items-center text-success">
                                    @if($sale->type_sale == 'Despacho')
                                    <span>En Despacho</span>
                                    @else
                                    <span>Listo Para Retiro</span>
                                    @endif
                                </div>
                                <div class="d-flex flex-column align-items-end">
                                    <span>Entregado</span>
                                </div>
                                @endif
                                @if($sale->status == 'Pagada')
                                <div class="d-flex flex-column align-items-start text-success">
                                    <span>Confirmada</span>
                                </div>
                                <div class="d-flex flex-column align-items-center text-success">
                                    <span>En Producción</span>
                                </div>
                                <div class="d-flex flex-column align-items-center text-success">
                                    @if($sale->type_sale == 'Despacho')
                                    <span>En Despacho</span>
                                    @else
                                    <span>Listo Para Retiro</span>
                                    @endif
                                </div>
                                <div class="d-flex flex-column align-items-end text-success">
                                    <span>Entregado</span>
                                </div>
                                @endif
                                @if($sale->status == 'Anulada')
                                <div class="d-flex flex-column align-items-start text-danger">
                                    <span>Confirmada</span>
                                </div>
                                <div class="d-flex flex-column align-items-center text-danger">
                                    <span>En Producción</span>
                                </div>
                                <div class="d-flex flex-column align-items-center text-danger">
                                    @if($sale->type_sale == 'Despacho')
                                    <span>En Despacho</span>
                                    @else
                                    <span>Listo Para Retiro</span>
                                    @endif
                                </div>
                                <div class="d-flex flex-column align-items-end text-danger">
                                    <span>Anulada</span>
                                </div>
                                @endif
                            </div>
                        </div>
                        <div class="d-flex border-bottom pb-3">
                            <div>
                                <h6>ORDEN: #{{ strtoupper(substr($sale->uuid, -8)) }}</h6>

                                @if($sale->type_sale == 'Despacho')
                                @if($sale->address)
                                <p class="text-dark mb-1">
                                    {{ $sale->address->address }} - {{ $sale->address->state }}
                                </p>
                                @endif
                                @endif
                                @if($sale->type_sale == 'Retiro')
                                <p class="text-dark mb-1">{{ $sale->company->name }}</p>
                                <p class="text-dark mb-1">
                                    {{ $sale->company->address }}
                                    - {{ $sale->company->commune }}
                                </p>
                                @endif
                                {{--<p class="mb-0 small"><a href="status_onprocess.html">View Details</a></p>--}}
                            </div>
                            <div class="ml-auto">
                                <p class="py-1 px-2 rounded small mb-1 text-center
                                        {{ $sale->status == 'Sin Confirmar' ? 'bg-info text-white' : ($sale->status == 'En Producción' ? 'bg-warning text-black': ($sale->status == 'En Despacho' || $sale->status == 'Listo Retiro' ? 'bg-secondary text-white': ($sale->status == 'Anulada' ? 'bg-danger text-white': 'bg-success text-white'))) }}
                                        ">
                                    {{ $sale->status == 'Pagada' ? 'Entregado' : ($sale->status == 'Listo Retiro' ?
                                    'Listo Para Retiro' : $sale->status) }}
                                </p>
                                <p class="small font-weight-bold text-center"><i class="feather-clock"></i>
                                    {{ \Carbon\Carbon::create($sale->created_at)->format('d/m/y H:i') }}</p>
                                {{--<div class="text-right">
                                    <a href="status_onprocess.html" class="btn btn-primary px-3">Track</a>
                                    <a href="contact-us.html" class="btn btn-outline-primary px-3">Help</a>
                                </div>--}}
                            </div>
                        </div>
                        <div class="d-flex pt-3">
                            <div class="small pr-1">
                                @foreach($sale->saleDetails as $detail)
                                <p class="font-weight-bold mb-1">{{ $detail->quantity }}
                                    X {{ $detail->name }}<br>
                                    @foreach($detail->optionsDetails as $option)
                                    &#8194 * {{ $option->name }}<br>
                                    @endforeach
                                </p>
                                @endforeach
                            </div>
                            <div class="text-muted pl-1 m-0 ml-auto small">
                                <p class="mb-1">
                                    SubTotal: <span class="ml-2 text-dark font-weight-bold float-right">{{
                                        $currency['symbol'] }} {{ number_format($sale->subtotal, $currency['decimals'],
                                        $currency['decimal_separator'], $currency['thousands_separator']) }}</span>
                                </p>
                                <p class="mb-1">
                                    Propina: <span class="ml-2 text-dark font-weight-bold float-right">{{
                                        $currency['symbol'] }} {{ number_format($sale->tip, $currency['decimals'],
                                        $currency['decimal_separator'], $currency['thousands_separator']) }}</span>
                                </p>
                                <p class="mb-1">
                                    Despacho: <span class="ml-2 text-dark font-weight-bold float-right">{{
                                        $currency['symbol'] }} {{ number_format($sale->price_delivery,
                                        $currency['decimals'], $currency['decimal_separator'],
                                        $currency['thousands_separator']) }}</span>
                                </p>
                                <p class="mb-1">
                                    Descuento: <span class="ml-2 text-dark font-weight-bold float-right">{{
                                        $currency['symbol'] }} {{ number_format($sale->discount, $currency['decimals'],
                                        $currency['decimal_separator'], $currency['thousands_separator']) }}</span>
                                </p>
                                <p class="mb-1">
                                    Total: <span class="ml-2 text-dark font-weight-bold float-right">{{
                                        $currency['symbol'] }} {{ number_format($sale->total, $currency['decimals'],
                                        $currency['decimal_separator'], $currency['thousands_separator']) }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            {{$sales->links()}}
            @endif
            {{--<div class="order-body">
                <div class="pb-3">
                    <div class="p-3 rounded shadow-sm bg-white">
                        <div class="d-flex border-bottom pb-3">
                            <div class="text-muted mr-3">
                                <img alt="#" src="img/popular5.png" class="img-fluid order_img rounded">
                            </div>
                            <div>
                                <p class="mb-0 font-weight-bold"><a href="restaurant.html" class="text-dark">Conrad
                                        Chicago Restaurant</a></p>
                                <p class="mb-0">Punjab, India</p>
                                <p>ORDER #321DERS</p>
                                <p class="mb-0 small"><a href="status_complete.html">View Details</a></p>
                            </div>
                            <div class="ml-auto">
                                <p class="bg-success text-white py-1 px-2 rounded small mb-1">Delivered</p>
                                <p class="small font-weight-bold text-center"><i class="feather-clock"></i>
                                    06/04/2020</p>
                            </div>
                        </div>
                        <div class="d-flex pt-3">
                            <div class="small">
                                <p class="text- font-weight-bold mb-0">Kesar Sweet x 1</p>
                                <p class="text- font-weight-bold mb-0">Gulab Jamun x 4</p>
                            </div>
                            <div class="text-muted m-0 ml-auto mr-3 small">Total Payment<br>
                                <span class="text-dark font-weight-bold">$12.74</span>
                            </div>
                            <div class="text-right">
                                <a href="checkout.html" class="btn btn-primary px-3">Reorder</a>
                                <a href="contact-us.html" class="btn btn-outline-primary px-3">Help</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-body">
                <div class="pb-3">
                    <div class="p-3 rounded shadow-sm bg-white">
                        <div class="d-flex border-bottom pb-3">
                            <div class="text-muted mr-3">
                                <img alt="#" src="img/popular6.png" class="img-fluid order_img rounded">
                            </div>
                            <div>
                                <p class="mb-0 font-weight-bold"><a href="restaurant.html" class="text-dark">Conrad
                                        Chicago Restaurant</a></p>
                                <p class="mb-0">Punjab, India</p>
                                <p>ORDER #321DERS</p>
                                <p class="mb-0 small"><a href="status_canceled.html">View Details</a></p>
                            </div>
                            <div class="ml-auto">
                                <p class="bg-danger text-white py-1 px-2 rounded small mb-1">Payment failed</p>
                                <p class="small font-weight-bold text-center"><i class="feather-clock"></i>
                                    06/04/2020</p>
                            </div>
                        </div>
                        <div class="d-flex pt-3">
                            <div class="small">
                                <p class="text- font-weight-bold mb-0">Kesar Sweet x 1</p>
                                <p class="text- font-weight-bold mb-0">Gulab Jamun x 4</p>
                            </div>
                            <div class="text-muted m-0 ml-auto mr-3 small">Total Payment<br>
                                <span class="text-dark font-weight-bold">$12.74</span>
                            </div>
                            <div class="text-right">
                                <a href="contact-us.html" class="btn btn-outline-primary px-3">Help</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>--}}
        </div>
    </div>
    <style>
        .track-line {
            height: 2px !important;
            background-color: green
        }

        .track-line-off {
            height: 2px !important;
            background-color: grey;
        }

        .dot {
            height: 10px;
            width: 10px;
            margin-left: 3px;
            margin-right: 3px;
            margin-top: 0px;
            background-color: green;
            border-radius: 50%;
            display: inline-block
        }

        .dot-off {
            height: 10px;
            width: 10px;
            margin-left: 3px;
            margin-right: 3px;
            margin-top: 0px;
            background-color: grey !important;
            border-radius: 50%;
            display: inline-block
        }

        .big-dot {
            height: 25px;
            width: 25px;
            margin-left: 0px;
            margin-right: 0px;
            margin-top: 0px;
            background-color: green;
            border-radius: 50%;
            display: inline-block
        }

        .big-dot-danger {
            height: 25px;
            width: 25px;
            margin-left: 0px;
            margin-right: 0px;
            margin-top: 0px;
            background-color: red;
            border-radius: 50%;
            display: inline-block
        }

        .dot-danger {
            height: 10px;
            width: 10px;
            margin-left: 3px;
            margin-right: 3px;
            margin-top: 0px;
            background-color: red;
            border-radius: 50%;
            display: inline-block
        }

        .track-line-danger {
            height: 2px !important;
            background-color: red
        }

        .big-dot i {
            font-size: 12px
        }

        .big-dot-danger i {
            font-size: 12px
        }
    </style>
</div>