@if(@count(@$orders) > 0)
@foreach($orders as $order)
<!-- https://square.online/app/store/users/120232852/sites/942219626235880066/#/store/orders/96006863 -->
<div class="divOrder mb-4">
    <div class="card db-card order-card">
        <div class="card-header align-items-center">
            <div class="" style="flex:1">
                <h3>
                    <i class="bi bi-calendar4-week"></i>
                    {!! convertUtcToLocal($order['created_at'],config('constants.DISPLAY_DATE_TIME_ZONE_FORMAT')) !!}
                </h3>
                <span>Order ID : {!! $order['id'] !!}</span>
            </div>
            <div class="amount-cell">
                <span>Order Amount</span>
                <h6>{!! $order['total'] !!}</h6>
            </div>
            <button type="button" class="btn btnCollapse" data-toggle="collapse" data-bs-toggle="collapse" data-bs-target="#order-{!! $order['id'] !!}" data-target="#order-{!! $order['id'] !!}" aria-expanded="false" style="border-bottom: 0;" data-collapseonce="0" aria-controls="#order-{!! $order['id'] !!}">
                <div class="icon"></div>
            </button>
        </div>
        <div class="card-body collapse" id="order-{!! $order['id'] !!}">
            <div class="order-invoice">
                <div class="order-invoice-row lable-header">
                    <div class="cell"><div class="or-th">Item</div></div>
                    <div class="cell"><div class="or-th">SKU</div></div>
                    <div class="cell"><div class="or-th">Status</div></div>
                    <div class="cell"><div class="or-th">Price</div></div>
                    <div class="cell"><div class="or-th">Qty</div></div>
                    <div class="cell"><div class="or-th">Total</div></div>
                </div>

                @if(count($order['items']))
                @foreach($order['items'] as $items)
                <div class="order-invoice-row divItem" style="align-items: center;" data-catalog_object_id="{!! $items['catalog_object_id'] !!}" data-catalog_version="{!! $items['catalog_version'] !!}">
                    <div class="cell">
                        <div class="order-item">
                            <div class="img">
                                <img class="itemimg" src="{!! $items['image'] !!}" alt="{!! @$items['name'] !!}">
                            </div>
                            <div class="content">
                                <h6><a href="javascript:void(0)" class="itemlink">{!! @$items['name'] !!}</a></h6>
                                <p>
                                    <!-- <span>Variation :</span>  -->
                                    {!! @$items['variation_name'] !!}
                                </p>
                                @if(count($items['modifiers']))
                                <p>
                                    <!-- <span>Modifiers:</span> -->
                                    @foreach($items['modifiers'] as $modifiers)
                                    {!! $modifiers['name']." (+ ".@$modifiers['amount'] .")" !!}<BR>
                                    @endforeach
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="cell"><div class="or-tr"><label>SKU:</label> {!! @$items['sku'] !!}</div></div>
                    <div class="cell"><div class="or-tr status-txt"><label>Status:</label> {!! @$items['status'] !!}</div></div>
                    <div class="cell"><div class="or-tr"><label>Price:</label> {!! @$items['price'] !!}</div></div>
                    <div class="cell"><div class="or-tr"><label>Qty:</label> {!! @$items['quantity'] !!}</div></div>
                    <div class="cell"><div class="or-tr"><label>Total:</label> {!! @$items['total'] !!}</div></div>
                </div>
                @endforeach
                @endif

                <div class="order-invoice-row total-row">
                    <div class="cell">&nbsp;</div>
                    <div class="cell"><div class="or-tr">&nbsp;</div></div>
                    <div class="cell"><div class="or-tr">&nbsp;</div></div>
                    <div class="cell2"><div class="or-th">Subtotal:</div></div>
                    <div class="cell"><div class="or-th">{!! @$order['subtotal'] !!}</div></div>
                </div>

                @if(count($order['discounts']))
                @foreach($order['discounts'] as $discounts)
                <div class="order-invoice-row total-row">
                    <div class="cell">Discount: {!! $discounts['name'] !!} @if($discounts['percentage']) ({!! $discounts['percentage'] !!}%) @endif</div>
                    <div class="cell"><div class="or-tr">&nbsp;</div></div>
                    <div class="cell"><div class="or-tr">&nbsp;</div></div>
                    <div class="cell"><div class="or-tr">&nbsp;</div></div>
                    <div class="cell"><div class="or-tr">&nbsp;</div></div>
                    <div class="cell"><div class="or-tr">-{!! @$discounts['amount'] !!}</div></div>
                </div>
                @endforeach
                @endif

                <div class="order-invoice-row total-row" style="border: 0;padding: 5px 10px;">
                    <div class="cell">&nbsp;</div>
                    <div class="cell"><div class="or-tr">&nbsp;</div></div>
                    <div class="cell"><div class="or-tr">&nbsp;</div></div>
                    @if(@$order['fulfillments']['type'] == "SHIPMENT")
                    <div class="cell"><div class="or-th">Shipping:</div></div>
                    <div class="cell"><div class="or-tr">{!! @$order['fulfillments']['shipping_type'] !!}</div></div>
                    <div class="cell"><div class="or-tr">{!! @$order['fulfillments']['shipping_charge'] !!}</div></div>
                    @else
                    <div class="cell2"><div class="or-th">In store pick up:</div></div>
                    <div class="cell"><div class="or-tr">{!! @$order['fulfillments']['pickup_charge'] !!}</div></div>
                    @endif
                </div>
                @if(isset($order['taxes'][0]['name']))
                <div class="order-invoice-row total-row" style="border: 0;padding: 5px 10px;">
                    <div class="cell">&nbsp;</div>
                    <div class="cell"><div class="or-tr">&nbsp;</div></div>
                    <div class="cell"><div class="or-tr">&nbsp;</div></div>
                    <div class="cell2"><div class="or-th">Tax: ({!! @$order['taxes'][0]['name'] !!})</div></div>
                    <div class="cell"><div class="or-tr">{!! @$order['taxes'][0]['amount'] !!}</div></div>
                </div>
                @endif
                <div class="order-invoice-row total-row">
                    <div class="cell">&nbsp;</div>
                    <div class="cell"><div class="or-tr">&nbsp;</div></div>
                    <div class="cell"><div class="or-tr">&nbsp;</div></div>
                    <div class="cell2"><div class="or-th" style="font-size: 20px;">Total:</div></div>
                    <div class="cell"><div class="or-th" style="font-size: 20px;">{!! @$order['total'] !!}</div></div>
                </div>
                <div class="order-invoice-row address">
                    <div class="cell">
                        <div class="address-view">
                            <h4>Fulfillment Details</h4>
                            @if(count($order['fulfillments']))

                                @if($order['fulfillments']['type'] == "SHIPMENT")
                                <h6>Ship to location</h6>
                                <p>{!! $order['fulfillments']['name'] !!}</p>
                                <p>{!! @$order['fulfillments']['address']['organization'] !!}</p>
                                <p>{!! @$order['fulfillments']['address']['address_line_1'] !!}</p>
                                <p>{!! @$order['fulfillments']['address']['locality'].', '.@$order['fulfillments']['address']['administrative_district_level_1'].' '.@$order['fulfillments']['address']['postal_code'] !!}</p>

                                <h6>Ship From Location</h6>
                                <p>{!! @$order['fulfillments']['shipping_from'] !!}</p>

                                <h6>Contact Information</h6>
                                @if(@$order['fulfillments']['phone'])
                                <p><a href="tel:{!! @$order['fulfillments']['phone'] !!}">{!! @$order['fulfillments']['phone'] !!}</a></p>
                                @endif
                                @if(@$order['fulfillments']['email'])
                                <p><a href="mailto:{!! @$order['fulfillments']['email'] !!}">{!! @$order['fulfillments']['email'] !!}</a></p>
                                @endif

                                <h6>Shipping Method</h6>
                                <p>{!! @$order['fulfillments']['shipping_method'] !!}</p>

                                @else

                                <h6>Contact information</h6>
                                <p>{!! $order['fulfillments']['name'] !!}</p>

                                @if(@$order['fulfillments']['phone'])
                                <p><a href="tel:{!! @$order['fulfillments']['phone'] !!}">{!! @$order['fulfillments']['phone'] !!}</a></p>
                                @endif
                                @if(@$order['fulfillments']['email'])
                                <p><a href="mailto:{!! @$order['fulfillments']['email'] !!}">{!! @$order['fulfillments']['email'] !!}</a></p>
                                @endif

                                <h6>Pickup Time</h6>
                                <p>{!! $order['fulfillments']['pickup_time'] ? convertUtcToLocal(@$order['fulfillments']['pickup_time'], config('constants.DISPLAY_DATE_TIME_ZONE_FORMAT')) : "-" !!}</p>

                                <h6>Pickup Location</h6>
                                <p>{!! @$order['fulfillments']['address']['organization'] !!}</p>
                                <p>{!! @$order['fulfillments']['address']['address_line_1'] !!}</p>
                                <p>{!! @$order['fulfillments']['address']['locality'].', '.@$order['fulfillments']['address']['administrative_district_level_1'].' '.@$order['fulfillments']['address']['postal_code'] !!}</p>

                                @endif
                            @endif
                        </div>
                    </div>
                    <div class="cell">
                        <div class="address-view">
                            <h4>Last Updated At</h4>
                            <p>{!! convertUtcToLocal($order['updated_at'],config('constants.DISPLAY_DATE_TIME_ZONE_FORMAT')) !!}</p>

                            <h6>Payment Method</h6>
                            <p>{!! @$order['payment_method'] !!}</p>

                            <!-- <p><strong>Billing Address</strong></p>
                            <p></p>
                            <p></p> -->

                            <h6>Contact Information</h6>
                            @if(@$order['fulfillments']['phone'])
                            <p><a href="tel:{!! @$order['fulfillments']['phone'] !!}">Phone : {!! @$order['fulfillments']['phone'] !!}</a></p>
                            @endif
                            @if(@$order['fulfillments']['email'])
                            <p><a href="mailto:{!! @$order['fulfillments']['email'] !!}">Email : {!! @$order['fulfillments']['email'] !!}</a></p>
                            @endif

                        </div>
                    </div>
                </div>
                <!-- <div class="order-invoice-row description">
                    <div class="cell"><div class="or-th">Date</div></div>
                    <div class="cell"><div class="or-th">Description</div></div>
                </div>
                <div class="order-invoice-row description">
                    <div class="cell">
                        <div class="or-tr">7/12/2022</div>
                    </div>
                    <div class="cell">
                        <div class="or-tr">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro aliquid officiis dicta cum beatae nemo dignissimos ducimus consequuntur consectetur similique iure voluptate sunt modi repellendus ratione, obcaecati nobis perferendis ex.
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</div>
@endforeach

