@extends('layouts.stores_dashboard_layout')

@section('title')
{{trans('stores_dashboard.order_details')}}

@endsection


@section('content')

    <div  class="table-cont p-2 ">
                <div class="row align-items-center">
                    <div class="dash-title col-md p-0 mt-0">
                        <h6 class="bold">{{trans('stores_dashboard.order_details')}}</h6>
                        <p class="mb-1">{{trans('stores_dashboard.orders') . ' / ' }} {{ in_array(request()['status'], $statusArr) ? trans('stores_dashboard.' . request()['status']) : trans('stores_dashboard.new_orders') }} {{ ' / ' . trans('stores_dashboard.order_details')}}</p>
                    </div>
                </div>



                <!-- use class active , current -->

        @if($order->store_status!='rejected')

            @if($order->needs_delivery =='true')
                @if($order->store_status=='accepted' )
                    <div class="  m-auto round10 p-3 pl-4 pr-4 form-cont" >
                        <div class="container register-header  m-auto">
                            <div class="active">
                                <span class="select-register-step step">1</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.pending')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="" >
                                <span class="select-register-step step">2</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.prepared')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="{{ $active }}" >
                                <span class="select-register-step step">3</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.with_delegate')}}
                                                    </span>
                            </div>
                        </div>
                    </div>
                @elseif($order->store_status=='prepared')
                    <div class="  m-auto round10 p-3 pl-4 pr-4 form-cont" >
                        <div class="container register-header  m-auto">
                            <div class="active">
                                <span class="select-register-step step">1</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.pending')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="active" >
                                <span class="select-register-step step">2</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.prepared')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="{{ $active }}" >
                                <span class="select-register-step step">3</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.with_delegate')}}
                                                    </span>
                            </div>
                        </div>
                    </div>
                @elseif($order->delivery_status=='reached_store')
                    <div class="  m-auto round10 p-3 pl-4 pr-4 form-cont" >
                        <div class="container register-header  m-auto">
                            <div class="active">
                                <span class="select-register-step step">1</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.pending')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="active" >
                                <span class="select-register-step step">2</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.prepared')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="{{ $active }}" >
                                <span class="select-register-step step">3</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.with_delegate')}}
                                                    </span>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="  m-auto round10 p-3 pl-4 pr-4 form-cont" >
                        <div class="container register-header  m-auto">
                            <div class="current">
                                <span class="select-register-step step">1</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.pending')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="" >
                                <span class="select-register-step step">2</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.prepared')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="{{ $active }}" >
                                <span class="select-register-step step">3</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.with_delegate')}}
                                                    </span>
                            </div>
                        </div>
                    </div>
                @endif
            @else
                @if($order->store_status=='accepted' )
                    <div class="  m-auto round10 p-3 pl-4 pr-4 form-cont" >
                        <div class="container register-header  m-auto">
                            <div class="active">
                                <span class="select-register-step step">1</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.pending')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="" >
                                <span class="select-register-step step">2</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.prepared')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="{{ $active }}" >
                                <span class="select-register-step step">3</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.with_user')}}
                                                    </span>
                            </div>
                        </div>
                    </div>
                @elseif($order->store_status=='prepared')
                    <div class="  m-auto round10 p-3 pl-4 pr-4 form-cont" >
                        <div class="container register-header  m-auto">
                            <div class="active">
                                <span class="select-register-step step">1</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.pending')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="active" >
                                <span class="select-register-step step">2</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.prepared')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="{{ $active }}" >
                                <span class="select-register-step step">3</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.with_user')}}
                                                    </span>
                            </div>
                        </div>
                    </div>
                @elseif($order->status=='finished')
                    <div class="  m-auto round10 p-3 pl-4 pr-4 form-cont" >
                        <div class="container register-header  m-auto">
                            <div class="active">
                                <span class="select-register-step step">1</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.pending')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="active" >
                                <span class="select-register-step step">2</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.prepared')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="{{ $active }}" >
                                <span class="select-register-step step">3</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.with_user')}}
                                                    </span>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="  m-auto round10 p-3 pl-4 pr-4 form-cont" >
                        <div class="container register-header  m-auto">
                            <div class="current">
                                <span class="select-register-step step">1</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.pending')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="" >
                                <span class="select-register-step step">2</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.prepared')}}
                                                    </span>
                            </div>
                            <div class="line-between"></div>
                            <div class="{{ $active }}" >
                                <span class="select-register-step step">3</span>
                                <span class="select-register-step check"><i class="fa fa-check"></i></span>
                                <span class="font12 bold">
                                                    {{trans('stores_dashboard.with_user')}}
                                                    </span>
                            </div>
                        </div>
                    </div>
                @endif

            @endif
        @endif


        <div class=" white-bg round7 mb-3 mt-2 ">
                    <h6 class="bold border-bottom p-3 mb-4">{{trans('stores_dashboard.order_details')}}</h6>

                    <div class="p-3 order-info row">
                        <div class="col-3 color-gray">{{trans('stores_dashboard.number')}}</div>
                        <div class="col">{{$order->citc_referenceCode}}</div>
                    </div>

                    <div class="p-3 order-info row">
                        <div class="col-3 color-gray">{{trans('stores_dashboard.order_number')}}</div>
                        <div class="col">{{$order->id}}</div>
                    </div>


                    <div class="p-3 order-info row">
                        <div class="col-3 color-gray">{{trans('stores_dashboard.created_at')}}</div>
                        <div class="col">{{date('d-m-Y', strtotime($order->created_at))}}</div>
                    </div>


                    <div class="p-3 order-info row">
                        <div class="col-3 color-gray">{{trans('stores_dashboard.deliver_time')}}</div>
                        <div class="col">{{ $order->needs_delivery == 'true' ? $order->deliver_time . trans('stores_dashboard.hour') : '--'}} </div>
                    </div>



                    <div class="p-3 order-info row">
                        <div class="col-3 color-gray">{{trans('stores_dashboard.payment_type')}}</div>
                        <div class="col">{{trans('stores_dashboard.'.$order->payment_type)}}</div>
                    </div>


                    @if($order->needs_delivery=='true')
                        <div class="p-3 order-info row">
                            <div class="col-3 color-gray"> {{trans('stores_dashboard.needs_delivery')}}</div>
                            <div class="col color-red">  {{trans('stores_dashboard.yes_needs_delivery')}}</div>
                        </div>
                    @else
                        <div class="p-3 order-info row">
                            <div class="col-3 color-gray"> {{trans('stores_dashboard.needs_delivery')}}</div>
                            <div class="col color-red"> {{trans('stores_dashboard.receive_from_store')}}</div>
                        </div>
                    @endif

                   @if($order->needs_delivery=='true')
                    <div class="p-3 order-info row">
                        <div class="col-3 color-gray"> {{trans('stores_dashboard.deliver_address')}}</div>
                        <div class="col color-red"> <i class="fa fa-location-arrow"></i> {{$order->receive_address}}</div>
                    </div>
                    @endif

                    <div class="p-3 order-info row">
                        <div class="col-3 color-gray">{{trans('stores_dashboard.order_price')}}</div>
                        <div class="col">{{$order->price}} {{trans('stores_dashboard.sar')}}</div>
                    </div>

                    <div class="p-3 order-info row">
                        <div class="col-3 color-gray">{{trans('stores_dashboard.delivery_price')}}</div>
                        <div class="col">{{$order->delivery_price}} {{trans('stores_dashboard.sar')}}</div>
                    </div>

                    <div class="p-3 order-info row">
                        <div class="col-3 color-gray">{{trans('stores_dashboard.app_percentage')}}</div>
                        <div class="col">{{$order->app_percentage}} {{trans('stores_dashboard.sar')}}</div>
                    </div>

                    <div class="p-3 order-info row">
                        <div class="col-3 color-gray">{{trans('stores_dashboard.added_value')}}</div>
                        <div class="col">{{$order->added_value}} {{trans('stores_dashboard.sar')}}</div>
                    </div>


                    <div class="p-3 order-info row">
                        <div class="col-3 color-gray">{{trans('stores_dashboard.discount')}}</div>
                        <div class="col">{{$order->discount}} {{trans('stores_dashboard.sar')}}</div>
                    </div>

                    <div class="p-3 order-info row">
                        <div class="col-3 color-gray">{{trans('stores_dashboard.total_price')}}</div>
                        <div class="col">{{$order->total_price}} {{trans('stores_dashboard.sar')}}</div>
                    </div>


                </div>


                <div class=" white-bg round7  mt-2 pt-3 pb-3">
                    <h6 class="bold border-bottom p-3 mb-4">{{trans('stores_dashboard.notes')}}</h6>

                    <p class="pl-3 pr-3">
                          {{ $order->description != "" ? $order->description : trans('stores_dashboard.empty_desc') }}
                    </p>
                </div>

            </div>



            <div class="row ">
                <div class="col-md m-2  p-0">
                    <div class="white-bg round7 ">
                        <h6 class="bold border-bottom p-3">  {{trans('stores_dashboard.products')}}</h6>
                        <div class="dash-card-content pl-2 pr-2">
                            @foreach($products as $product)
                                <div class="row m-0 pt-1 pb-1 align-items-center justify-content-center ">
                                    <div class="col-md">
                                        <div class="row">
                                            <div class="col-md p-0 p-md-1 text-center ">
                                                <img src="{{$product->imagePath}}" style="max-width: 80px;" class="m-0 round7 m-md-1 " alt="">
                                            </div>
                                            <div class="col-10   col-md-7 col-lg-9 p-1 ">
                                                <h6 class="bold font14">{{$product->name}}</h6>
                                                <h6 class="bold font14 color1 m-0"> {{$product->price}} {{trans('stores_dashboard.sar')}}</h6>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md bold m-1  font14">{{trans('stores_dashboard.quantity')}} : {{$product->qty}}</div>
                                    <br>
                                                                        </div>
                            <hr>
                            @endforeach


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


            <div class="p-2">
                <div class="col-md   p-0">
                    <div class="white-bg round7 ">
                        <h6 class="bold border-bottom p-3">{{trans('stores_dashboard.user_info')}}</h6>
                        <div class="dash-card-content pl-2 pr-2">

                            <div class="row m-0 pt-1 pb-1 align-items-center justify-content-center ">
                                <div class="col-md">
                                    <div class="row align-items-center">
                                        <div class="col-md p-0 p-md-1 text-center ">
                                            <img src="{{$order->user?->AvatarPath}}" style="width: 80px;border-radius: 50%;height: 80px;" class="m-0 round7 m-md-1 " alt="">
                                        </div>
                                        <div class="col-10   col-md-7 col-lg-10 p-1 ">
                                            <h6 class="bold font14">{{$order->user?->name}}</h6>
                                            <p class=" font14  m-0"> <i class="fa sm-icon fa-phone-alt"></i> {{$order->user?->phone}} </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

    @if($order->delegate)
        <div class="p-2">
            <div class="col-md   p-0">
                <div class="white-bg round7 ">
                    <h6 class="bold border-bottom p-3">{{trans('stores_dashboard.delegate_info')}}</h6>
                    <div class="dash-card-content pl-2 pr-2">

                        <div class="row m-0 pt-1 pb-1 align-items-center justify-content-center ">
                            <div class="col-md">
                                <div class="row align-items-center">
                                    <div class="col-md p-0 p-md-1 text-center ">
                                        <img src="{{$order->delegate?->AvatarPath}}" style="width: 80px;border-radius: 50%;height: 80px;" class="m-0 round7 m-md-1 " alt="">
                                    </div>
                                    <div class="col-10   col-md-7 col-lg-10 p-1 ">
                                        <h6 class="bold font14">{{$order->delegate?->name}}</h6>
                                        <p class=" font14  m-0"> <i class="fa sm-icon fa-phone-alt"></i> {{$order->user?->phone}} </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    @endif

    @if($order->store_status=='pending' && $order->status=='open')
                <form id="submitform">
                 @csrf
                    <input type="hidden" name="id" value="{{$order->id}}">
                    <button id="submitbtn" type="submit" class="button5 m-2 material-button">
                    {{trans('stores_dashboard.accept')}}
                    </button>
                </form>

                <form id="refuseform">
                 @csrf
                    <input type="hidden" name="id" value="{{$order->id}}">
                    <button id="refusebtn" type="submit" class="button4 m-2 material-button">{{trans('stores_dashboard.refuse')}}
                        </button>
                </form>
            @elseif($order->store_status=='accepted')
                <form id="prepareform">
                 @csrf
                    <input type="hidden" name="id" value="{{$order->id}}">
                    <button id="preparebtn" type="submit" class="button5 m-2 material-button">{{trans('stores_dashboard.order_prepared')}}</button>
                </form>
            @elseif($order->store_status=='prepared')
                 @if($order->needs_delivery=='false'&&$order->delivery_status	!='delivered')
                    <form id="deliveryform">
                    @csrf
                        <input type="hidden" name="id" value="{{$order->id}}">
                        <button id="deliverybtn" type="submit" class="button5 m-2 material-button">{{trans('stores_dashboard.order_delivered')}}</button>
                    </form>
                @endif
            @endif

        </div>
        <!-- end of dashboard body -->

    </div>



