@extends('front.layout.master')
@section('content')

    <!-- Start Banar -->
    <div class="banar mb-4 text-center" style="background-image: url('{{asset('front/images/banar.png')}}');">
        <h1 data-aos-delay="100" data-aos-duration="1000" data-aos="zoom-up-down">@lang('front.previousOrder')</h1>
    </div>
    <!-- End Banar -->
    <!-- -------------------------------------------- -->
    <!-- Start my-order -->
    <div class="my-order">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mb-lg-0 mb-5">
                    <h3 class="mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">@lang('front.orders')</h3>
                    <div class="right w-100">
                        @foreach($data as $key => $order)

                        <div class="head d-flex mb-3 justify-content-between align-items-center" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">
                            <div>
                                <i class="fas fa-calendar-alt"></i>
                                {{$key}}
                            </div>
                            <div><span>{{$order->count()}} @lang('front.order')</span></div>
                        </div>
                    @foreach($order as $or)
                        <div class="box mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="fade-up">
                            <div class="d-flex justify-content-between align-items-centerrow">
                                <div><span> @lang('front.orderNumber')</span>{{$or->order_number}} #</div>
                                <div><i class="fas fa-calendar-alt"></i> {{$or->created_at->format('d-m-Y')}}</div>
                            </div>
                            <div><span>@lang('front.total')</span> {{number_format($or->total_price , 3)}}@lang('front.KD')</div>
                            <div class="img-box">
                                <img src="{{asset('front/images/ethics.png')}}" alt="">
                                <span>@lang('front.order') :</span>
                                {{$or->status}}
                            </div>
                            <a href="#" class="detail detail_order" data-url="{{route('get-orders-details')}}" data-id="{{$or->id}}">@lang('front.OrderDetails')</a>
                        </div>

                        @endforeach
                        @endforeach


                    </div>
                </div>
                <div class="col-lg-6">
                    <h3 class="mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">@lang('front.OrderDetails')</h3>
                    <div class="left w-100" id="append_data">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End my-order -->
    <!-- -------------------------------------------- -->

@endsection

@push('js')
    <script>
        $('body').on('click','.detail_order',function (e){
            e.preventDefault();
                var url = $(this).data('url');
                var id = $(this).data('id');
            $.ajax({
                url: url,
                method: "get",
                data: {
                    id:id
                },
                dataType: 'html',

                success: function (response) {
                    $('#append_data').html(response);
                    console.log(response);

                },

            });

        })
    </script>


@endpush