@section('js')
@parent
<script>
$(document).on('click', ".btnCollapse", function () {
    if($(this).attr('data-collapseonce') == "0") {
        var divOrder = $(this).closest('div.divOrder');
        if($(divOrder).find(".divItem").length > 0) {
            $.each($(divOrder).find(".divItem"), function (k,v) {
                // console.log($(v).data('catalog_object_id'));
                // console.log($(v).data('catalog_version'));
                // var itemimg = $(v).find('img.itemimg');
                $('.loader').show();
                $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': _token
                    },
                    url: window.location.origin + '/squareup/retrieveCatalogObject',
                    data: { catalog_object_id : $(v).data('catalog_object_id'), catalog_version : $(v).data('catalog_version')},
                    success: function (data) {
                        console.log(data);
                        if(data.success == 1)
                        {
                            if (data.item && data.item.ecom_image_uris && data.item.ecom_image_uris[0]) {
                                $(v).find('img.itemimg').attr('src', data.item.ecom_image_uris[0]);
                            }
                            $(v).find('a.itemlink').attr('href',data.item.ecom_uri);
                            $(v).find('a.itemlink').attr('target',"_blank");
                            $('.loader').hide();
                        }
                        else
                        {
                            $('.loader').hide();
                        }
                    },
                    error: function (data, e) {
                        console.log(data);
                        $('.loader').hide();
                        // toastr.error("Please try again later!");
                    }
                });
            })
            $(this).attr('data-collapseonce',"1");
        }
    }
})
</script>
@stop
@else
<p class="no-data-text">No orders found!</p>
@endif