@endsection
@section('scripts')

    <script>
        $(function(){
            $('.side-button .active').siblings('.side-dropdown').slideDown();
        });
    </script>


    <script>
             function deleteElement(){
                        Swal.fire({
                            title: '<h5 class="bold">{{trans("stores_dashboard.submit_delete")}}</h5>',
                            icon: 'warning',
                            html:'<p>{{trans("stores_dashboard.order_deletion")}}</p> '
                                 +'<div class="row">'
                                 +'    <div class="col"><button class="button1 w-100" onclick="Swal.clickConfirm()">{{trans("stores_dashboard.delete")}}</button></div>'
                                 +'    <div class="col"><button class="button3 w-100" onclick="Swal.clickCancel()" >{{trans("stores_dashboard.back")}}</button></div>'
                                 +'</div>',
                            showCancelButton: false,
                            showConfirmButton: false,
                            }).then((result) => {
                            if (result.isConfirmed) {
                                Swal.fire({icon: 'success',
                                    title: '<h5 class="bold">{{trans("stores_dashboard.delete_order_success")}}</h5>',
                                    html : '<a href="#" class="button1 w-100 d-block">{{trans("stores_dashboard.confirm")}}</a>',
                                    showConfirmButton: false,
                                    timer: 1500
                                });
                            }
                        })
                    }

     </script>
