@extends('Admin.Layout.Master')

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

    </style>
@endsection

@section('content-header')
    <div class="header py-1">
        <div class="container-fluid">
            <div class="header-body ">
                <div class="row">
                    <div class="col-lg-6 col-7 text-primary text-left">
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
                            <ol class="breadcrumb breadcrumb-links">
                                <li class="breadcrumb-item">
                                    <a href="#"><i class="fas fa-home text-primary"></i>
                                        Master
                                    </a>
                                </li>
                                <li class="breadcrumb-item"><a href="#">Service</a></li>
                                <li class="breadcrumb-item"><a href="#">FAQ</a></li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-6 col-5 text-right">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('content')
    <form id="main-form" action="{{ !$id ? url($url) : url($url . '/' . $id) }}" method="post" enctype="multipart/form-data">
        @csrf
        @if ($id)
            @method('put')
        @endif

        <div class="card card-body">

            <div class="row m-0 mt-3">
                <div class="col-md-12">
                    <table id="faq_table" class="table table-striped table-bordered">
                        <thead>
                            <th class="p-1">Sr</th>
                            <th class="p-1">Question</th>
                            <th class="p-1">Answer</th>
                            <th class="p-1 text-center">
                                <button type="button" class="btn btn-sm btn-success px-2 py-1" onclick="addRow()">
                                    <i class="fas fa-plus-circle"></i>  
                                </button>
                            </th>
                        </thead>
                        <tbody id="tbody">
                            
                        </tbody>
                    </table>
                </div>
            </div>

        </div> <!--CARD-->


        <div class="card p-0 mt--4 p-0">
            <div class="card-body p-2 text-center">
                <button type="submit" name="button_type" value="SAVE" class="btn btn-primary btn-sm">Save</button>
                <a href="{{ url($service_url) }}" class="btn btn-danger btn-sm">Cancel</a>
            </div>
        </div>

    </form>
@endsection


@push('footer_scripts_after_init')
    <script>
        $(document).ready(function(){
            var service_id="{{$id}}";
            get_mapped_faq(service_id);
        })

        function addRow() {
            trs=formatData(1);
        }

        function removeRow(rowId,faq_id=null) {
            if(faq_id){
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Content-Type': 'application/json',
                    },
                    type: "POST",
                    url: "{{ url('admin/master/service/faq/delete-mapped-faq') }}",
                    data: JSON.stringify({'faq_id':faq_id}),
                    success: function(data) {
                        if(data['status']==0){
                            alert(data['message']);
                        }
                    },
                    error : function(jqXHR, textStatus, errorThrown) {
                        console.error('Error:', textStatus, errorThrown);
                    }
                });
            }
            $('#tr_particular_row_' + rowId).remove();
        }

        function get_mapped_faq(entity_id){
            var service_id = ''
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Content-Type': 'application/json',
                },
                type: "POST",
                url: "{{ url('admin/master/service/faq/get-mapped-faq') }}",
                data: JSON.stringify({'service_id':service_id,'entity_id':entity_id}),
                success: function(data) {
                    $('#tbody').empty();
                    if(data['status']==0){
                        addRow();
                        alert(data['message']);
                    }else{
                        trs=formatData(data['data'].length,data['data']);
                    }
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    console.error('Error:', textStatus, errorThrown);
                }
            });
        }

        function formatData(total_records,data=null){
            var tbody = $("#tbody");
            var rowCount = tbody.find('tr').length; 
            if(rowCount>1){
                var lastTdValue = $('#faq_table tbody tr:last td:first').html();
                rowCount = parseInt(lastTdValue, 10);
            }

            var temp = '';
            for (var i = 0; i < total_records; i++) {
                temp += '<tr id="tr_particular_row_' + (rowCount + 1) + '">' +
                            '<td class="p-1">' + (rowCount + 1) + '</td>' +
                            '<td class="p-1">' +
                                '<input type="text" class="form-control form-control-sm" ' +
                                        'id="question_' + (rowCount + 1) + '" ' +
                                        'name="question[]" ' +
                                        'value="' + (data ? data[i]['question'] : "") + '"'+
                                        'required'+
                                        '>'+
                                        
                            '</td>' +
                            '<td class="p-1">' +
                                '<textarea class="form-control form-control-sm" ' +
                                        'id="answer_' + (rowCount + 1) + '" ' +
                                        'name="answer[]"'+
                                        'required'+
                                        '>' + (data ? data[i]['answer'] : "") + '</textarea>' +
                            '</td>' +
                            '<td class="p-1 text-center">' +
                                '<button type="button" class="btn btn-sm btn-danger px-2 py-1" ' +
                                    'onclick="removeRow(' + (rowCount + 1) + ', \'' + (data ? data[i]['uid'] : null) + '\')">' +
                                    '<i class="fas fa-minus-square"></i>' +
                                '</button>' +
                            '</td>'
                        '</tr>';
                rowCount++;
            }
            $('#tbody').append(temp);
        }

    </script>
@endpush