@extends('front.layout')
@section('title')
{{__('Show order')}}
@endsection
@section('css')
<link href="{{url('assets/front/css/cart.css')}}" rel="stylesheet">
<link href="{{url('assets/front/css/checkout.css')}}" rel="stylesheet">
@endsection
@section('content')
<main class="bg_gray">
    <div class="container margin_30">
        <div class="page_header">
            <div class="breadcrumbs">
                <ul>
                    <li><a href="{{url('/')}}">{{__('Home')}}</a></li>
                    <li><a href="{{route('orders')}}">{{__('Orders')}}</a></li>
                    <li>{{__('Order details')}}</li>
                </ul>
            </div>
            <h1>{{__('Order details')}}</h1>
        </div>
        <!-- /page_header -->
        <form action="{{route('checkout.submit')}}" method="POST" id="checkout_form">
            @csrf
            <div class="row rtl text-center" style="background-color: white;padding:30px;">
                <div class="col-lg-12">
                    <h6 style="display: inline"><i class="fa fa-bell"></i> <b>{{__('Status')}}</b></h6> : <h6 style="color:{{$order->statusColor()}};display:inline">{{$order->getStatus()}}</h6>
                    <br><br>
                    <h6><i class="fa fa-comment"></i> <b>{{__('Comment')}}</b> :</h6> <h6>{{$order['comment']}}</h6>
                </div>
            </div>
            <br>
            <div class="row" style="overflow: auto">

                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>
                                {{__('Product')}}
                            </th>
                            <th>
                                {{__('Description')}}
                            </th>
                            <th>
                                {{__('Price')}}
                            </th>
                            <th>
                                {{__('Quantity')}}
                            </th>
                            <th>
                                {{__('Commission')}}
                            </th>

                        </tr>
                    </thead>
                    <tbody>
                            @foreach($order['order_products'] as $product)
                            <tr>
                                <td>
                                    <div class="product">
                                        {{$product['product']['name']}}
                                    </div>
                                </td>
                                <td>
                                    <div class="desc">
                                        <ul>
                                            @foreach($product['options'] as $option)
                                                <li>
                                                    <strong>{{$option['option']['attribute']['name']}}:</strong>
                                                    {{$option['option']['name']}}
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </td>
                                <td>
                                    <p class="product_price">
                                        {{formated_price($product['product']['new_price'])}}
                                    </p>
                                </td>
                                <td>
                                    {{$product->real_quantity}}
                                </td>
                                <td>
                                    <p class="product_price">
                                        {{formated_price($product->commission)}}
                                    </p>
                                </td>

                            </tr>
                            @endforeach
                    </tbody>
                </table>
            </div>

                <!-- /cart_actions -->
                <div class="row rtl">
                        <div class="col-lg-6 col-md-6">
                            <div class="step first">
                                <h3>{{__('Customer info')}}</h3>

                                <div class="tab-content">
                                    <div class="tab-pane fade show active" id="tab_1" role="tabpanel" aria-labelledby="tab_1">
                                        <div class="form-group">
                                            <label>{{__('Name')}} : </label> {{$order->name}}
                                        </div>
                                        <div class="form-group">
                                            <label>{{__('Phone')}} : </label> {{$order->phone}}
                                        </div>
                                        <div class="form-group">
                                            <label>{{__('Alternative Phone')}} : </label> {{$order->phone_2}}
                                        </div>
                                        <div class="form-group">
                                            <label>{{__('State')}} : </label> {{$order->state->name}}
                                        </div>
                                        <div class="form-group">
                                            <label>{{__('City')}} : </label>  {{$order->city->name}}
                                        </div>
                                        <div class="form-group">
                                            <label>{{__('Street')}} : </label> {{$order->street}}
                                        </div>
                                        <div class="form-group">
                                            <label>{{__('House')}} : </label> {{$order->home}}
                                        </div>
                                        <div class="form-group">
                                            <label>{{__('Flat')}} : </label> {{$order->flat}}
                                        </div>
                                        <div class="form-group">
                                            <label>{{__('Brand')}} : </label> {{$order->brand}}
                                        </div>
                                        <div class="form-group">
                                            <label>{{__('Note')}} : </label> {{$order->note}}
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <!-- /step -->
                        </div>

                        <div class="col-lg-6 col-md-6">
                            <div class="step last">
                                <h3>{{__('Order summary')}}</h3>
                            <div class="box_general summary">
                                <ul>
                                    <li class="clearfix"><em><strong>{{__('Subtotal')}}</strong></em>  <span id="subtotal">{{formated_price($order->total_order_product_with_commission)}}</span></li>
                                    <li class="clearfix"><em><strong>{{__('Shipping')}}</strong></em> <span class="shipping">{{formated_price($order->shipping)}}</span></li>
                                    <li class="clearfix"><em><strong>{{__('Overweight Total Price')}}</strong></em> <span class="overweight_price">{{formated_price($order->overweight_price)}}</span></li>

                                    <li class="clearfix"><em><strong>{{__('Commission')}}</strong></em> <span class="order_commission">{{formated_price($order->commission)}}</span></li>
                                </ul>
                                <div class="total clearfix">{{__('TOTAL')}} <span id="total">{{formated_price($order->total_order_price)}}</span></div>
                            </div>
                            <!-- /box_general -->
                            </div>
                            <!-- /step -->
                        </div>
                </div>
        </form>
        <div class="row rtl" style="background-color:white">
            <div class="col-lg-12">
                <h4 class="pb-3 title_heading">{{__('Support')}}</h4>
            </div>
            <div class="col-lg-12">
                @foreach($order['supports'] as $support)
                    <div class="row">
                        <div class="col-lg-12">
                            <label for=""># {{$support['id']}}</label>
                        </div>
                        <div class="col-lg-12">
                            <label for="">{{__('Problem type')}}</label>
                            <p>{{__($support['type'])}}</p>
                        </div>
                        <div class="col-lg-12">
                            <label for="">{{__('Details')}}</label>
                            <p>{{$support['body']}}</p>
                        </div>
                        <div class="col-lg-12">
                            <label for="">{{__('Problem Solution')}}</label>
                            <p>
                                {{$support['solution']}}
                            </p>
                        </div>
                    </div>
                    <hr>
                @endforeach
            </div>
            <div class="row rtl">
                <div class="col-lg-12">
                    <form action="{{route('orders.support.submit',$order['id'])}}" method="POST" id="support_form">
                        @csrf
                        <div class="col-lg-12">
                            <h4>{{__('Do you have a problem?')}}</h4>
                            <div class="form-group">
                                <label for="type">{{__('Problem type')}}</label>
                                <select name="type" id="type" class="form-control" required>
                                    <option value="" disabled selected>{{__('select problem type')}}</option>
                                    <option value="General information">{{__('General information')}}</option>
                                    <option value="Wrong product">{{__('Wrong product')}}</option>
                                    <option value="Shipping problem">{{__('Shipping problem')}}</option>
                                    <option value="Other">{{__('Other')}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="body">{{__('Details')}}</label>
                                <textarea name="body" id="body" cols="30" rows="10" class="form-control" required></textarea>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <button type="submit" class="btn_1">
                                    {{__('Send')}}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- /container -->

</main>
@endsection
@section('scripts')
<script>
     $(document).ready(function(){
        $('#support_form').validate();
     });
</script>
@endsection