@extends('layouts.admin.master')
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    @include('common.messages')
    @include('common.errors')
    <!-- Hoverable Table rows -->
    <div class="card">
        <div class="row">
            <div class="col-md-9">                                    
                <h5 class="card-header">Listing</h5>            
            </div>
            <div class="col-md-3" style="margin-top:20px;">                                    
                <a href="{{ route('servey.template.create',$servey->id) }}" class="btn btn-success pull-right"><i class="bx bx-plus"></i> Add Question</a>
                <a href="{{ route('servey.index') }}" class="btn btn-dark pull-right"><i class="bx bx-left-arrow"></i> Back</a>
            </div>
        </div>

        <!---- Template List Start ---->
        <div class="container">
            <div class="row mb-5" id="contents">
            <!-- @if(!empty($questions))
                <ul>
                    @foreach($questions as $q)
                        <li>{{ $q['question'] }}</li>
                    @endforeach
                </ul>
            @endif -->
                @if(!empty($questions))
                <ul id="sortable-list" class="row">
                @foreach($questions as $q)
                    <li class="col-md-6 col-lg-4 row1" data-id="{{ $q['id'] }}">
                        <div class="card mb-3">
                            <div class="card-body">
                                <h5 class="card-title">{{ $q['question'] }}</h5>
                                <p class="text-danger fs-5 fw-bold">
                                    @if($q['question_type']==1)
                                        @if($q['icon_type']==1)
                                        <img  src="{{ asset('admin/images/smile1.png') }}" />
                                        @elseif($q['icon_type']==2)
                                        <img  src="{{ asset('admin/images/smile2.png') }}" />
                                        @else
                                        <img  src="{{ asset('admin/images/smile3.jpg') }}" />
                                        @endif
                                    @elseif($q['question_type']==2)
                                        @if($q['icon_type']==1)
                                        <img  src="{{ asset('admin/images/cup.png') }}" />
                                        @elseif($q['icon_type']==2)
                                        <img  src="{{ asset('admin/images/like.png') }}" />
                                        @elseif($q['icon_type']==3)
                                        <img  src="{{ asset('admin/images/star-rate.png') }}" />
                                        @else
                                        <img  src="{{ asset('admin/images/correct-sign.png') }}" />
                                        @endif
                                    @elseif($q['question_type']==3)
                                        <img  src="{{ asset('admin/images/select.png') }}">
                                    @elseif($q['question_type']==4)
                                        @if($q['icon_type']==1)
                                        <img class="que-img" src="{{ asset('admin/images/scale3.png') }}" />
                                        @elseif($q['icon_type']==2)
                                        <img class="que-img" src="{{ asset('admin/images/scale4.png') }}" />
                                        @elseif($q['icon_type']==3)
                                        <img class="que-img" class="que-img" src="{{ asset('admin/images/scale5.png') }}" />
                                        @elseif($q['icon_type']==4)
                                        <img class="que-img" src="{{ asset('admin/images/scale6.png') }}" />
                                        @elseif($q['icon_type']==5)
                                        <img  src="{{ asset('admin/images/scale2.png') }}" />
                                        @else
                                        <img  src="{{ asset('admin/images/scale1.png') }}" />
                                        @endif
                                    @elseif($q['question_type']==5)
                                        <img  src="{{ asset('admin/images/access-code.png') }}">
                                    @elseif($q['question_type']==6)
                                        <img  src="{{ asset('admin/images/customer-review.png') }}">
                                    @else
                                        <img  src="{{ asset('admin/images/text-field.png') }}">
                                    @endif
                                </p>
                                {{-- <p class="card-text">{{ substr($q['description'], 0, 50) }}</p>  --}}
                                <a href="{{ route('servey.template.details',$q['id']) }}" class="btn btn-primary btn-md">View question</a>
                                {!! Form::open(['url' => route('servey.template.delete_question', $q['id']), 'method' => 'DELETE']) !!}
                                <button class="dropdown-item"
                                ><i class="bx bx-trash me-1"></i> Delete</button
                                >
                                {!! Form::close(); !!}
                            </div>
                        </div>
                </li>
                @endforeach
                </ul>
                @endif
            </div>
        </div>
        <!-- Template list end --->
    </div>
    <!--/ Hoverable Table rows -->
</div>
@endsection

@section('scripts')
<script src="{{ asset('admin/js/jquery-ui.min.js') }}"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>-->
<script type="text/javascript">
    $( document ).ready(function() {
        $( "#sortable-list" ).sortable({
            items: "li",
            cursor: 'move',
            opacity: 0.6,
            update: function() {
                sendOrderToServer();
            }

            });
    });
    function sendOrderToServer() {
        var order = [];
        var token = $('meta[name="csrf-token"]').attr('content');
        $('li.row1').each(function(index,element) {
            order.push({
                id: $(this).attr('data-id'),
                position: index+1
            });
        });
        $.ajax({
        type: "POST", 
        dataType: "json", 
        url:"{{ route('servey.template.update_order', $servey->id) }}",
            data: {
            order: order,
            _token: token
        },

        success: function(response) {

            if (response.status == "success") {

                console.log(response);

            } else {

                console.log(response);

            }

        }

        });
    }
</script>
@endsection