@extends('layouts.app')
@section('content')
<div class="container my-5 body-content">
<div class="row">
<div class="col-lg-3 col-sm-12">
@include('account.sidebar')
</div>
<div class="col-lg-9 col-sm-12">
<div class="card">
<h5 class="card-header">{{ __('Order') }} {{ $order->tracking_code }}
<a href="{{ route('account.orders.index') }}" class="float-end btn btn-sm btn-dark">{{ __('Orders') }} <span class="fa fa-arrow-left"></span></a>
</h5>
<div class="card-body">
@if($order->delivery_code)
<div class="alert alert-danger">
<strong>{{ $order->delivery_date ? __('Delivery Code') : __('Post tracking code') }}: </strong>
{{ $order->delivery_code }}
</div>
@endif
<div class="table-responsive">
<table class="table table-hover table-condensed table-bordered table-striped tbl-card">
<thead class="thead">
<tr>
<th scope="col">{{ __('Tracking Code') }}</th>
<th scope="col">{{ __('Price') }}</th>
<th scope="col">{{ __('Payment Type') }}</th>
<th scope="col">{{ __('Status') }}</th>
<th scope="col">{{ __('Date') }}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ $order->tracking_code }}</td>
<td>{{ to_persian_numbers(number_format($order->price)) }}</td>
<td>
<span class="badge bg-{{ $order->payment_type->color() }}">
{{ $order->payment_type->description }}
</span>
</td>
<td>
<span class="badge bg-{{ $order->status->color() }}">
{{ $order->status->description }}
</span>
</td>
<td>{{ to_persian_numbers(jdate($order->created_at)) }}</td>
</tr>
</tbody>
</table>
</div>
@if($order->payment_type->is(\App\Enums\OrderPaymentType::ONLINE))
<hr>
<div class="table-responsive">
<table class="table table-hover table-condensed table-bordered table-striped tbl-card">
<thead class="thead">
<tr>
<th scope="col">شناسه تراکنش</th>
<th scope="col">کد ارجاع</th>
<th scope="col">درگاه بانکی</th>
<th scope="col">IP</th>
<th scope="col">وضعیت</th>
<th scope="col">تاریخ</th>
</tr>
</thead>
<tbody>
@foreach($order->payments as $payment)
<tr>
<td>{{ $payment->transaction_id }}</td>
<td>{{ $payment->reference_id }}</td>
<td>{{ __($payment->driver) }}</td>
<td>{{ $payment->ip }}</td>
<td>
<span class="badge bg-{{ $payment->status ? 'success' : 'danger' }}">
@if($payment->status)
موفق
@else
ناموفق
@if($payment->error_message)
({{ $payment->error_message }})
@endif
@endif
</span>
</td>
<td>{{ to_persian_numbers(jdate($order->created_at)) }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endif
<hr>
<div class="table-responsive">
<table class="table table-hover table-condensed table-bordered table-striped tbl-card">
<thead>
<tr class="text-center">
<th>#</th>
<th>{{ __('Name') }}</th>
<th>{{ __('Quantity') }}</th>
<th>{{ __('Unit Price') }}</th>
<th>تخفیف واحد</th>
<th>{{ __('Total') }}</th>
</tr>
</thead>
<tbody>
@foreach($orderProducts as $orderProduct)
<tr class="text-center">
<td>{{ $loop->iteration }}</td>
<td>
{{ $orderProduct->name }}
</td>
<td>{{ to_persian_numbers($orderProduct->quantity) }}</td>
<td>{{ to_persian_numbers(number_format($orderProduct->price + $orderProduct->discount)) }}</td>
<td>{{ to_persian_numbers(number_format($orderProduct->discount)) }}</td>
<td>{{ to_persian_numbers(number_format($orderProduct->price * $orderProduct->quantity)) }}</td>
</tr>
@endforeach
</tbody>
<tfoot>
@if($order->discount_code_price)
<tr>
<th colspan="5">
{{ __('Discount Code') }}
@if($order->discountCode->title)
({{ $order->discountCode->title }})
@endif
</th>
<td class="text-center">{{ to_persian_numbers(number_format($order->discount_code_price)) }}</td>
</tr>
@endif
@if($order->discount)
<tr>
<th colspan="5">{{ __('Your profit from this purchase') }}</th>
<td class="text-center">{{ to_persian_numbers(number_format($order->discount + $order->discount_code_price)) }}</td>
</tr>
@endif
<tr>
<th colspan="5">{{ __('Shipping Price') }} ({{ is_null($order->shipping_type) ? __('Free') : \App\Models\Order::SHIPPING_TRANSLATE[$order->shipping_type] }})</th>
<td class="text-center">
{{ to_persian_numbers(number_format($order->shipping_price)) }}
</td>
</tr>
<tr>
<th colspan="5">{{ __('Total') }}</th>
<td class="text-center">{{ to_persian_numbers(number_format($order->price)) }}</td>
</tr>
</tfoot>
</table>
</div>
<hr>
<div class="table-responsive">
<table class="table table-hover table-condensed table-bordered table-striped tbl-card">
<thead>
<tr>
<th>{{ __('Recipient Name') }}</th>
<th>{{ __('Mobile') }}</th>
<th>{{ __('National Code') }}</th>
<th>{{ __('Province') }}</th>
<th>{{ __('City') }}</th>
<th>{{ __('Postal Code') }}</th>
<th>{{ __('Plaque') }}</th>
<th>{{ __('Floor') }}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ $address->name }}</td>
<td>{{ to_persian_numbers($address->mobile) }}</td>
<td>{{ to_persian_numbers($address->national_code) }}</td>
<td>{{ $address->city->province->name }}</td>
<td>{{ $address->city->name }}</td>
<td>{{ to_persian_numbers($address->postal_code) }}</td>
<td>{{ to_persian_numbers($address->plaque) }}</td>
<td>{{ to_persian_numbers($address->floor) }}</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>{{ __('Address') }}</th>
<td colspan="7">
{{ $address->address }}
@if($address->lat && $address->lng)
<div id="map" style="height: 300px; width: inherit; margin-top: 20px;"></div>
@endif
</td>
</tr>
@if($order->delivery_date && $order->delivery_time)
<tr>
<th colspan="4">{{ __('Delivery Date') }}</th>
<th colspan="4">{{ __('Delivery Time') }}</th>
</tr>
<tr>
<td colspan="4">
{{ jdate($order->delivery_date)->format('Y/m/d') }}
</td>
<td colspan="4">
{{ $order->delivery_time }}
</td>
</tr>
@endif
</tfoot>
</table>
</div>
@if($order->description)
<hr>
<div class="alert alert-info">
<strong>{{ __('User Description') }}: </strong>
{{ $order->description }}
</div>
@endif
</div>
</div>
</div>
</div>
</div>
@endsection
@if($address->lat && $address->lng)
@section('header')
<link rel="stylesheet" href="{{ asset('leaflet/leaflet.css') }}" />
<link rel="stylesheet" href="{{ asset('Leaflet.EasyButton/src/easy-button.css') }}">
@endsection
@section('footer')
<script src="{{ asset('leaflet/leaflet.js') }}"></script>
<script src="{{ asset('Leaflet.EasyButton/src/easy-button.js') }}"></script>
<script>
var map = L.map('map').setView([{{ $address->lat }}, {{ $address->lng }}], 14);
map.scrollWheelZoom.disable()
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '',
maxZoom: 18,
tileSize: 512,
zoomOffset: -1,
}).addTo(map);
L.easyButton( 'fa-location-arrow', function(){
window.open('https://www.google.com/maps/search/?api=1&query={{ $address->lat }},{{ $address->lng }}', '_blank');
}).addTo(map);
var marker = L.marker([{{ $address->lat }}, {{ $address->lng }}]).addTo(map);
</script>
@endsection
@endif