@extends('layouts.main') 
@section('title', 'Order Details')
@section('content')
    

    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-file-text bg-blue"></i>
                        <div class="d-inline">
                            <h5>Delivery Order Details</h5>
                            <span>{{ __('All information concerning a particular Delivery order')}}</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{route('dashboard')}}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#">{{ __('Pages')}}</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('translate.od')}}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-4 col-md-5">
                <div class="card">
                    <div class="card-body">
                        <div class="text-center"> 
                            <img src="{{asset($order->data->pickup_gallery)}}" onerror='src="../img/users/nophoto.jpg"' class="rounded-circle" width="150" />
                            <h4 class="card-title mt-10 font-weight-bold">{{$order->external_code}}</h4>
                            <p class="card-subtitle">
                                @switch($order->status)
                                    @case(1)
                                    <span class="badge badge-pill badge--success mb-1">
                                        Paid
                                    </span>
                                    @break
                                    @case(0)
                                    <span class="badge badge-pill badge--warning mb-1">
                                        Pending
                                    </span>
                                    @break
                                    @case(-1)
                                    <span class="badge badge-pill badge--danger mb-1">
                                        Cancelled
                                    </span>
                                        @break
                                    @default
                                @endswitch
                            </p>
                            {{-- <div class="row text-center justify-content-md-center">
                                <div class="col-4"><a href="javascript:void(0)" class="link"><i class="ik ik-user"></i> <font class="font-medium">254</font></a></div>
                                <div class="col-4"><a href="javascript:void(0)" class="link"><i class="ik ik-image"></i> <font class="font-medium">54</font></a></div>
                            </div> --}}
                        </div>
                    </div>
                    {{-- <hr class="mb-0">  --}}
                    <div class="px-2 text-center">{{$order->feedback}}</div>
                    <hr class="mb-o">
                    <div class="card-body"> 
                        <small class="text-muted d-block">{{ __('Ordered By')}} </small>
                        <h6>
                            <a href="{{url('/member/detail/'.$order->member->id)}}" class="btn btn-info btn-sm">
                                <i class="ik ik-user"></i>
                                {{$order->member->username}}
                            </a>
                        </h6> 
                        <small class="text-muted d-block pt-10">{{ __('Member Email')}}</small>
                        <h6>{{$order->member->email}}</h6> 
                        <small class="text-muted d-block pt-10">{{ __('Order Date')}}</small>
                        <h6>{{$order->created_at}}</h6>

                        <small class="text-muted d-block pt-30">{{ __('Social Profile')}}</small>
                        {{-- <br/>
                        <button class="btn btn-icon btn-facebook"><i class="fab fa-facebook-f"></i></button>
                        <button class="btn btn-icon btn-twitter"><i class="fab fa-twitter"></i></button>
                        <button class="btn btn-icon btn-instagram"><i class="fab fa-instagram"></i></button> --}}
                    </div>
                </div>
            </div>
            <div class="col-lg-8 col-md-7">
                <div class="card">
                    <ul class="nav nav-pills custom-pills" id="pills-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="pills-timeline-tab" data-toggle="pill" href="#current-month" role="tab" aria-controls="pills-timeline" aria-selected="true">{{ __('Parcel Information')}}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#last-month" role="tab" aria-controls="pills-profile" aria-selected="false">{{ __('Sender Info')}}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-setting-tab" data-toggle="pill" href="#previous-month" role="tab" aria-controls="pills-setting" aria-selected="false">{{ __('Receiver Info')}}</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="current-month" role="tabpanel" aria-labelledby="pills-timeline-tab">
                            <div class="card-body" style="max-height: 80vh; overflow: scroll;">
                                <div class="row">
                                    <div class="col-md-6 col-6"> <strong>{{ __('Parcel Title')}}</strong>
                                        <br>
                                        <p class="text-muted">
                                            {{$order->data->parcel_title}} ({{$order->data->parcel_type->name}})
                                        </p>
                                    </div>
                                    <div class="col-md-3 col-6"> <strong>{{ __('Parcel Value')}}</strong>
                                        <br>
                                        <p class="text-muted">XAF {{$order->data->parcel_value}}</p>
                                    </div>
                                    <div class="col-md-3 col-6"> <strong>{{ __('amount')}}</strong>
                                        <br>
                                        <p class="text-muted">XAF {{$order->amount}}</p>
                                    </div>
                                </div>
                                <hr>
                                @if ($order->status == 1)
                                <div class="row">
                                    <div class="col-md-4 col-6"> <strong>{{ __('Payment Method')}}</strong>
                                        <br>

                                        <p class="text-muted">{{$order->payment_method}}</p>
                                    </div>
                                    <div class="col-md-4 col-6"> <strong>{{ __('Payment Number')}}</strong>
                                        <br>
                                        <p class="text-muted">{{$order->payment_number}}</p>
                                    </div>
                                    <div class="col-md-4 col-6"> <strong>{{ __('Payment Date')}}</strong>
                                        <br>
                                        <p class="text-muted">{{$order->paid_on}}</p>
                                    </div>
                                </div>
                                <hr>
                                @endif
                                <small class="text-muted d-block">{{ __('Pickup Date/Time')}} </small>
                                <h6>{{$order->data->pickup_datetime}}</h6>
                                 <small class="text-muted d-block">{{ __('Delivery Type')}} </small>
                                <h6>{{$order->data->delivery_type}}</h6>
                                <small class="text-muted d-block">{{ __('Service Type')}} </small>
                                <h6>{{$order->data->service_type}}</h6>
                                <small class="text-muted d-block">{{ __('Status')}} </small>
                                        @switch($order->status)
                                            @case(1)
                                                <h6 class="text-muted">Paid</h6>
                                                @break
                                            @case(0)
                                            <h6 class="text-muted">Pending</h6>
                                                @break
                                             @case(-1)
                                            <h6 class="text-muted">Cancelled</h6>
                                                @break
                                            @default
                                                
                                        @endswitch
                                <hr>
                                <small class="text-muted d-block font-weight-bold">{{ __('Instructions')}} </small>
                                <h6 >{{$order->data->instructions}}</h6>   
                                <hr>
                                <small class="text-muted d-block font-weight-bold">{{ __('Description')}} </small>
                                <h6 >{{$order->data->parcel_description}}</h6>   
                                       
                            </div>
                        </div>
                        <div class="tab-pane fade" id="last-month" role="tabpanel" aria-labelledby="pills-profile-tab">
                            <div class="card-body" style="max-height: 80vh; overflow: scroll;">
                                <div class="row">
                                    <div class="col"> <strong>{{ __('Sender Name')}}</strong>
                                        <br>                                           
                                        <p class="text-muted">{{$order->data->sender_name}}</p>
                                    </div>
                                </div>
                                <hr>
                                <small class="text-muted d-block pt-10">{{ __('Sender Email')}}</small>
                                <h6>{{$order->data->sender_email}}</h6> 
                                <small class="text-muted d-block pt-10">{{ __('Sender Phone')}}</small>
                                <h6>{{$order->data->sender_phone}}</h6> 
                                <small class="text-muted d-block pt-10">{{ __('Sender Address')}}</small>
                                <h6>{{$order->data->sender_address->name}}, {{$order->data->sender_address->city->name}}</h6> 
                                
                            </div>
                        </div>
                        <div class="tab-pane fade" id="previous-month" role="tabpanel" aria-labelledby="pills-profile-tab">
                            <div class="card-body" style="max-height: 80vh; overflow: scroll;">
                                <div class="row">
                                    <div class="col"> <strong>{{ __('Receiver Name')}}</strong>
                                        <br>                                           
                                        <p class="text-muted">{{$order->data->receiver_name}}</p>
                                    </div>
                                </div>
                                <hr>
                                <small class="text-muted d-block pt-10">{{ __('Receiver Email')}}</small>
                                <h6>{{$order->data->receiver_email}}</h6> 
                                <small class="text-muted d-block pt-10">{{ __('Receiver Phone')}}</small>
                                <h6>{{$order->data->receiver_phone}}</h6> 
                                <small class="text-muted d-block pt-10">{{ __('Receiver Address')}}</small>
                                @if ($order->data->rn)
                                <h6>{{$order->data->receiver_address->name}}, {{$order->data->receiver_address->city->name}}</h6> 
                                @else
                                <h6>{{$order->data->receiver_address->name}}</h6> 
                                @endif
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection