{{-- layout --}}
@extends('layouts.contentLayoutMaster')

{{-- page title --}}
@include('panels.page-title')

{{-- page style --}}
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/flag-icon/css/flag-icon.min.css')}}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
@endsection

{{-- page content --}}
@section('content')

<!-- users view start -->
<style>
    .company-head {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: start;
    }

    .company-text h5 {
        font-size: 20px;
        margin-top: 0;
    }

    .table-col {
        display: flex;
        flex-direction: column;
        justify-content: start;
        flex-wrap: wrap;
        /* width: calc(40% - 10px); */
        row-gap: 20px;

    }

    ul.table-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        column-gap: 12px;
        width: 100%;
        margin: 0px;
        padding: 10px;
        border: 1px solid #efefef;
        border-radius: 15px;
    }

    ul.table-list li strong {
        font-weight: bolder;
        font-size: 15px;
    }

    .table-img img {
        object-fit: cover;
        width: 100%;
        border: 1px solid #757575;
        border-radius: 10px;
    }


    .chat-list {
        width: 100%;
        border: 1px solid #efefef;
        border-radius: 15px;
        padding: 11px;
        height: auto;
        margin: 0;
        height: 100%;
        position: relative;
    }


    .chat-container ul {
        height: 300px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        row-gap: 14px;
    }


    .chat-container ul::-webkit-scrollbar {
        width: 5px;
    }

    .chat-container ul::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .chat-container ul::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 50px;
    }


    .chat-container ul li:last-child {
        margin-bottom: 80px;
    }




    .order-view h4 {
        font-size: 22px;
        color: #7b7b7b;
        width: 100%;

    }

    .order-view h5 {
        font-size: 18px;
        color: #7b7b7b;
        width: 100%;
    }

    .order-view h4 strong,
    .order-view h5 strong {
        color: #000;
    }


    .chat-col {
        width: 100%;
        overflow: hidden;
    }

    .order-view {
        display: flex;
        flex-direction: column;
       gap: 20px;
        margin-top: 20px;
    }
.card-content .btn{
    margin-top: 20px;
}
    .footer-chat {
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        column-gap: 10px;
        align-items: center;
        padding: 20px;
        background: #fff;
        border-top: 1px solid purple;
    }

    .footer-chat input[type=file]::file-selector-button {
        margin-right: 20px;
        border: 1px solid #6d24a1;
        background: #fff;
        padding: 8px 30px;
        border-radius: 10px;
        color: #000;
        cursor: pointer;
        width: 130px;

    }

    .filename-container {
        margin: 20px 20px 0 0;
    }

    .filename {
        display: inline-block;
        padding: 0 10px;
        margin-right: 10px;
        background-color: #ccc;
        border: 1px solid black;
        border-radius: 15px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-weight: 700;
        font-size: 12px;
        font-family: 'verdana', sans-serif;
    }

    .hide {
        display: none;
    }

    .footer-chat label {
        position: absolute;
        right: 88px;
        top: 32px;
        cursor: pointer;
    }

    .footer-chat label.active i {
        color: #6c25a1;
    }

    .footer-chat input[type="text"] {
        width: 100% !important;
        border: 1px solid #7024a2 !important;
        padding: 2px 100px 0px 21px !important;
        border-radius: 50px !important;
        position: relative;
    }

    .footer-chat input[type="file"] {
        position: absolute;
        right: 35px;
        bottom: 34px;
    }

    .footer-chat button {
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 50%;
        background: #6c25a1;
        color: #fff;
        line-height: 0px;
        right: 30px;
        top: 30px;
        position: absolute;
    }

    .footer-chat button i {
        font-size: 16px;
    }

    .footer-chat label {
        position: absolute;
        right: 79px;
        top: 33px;
        cursor: pointer;
    }

    li.odd {
        position: relative;
    }

    li.odd i {
        position: absolute;
        left: 16px;
        font-size: 19px;
        color: blue;
        top: 15px;
        cursor: pointer;
    }

    li.odd p {
        width: fit-content;
        padding: 15px;
        margin-left: auto !important;
        max-width: 60%;
        width: fit-content;
        color: #fff;
        background: #7024a2;
        border-radius: 15px 15px 0px 15px;
        font-size: 13px;
    }

    li.even p {
        width: fit-content;
        padding: 15px;
        margin-right: auto !important;
        max-width: 60%;
        width: fit-content;
        color: #fff;
        background: #aa59df;
        border-radius: 15px 15px 15px 0px;
        font-size: 13px;
    }

    .company-dropdown .select-wrapper input.select-dropdown {
        display: none;
    }

    .company-dropdown .select-wrapper .caret {
        display: none;
    }

    select#order_status {
        width: 130px;
    }

    .company-dropdown select#order_status:focus {
        box-shadow: none;
        border: none;
    }

    li.odd {
        padding-right: 6px;
    }

    .card-content .alert {
        display: flex;
        justify-content: end;
    }
</style>



<section>
    <div class="section users-view">

        {{-- for the page title start --}}

        <div class="card">

            <div class="card-content">

                {{ (isset($pagetitle) && $pagetitle!='') ? $pagetitle : 'Page' }}

            </div>

        </div>

        {{-- for the page title end --}}

        

        <!-- users view card details start -->

        <div class="card">

            <div class="card-content">



                <div class="row">
                    <p class="alert" style="margin-right:auto ;"></p>
                    <div class="company-head">
                        <div class="company-text">
                            @if(isset($userType) && $userType==config('custom.superadminrole'))
                            <h5><strong>Company Name: </strong>{{$order_view->companyname->company_name }}</h5>
                            @endif
                            <h5><strong>User Name: </strong>{{$order_view->username->name }}</h5>

                            <!-- <h5>Order Date:</h5>
                            <h5>Total:</h5> -->
                        </div>
                        @if($userType!=config('custom.superadminrole'))
                        <a class="btn waves-effect waves-light right" href="{{route('order-export',[$userType,$order_id])}}">{{__('locale.export')}}
                        <i class="material-icons right"></i>
                        </a>
                        @endif
                        <!-- @if($userType!=config('custom.superadminrole')) -->

                        <!-- <div class="company-dropdown"> -->
                            <!-- <p class="alert"></p> -->
                            <!-- <form action="{{route('update-order-status')}}" method="post">
                                @csrf
                                <input type="hidden" name="order_id" value="{{$order_id}}">
                                <select class="form-select order_status_update" id="order_status" name="status">
                                    <option>Status</option>
                                    <option value="0" {{($order_view->status==0) ? 'selected="selected"' : '' }}>Pending</option>
                                    <option value="1" {{($order_view->status==1) ? 'selected="selected"' : '' }}>Deliver</option>
                                    <option value="2" {{($order_view->status==2) ? 'selected="selected"' : '' }}>Complete</option>
                                </select>
                            </form> -->
                        <!-- </div>
                        @endif -->
                    </div>
                </div>

                <div class="order-view">

                <div class="table-col col-lg-12">
                @if(isset($product_order_data) && !empty($product_order_data))
            <table class="table">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Product Name</th>
                        <th>Product Price</th>
                        <th>Product Quantity</th>
                        <th>Product Variant</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($product_order_data as $product_key => $product_value)
                    
                        <tr>
                            <td>
                                @if(isset($product_images[$product_value['product_id']]) && !empty($product_images[$product_value['product_id']]))
                                    <img src="{{ asset('image/' . $product_images[$product_value['product_id']]) }}" width="100px" height="100px" alt="Product Image">
                                @endif
                            </td>
                            <td>{{$product_names[$product_value['product_id']] }}</td>
                            <td>{{$product_value['product_price']}}</td>
                            <td>{{$product_value['product_qty']}}</td>
                            <td>{{$product_variation_name[$product_value['product_id']].' '.$product_variation_type[$product_value['product_id']]}}</td>
                            <td> 
                                @if($userType!=config('custom.superadminrole'))
                                
                                <div class="company-dropdown">
                                    <!-- <p class="alert"></p> -->
                                    <form action="{{route('update-order-status')}}" method="post">
                                        @csrf
                                        <input type="hidden" name="order_id" value="{{$order_id}}">
                                        <input type="hidden" name="user_id" value="{{auth()->user()->id}}">
                                        <input type="hidden" name="product_id" value="{{$product_value['product_id']}}">
                                        <select class="form-select order_status_update" id="order_status" name="status">
                                            <option>Status</option>
                                            
                                            <option value="0" {{(isset($respo[$product_value['product_id']]) && $respo[$product_value['product_id']]==0) ? 'selected="selected"' : '' }}>Pending</option>
                                            <option value="1" {{(isset($respo[$product_value['product_id']]) && $respo[$product_value['product_id']]==1) ? 'selected="selected"' : '' }}>Deliver</option>
                                            <option value="2" {{(isset($respo[$product_value['product_id']]) && $respo[$product_value['product_id']]==2) ? 'selected="selected"' : '' }}>Complete</option>
                                            
                                        </select>
                                    </form>
                                </div>
                                @else
                                {{ 
                                (isset($respo[$product_value['product_id']]) && $respo[$product_value['product_id']] == 0) 
                                ? 'Pending'
                                : (
                                (isset($respo[$product_value['product_id']]) && $respo[$product_value['product_id']] == 1)
                                ? 'Deliver'
                                : (
                                (isset($respo[$product_value['product_id']]) && $respo[$product_value['product_id']] == 2)
                                ? 'Complete'
                                : ''
                                )
                                )
                                }}

                                          
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
                        <!-- @if(isset($product_order_data) && !empty($product_order_data))

                        @foreach($product_order_data as $product_key => $product_value)
                        <ul class="table-list">

                            @if(isset($product_images[$product_value['product_id']]) && !empty($product_images[$product_value['product_id']]))
                            <div class="table-img">
                                <li><img src="{{ asset('image/' . $product_images[$product_value['product_id']]) }}" width="100px" height="100px"></li>
                            </div>
                            @endif
                            <table class="">
                                <tr>
                                    <th><strong>Product Name:</strong></th>
                                    <th><strong>Product Price:</strong></th>
                                    <th><strong>Product Quantity:</strong></th>
                                    <th><strong>Product Variant Name:</strong></th>
                                </tr>
                                <tr>
                                    <td>{{ $product_names[$product_value['product_id']] }}</td>
                                    <td>{{$product_value['product_price']}}</td>
                                    <td>{{$product_value['product_qty']}}</td>
                                    <td>{{ $product_variation_name[$product_value['product_id']]}}</td>
                                </tr>
                                
                            </table>

                             <div class="table-data">
                                <li><strong>Product Name: </strong>{{ $product_names[$product_value['product_id']] }}</li>
                                <li><strong>Product Price: </strong>{{$product_value['product_price']}}</li>
                                <li><strong>Product Quantity: </strong>{{$product_value['product_qty']}}</li>
                                <li><strong>Product Variant Name: </strong>{{ $product_variation_name[$product_value['product_id']]}}</li>
                            </div>

                        </ul>


                        @endforeach
                        @endif -->


                    </div>
                                        @if($userType!=config('custom.superadminrole'))
                    <div class="chat-col col-lg-12">

                        <div class="chat-list">
                            @include('panels.flashMessages')
                            <div class="chat-container">
                                <ul>
                                    @if(isset($messagesResult) && $messagesResult!='')
                                    @foreach($messagesResult as $msg_value)
                                                                        @if($msg_value->from_id != auth()->user()->id)
                                    <li class="even">
                                        @if($msg_value->image!=null)
                                                                                @if(in_array(end($file_ext),['jpg','png','gif','jpeg']))
                                        <img src="{{route('image.displayMessageImage',[$msg_value->image])}}" width="50px" />
                                        <a href="{{route('image.displayMessageImage',[$msg_value->image])}}" download>
                                            <i class="material-icons"><span class="material-icons">download_for_offline</span></i>
                                        </a>
                                        @else
                                        <img src="{{asset('images/file-icon.png')}}" width="50px" />
                                        <a href="{{route('image.displayMessageImage',[$msg_value->image])}}" download>
                                            <i class="material-icons"><span class="material-icons">download_for_offline</span></i>
                                        </a>
                                        @endif
                                        {{--<a href="{{route('image.displayMessageImage',[$msg_value->image])}}" download></a>--}}
                                        @else
                                        <p>{{$msg_value->message}}</p>
                                        @endif
                                    </li>
                                    @else

                                    <li class="odd">
                                        @if($msg_value->image!=null)
                                                                                @if(in_array(end($file_ext),['jpg','png','gif','jpeg']))
                                        <img src="{{route('image.displayMessageImage',[$msg_value->image])}}" width="50px" />
                                        <a href="{{route('image.displayMessageImage',[$msg_value->image])}}" download>
                                            <i class="material-icons"><span class="material-icons">download_for_offline</span></i>
                                        </a>
                                        @else
                                        <img src="{{asset('images/file-icon.png')}}" width="50px" />
                                        <a href="{{route('image.displayMessageImage',[$msg_value->image])}}" download>
                                            <i class="material-icons"><span class="material-icons">download_for_offline</span></i>
                                        </a>
                                        @endif
                                        {{-- <a href="{{route('image.displayMessageImage',[$msg_value->image])}}" download></a> --}}
                                        @else
                                        <p>{{$msg_value->message}}</p>
                                    </li>
                                    @endif
                                    @endif
                                    @endforeach
                                    @endif

                                </ul>
                            </div>
                            <form method="POST" action="{{ route($formUrl) }}" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="order_id" value="{{ $order_view->id }}">
                                <div class="footer-chat">
                                    <input type="text" name="message" id="" class="send-msg" placeholder="Send Message">
                                    <!-- <input type="file" class="File-Upload" name="image" accept=".jpg,.gif,.png,.jpeg,.csv,.pdf,.doc,.xlsx,.xls" />-->

                                    <label for="file-input">
                                        <i class="material-icons fileIcon">attach_file</i>
                                    </label>
                                    <input type="file" class="file-input hide" name="image" id="file-input" accept=".jpg,.gif,.png,.jpeg,.csv,.pdf,.doc,.xlsx,.xls">
                                    <div class="filename-container hide"></div>

                                    <button type="submit"><i class="material-icons">send</i></button>
                                </div>
                            </form>

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

                <a href="{{ url()->previous() }}" class="btn btn-warning">Back</a>

            </div>

        </div>

        <!-- </div> -->

    </div>

    </div>

    <!-- users view card details ends -->



    </div>

</section>
<!-- users view ends -->

@endsection



{{-- page script --}}

@section('page-script')
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> -->
<script src="{{asset('js/scripts/page-users.js')}}"></script>

<script>
    $(document).ready(function() {
        $('.common-success-message').fadeOut(2000);

        $('.order_status_update').change(function() {
            let status_val = $(this).closest('form').serialize();
            let form_url = $(this).closest('form').attr('action');
            console.log('status_val', status_val, form_url);
            $.ajax({
                url: form_url,
                type: 'post',
                data: status_val,
                success: function(result) {
                    console.log('result', result);
                    $('.alert').text('Updated sucessfully').css('color', 'green');
                    $('.alert').fadeOut(3000);
                }
            })
        })

    })
</script>


@endsection