@extends('partials.main')

@section('title')
Content Question
@endsection

<style>
    /* .theme_color1 {
        background: #29aae3;
        color: white;
    } */
</style>

@php
    $login_user_role_array = array('Admin' => 'dashboard', 'Client' => 'client-dashboard');
@endphp

@section('content')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <nav class="breadcrumb-4">
            <ol class="breadcrumb breadcrumb-style1">
                <li class="breadcrumb-item">
                </li>
                    <a href="{{ $login_user_role_array[$login_user->roles[0]->name] }}">Dashboard</a>
                <li class="breadcrumb-item">
                    <a href="{{ route('content-heading.index') }}">Content Heading</a>
                </li>
                <li class="breadcrumb-item active">Content Question ({{ $contnent_heading->title }})</li>
            </ol>
        </nav>
    </div>
    <!-- breadcrumb -->


    {{-- @can('qr codes add') --}}
        <div class="col-lg-12 text-right">
            <a href="{{ route('content-heading.index') }}" class="btn bg-theme-color text-white">Back </a>
            <a data-bs-target="#addContentQuestion" data-bs-toggle="modal" class="btn bg-theme-color btn-primary text-white">Add </a>
        </div>
    {{-- @endcan --}}

    <div class="row row-sm table-responsive">
        <table class="table" id="content-question-table">
            <thead>
                <tr>
                    <th data-sortable="true">Question</th>
                    <th data-sortable="true">Max Length</th>
                    <th data-sortable="true">Status</th>
                    <th data-sortable="true">Action</th>
                </tr>
            </thead>
        </table>
    </div>

    @include('question.content-question-modal')

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="{{ asset('js.dom-to-image.js') }}"></script>

<script type="text/javascript">

    $(document).ready(function(){

        // view Employees
        var content_heading_id = "{{ $contnent_heading->id }}";
        var oTable = $('#content-question-table').DataTable({

            processing: true,

            serverSide: true,

            stateSave: true,

            searching: false,

            Filter: false,

            "stateSave": true,

            // "stateSaveParams": function (settings, data) {
            //     data.search.search = "";
            // },

            dom : 'Blfrtip',

            ajax: {

                url: '{{url("content-question/datatable")}}/'+content_heading_id,

            }, columns: [

                {data: 'question', name: 'question'},

                {data: 'length' , name:'length'},

                {data: 'status', name: 'status'},

                {data: 'action', name: 'action'},

            ]

        });

        //start add content question
        $(document).on('submit','#addContentQuestionForm',function (e)
        {
            e.preventDefault();

            var data = new FormData(this);
            $.ajax({
                type: "POST",
                url: '{{url("content-question/store")}}',
                data: data,
                processData: false,
                contentType: false,
                cache: false,
                beforeSend:function(){
                    $('.error-text').text(''); //empty error field
                    $("#btnSubmit").attr('disabled', true);
                    $('.btnSubmit').css('display','inline-block'); //empty error field

                },
                complete: function() {
                    $("#btnSubmit").attr('disabled', false);
                    $(".btnSubmit").css('display', 'none');
                },
                success:function(data){
                    if(data.status == 'success'){
                        $('#addContentQuestion').modal('hide'); //hide modal
                        toastr.success('Success!', data.msg);
                        // toastr.success('Success!', "Content Question has added Successfully",{"positionClass": "toast-bottom-right"});
                        $('#content-question-table').DataTable().ajax.reload(); //reload table to show updated data
                        $('#addContentQuestionForm')[0].reset();
                    }
                    else if(data.status == 'fail')
                    {
                        toastr.error('failed!', data.msg);
                    }
                }
            });
        });
        //content question

        //edit content question
        $(document).on('click','.btnEdit',function(){
            // alert('hello');
            let id = $(this).data('id');
            $.ajax({
                type: 'get',
                url: '{{url("content-question/edit")}}/'+id,
                success: function (data) {
                    if(data.status == 'success')
                    {
                        let selected = '.selected_'+data.content_question.status;
                        $(selected).prop("selected","selected");
                        $('#content_question_id').val(data.content_question.id);
                        $('#edit_question').val(data.content_question.question);
                        $('#edit_length').val(data.content_question.max_length);
                    }
                },
            });
        });

        // Start content question update
        $(document).on('submit','#editContentQuestionForm',function (e){
            // alert('here');
            e.preventDefault();
            let id =$('#content_question_id').val();

            var formData = new FormData(this);
            $.ajax({
                type: 'post',
                processData: false,
                contentType: false,
                cache: false,
                data: formData,
                enctype: 'multipart/form-data',
                url: '{{url("content-question/update")}}/'+id,
                beforeSend:function(){
                    $("#btnUpdate").attr('disabled', true);
                    $('.btnUpdate').css('display','inline-block'); //empty error field
                },
                complete: function() {
                    $("#btnUpdate").attr('disabled', false);
                    $(".btnUpdate").css('display', 'none');
                },
                success:function(data){
                    if(data.status == 'success'){
                        $('#editContentQuestion').modal('hide');
                        toastr.success('Success!', data.msg);
                        $('#content-question-table').DataTable().ajax.reload();
                    }
                    else if(data.status == 'fail')
                    {
                        toastr.error('failed!', data.msg);
                    }
                },
            });
        });
        // End content question update

        //delete content question
        $(document).on('click', '.btnDelete', function(e) {
            var id = $(this).attr('id');
            Swal.fire({
                    title: "Are you sure?",
                    text: "You will not be able to recover this Content Heading!",
                    type: "warning",
                    buttons: true,
                    confirmButtonColor: "#ff5e5e",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: false,
                    dangerMode: true,
                    showCancelButton: true
                })
                .then((deleteThis) => {
                    if (deleteThis.isConfirmed) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                "_token": "{{ csrf_token() }}",
                            },
                            url: '{{url("content-question/destory")}}/'+id,
                            success: function(response) {
                                if (response["status"] == "fail")
                                {
                                    Swal.fire("Failed!", "Failed to delete Content Question.", "error");
                                }
                                else if (response["status"] == "success")
                                {
                                    Swal.fire("Deleted!", "Content Question has been deleted.", "success");
                                    $('#content-question-table').DataTable().ajax.reload();
                                }
                            },
                            error: function(error) {
                                console.log(error);
                            },
                            async: false
                        });
                    } else {
                        Swal.close();
                    }
            });
        });

    });

</script>

@endsection