<script>
        $(document).on('click','#submitbtn',function (e) {
            e.preventDefault();

            //get form data
            var form = $('#submitform').get(0);
            var formData = new FormData(form);

            $.ajax({
                url: "{{route('stores_dashboard.accept_order')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    //got a resposne?
                    if (data.key == 'success') {
                        Swal.fire({
                                icon: 'success',
                                title: '<h5 class="bold">'+data.msg+'</h5>',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        location.assign(data.url);
                    } else {
                        swal.fire({
                            title: data.msg,
                            type: 'error',
                            timer: 3000,
                            showCloseButton: true,
                            showConfirmButton: false,
                            animation: true,
                        }).catch(swal.noop);
                    }
                }
            });
        });
    </script>

<script>
        $(document).on('click','#refusebtn',function (e) {
            e.preventDefault();

            //get form data
            var form = $('#refuseform').get(0);
            var formData = new FormData(form);

            $.ajax({
                url: "{{route('stores_dashboard.refuse_order')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    //got a resposne?
                    if (data.key == 'success') {
                        Swal.fire({
                                icon: 'success',
                                title: '<h5 class="bold">'+data.msg+'</h5>',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        location.assign(data.url);
                    } else {
                        swal.fire({
                            title: data.msg,
                            type: 'error',
                            timer: 3000,
                            showCloseButton: true,
                            showConfirmButton: false,
                            animation: true,
                        }).catch(swal.noop);
                    }
                }
            });
        });
    </script>


<script>
        $(document).on('click','#preparebtn',function (e) {
            e.preventDefault();

            //get form data
            var form = $('#prepareform').get(0);
            var formData = new FormData(form);

            $.ajax({
                url: "{{route('stores_dashboard.prepare_order')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    //got a resposne?
                    if (data.key == 'success') {
                        Swal.fire({
                                icon: 'success',
                                title: '<h5 class="bold">'+data.msg+'</h5>',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        location.assign(data.url);
                    } else {
                        swal.fire({
                            title: data.msg,
                            type: 'error',
                            timer: 3000,
                            showCloseButton: true,
                            showConfirmButton: false,
                            animation: true,
                        }).catch(swal.noop);
                    }
                }
            });
        });
    </script>
<script>
        $(document).on('click','#deliverybtn',function (e) {
            e.preventDefault();

            //get form data
            var form = $('#deliveryform').get(0);
            var formData = new FormData(form);

            $.ajax({
                url: "{{route('stores_dashboard.delivery_order')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    //got a resposne?
                    if (data.key == 'success') {
                        Swal.fire({
                                icon: 'success',
                                title: '<h5 class="bold">'+data.msg+'</h5>',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        location.assign(data.url);
                    } else {
                        swal.fire({
                            title: data.msg,
                            type: 'error',
                            timer: 3000,
                            showCloseButton: true,
                            showConfirmButton: false,
                            animation: true,
                        }).catch(swal.noop);
                    }
                }
            });
        });
    </script>

@endsection