@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(in_array((int)$order->status, [-1, 0, 1]))
                                    <div class="col-9">
                                        @include("admin.order.parts.forms.assign_technician")
                                    </div>
                                @endif
                                @if($order->activation == "0")
                                    <div class="col-3">
                                        <a href="{{route("admin.orders.start", ["id" => $order->id])}}" class="btn btn-primary">{{__("Activation")}}</a>
                                    </div>
                                @endif
                            </div>
                            <div class="row">
                                <div class="col-3 mt-2">
                                    <form action="{{route("admin.orders.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>
                            </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->full_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">{{ $order->created_at}}</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">{{__('Image')}}</h5>--}}
{{--                                    </div>--}}
{{--                                    <h6 class="mb-1 mt-1">@if($notes->getFirstMediaFile()) <img src="{{$notes->getFirstMediaFile()->url}}" alt="" width="50px">@endif</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">{{__('Date Time')}}</h5>
                                    </div>
                                    <h6 class="mb-1 mt-1">{{ $order->order_day }} | {{$order->order_time_from}} - {{$order->order_time_to}}</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">{{__('Order Location')}}</h5>
                                        <small class="text-muted">
                                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Location{{$order->id}}">
                                                {{__("View With Map")}}
                                            </button>
                                        </small>
                                    </div>
                                    <h6 class="mb-2">{{$order->order_location_name}}</h6>
                                </a>
                                <!-- Modal -->
                                <div class="modal fade" id="Location{{$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->order_location_latitude}},{{$order->order_location_longitude}}">
                                                </iframe>

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

                                <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 service required')}}</h5>
                                    </div>
                                    <h6 class="mb-1 mt-1">{{count($order->orderServices)}}</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->paymentMethod->name}}</h6>
                                </a>
                                @if(in_array($order->status, [1, 2, 3]))
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1">{{__("Technician")}}</h5>
                                        </div>
                                        <h6 class="mb-1 mt-2">{{$order->acceptOrder()->technician->full_name}}</h6>
                                    </a>
                                @elseif(in_array($order->status, [0]))
                                    <a href="#" class="list-group-item list-group-item-action">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1">{{__("Technician")}}</h5>
                                        </div>
                                        <h6 class="mb-1 mt-2">{{$order->canceled->user->full_name}}</h6>
                                    </a>
                                @endif
                                @if($order->status == 3)
                                <a href="#" class="list-group-item list-group-item-action">
                                    @if($order->rating && $order->rating->number_rating != 0)
                                        <div class="w-100 justify-content-between">
                                            <h5 class="mb-1">{{__('Technical rating')}}</h5>
                                            <span class="fa fa-star @if(in_array($order->rating->number_rating, [1,2,3,4,5])) checked @endif starsize"></span>
                                            <span class="fa fa-star @if(in_array($order->rating->number_rating, [2,3,4,5])) checked @endif starsize"></span>
                                            <span class="fa fa-star @if(in_array($order->rating->number_rating, [3,4,5])) checked @endif starsize"></span>
                                            <span class="fa fa-star @if(in_array($order->rating->number_rating, [4,5])) checked @endif starsize"></span>
                                            <span class="fa fa-star @if(in_array($order->rating->number_rating, [5])) checked @endif starsize"></span>
                                        </div>
                                        @if(in_array($order->rating->number_rating, [1,2,3]))
                                            <p>{{$order->rating->reason}}</p>
                                        @endif
                                    @else
                                        <div class="w-100 justify-content-between">
                                            <h5 class="mb-1">{{__('Technical rating')}}</h5>
                                            <p>{{__("There's No Rating")}}</p>
                                        </div>
                                    @endif
                                </a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row mb-5">
                        <div class="col-lg-8 m-auto">
                            <div class="list-group mt-2">
                                <h1 class="text-center mb-3">{{__("Services")}}</h1>
                                @foreach($order->orderServices as $orderService)
                                    <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">{{$orderService->service->full_name}}</h2>
                                        </div>
                                        @if($orderService->properties->isNotEmpty())
                                            <h6>{{__("Properties")}}</h6>
                                            <ul class="list-group mt-3 mb-4 order-details-box">
                                                @foreach($orderService->properties as $property)
                                                    <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                        <div class="col-6 name font-weight-bold" >{{$property->property->name}}</div>
                                                        <div class="col-6 value">{{$property->value_type == "f" ? $property->getValue() : ($property->getValue() ? __("Yes") : __("No"))}}</div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                        @if($orderService->guarantee_days != 0)
                                            <h6>{{__("guarantee_days")}}</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" >{{$orderService->service->getNameAttribute()}}</div>
                                                    <div class="col-6 value">{{$orderService->guaranteeTime()}}</div>
                                                </li>
                                            </ul>
                                        @endif
                                        @if($orderService->notes)
                                            <h6>{{__('Notes')}}</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">
                                                    @if($orderService->notes->text)
                                                        <div class="col-4 name font-weight-bold" >{{__("Text")}}</div>
                                                        <div class="col-8 value">{{$orderService->notes->text}}</div>
                                                    @endif
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                    @if($orderService->notes->getFirstMediaFile('image'))
                                                        <div class="col-4 name font-weight-bold" >{{__("image")}}</div>
                                                        <div class="col-8 value"> <img src="{{$orderService->notes->getFirstMediaFile('image')->url}}"  height="150px" width="150px"/> </div>
                                                    @endif
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                    @if($orderService->notes->getFirstMediaFile('voice'))
                                                        <div class="col-4 name font-weight-bold" >{{__("voice")}}</div>
                                                        <div class="col-8 value">
                                                            <audio controls >
                                                                <source src="{{$orderService->notes->getFirstMediaFile('voice')->url}}" type="audio/ogg">
                                                                Your browser does not support the audio element.
                                                            </audio>
                                                        </div>
                                                    @endif
                                                </li>
                                            </ul>
                                        @endif
                                        @if($orderService->questions->isNotEmpty())
                                            <h6>{{__('Questions')}}</h6>
                                            <ul class="list-group mt-3 mb-4 order-details-box">
                                                @foreach($orderService->questions as $question)
                                                    <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                        <div class="col-6 name font-weight-bold" >{{$question->question->text}}</div>
                                                        <div class="col-6 value">
                                                            {{__('Answer')}}: {{$question->answer ? __("Yes") : __("No")}}
                                                            @if($question->note)
                                                                <hr style="padding: 0; margin:5px 0">
                                                                Note: {{$question->note}}
                                                            @endif
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                        @if($orderService->problem->isNotEmpty())
                                            <h6>{{__('Problems')}}</h6>
                                            <ul class="list-group mt-3 mb-4 order-details-box">
                                                @foreach($orderService->problem as $problem)
                                                    <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                        <div class="col-4 name font-weight-bold" >{{__("Text")}}</div>
                                                        <div class="col-8 value">{{$problem->letter}}</div>
                                                    </li>
                                                    <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                        @if($problem->getFirstMediaFile('image'))
                                                            <div class="col-4 name font-weight-bold" >{{__("image")}}</div>
                                                            <div class="col-8 value"> <img src="{{$problem->getFirstMediaFile('image')->url}}"  height="150px" width="150px"/> </div>
                                                        @endif
                                                    </li>
                                                    <li class="list-group-item d-flex justify-content-between align-items-center" style="padding: 0">
                                                        @if($problem->getFirstMediaFile('voice'))
                                                            <div class="col-4 name font-weight-bold" >{{__("voice")}}</div>
                                                            <div class="col-8 value">
                                                                <audio controls >
                                                                    <source src="{{$problem->getFirstMediaFile('voice')->url}}" type="audio/ogg">
                                                                </audio>
                                                            </div>
                                                        @endif
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @if($order->invoice)
                        <hr>
                        <div class="row mb-5">
                            @include("admin.order.parts.invoice", ["invoice" => $order->invoice])
                        </div>
                    @endif
                    @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

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

@endsection

@section("scripts")
    <!-- Data table plugin-->
    <script type="text/javascript" src="{{asset("assets/js/plugins/jquery.dataTables.min.js")}}"></script>
    <script type="text/javascript" src="{{asset("assets/js/plugins/dataTables.bootstrap.min.js")}}"></script>
    <script type="text/javascript">$('#sampleTable').DataTable();</script>
    <script type="module" src="{{asset("assets/js/pages/order_details.js")}}"></script>

@endsection