@extends('backend.layouts.app')

@section('order') open @endsection
@section($status) active @endsection

@section('content')
<!-- Page Content -->
<div class="content">

    <div class="row">
        <!-- Row #2 -->
        <div class="col-md-12">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">
                        All Orders
                    </h3>
                </div>
                <div class="block-content block-content-full">
                    <table class="table table-bordered table-striped table-vcenter js-dataTable-full">
                        <thead>
                            <tr>
                                <th width="15" class="text-center"></th>
                                <th width="25">Date</th>
                                <th class="d-none d-sm-table-cell">Invoice</th>
                                <th class="d-none d-sm-table-cell">Amount</th>
                                <th class="d-none d-sm-table-cell">Order Type</th>
                                <th class="d-none d-sm-table-cell" style="width: 15%;">Status</th>
                                <th class="text-center" style="width: 15%;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($orders as $order)
                            <tr>
                                <td class="text-center">{{ $loop->iteration }}</td>
                                <td class="d-none d-sm-table-cell" width="15%">{{ $order->order_date }}</td>
                                <td class="d-none d-sm-table-cell">Inv-#{{ $order->invoice_no }}</td>
                                <td class="d-none d-sm-table-cell">$ {{ $order->amount }}</td>
                                <td class="d-none d-sm-table-cell">
                                    @if ($order->order_type == "pickup")
                                        <a class="btn btn-alt-warning" href="javascript:void(0)"> Pickup </a>
                                    @elseif ($order->order_type == "delivery")
                                        <a class="btn btn-alt-success" href="javascript:void(0)">Delivery </a>
                                    @endif
                                </td>
                                <td class="d-none d-sm-table-cell">
                                    @if ($order->status == "Pending")
                                    <a class="btn btn-alt-danger" href="javascript:void(0)">{{ $order->status }}
                                    </a>
                                    @else
                                    <a class="btn btn-alt-info" href="javascript:void(0)">{{ $order->status }}
                                    </a>
                                    @endif
                                </td>
                                <td class="text-center">    
                                    <form action="{{ route('update.order.status') }}" method="post" id="product_form"
                                        style="float: left">
                                        @csrf
                                        <input type="hidden" name="order_id" value="{{ $order->id }}">
                                        <input type="hidden" name="order_status" value="{{ $order->status }}">
                                        @if ($order->status == 'pending')
                                            <button type="submit" value="processing" class="btn btn-sm btn-danger update-status" title="Order Update Status">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>
                                        @elseif ($order->status == 'processing')
                                            <button type="submit" value="delivered" class="btn btn-sm btn-danger update-status" title="Order Update Status">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>
                                        @endif
                                        
                                    </form>
                                    <a href="{{ route('admin.invoice.download', $order->id) }}"
                                        class="btn btn-sm btn-danger" title="Download Invoice"><i
                                            class="fa-solid fa-file-pdf"></i></a>
                                    <a href="{{ route('admin.order.view', $order->id) }}"
                                        class="btn btn-sm btn-success me-2" title="View Order Details"
                                        style="float: right"> <i class="fa-solid fa fa-eye"></i>
                                    </a>
                                    
                                </td>
                            </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <!-- END Row #2 -->
    </div>

</div>
<!-- END Page Content -->
@endsection

@section('script')
<script type="text/javascript">
    $('.update-status').click(function(event) {
        var status = $(this).val();
              var form =  $(this).closest("form");
              // var name = $(this).data("name");
              event.preventDefault();
              swal({
                  title: `Are you sure you want to ${status} this order?`,
                  text: `If you ${status} this, it will be gone forever.`,
                  icon: "warning",
                  buttons: true,
                  dangerMode: true,
              })
              .then((willDelete) => {
                if (willDelete) {
                  form.submit();
                }
              });
          });
      
  </script>
@endsection