@extends('web.layouts.layout')
@section('content')



    <main>



        <!-- ---------- refund page ----------- -->
        <section class="refund-pg pt-4 pb-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9">
                        <div class="refund-tab">
                            <div class="line-title mb-4"> <h5 class="bg-white pe-3"> <i class="far fa-arrows-repeat small me-2"></i> الارجاع </h5> </div>
                            <div class="refund-steps mb-4">
                                <div class="step-item gray-box p-3 bg-light1 rounded-3">
                                    <div class="cont m-1">
                                        <div class="step-done">
                                            <div class="check"> <i class="fal fa-check"></i> </div>
                                            <div class="inf">
                                                <h6 class="mb-2"> {{__('web.refund_request')}} </h6>
                                                <div class="text"> {{__('web.refund_sent_to')}} {{$user->email}} {{__('web.details_info_user')}} </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="step-item gray-box p-3 bg-light1 rounded-3">
                                    <div class="cont m-1">
                                        <div class="steps-line-wrapper">
                                            @foreach($statuses as $key=>$row)
                                                <div class="item {{ $refund->statusFetch($row)['item'] ? 'active' : '' }}">
                                                    <div class="icon"> <i class="fal fa-box-open-full"></i> </div>
                                                    <div class="inf">
                                                        <h6> {{__('web.refund_statuses.'.$refund->statusFetch($row)['status'])}} </h6>
                                                        @if($refund->statusFetch($row)['item'])
                                                            <p> {{ $refund->statusFetch($row)['item']->date }} </p>
                                                        @endif
                                                    </div>
                                                </div>
                                                @if($key != (count($statuses) - 1))
                                                    <span class="line"></span>
                                                @endif
                                            @endforeach

                                        </div>
                                    </div>
                                </div>
                            </div>
                            @include('web.pages.components.refund.product')
                            <a href="{{route('web.product')}}" class="butn col-lg-5 mt-4">
                                <span>{{__('web.continue_shopping')}} </span>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="side-btns mt-5 pt-3">
                            <a href="{{route('web.refund')}}" class="btn-box gray-box p-4 bg-light1 rounded-3 text-center cr-blue mb-4 w-100">
                                <i class="far fa-gear me-2"></i> <span class="txt"> {{__('web.refund_manage')}} </span>
                            </a>
                            <a href="{{route('web.refund')}}" class="item-box gray-box p-3 bg-light1 rounded-3 mb-4">
                                <div class="cont">
                                    <img src="{{url('')}}/assets/web/images/prod1.svg" alt="" class="icon">
                                    <div class="inf">
                                        <h6> {{__('web.pref_refund')}} </h6>
                                        <p>{{__('web.pref_refund_desc')}}  </p>
                                    </div>
                                    <i class="fal fa-chevron-left arrow"></i>
                                </div>
                            </a>
                            <a href="{{route('web.refund')}}" class="item-box gray-box p-3 bg-light1 rounded-3 mb-4"  data-bs-toggle="modal" data-bs-target="#modal-refund">
                                <div class="cont">
                                    <img src="{{url('')}}/assets/web/images/pill1.svg" alt="" class="icon">
                                    <div class="inf">
                                        <h6> {{__('web.invoice_order')}} </h6>
                                        <p> {{__('web.invoice_order_desc')}} </p>
                                    </div>
                                    <i class="fal fa-chevron-left arrow"></i>
                                </div>
                            </a>
                        </div>
                        <div class="text-side">
                            <div class="text-item mb-4">
                                <h6 class="cr-gray"> <i class="fas fa-lock"></i> <span class="txt ms-2"> سياسة الإرجاع لموقع NOW-go </span> </h6>
                                <small class="cr-gray pe-lg-4 mt-2"> في NOW-go، نسعى جاهدين لضمان رضاكم التام عن مشترياتكم. إذا لم تكونوا راضين، نقدم سياسة إرجاع واضحة لجعل العملية سهلة قدر الإمكان. </small>
                            </div>
                            <div class="text-item mb-4">
                                <h6 class="cr-gray"> <span class="txt ms-2"> فترة الإرجاع </span> </h6>
                                <small class="cr-gray pe-lg-4 mt-2"> لديكم 30 يومًا من تاريخ التسليم لإرجاع المنتج. </small>
                            </div>
                            <div class="text-item mb-4">
                                <h6 class="cr-gray"> <span class="txt ms-2"> الشروط الخاصة بالإرجاع </span> </h6>
                                <ul class="dot-list">
                                    <li> <small> <i class="fas fa-circle me-1"></i> </small> <span class="txt"> يجب أن تكون المنتجات غير مستخدمة، في عبوتها الأصلية، وبالحالة التي تم استلامها بها. </span> </li>
                                    <li> <small> <i class="fas fa-circle me-1"></i> </small> <span class="txt"> بعض المنتجات غير قابلة للإرجاع، بما في ذلك: </span> </li>
                                    <li> <small> <i class="fas fa-circle me-1"></i> </small> <span class="txt"> بطاقات الهدايا </span> </li>
                                    <li> <small> <i class="fas fa-circle me-1"></i> </small> <span class="txt"> البرامج القابلة للتنزيل </span> </li>
                                    <li> <small> <i class="fas fa-circle me-1"></i> </small> <span class="txt"> العناصر المخصصة </span> </li>
                                    <li> <small> <i class="fas fa-circle me-1"></i> </small> <span class="txt"> المنتجات الصحية والعناية الشخصية </span> </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>





    </main>

    <div class="modal fade modal-refund" id="modal-refund" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content bg-light1">
                <div class="modal-header">
                    <h1 class="modal-title fs-6" id="exampleModalLabel"> <i class="fas fa-repeat me-1"></i> {{__('web.pref_order_refund')}}</h1>
                    <button type="button" class="btn-close small" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4 pb-5">
                    <div class="prod-box gray-box bg-light1 rounded-3">
                        <a href="#" class="prod-item">
                            <div class="row gx-0">
                                <div class="col-lg-2">
                                    <div class="img">
                                        <img src="{{asset($refund->orderProduct->product->image)}}" alt="" class="img-cover">
                                    </div>
                                </div>
                                <div class="col-lg-10">
                                    <div class="info">
                                        <p> {{ $refund->orderProduct->product->currentDescription->title }} </p>
                                        <small class="opacity-50"> x{{ $refund->orderProduct->count }} </small>
                                    </div>
                                </div>
                            </div>
                            <div class="float-price">
                                <strong> {{ $refund->orderProduct->total }} </strong> <small> {{__('web.sar')}} </small>
                            </div>
                        </a>
                    </div>
                    <h6 class="mt-4"> {{__('web.pref_order_refund')}} </h6>
                    <div class="info-item mt-4">
                        <p> {{__('web.refund_date')}} </p>
                        <small class="cr-gray d-block"> {{ $refund->date }} </small>
                    </div>
                    <div class="info-item mt-4">
                        <p> {{__('web.refund_uuid')}} </p>
                        <small class="cr-gray d-block"> {{ $refund->uuid }} </small>
                    </div>
                    <div class="info-item mt-4">
                        <p> {{ __('web.refund_reason') }} </p>
                        <small class="cr-gray d-block"> {{ $refund->reason->currentDescription->title }} </small>
                    </div>
                    <div class="info-item mt-4">
                        <p> {{__('web.refund_note')}} </p>
                        <small class="cr-gray d-block"> {{ $refund->note }} </small>
                    </div>
                    <div class="info-item mt-4">
                        <p> {{__('web.refund_shipping_details')}} </p>
                        <small class="cr-gray d-block"> {{__('web.shipping_top')}} {{$refund->address->address}} </small>
                        <small class="cr-gray d-block"> {{ $refund->order->user->phone }} <span class="cr-green"> {{__('web.verified')}} </span> </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop
