@extends('layouts.user.app')
@section('page-title')
    {{ __('Dashboard') }}
@endSection
@section('page-nav-title')
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{ __('Orders') }}</h1>
            <p>{{ __('All Orders') }}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{ __('Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('Orders') }}</a></li>
        </ul>
    </div>
@endsection
@section('css-links')
    <link rel="stylesheet" href="{{ asset('assets/css/' . app()->getLocale() . '/pages/orders.css') }}">
    <style>
        .checked {
            color: orange;
        }

        .starsize {
            width: 30px;
            height: auto;
            margin: 0;
            padding: 0;
        }
    </style>
@endsection

@section('content')
    @include('includes.dialog')

    <div class="row">

        <div class="col-12">
            <div class="tile">
                <div class="tile-title">
                    <div class="row">
                        <div class="col-lg-10">
                            <h3>{{ __('Order Details') }} #{{ $order->id }}</h3>
                        </div>
                        <div class="col-lg-2 @if (app()->getLocale() == 'en') text-right  @else text-left @endif">
                            <span class="status-box @if ($order->status == '0') red @elseif($order->status == '1') yellow @else green @endif">{{ $order->getStatusText() }}</span>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="tile-body">
                    <div class="row mb-5 mt-5">
                        <div class="col-lg-8 m-auto">
                            <div class="row">
                                @if ($order->status != 0 && $order->status != 5 && $order->type == 3)
                                    <div class="col-9">
                                        @include('user.order.parts.forms.assign_driver')
                                    </div>
                                @endif
                                @if (in_array((int) $order->status, [1, 2, 3, 4]))
                                    <div class="col-3 mt-2">
                                        <form action="{{ route('user.orders.action', ['type' => 'cancel', 'id' => $order->id]) }}" method="POST">
                                            @csrf
                                            <button class="btn btn-danger" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i>
                                                {{ __('Cancel') }}</button>
                                        </form>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row mb-5">
                        <div class="col-lg-8 m-auto">
                            <div class="list-group mt-2">
                                <h1 class="text-center mb-3">{{ __('General Information') }}</h1>
                                <a href="#" class="list-group-item list-group-item-action ">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-2">{{ __('Full Name') }}</h5>
                                    </div>
                                    <h6 class="mb-1 mt-1">{{ $order->user->first_name . ' ' . $order->user->last_name }}</h6>
                                </a>
                                <a href="#" class="list-group-item list-group-item-action ">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-2">{{ __('Phone Number') }}</h5>
                                    </div>
                                    <h6 class="mb-1 mt-1">{{ $order->user->client->phone_number }}</h6>
                                </a>

                                <a href="#" class="list-group-item list-group-item-action ">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-2">{{ __('Created') }}</h5>
                                    </div>
                                    <h6 class="mb-1 mt-1">{{ date('Y-m-d H:i:s', strtotime($order->created_at)) }}</h6>
                                </a>

                                @if ($order->type == 3 || $order->type == 4)
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1">{{ __('Order Location') }}</h5>
                                            <small class="text-muted">
                                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Location1{{ $order->id }}">
                                                    {{ __('View With Map') }}
                                                </button>
                                            </small>
                                        </div>
                                        <h6 class="mb-2">{{ $order->delivery_to }}</h6>
                                    </a>
                                    <!-- Modal -->
                                    <div class="modal fade" id="Location1{{ $order->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-xl">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLabel">{{ __('Location') }}</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">

                                                    <iframe id="map" allowfullscreen
                                                        src="https://www.google.com/maps/embed/v1/place?key={{ env('GOOGLE_API_KEY') }}&q={{ $order->lat }},{{ $order->lng }}">
                                                    </iframe>

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

                                <a href="#" class="list-group-item list-group-item-action ">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-2">{{ __('Number of Items required') }}</h5>
                                    </div>
                                    <h6 class="mb-1 mt-1">{{ count($order->orderItems) }}</h6>
                                </a>

                                <a href="#" class="list-group-item list-group-item-action">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-1">{{ __('Payment Method') }}</h5>
                                    </div>
                                    <h6 class="mb-1 mt-2">{{ $order->payment->name }}</h6>
                                </a>
                                <a href="#" class="list-group-item list-group-item-action">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-1">{{ __('Type') }}</h5>
                                    </div>
                                    <h6 class="mb-1 mt-2">{{ $order->getTypeText() }}</h6>
                                </a>
                                <a href="#" class="list-group-item list-group-item-action">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-1">{{ __('Branch Name') }}</h5>
                                    </div>
                                    <h6 class="mb-1 mt-2">{{ $order->branch->name }}</h6>
                                </a>
                            </div>
                        </div>
                    </div>
                    <hr>
                    @if ($order->type == 1)
                        <div class="row mb-5">
                            <div class="col-lg-8 m-auto">
                                <div class="list-group mt-2">
                                    <h1 class="text-center mb-3">{{ __('Client Car Details') }}</h1>
                                    <div href="#" class="list-group-item list-group-item-action ">
                                        <h6>{{ __('Car Model') }}</h6>
                                        <ul class="list-group mt-3 mb-4 order-details-box">
                                            <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                <div class="col-6 name font-weight-bold">
                                                    {{ $order->car->model }}
                                                </div>
                                            </li>
                                        </ul>
                                        <h6>{{ __('Car Color') }}</h6>
                                        <ul class="list-group mt-3 mb-4 order-details-box">
                                            <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                <div class="col-6 name font-weight-bold">
                                                    {{ $order->car->color }}
                                                </div>
                                            </li>
                                        </ul>
                                        <h6>{{ __('Car Number') }}</h6>
                                        <ul class="list-group mt-3 mb-4 order-details-box">
                                            <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                <div class="col-6 name font-weight-bold">
                                                    {{ $order->car->number }}
                                                </div>
                                            </li>
                                        </ul>
                                        <h6>{{ __('Estimate Time to arrive') }}</h6>
                                        <ul class="list-group mt-3 mb-4 order-details-box">
                                            <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                <div class="col-6 name font-weight-bold">
                                                    {{ $order->car->time }}
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                    @endif
                    <div class="row mb-5">
                        <div class="col-lg-8 m-auto">
                            <div class="list-group mt-2">
                                <h1 class="text-center mb-3">{{ __('Items') }}</h1>
                                @foreach ($order->orderItems as $orderItem)
                                    <a href="#" class="list-group-item list-group-item-action ">
                                        <div class="d-flex w-100 justify-content-between mt-2 mb-3">
                                            <h2 class="mb-2 mt-2">{{ $orderItem->item->name }}</h2>
                                        </div>
                                        <ul class="list-group mt-3 mb-4 order-details-box">
                                            <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                <div class="col-6 name font-weight-bold">
                                                    {{ __('Item Image') }}
                                                </div>
                                                <div class="col-6 value">
                                                    <img src="{{ $orderItem->item->getFirstMediaFile()->url }}" width="80">
                                                </div>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                <div class="col-6 name font-weight-bold">
                                                    {{ __('Quantity') }}
                                                </div>
                                                <div class="col-6 value">
                                                    {{ $orderItem->quantity }}
                                                </div>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                <div class="col-6 name font-weight-bold">
                                                    {{ __('Price') }}
                                                </div>
                                                <div class="col-6 value">
                                                    {{ $orderItem->price }} . {{ __('IQD') }}
                                                </div>
                                            </li>
                                        </ul>
                                        @if ($orderItem->addOns->isNotEmpty())
                                            <h6>{{ __('Addons') }}</h6>
                                            <ul class="list-group mt-3 mb-4 order-details-box">
                                                @foreach ($orderItem->addOns as $addOn)
                                                    <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                        <div class="col-6 name font-weight-bold">{{ $addOn->title->name }}</div>
                                                        <div class="col-6 value">
                                                            <ul>
                                                                @foreach ($addOn->options as $option)
                                                                    <li>{{ $option->option->name }}</li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row mb-5">
                        @include('user.order.parts.invoice', ['order' => $order])
                    </div>
                    @if ($order->status == 0)
                        <hr>
                        <div class="row mb-5">
                            <div class="col-lg-8 m-auto">
                                @include('user.order.parts.cancel_info', ['canceled' => $order->canceled])
                            </div>
                        </div>
                    @endif
                    @if ($order->status != 1 && $order->status != 0 && $order->type == 3)
                        <hr>
                        <div class="row mb-5">
                            <div class="col-lg-8 m-auto">
                                @include('user.order.parts.driver_info', ['driver' => $order->assignDriver->driver])
                            </div>
                        </div>
                    @endif

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

@section('scripts')
    <script type="module" src="{{ asset('assets/js/pages/order_details.js') }}"></script>
@endsection