@extends('layouts.app')
@section('title', 'Ecommerce Order')
@section('custom-css')
    <style>
        .table > :not(caption) > * > * {
            padding: 4px 6px !important;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="col-lg-12">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="">
                                        <h3>{{__('pages.Order')}} #{{ $order->id }} {{__('pages.Details')}}</h3>
                                        <h5>{{__('pages.Created on')}} {{\Illuminate\Support\Carbon::parse($order->created_at)->format('F j, Y \a\t g:i A')}}</h5>
                                    </div>
                                    <a href="{{ route('ecommerce.order.index') }}" class="btn btn-primary">
                                        <i class="fas fa-long-arrow-alt-left me-2"></i>{{__('pages.Back to Orders')}}
                                    </a>
                                </div>
                            </div>
                            <hr>
                            <div class="col-md-12">
                                <table class="table">
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">{{__('pages.Product Name')}}</th>
                                        <th scope="col">{{__('pages.Quantity')}}</th>
                                        <th scope="col">{{__('pages.Price')}}</th>
                                        <th scope="col">{{__('pages.Discount')}}</th>
                                        <th scope="col">{{__('pages.Total')}}</th>
                                    </tr>

                                    @foreach($order->orderDetails as $product)
                                        <tr>
                                            <th scope="row">{{ $loop->iteration }}</th>
                                            <td>
                                                <p class="mb-0"><strong>{{ $product->product->name }}</strong>
                                                    ({{ $product->product->supplier->name }})</p>
                                                <p class="mb-0 text-muted">{{ $product->product->generic_name }}</p>
                                            </td>
                                            <td>{{ $product->quantity }}</td>
                                            <td>{{ number_format($product->price,2) }}</td>
                                            <td>{{ number_format($product->discount_amount,2) }}</td>
                                            <td>{{ number_format($product->total_price,2) }}</td>
                                        </tr>
                                    @endforeach
                                    <tr>
                                        <td colspan="5" class="border-0" align="right"><b>{{__('pages.Subtotal')}}</b></td>
                                        <td class="border-0 p-2">{{ number_format($order->sub_total,2) }}{{ setting('currency') }}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="5" class="border-0" align="right"><b>{{__('pages.Total Discount')}}</b></td>
                                        <td class="border-0 p-2">{{ number_format($order->total_discount,2) }}{{ setting('currency') }}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="5" class="border-0" align="right"><b>{{__('pages.Delivery Fee')}}</b></td>
                                        <td class="border-0 p-2">{{ number_format($order->delivery_fee,2) }}{{ setting('currency') }}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="5" class="border-0" align="right"><b>{{__('pages.Total Amount')}}</b></td>
                                        <td class="border-0 p-2">{{ number_format($order->total_amount,2) }}{{ setting('currency') }}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-lg-12 mt-2">
                                <div class="card card-body bg-white border-dark">
                                    <h4>{{__('pages.Update Order Information')}}</h4>
                                    <hr>
                                    <form action="{{ route('ecommerce.order.update', $order->id) }}" method="post">
                                        @csrf
                                        <div class="row">
                                            <div class="col-lg-6 mb-2">
                                                <label for="">{{__('pages.Delivery Date')}}</label>
                                                <input type="date" required value="{{ $order->delivery_date }}" class="form-control" name="delivery_date">
                                            </div>
                                            <div class="mb-2">
                                                <label for="">{{__('pages.Notes')}}</label>
                                                <textarea name="order_note" class="form-control text-dark">
                                                    {{ $order->order_note }}
                                                </textarea>
                                            </div>
                                            <div class="col-lg-12 mb-2">
                                                <label for="" class="mb-1">{{__('pages.Order Status')}}</label>
                                                <div class="row">
                                                    <div class="col-lg-3">
                                                        <div class="form-check">
                                                            <input
                                                                @if($order->order_placed) checked disabled
                                                                @endif
                                                                class="form-check-input"
                                                                type="checkbox"
                                                                value="1"
                                                                name="order_placed"
                                                                id="placedOrder"
                                                            >
                                                            <label class="form-check-label" for="placedOrder">
                                                                {{ __('pages.Placed Order') }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <div class="form-check">
                                                            <input
                                                                    @if($order->order_processing) checked
                                                                    @endif
                                                                    class="form-check-input"
                                                                    type="checkbox"
                                                                    value="1"
                                                                    name="order_processing"
                                                                    id="order_processing"
                                                            >
                                                            <label class="form-check-label" for="order_processing">
                                                                {{ __('pages.Processing') }}
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div class="col-lg-3">
                                                        <div class="form-check">
                                                            <input
                                                                    @if($order->order_shipped) checked
                                                                    @endif
                                                                    class="form-check-input"
                                                                    type="checkbox"
                                                                    value="1"
                                                                    name="order_shipped"
                                                                    id="order_shipped"
                                                            >
                                                            <label class="form-check-label" for="order_shipped">
                                                                {{ __('pages.Shipped') }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <div class="form-check">
                                                            <input
                                                                    @if($order->order_delivered) checked
                                                                    @endif
                                                                    class="form-check-input"
                                                                    type="checkbox"
                                                                    value="1"
                                                                    name="order_delivered"
                                                                    id="order_delivered"
                                                            >
                                                            <label class="form-check-label" for="order_delivered">
                                                                {{ __('pages.Delivered') }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 mt-2">
                                                        <div class="form-check">
                                                            <input
                                                                    @if($order->order_cancelled) checked
                                                                    @endif
                                                                    class="form-check-input"
                                                                    type="checkbox"
                                                                    value="1"
                                                                    name="order_cancelled"
                                                                    id="order_cancelled"
                                                            >
                                                            <label class="form-check-label" for="order_cancelled">
                                                                {{ __('pages.Cancelled') }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="mb-2">
                                            <button type="submit" class="btn btn-primary">{{ __('pages.Save Change') }}</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card card-body bg-white border-success">
                                <h4><i class="fa fa-user"></i> {{ __('pages.Customer Information') }}</h4>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item"><strong>{{ __('pages.Name') }}:</strong> {{ $order->customer->name }}</li>
                                    <li class="list-group-item"><strong>{{ __('pages.Email') }}:</strong> {{ $order->customer->email }}
                                    </li>
                                    <li class="list-group-item"><strong>{{ __('pages.Phone') }}:</strong> {{ $order->customer->phone }}
                                    </li>
                                </ul>
                            </div>
                            <div class="card card-body bg-white border-warning">
                                <h4><i class="fa fa-credit-card"></i> {{ __('pages.Payment Information') }}</h4>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item"><strong>{{ __('pages.Transaction Id') }}:</strong> {{ $order->tran_id }}
                                    </li>
                                    <li class="list-group-item"><strong>{{ __('pages.Payment method') }}:</strong> {{ $order->payment_method }}</li>
                                    <li class="list-group-item"><strong>{{ __('pages.Paid amount') }}:</strong> {{ number_format($order->paid_amount,2) }}</li>
                                    <li class="list-group-item"><strong>{{ __('pages.Payment status') }}:</strong> {{ $order->payment_status }}</li>
                                </ul>
                            </div>
                            <div class="card card-body bg-white border-primary">
                                <h4><i class="fa fa-truck-fast"></i>{{ __('pages.Delivery address') }} </h4>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item"><strong>{{ __('pages.Delivery at') }}:</strong> {{ $order->shippingInfo->address_type }}</li>
                                    <li class="list-group-item"><strong>{{ __('pages.Name') }}:</strong> {{ $order->shippingInfo->name }}
                                    </li>
                                    <li class="list-group-item">
                                        <strong>{{ __('pages.Phone') }}:</strong> {{ $order->shippingInfo->phone }}</li>
                                    <li class="list-group-item">
                                        <strong>{{ __('pages.Address') }}:</strong> {{ $order->shippingInfo->address }}</li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-js')
    <script>
        function changePagination(paginate) {
            var nurl = new URL('{{ route('ecommerce.order.index') }}');
            nurl.searchParams.set('paginate', paginate);
            location.href = nurl;
        }

        function changeOrderStatus(status) {
            var nurl = new URL('{{ route('ecommerce.order.index') }}');
            nurl.searchParams.set('order_status', status);
            location.href = nurl;
        }

        function searchKeyword(e) {
            e.preventDefault();
            let keyword = $('#search-keyword')
            var nurl = new URL('{{ route('ecommerce.order.index') }}');
            nurl.searchParams.set('keywords', keyword);
            location.href = nurl;
        }
    </script>
@endsection