<div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">

    <!-- begin:: Content Head -->
    <div class="kt-subheader  kt-grid__item" id="kt_subheader">
        <div class="kt-container  kt-container--fluid ">
            <div class="kt-subheader__main">
                <h3 class="kt-subheader__title"><a href="<?php echo base_url() ?>Dashboard/"><?php echo $this->lang->line('dashboard'); ?></a></h3>
                <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                <span class="kt-subheader__desc"><?php echo $this->lang->line('language') ?></span>
            </div>
        </div>
    </div>


    <div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid">
                <div class="kt-portlet kt-portlet--mobile">
                    <div class="kt-portlet__head kt-portlet__head--lg">
                        <div class="kt-portlet__head-label">
                            <span class="kt-portlet__head-icon">
                                <i class="kt-font-brand flaticon2-line-chart"></i>
                            </span>
                            <h3 class="kt-portlet__head-title">
                                <?= $title ?>
                            </h3>
                        </div>
                        <div class="kt-portlet__head-toolbar">
                            <div class="kt-portlet__head-wrapper">
                                <div class="kt-portlet__head-actions">
                                    <a class="btn btn-primary save_content" href="javascript:void(0)" onclick="savefunction()"><?php echo $this->lang->line('modification'); ?></a>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="kt-portlet__body">
                        <?php if ($this->session->flashdata('message')): ?>
                            <div class="alert alert-success alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h4><i class="icon fa-warning"></i> Success!</h4>&nbsp;
                                <?= $this->lang->line('op_success'); ?>
                            </div>
                        <?php endif; ?> 
                        <?php if ($this->session->flashdata('error')): ?>
                            <div class="alert alert-danger alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h4><i class="icon fa-warning"></i> Success!</h4>&nbsp;
                                <?= $this->session->flashdata('error'); ?>
                            </div>
                        <?php endif; ?> 
                        
                        <div class="div_message">
                            
                        </div>


                        <div class="form-group row">
                            <label for="example-text-input" class="col-2 col-form-label"><?php echo $this->lang->line('search') ?></label>
                            <div class="col-9">
                                <input type="search" class="form-control search" id="my_search" name="search" placeholder="<?php echo $this->lang->line('language'); ?>"  onsearch="search_lang()">
                            </div>
                        </div>

                        <div class="form-group row">

                            <label class="col-2 col-form-label"> </label>
                            <div class="col-9">
                                <select class="new-select form-control" id="search_list"onclick="newselect(this)"  multiple>
                                    <?php
                                    if ($pages) {
                                        $s = 1;
                                        foreach ($pages as $page) {
                                            ?>
                                            <option value="<?php echo $page->label; ?>" data-arabic="<?php echo $page->arabic; ?>" data-english="<?php echo $page->english; ?>" ><?php echo $page->english; ?>----------<?php echo $page->arabic; ?></option>
                                            <?php
                                        }
                                    }
                                    ?>
                                    ?>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row" > 
                            <label class="col-2 form-label"><?php echo $this->lang->line('english'); ?></label>
                            <div class="col-9">
                                <textarea name="" class="form-control lang_english" readonly="" onkeyup="changeFunction()"></textarea>
                            </div>
                        </div>

                        <div class="form-group row" >
                            <label class="col-2 form-label"><?php echo $this->lang->line('arabic'); ?></label>
                            <div class="col-9">
                                <textarea name="" class="form-control lang_arabic" readonly onkeyup="changeFunction()"></textarea>
                            </div>
                        </div>

                        <input type="hidden" name="lang_label" class="lang_label">
                    </div>









                </div>
          
    </div>
</div>




<?php
// $this->load->view('common/script');	
?>
<script type="text/javascript">
    var b_url = "<?php echo base_url(); ?>";
    function newselect(obj) {
        $(".lang_english").removeAttr("readonly");
        $(".lang_arabic").removeAttr("readonly");
        var lang_english = obj.options[obj.selectedIndex].getAttribute('data-english');
        var lang_arabic = obj.options[obj.selectedIndex].getAttribute('data-arabic');
        // var lang_arabic =  $(this).find('option:selected').attr("data-arabic");
        // var lang_english =  $(this).find('option:selected').attr("data-english");
        var lang_label = $(obj).val();
        $(".lang_english").val(lang_english);
        $(".lang_arabic").val(lang_arabic);
        $(".lang_label").val(lang_label);
    }

    var lang = {};
    // $('body').on('keyup','.lang_english , .lang_arabic',function(){
    function changeFunction() {
        var lang_e = $(".lang_english").val();
        var lang_a = $(".lang_arabic").val();
        var lang_l = $(".lang_label").val();

        lang[lang_l] = [lang_e, lang_a, lang_l];
        $(".new-select").find('option:selected').attr("data-arabic", lang_a).attr("data-english", lang_e).text(lang_e + "------" + lang_a)
        //var lang_single = lang_new;

        //lang.push(lang);
        // console.log(lang);
    }


    // $(".save_content").click(function()
    function savefunction() {

        var json_data = JSON.stringify(lang);
        //console.log(json_data);
        $(".div_message").html("");
        var csrf_name = '<?php echo $this->security->get_csrf_token_name(); ?>';
        var csrf_hash = '<?php echo $this->security->get_csrf_hash(); ?>';
        $.ajax({
            type: "POST",
            url: "<?php echo base_url() ?>Language/save_content",
            data: {'csrf_name': csrf_hash, 'json_data': json_data},
            success: function (e) {
                if (e) {
                    $(".div_message").html('<div class="alert alert-success alert-dismissible"><a href="#" class="close" data-dismiss="alert" aria-label="close"></a><strong>Success!</strong> ' + 'Change SuccessFully' + '</div>');
                } else {
                }
            }
        });

    }
    $(".search").keyup(function () {
        var search = $("#search").val();
        var page_id = $("#page_id").val();
        $.ajax({
            type: "POST",
            url: b_url + "language/get_option/" + page_id,
            data: {search, search},
            success: function (e) {
                //alert(e);
                $(".new-select").html(e);
            }
        });
    });

    $("#page_id").change(function () {
        var search_page = $(this).val();
        load_lang(search_page);
    });

    load_lang("");

    function  load_lang(search_page) {
        //alert();
        $.ajax({
            type: "GET",
            url: b_url + "language/page_ajax/" + search_page,
            success: function (e) {
                //alert(e);
                $(".new-select").html(e);
            }
        });
    }
    function  search_lang() {
        var x = document.getElementById("my_search").value;
        $.ajax({
            type: "POST",
            url: "<?php echo base_url() ?>Language/search",
            data: {'match': x},
            success: function (e) {
                $("#search_list").html(e);

            }
        });
    }

</script>