@extends('frontend.app')
<!-- Main Container  -->
@section('content')

<!-- ========== MAIN CONTENT ========== -->
<!--banner start-->
<div class="headtoPadd">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-6">
                        <h4 class="text-uppercase">ORDER DETAILS </h4>
                    </div>
                    <div class="col-md-6 col-lg-6 textright">
                        <a href="{{url('user/orders')}}" class="link text-uppercase mr-3">BACK TO ORDERS</a>
                        <a href="#" class="btn btn-dark btn-sm mb-0 btn-dark-width" data-target="#chatbox" data-toggle="modal">Contact Designer</a>
                    </div>
                </div>

                <div class="">
                    <div class="border-bottom"></div>
                </div>
            </div>
        </div>

    </div>
</div>



<div class="site-section pt-1">
    <div class="container">
        <div class="myordersData">
            <div class="row justify-content-center">

                <div class="col-sm-10">
                    <div class="ordeRow1 f-15 playfair">
                        <div>
                            Order No: {{ $item->order->order_number}}
                            <br>Order placed on: {{ date('jS M Y',strtotime($item->order->created_at))}}
                        </div>
                        <div class="mt-auto"><a href="#" class="btn btn-outline-dark btn-sm">PRINT INVOICE</a></div>
                    </div>

                    <div class="row pt-4">
                        <div class="col-sm-6 col-md-3 col-lg-3">
                            <h6 class="playfair">Shipping details</h6>
                            <div class="theme-Ltext f-13">{{$item->order->user_name}}<br />
                                @if(isset($item->order->user['shipping_address']['address']) && $item->order->user['shipping_address']['address'])
                                    {{$item->order->user['shipping_address']['address']}} <br />
                                @endif
                                @if(isset($item->order->user['shipping_address']['address_line_1']) && $item->order->user['shipping_address']['address_line_1'])
                                    {{$item->order->user['shipping_address']['address_line_1']}} 
                                @endif
                                @if(isset($item->order->user['shipping_address']['address_line_2']) && $item->order->user['shipping_address']['address_line_2'])
                                    , {{$item->order->user['shipping_address']['address_line_2']}} 
                                @endif
                                <br />
                                {{$item->order->user['shipping_address']['postal_code']}} {{$item->order->user['shipping_address']['city']}} <br />
                                <stronng class="font-weight-Mbolder">{{$item->order->user['shipping_address']['country_name']['name']}}</strong>
                            </div>

                        </div>
                        <div class="col-sm-6 col-md-3 col-lg-3">
                            <h6 class="playfair">Shipping method</h6>
                            <div class="theme-Ltext f-13">UPS Standard</div>
                        </div>
                        <div class="col-sm-6 col-md-3 col-lg-3">
                            <h6 class="playfair">Billing details</h6>
                            <div class="theme-Ltext f-13">{{$item->order->user_name}}<br />
                                @if(isset($item->order->user['billing_address']['address']) && $item->order->user['billing_address']['address'])
                                    {{$item->order->user['billing_address']['address']}} <br />
                                @endif
                                @if(isset($item->order->user['billing_address']['address_line_1']) && $item->order->user['billing_address']['address_line_1'])
                                    {{$item->order->user['billing_address']['address_line_1']}} 
                                @endif
                                @if(isset($item->order->user['billing_address']['address_line_2']) && $item->order->user['billing_address']['address_line_2'])
                                    , {{$item->order->user['billing_address']['address_line_2']}} 
                                @endif
                                <br />
                                {{$item->order->user['billing_address']['postal_code']}} {{$item->order->user['billing_address']['city']}} <br />
                                <stronng class="font-weight-Mbolder">{{$item->order->user['billing_address']['country_name']['name']}}</strong>
                            </div>

                        </div>
                        <div class="col-sm-6 col-md-3 col-lg-3">
                            <h6 class="playfair">Payment method</h6>
                            <div class="theme-Ltext f-13">Online <br />Status: {{$item->order->payment_status}}</div>
                        </div>
                    </div>
                    <div class="mt-2 mb-2">
                        &nbsp;
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-sm-10">
                    <div class="cart-table table-responsive" tabindex="1">
                        <table>
                            <thead>
                                <tr>
                                    <th>
                                        <h6 class="text-uppercase">ITEMS ORDERED</h6>
                                    </th>
                                    <th class="tbright playfair f-13">Est. Delivery</th>
                                    <th class="tbright playfair f-13">Price</th>
                                    <th class="tbright playfair f-13">Qty</th>
                                    <th class="tbright playfair f-13">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr valign="top">
                                    <td>
                                        <a target="_blank" href="{{url('product-details/'.$item->product_attributes['product']['alias'])}}">
                                            <div class="itemImg">
                                                <img src="{{$item->product_attributes['varient']['varient_image_1']}}" alt="">
                                            </div>
                                        </a>

                                        <div class="itemDetail pt-0">
                                            <h5>{{$item->product_attributes['product']['title']}}</h5>
                                            <div class="f-13">
                                                @foreach($item->product_attributes['varient']['varient_options'] as $options)
                                                {{$options['option_name'].' .'}}
                                                @endforeach

                                            </div>
                                        </div>
                                    </td>
                                    <td class="tbright f-13">3 - 4 Weeks</td>
                                    <td class="tbright f-13">${{round($item->unit_price)}}</td>
                                    <td class="tbright f-13">
                                        {{round($item->quantity)}}
                                    </td>
                                    <td class="tbright f-13">${{round($item->total_amount)}}</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>

                    <div class="mt-3 mb-4">
                        <div class="border-bottom"></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-6 col-lg-8">
                            <div class="">
                                <a href="#" class="btn btn-outline-dark btn-sm">TRACK YOUR ORDER</a>
                                <a href="#" class="btn btn-outline-dark btn-sm">ORDER RETURN</a>
                            </div>
                            <!-- <a href="#" class="btn btn-outline-dark btn-sm mb-0">YOUR ORDER NOTES BY DESIGNER</a> <span class="tnum ml-1">1</span> -->
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-4">
                            <div class="row">
                                <div class="col-6 col-sm-6 mb-2 mb-3">
                                    Subtotal:
                                </div>
                                <div class="col-6 col-sm-6 text-right">
                                    $ {{round($item->sub_total)}}
                                </div>
                                <!-- <div class="col-6 col-sm-6">
                                        Total Shipping Cost
                                        <div class="discode">Shipping to: INDIA</div>
                                    </div>
                                    <div class="col-6 col-sm-6 text-right">
                                        $ 50
                                    </div>  -->
                                <div class="col-6 col-sm-6 f-16">
                                    Total Cost
                                </div>
                                <div class="col-6 col-sm-6 text-right f-16">
                                    $ {{round($item->total_amount)}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal fade rightModal" data-keyboard="false" id="chatbox" tabindex="-1" role="dialog" aria-labelledby="sendnote" aria-hidden="true">
    <div class="modal-dialog modal-dialog-slideout" role="document">
        <div class="modal-content">
            <div class="modal-header pt-5 pl-5 pr-5 border-0">
                <div class="popTitle">
                    Contact Designer
                </div>
                <div class="float-right">
                    <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close">Close <img src="/assets/frontend/images/close-line.svg"></button>
                </div>
            </div>
            <div class="modal-body pt-0 pr-5 pl-5">
                <div class="cancelAppmnt">

                    <h4 class="f-20 playfair">{{$item->designer['name']}}</h4>
                    <div class="border-top my-3"></div>
                    <div class="row chatheightfix" id="chatboxContainerOrderItem">
                        
                        @foreach ($item->messages as  $message)

                            @if($message->sender_type == 'user')
                                <div class="col-sm-12">
                                    <div class="sent_msg text-right">
                                        <p> @if($message->content)
                                                {{$message->content}}
                                            @endif
                                            @if($message->attachment)
                                                <a href="{{$message->attachment}}" target="new" > <i class="fas fa-paperclip"></i> View Attachment </a>
                                            @endif
                                        </p>
                                        <span class="time_date text-right"> {{date("d M, h:i a", strtotime($message->created_at))}}</span>
                                    </div>
                                </div>
                            @else
                            <div class="col-sm-12">
                                <div class="received_msg">
                                    <div class="received_withd_msg">
                                        <p> @if($message->content)
                                                {{$message->content}}
                                            @endif
                                            @if($message->attachment)
                                                <a href="{{$message->attachment}}" target="new" > <i class="fas fa-paperclip"></i> 
                                                View Attachment </a>
                                            @endif
                                        </p>
                                        <span class="time_date text-right"> {{date("d M, h:i a", strtotime($message->created_at))}}</span>
                                    </div>
                                </div>
                            </div>
                            @endif

                        @endforeach

                    </div>

                </div>
            </div>

            <form  id="messageForm"  enctype="multipart/form-data">
            <div class="row cht-buttonpos">
                
                    <div class="col-sm-12">
                        <div class="input-group chat-send-box">
                            <div class="input-group-prepend">
                                <div class="upload-btn-wrapper">
                                    <button class="uploadBtn"><img src="/assets/frontend/images/chat-attach.jpg" /></button>
                                    <input type="file" id="messageAttachmentFile" name="attachment">
                                </div>
                            </div>
                            <input type="text" id="textMessage" name="content" class="form-control" placeholder="Type your message here" aria-label="Username" aria-describedby="basic-addon1">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1"><img src="/assets/frontend/images/chat-send.jpg" /></span>
                            </div>
                        </div>

                    </div>

                    <input type="hidden" name="id" value="{{$item->id}}">
                    <input type="hidden" name="module" value="order-item">
                    <input type="hidden" name="conversation" value="UAD">
                    <input type="hidden" name="sender_type" value="user">
                
            </div>
            </form>
        </div>
    </div>
</div>


<!-- ========== END MAIN CONTENT ========== -->
@endsection

@section('styles')
<style type="text/css">

</style>
@endsection

@section('scripts')
@parent

<script>
    $( "#chatbox" ).focus(function() {
        var objDiv = document.getElementById("chatboxContainerOrderItem");
        objDiv.scrollTop = objDiv.scrollHeight;
    });    

    $("#messageForm").submit(function(e) {

        e.preventDefault();
        var form = $(this);
        var data = new FormData(this);

        $.each($('#messageAttachmentFile')[0].files, function(i, file) {
            data.append('file[]', file);
        });

        $.ajax({
            type: "POST",
            url: "/ajax/message",
            async: false,  
            cache: false,  
            contentType: false,  
            processData: false,  
            data: data, // serializes the form's elements.
            success: function(res)
            {
                // var message = $('#textMessage').val();

                if(res.data.content) {
                    $('.chatheightfix').append(res.data.content);
                    $('.chatheightfix').scrollTop($('.chatheightfix').prop('scrollHeight'));
                }

                $('#textMessage').val('')
                $("#messageAttachmentFile").val(null);
            }
        });
    });

    $('#messageAttachmentFile').change(function () {
        $("#messageForm").submit();
    });
    
    
</script>

@endsection