@extends("layouts.admin.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("admin.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("admin.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}} . {{__("JD")}}
                                                </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("admin.order.parts.invoice", ["order" => $order])
                    </div>
                    @if($order->status == 0)
                        <hr>
                        <div class="row mb-5">
                            <div class="col-lg-8 m-auto">
                                @include("admin.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">
                                @if(isset($order->assignDriver->driver))
                                  @include("admin.order.parts.driver_info", ["driver" => $order->assignDriver->driver])
                                @endif
                            </div>
                        </div>
                    @endif

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

@endsection

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