@extends('layouts.customer')

@section('content')
    <div class="container-fluid disable-text-selection">
        <div class="row">
            <div class="col-12">
                <div class="mb-2">
                    <h1>Orders</h1>
                    <div class="top-right-button-container"></div>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                            <li class="breadcrumb-item">
                                <a href="#">Home</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Order</li>
                        </ol>
                    </nav>
                </div>

                <div class="mb-2">
                    <a class="btn pt-0 pl-0 d-inline-block d-md-none" data-toggle="collapse" href="#displayOptions" role="button" aria-expanded="true" aria-controls="displayOptions">
                        Display Options
                        <i class="simple-icon-arrow-down align-middle"></i>
                    </a>
                    <div class="collapse dont-collapse-sm d-flex justify-content-end" id="displayOptions">
                        {{-- <span class="mr-3 mb-2 d-inline-block float-md-left">
                            <a href="#" class="mr-2 view-icon active">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
                                    <path class="view-icon-svg" d="M17.5,3H.5a.5.5,0,0,1,0-1h17a.5.5,0,0,1,0,1Z"></path>
                                    <path class="view-icon-svg" d="M17.5,10H.5a.5.5,0,0,1,0-1h17a.5.5,0,0,1,0,1Z"></path>
                                    <path class="view-icon-svg" d="M17.5,17H.5a.5.5,0,0,1,0-1h17a.5.5,0,0,1,0,1Z"></path>
                                </svg>
                            </a>
                            <a href="#" class="mr-2 view-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
                                    <path class="view-icon-svg" d="M17.5,3H6.5a.5.5,0,0,1,0-1h11a.5.5,0,0,1,0,1Z"></path>
                                    <path class="view-icon-svg" d="M3,2V3H1V2H3m.12-1H.88A.87.87,0,0,0,0,1.88V3.12A.87.87,0,0,0,.88,4H3.12A.87.87,0,0,0,4,3.12V1.88A.87.87,0,0,0,3.12,1Z"></path>
                                    <path class="view-icon-svg" d="M3,9v1H1V9H3m.12-1H.88A.87.87,0,0,0,0,8.88v1.24A.87.87,0,0,0,.88,11H3.12A.87.87,0,0,0,4,10.12V8.88A.87.87,0,0,0,3.12,8Z"></path>
                                    <path class="view-icon-svg" d="M3,16v1H1V16H3m.12-1H.88a.87.87,0,0,0-.88.88v1.24A.87.87,0,0,0,.88,18H3.12A.87.87,0,0,0,4,17.12V15.88A.87.87,0,0,0,3.12,15Z"></path>
                                    <path class="view-icon-svg" d="M17.5,10H6.5a.5.5,0,0,1,0-1h11a.5.5,0,0,1,0,1Z"></path>
                                    <path class="view-icon-svg" d="M17.5,17H6.5a.5.5,0,0,1,0-1h11a.5.5,0,0,1,0,1Z"></path></svg>
                            </a>
                            <a href="#" class="mr-2 view-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
                                    <path class="view-icon-svg" d="M7,2V8H1V2H7m.12-1H.88A.87.87,0,0,0,0,1.88V8.12A.87.87,0,0,0,.88,9H7.12A.87.87,0,0,0,8,8.12V1.88A.87.87,0,0,0,7.12,1Z"></path>
                                    <path class="view-icon-svg" d="M17,2V8H11V2h6m.12-1H10.88a.87.87,0,0,0-.88.88V8.12a.87.87,0,0,0,.88.88h6.24A.87.87,0,0,0,18,8.12V1.88A.87.87,0,0,0,17.12,1Z"></path>
                                    <path class="view-icon-svg" d="M7,12v6H1V12H7m.12-1H.88a.87.87,0,0,0-.88.88v6.24A.87.87,0,0,0,.88,19H7.12A.87.87,0,0,0,8,18.12V11.88A.87.87,0,0,0,7.12,11Z"></path>
                                    <path class="view-icon-svg" d="M17,12v6H11V12h6m.12-1H10.88a.87.87,0,0,0-.88.88v6.24a.87.87,0,0,0,.88.88h6.24a.87.87,0,0,0,.88-.88V11.88a.87.87,0,0,0-.88-.88Z"></path>
                                </svg>
                            </a>
                        </span> --}}
                        <div class="d-block d-md-inline-block">
                            <div class="search-sm calendar-sm d-inline-block float-md-left mr-1 mb-1 align-top">
                                <form action="{{ route('orders.index',['account'=>$account]) }}" method="GET">
                                    <input class="form-control datepicker" value="{{ $order_date }}" name="order_date" onchange="this.form.submit()" placeholder="Search by day">
                                </form>
                            </div>
                        </div>
                        <div class="float-md-right"></div>
                    </div>
                </div>
                <div class="separator mb-5"></div>
            </div>
        </div>

        <div class="row mb-2">
            @if ($message = Session::get('success'))
                <div class="w-100 alert alert-success">
                    <p>{{ $message }}</p>
                </div>
            @endif
        </div>

        <!-- squareOrders -->
        <div class="row">
            <div class="col-12 list" data-check-all="checkAll">
                @if( $cloverOrders )
                    @php $i = 0; @endphp

                    <div class="card">
                        <div class="card-body">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Customer Name</th>
                                        <th scope="col">Order Placed</th>
                                        <th scope="col">Order Delivered</th>
                                        <th scope="col">Order Amount</th>
                                        <th scope="col">Order Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($cloverOrders as $order)
                                    <tr>
                                        <th scope="row">#{{ $order->id }}</th>
                                        <td></td>
                                        <td>{{-- date('F j, Y', $order->createdTime) --}} <br /> {{-- date('H:i:s A', $order->createdTime) --}}</td>
                                        <td>-</td>
                                        <td>{{ $order->currency }} {{ $order->total }}</td>
                                        <td>
                                            @php $color = ''; @endphp
                                            @if( 'completed' == strtolower($order->state) )
                                                @php $color = '#4caf50 !important'; @endphp
                                            @endif
                                            @if( 'pending' == strtolower($order->state) )
                                                @php $color = '#ffc107 !important'; @endphp
                                            @endif
                                            @if( 'rejected' == strtolower($order->state) )
                                                @php $color = '#f44336 !important'; @endphp
                                            @endif
                                            <span class="badge badge-pill badge-secondary" @if($color) style="background-color:{{ $color }}" @endif >{{ $order->state }}</span>
                                        </td>
                                        <td>
                                            <a class="btn btn-secondary btn-sm" href="{{ route('orders.show',['account'=>$account,'order'=>$order->id]) }}">
                                                View
                                            </a>
                                            @if( "completed" != strtolower($order->state) )
                                            {{-- <a class="btn btn-secondary btn-sm" href="{{ route('orders.edit',['account'=>$account,'order'=>$order->id]) }}">
                                                Edit
                                            </a> --}}
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    
                        {{-- <div class="card d-flex flex-row mb-3 {{ ( $i == 0 ) ? 'active' : '' }}">
                            <div class="d-flex flex-grow-1 min-width-zero">
                                <div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
                                    <p class="mb-0 text-muted text-small w-10 w-xs-100">
                                        <a href="{{ route('orders.show',['account'=>$account,'order'=>$order->id]) }}">##{{ $order->id }}</a>
                                    </p>
                                    <p class="mb-0 text-muted text-small w-15 w-xs-100">
                                        <a href="{{ route('orders.show',['account'=>$account,'order'=>$order->id]) }}">{{ $order->getLocationId() }}</a>
                                    </p>
                                    <div class="w-15 w-xs-100">
                                        <span class="badge badge-pill badge-secondary">{{ $order->state }}</span> 
                                    </div>

                                    <div class="w-15 w-xs-100">
                                        {{ $order->currency }} {{ $order->total }}
                                    </div>
                                </div>
                                <label class="custom-control custom-checkbox mb-1 align-self-center pr-4">
                                    <input type="checkbox" class="custom-control-input">
                                    <span class="custom-control-label">&nbsp;</span>
                                </label>
                            </div>
                        </div> --}}
                @else
                    <div class="card">
                        <div class="card-body">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Customer Name</th>
                                        <th scope="col">Order Placed</th>
                                        <th scope="col">Order Delivered</th>
                                        <th scope="col">Order Amount</th>
                                        <th scope="col">Order Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="6">No records found!</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif
            </div>
        </div>
        <!-- squareOrders -->
    </div>
@endsection