@extends('user.header')
@section('userContent')

  <div class="content-wrapper" style="min-height: 1019px;">
    <div class="container-full">
      <!-- Content Header (Page header) -->


      <!-- Main content -->
      <section class="content">
        <div class="row">
          <div class="col-xl-12 col-lg-12 col-12">
            <div class="row">
              <div class="col-xl-2 col-12">
                <div class="box listing_menu">
                  <div class="box-header">
                    <h4 class="box-title">Manage Orders</h4>
                  </div>

                  <div class="box-body">
                    <div class="inner-user-div4">
                      <ul>
                        <li><a href="product-listing.html"> New (2023)</a></li>
                        <li><a href="">Approved Orders (1021)</a></li>
                        <li><a href="">Packed Orders (900)</a></li>
                        <li><a href="">In Transit Orders (700)</a></li>
                        <li><a href="">Delivered Orders (350)</a></li>
                        <li><a href="">Return Orders (15)</a></li>
                        <li><a href="">Returned Orders (12)</a></li>
                        <li><a href="">Cancelled Orders (121)</a></li>
                        <li><a href="">Disputed Orders (12)</a></li>

                      </ul>



                    </div>

                  </div>
                </div>
              </div>
              <div class="col-xl-10 col-12">
                <div class="box">
                  <div class="box-header with-border">
                    <h4 class="title mb30 col-sm-12">OID: CPOID00001
                      <a href="#" class="pull-right btn btn-basic btn-basic-color mb10 blue_btnn"
                        style="margin-left:10px">New Order </a><a href="#"
                        class="pull-right btn btn-basic btn-basic-color mb10 mr10 blue_btnn">Download Invoice </a>
                    </h4>

                  </div>

                  <div class="box-body">

                    <table class="table table-bordered table-hover">
                      <thead>
                        <tr>
                          <td colspan="2" class="text-left"><b>Order Details:</b> </td>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td style="width: 50%;" class="text-left">
                            <b> OID: </b>CPOID00001<br>
                            <b> Order Placed Date:</b> 23 Oct 2021<br>
                            <b> Order Value :</b> $101 <br>
                            <b>Payment Method :</b> Online/on Delivery <a href="javascript:void(0)" data-toggle="modal"
                              data-target="" class="btn  btn-basic btn-basic-color pull-right"
                              data-original-title="View Order"><i class="fa fa-pencil"></i></a><br>
                            <b>Order Status :</b> Placed

                          </td>
                          <td style="width: 50%;" class="text-left">
                            <b> Supplier Details</b> <br>
                            Webkype Info Services Private Limited <br>
                            H-140, Suit 104, BSI Business Park, <br>
                            Sector 3, Noida, UP 201201. <br>
                            UACID: CPR000000001
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <table class="table table-bordered table-hover">
                      <thead>
                        <tr>
                          <td style="width: 50%; vertical-align: top;" class="text-left">Billing Address</td>
                          <td style="width: 50%; vertical-align: top;" class="text-left"> Shipping Address</td>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-left">
                            GenX Services Private Limited<br>
                            Q-140, 2-23, Steller Business Park, <br>
                            Sector 43, Noida, UP 201201.<br>
                            UACID: CPR897493292<br>
                            <b>Name:</b> Sumit Sinha (Purchase Officer)<br>
                            <b>Contact: </b>M: 8888888888 | E: sumitsinha@genxsol.com
                          </td>

                          <td class="text-left">
                            GenX Services Private Limited<br>
                            Q-140, 2-23, Steller Business Park, <br>
                            Sector 43, Noida, UP 201201.<br>
                            <b>Name:</b> Sumit Sinha (Purchase Officer)<br>
                            <b>Contact: </b>M: 8888888888 | E: sumitsinha@genxsol.com

                          </td>

                        </tr>
                      </tbody>
                    </table>

                    <div class="table-responsive">
                      <table class="table table-bordered table-hover">
                        <thead>
                          <tr>
                            <td class="text-left">Image</td>
                            <td class="text-left">Product Name</td>
                            <td class="text-left">Makes/Model</td>
                            <td class="text-right">Specification</td>
                            <td class="text-right">Quantity</td>
                            <td class="text-right">Price</td>
                            <td class="text-right">Total</td>
                            <td style="width: 12%;">Action</td>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td class="text-left"><img width="60px" src="images/iphone-img.jpeg"
                                alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop"> </td>
                            <td class="text-left">Iphone 13 Pro </td>
                            <td class="text-left">Apple - iphone 13</td>
                            <td class="text-right">5.7 inch, Black, 128 GB</td>
                            <td class="text-right">10</td>
                            <td class="text-right">1000</td>
                            <td class="text-right">10000</td>
                            <td style="white-space: nowrap;" class="text-right">
                              <div class=" ">

                                <select class="form-select" id="intType3" data-placeholder="Type to search cities"
                                  name="intType3">
                                  <option> Item Status</option>
                                  <option>Approve Item </option>
                                  <option> Cancel Item</option>
                                </select>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td class="text-left"><img width="60px" src="images/iphone-img.jpeg"
                                alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop"> </td>
                            <td class="text-left">Iphone 13 Pro </td>
                            <td class="text-left">Apple - iphone 13</td>
                            <td class="text-right">5.7 inch, Black, 128 GB</td>
                            <td class="text-right">10</td>
                            <td class="text-right">1000</td>
                            <td class="text-right">10000</td>
                            <td style="white-space: nowrap;" class="text-right">
                              <div class=" ">
                                <select class="form-select" id="intType3" data-placeholder="Type to search cities"
                                  name="intType3">
                                  <option> Item Status</option>
                                  <option>Approve Item </option>
                                  <option> Cancel Item</option>
                                </select>

                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td class="text-left"><img width="60px" src="images/iphone-img.jpeg"
                                alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop"> </td>
                            <td class="text-left">Iphone 13 Pro </td>
                            <td class="text-left">Apple - iphone 13</td>
                            <td class="text-right">5.7 inch, Black, 128 GB</td>
                            <td class="text-right">10</td>
                            <td class="text-right">1000</td>
                            <td class="text-right">10000</td>
                            <td style="white-space: nowrap;" class="text-right">
                              <div class=" ">
                                <select class="form-select" id="intType3" data-placeholder="Type to search cities"
                                  name="intType3">
                                  <option> Item Status</option>
                                  <option>Approve Item </option>
                                  <option> Cancel Item</option>
                                </select>
                              </div>
                            </td>
                          </tr>

                        </tbody>
                        <tfoot>
                          <tr>
                            <td colspan="4"></td>
                            <td class="text-right"><b>Sub-Total</b>
                            </td>
                            <td class="text-right">$101.00</td>
                            <td></td>
                          </tr>
                          <tr>
                            <td colspan="4"></td>
                            <td class="text-right"> <b>Flat Shipping Rate</b>
                            </td>
                            <td class="text-right">$5.00</td>
                            <td><a href="javascript:void(0)" data-toggle="modal" data-target="#myModal3"
                                class="btn  btn-basic btn-basic-color pull-right" data-original-title="View Order"><i
                                  class="fa fa-pencil"></i></a></td>
                          </tr>
                          <tr>
                            <td colspan="4"></td>
                            <td class="text-right"> <b>Eco Tax (-2.00)</b>
                            </td>
                            <td class="text-right">$6.00</td>
                            <td></td>
                          </tr>
                          <tr>
                            <td colspan="4"></td>
                            <td class="text-right"> <b>VAT (20%)</b>
                            </td>
                            <td class="text-right">$21.20</td>
                            <td></td>
                          </tr>
                          <tr>
                            <td colspan="4"></td>
                            <td class="text-right"><b>Total</b>
                            </td>
                            <td class="text-right"><b>$133.20</b></td>
                            <td></td>
                          </tr>
                        </tfoot>
                      </table>
                    </div>

                    <div class="table-responsive">
                      <table class="table table-bordered table-hover">
                        <thead>
                          <tr>
                            <td style="width: 50%; vertical-align: top;" class="text-left"><a
                                href="javascript:void(0)" data-toggle="modal" data-target="#myModal4"
                                class="btn  btn-basic btn-basic-color pull-right" data-original-title="View Order"><i
                                  class="fa fa-pencil"></i></a>Update Payment Method</td>
                            <td style="width: 50%; vertical-align: top;" class="text-left"> <a
                                href="javascript:void(0)" data-toggle="modal" data-target="#myModal3"
                                class="btn  btn-basic btn-basic-color pull-right" data-original-title="View Order"><i
                                  class="fa fa-pencil"></i></a>Update Shipping Method</td>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td class="text-left">
                              <b>Payment 1:</b> Advance : 10%<br>
                              <b>Payment 2:</b> On Delivery : 90%<br>
                              <b>Credit Time:</b> 30 Days From Delivery
                            </td>

                            <td class="text-left">
                              <b>Select Method:</b> API<br>
                              <b>Pickup Origin Location:</b> H-140, Suit 104, BSI Business Park, Noida <br>
                              <b>Delivery Location:</b> H-140, Suit 104, BSI Business Park<br>
                              <b>Estimated Delivery Time:</b> 10 Days <br>
                              <b>Shipping Cost:</b> Rs.100


                            </td>
                          </tr>
                        </tbody>
                      </table>


                    </div>

                    <div class="buttons clearfix">
                      <div class="pull-right" style="margin-left:10px"><a class="btn btn-primary" href="#">Update</a>
                      </div>
                      <div class="col-sm-3 plr5 pull-right">
                        <div class="form-group">

                          <select class="form-select" id="intType3" data-placeholder="Type to search cities"
                            name="intType3">
                            <option> Change Order Status</option>
                            <option>Approve Order </option>
                            <option> Cancel Order</option>
                            <option>Pack Order </option>
                            <option>Ship Order</option>
                            <option>Delivered Order</option>
                            <option>Return Order</option>
                          </select>
                        </div>

                      </div>

                    </div>

                    <h3>Order History</h3>
                    <table class="table table-bordered table-hover">
                      <thead>
                        <tr>

                          <td class="text-left">Date</td>
                          <td class="text-left">Action By</td>
                          <td class="text-left">Action</td>
                          <td class="text-left">Link</td>
                          <td class="text-left">Status</td>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-left"> 12/10/2021, 2: 30 PM</td>
                          <td class="text-left">Webkype Info Services</td>
                          <td class="text-left">Approve Order</td>
                          <td class="text-left">API</td>
                          <td class="text-left">Open</td>
                        </tr>

                        <tr>
                          <td class="text-left"> 12/10/2021, 3: 30 PM</td>
                          <td class="text-left">Webkype Info Services</td>
                          <td class="text-left">Cancel Order</td>
                          <td class="text-left">API</td>
                          <td class="text-left">Open</td>
                        </tr>
                        <tr>
                          <td class="text-left"> 12/10/2021, 2: 30 PM</td>
                          <td class="text-left">Webkype Info Services</td>
                          <td class="text-left">Pack Order</td>
                          <td class="text-left">API</td>
                          <td class="text-left">Open</td>
                        </tr>

                        <tr>
                          <td class="text-left"> 12/10/2021, 3: 30 PM</td>
                          <td class="text-left">Webkype Info Services</td>
                          <td class="text-left">Ship Order</td>
                          <td class="text-left">API</td>
                          <td class="text-left">Open</td>
                        </tr>
                        <tr>
                          <td class="text-left"> 12/10/2021, 2: 30 PM</td>
                          <td class="text-left">Webkype Info Services</td>
                          <td class="text-left">Delivered Order</td>
                          <td class="text-left">API</td>
                          <td class="text-left">Open</td>
                        </tr>

                        <tr>
                          <td class="text-left"> 12/10/2021, 3: 30 PM</td>
                          <td class="text-left">Webkype Info Services</td>
                          <td class="text-left">Return Order</td>
                          <td class="text-left">API</td>
                          <td class="text-left">Open</td>
                        </tr>

                      </tbody>
                    </table>

                  </div>

                </div>
              </div>
            </div>


          </div>
        </div>

      </section>
    </div>

    <!-- /.content -->
  </div>

@endsection