@extends('layouts.user-inner')
@section('content')
    <!-- Ec breadcrumb start -->
    <div class="sticky-header-next-sec  ec-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row ec_breadcrumb_inner">
                        <div class="col-md-12 col-sm-12">
                            <!-- ec-breadcrumb-list start -->
                            <ul class="ec-breadcrumb-list">
                                <li class="ec-breadcrumb-item"><a href="/">Home</a></li>
                                <li class="ec-breadcrumb-item active">Order History</li>
                            </ul>
                            <!-- ec-breadcrumb-list end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Ec breadcrumb end -->

    <!-- Ec cart page -->
    <section class="ec-page-content cart-section section-space-p">
        <div class="container">
            <div class="row">
                <div class="ec-cart-leftside col-lg-12 col-md-12 ">
                    <!-- cart content Start -->
                    <div class="ec-cart-content">
                        <div class="ec-cart-inner">
                            <div class="row">
                                <form action="#">
                                    <div class="table-content cart-table-content">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>Order ID</th>
                                                    <th>Order Date</th>
                                                    <th>Total</th>
                                                    <th>Discount</th>
                                                    <th>Grand Total</th>
                                                    <th>Status</th>
                                                    <th></th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if (count($orders) > 0)
                                                    @foreach ($orders as $ords)
                                                        <tr>
                                                            <td data-label="Order Id">{{ $ords->order_unique_id }}</td>
                                                            <td data-label="Order Date">
                                                                {{ date('d-m-Y', strtotime($ords->o_date)) }}</td>
                                                            <td data-label="Total"><span class="amount">QAR
                                                                    {{ $ords->o_sub_total }}</span></td>
                                                            <td data-label="Discount" class="ec-cart-pro-subtotal">QAR
                                                                {{ $ords->o_discount }}</td>
                                                            <td data-label="Grand Total" class="ec-cart-pro-subtotal">QAR
                                                                {{ $ords->o_grand_total }}</td>
                                                            <td data-label="Status" class="ec-cart-pro-status">
                                                                {{ $ords->o_tracking_status }}
                                                            </td>
                                                            <td class="ec-cart-pro-track"><a href="javascript:void(0);"
                                                                    onclick="get_ord_detailsfn({{ $ords->o_id }})"
                                                                    data-bs-toggle="modal" data-bs-target="#ord_det_modal2"
                                                                    class="btn-track">Details</a></td>
                                                            <td class="ec-cart-pro-track">
                                                                @if ($ords->o_cancel_status == 0)
                                                                    <a href="/track_order?track&ord_id={{ $ords->order_unique_id }}"
                                                                        class="btn-track">Track</a>
                                                                @else
                                                                    <a href="javascript:void(0);"
                                                                        style="background-color: #eee;color: #1b2758;cursor: not-allowed;"
                                                                        class="btn-track">Track</a>
                                                            </td>
                                                    @endif
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr>
                                                    <td style="text-align:center;" colspan="8"><i>"No orders yet"</i>
                                                    </td>
                                                </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="ec-cart-update-bottom">
                                                <a class="btn btn-red" href="/products">Continue Shopping</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!--cart content End -->
                </div>

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


    <div class="modal fade" id="ord_det_modal2" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">

                <div class="modal-body">
                    <div class="ec-cart-content">
                        <div class="ec-cart-inner">
                            <div class="row">
                                <form action="#">
                                    <div class="table-content cart-table-content">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Price</th>
                                                    <th style="text-align: center;">Quantity</th>
                                                    <th>Amount</th>
                                                </tr>
                                            </thead>
                                            <tbody id="replace_ord_det_content">

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


    @push('custom-scripts')
        <script type="text/javascript">
            function get_ord_detailsfn(ord_id) {
                $.ajax({
                    type: "POST",
                    url: '/get_ord_det_uri',
                    data: {
                        _token: token,
                        ord_id: ord_id,
                    },
                    success: function(data) {
                        $("#replace_ord_det_content").html(data);
                    }
                });
            }
        </script>
    @endpush


@endsection