<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            <?php
            echo isset($title) ? $title : NULL;
            ?>
        </h1>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <form method="post" role="form">
                <div class="col-lg-6">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">Edit About Us Page</h3>
                            <a class="btn btn-primary pull-right" href="<?php echo BASE_URL."aboutus/aboutus_gallery" ?>"><i class="fa fa-edit" aria-hidden="true"></i>  Edit Aboutus Images.</a>

                        </div>
                        <!-- /.box-header -->
                        <div class="adminform">
                            <!-- form start -->

                            <?php
                            if (isset($message)) {
                                echo $message;
                            }
                            ?>
                            <div class="form-group">
                                <label for="Company-description">About Us Description</label>
                                <textarea name="description" rows="8"
                                          class="form-control"><?php echo $page_en['description'] ?></textarea>
                                <p class="help-block">Add Description.</p>
                                <script>
                                    CKEDITOR.replace('description');

                                    function CKupdate() {
                                        for (instance in CKEDITOR.instances)
                                            CKEDITOR.instances[instance].updateElement();
                                    }
                                </script>
                            </div>
                            <div class="form-group">
                                <label for="Company-description">Our Factories Description</label>
                                <textarea name="our_mission" rows="8"
                                          class="form-control"><?php echo $page_en['our_mission'] ?></textarea>
                                <p class="help-block">Add Our Factories Description.</p>
                                <script>
                                    CKEDITOR.replace('our_mission');

                                    function CKupdate() {
                                        for (instance in CKEDITOR.instances)
                                            CKEDITOR.instances[instance].updateElement();
                                    }
                                </script>
                            </div>
                            <div class="form-group">
                                <label for="Company-description">Why Company Description</label>
                                <textarea name="our_vision" rows="8"
                                          class="form-control"><?php echo $page_en['our_vision'] ?></textarea>
                                <p class="help-block">Add Why Company Description.</p>
                                <script>
                                    CKEDITOR.replace('our_vision');

                                    function CKupdate() {
                                        for (instance in CKEDITOR.instances)
                                            CKEDITOR.instances[instance].updateElement();
                                    }
                                </script>
                            </div><!--

                            <div class="form-group">
                                <label for="Company-description">Our Value Description</label>
                                <textarea name="our_value" rows="8"
                                          class="form-control"><?php //echo $page_en['our_value'] ?></textarea>
                                <p class="help-block">Add Our Value Description.</p>
                                <script>
                                    CKEDITOR.replace('our_value');

                                    function CKupdate() {
                                        for (instance in CKEDITOR.instances)
                                            CKEDITOR.instances[instance].updateElement();
                                    }
                                </script>
                            </div>-->
                            <div class="form-group">
                                <label for="website-logo">About Image</label>
                                <img src="<?php echo UPLOAD_LINK . $page['image'] ?>" data-toggle="modal"
                                     data-target="#update-img" class="img-responsive change-logo"/>
                                <p class="help-block">Change About Image</p>
                            </div>
                            <div class="form-group">
                                <label for="website-logo">Our Factories  Image</label>
                                <img src="<?php echo UPLOAD_LINK . $page['mission_image'] ?>" data-toggle="modal"
                                     data-target="#update-mission_image" class="img-responsive change-logo2"/>
                                <p class="help-block">Change Our Factories Image</p>
                            </div>
                            <div class="form-group">
                                <label for="website-logo">Wh Image</label>
                                <img src="<?php echo UPLOAD_LINK . $page['vision_image'] ?>" data-toggle="modal"
                                     data-target="#update-vision_image" class="img-responsive change-logo3"/>
                                <p class="help-block">Change Wh Image</p>
                            </div><!--
                            <div class="form-group">
                                <label for="website-logo">Value Image</label>
                                <img src="<?php// echo UPLOAD_LINK . $page['value_image'] ?>" data-toggle="modal"
                                     data-target="#update-value_image" class="img-responsive change-logo4"/>
                                <p class="help-block">Change Value Image</p>
                            </div>-->
                            <input type="submit" class="btn btn-primary" onClick="CKupdate();" name="edit"
                                   value="Edit"/>
                        </div>
                    </div>
                    <!-- /.box -->
                </div>
                <div class="col-lg-6 arab_dir">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">تعديل صفحه من نحن </h3>
                        </div>
                        <!-- /.box-header -->
                        <!-- form start -->
                        <div class="box-body">
                            <div class="form-group">
                                <label for="exampleInputEmail1">من نحن</label>
                                <textarea class="form-control" rows="8"
                                          name="description_ar"><?php echo $page_ar['description'] ?></textarea>
                                <p class="help-block"> وصفنا
                                <p>
                                    <script>
                                        CKEDITOR.replace('description_ar');

                                        function CKupdate() {
                                            for (instance in CKEDITOR.instances)
                                                CKEDITOR.instances[instance].updateElement();
                                        }
                                    </script>
                            </div>
                            <div class="form-group">
                                <label for="Company-description">مصانعنا  </label>
                                <textarea name="our_mission_ar" rows="8"
                                          class="form-control"><?php echo $page_ar['our_mission'] ?></textarea>
                                <p class="help-block">اضف مصانعنا .</p>
                                <script>
                                    CKEDITOR.replace('our_mission_ar');

                                    function CKupdate() {
                                        for (instance in CKEDITOR.instances)
                                            CKEDITOR.instances[instance].updateElement();
                                    }
                                </script>
                            </div>
                            <div class="form-group">
                                <label for="Company-description">لماذا نحن </label>
                                <textarea name="our_vision_ar" rows="8"
                                          class="form-control"><?php echo $page_ar['our_vision'] ?></textarea>
                                <p class="help-block">اضف وصف لماذا نحن .</p>
                                <script>
                                    CKEDITOR.replace('our_vision_ar');

                                    function CKupdate() {
                                        for (instance in CKEDITOR.instances)
                                            CKEDITOR.instances[instance].updateElement();
                                    }
                                </script>
                            </div><!--
                            <div class="form-group">
                                <label for="Company-description">قيمنا</label>
                                <textarea name="our_value_ar" rows="8"
                                          class="form-control"><?php //echo $page_ar['our_value'] ?></textarea>
                                <p class="help-block">اضف وصف  قيمنا.</p>
                                <script>
                                    CKEDITOR.replace('our_value_ar');

                                    function CKupdate() {
                                        for (instance in CKEDITOR.instances)
                                            CKEDITOR.instances[instance].updateElement();
                                    }
                                </script>
                            </div>-->
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>

            </form>

        </div>
    </section><!-- /.content -->
</div><!-- /.content-wrapper -->

<!-- Start edit about image Modal -->
<div class="modal fade" id="update-img" role="dialog">
    <div class="modal-dialog modal-md">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit Dr Image</h4>
            </div>
            <div class="modal-body">
                <div id="updateImageResult"></div>
                <div class="row">
                    <div class="col-lg-10 pull-left">
                        <form id="updateImage" method="post" enctype="multipart/form-data">
                            <div class="form-group">
                                <label for="category-image"> Image</label>
                                <input type="file" name="image_name" id="image_name">
                                <p class="help-block">Change Dr Image.</p>
                            </div>
                            <input type="submit" class="btn btn-primary updatebtn" name="editImage" value="Save"/>
                            <span class="loadingImage">
                                <img src="customize\backend\images\Preloader_61.gif"/>
                             </span>
                        </form>
                    </div>
                    <div class="col-lg-2 pull-right">
                        <img src="" alt="" title="Edit Image" class="img-responsive old-image"/>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--End Edit about image Modal-->

<!-- Start edit Mission  image Modal -->
<div class="modal fade" id="update-mission_image" role="dialog">
    <div class="modal-dialog modal-md">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit Mission Image Image</h4>
            </div>
            <div class="modal-body">
                <div id="updateImageResult2"></div>
                <div class="row">
                    <div class="col-lg-10 pull-left">
                        <form id="updateMission" method="post" enctype="multipart/form-data">
                            <div class="form-group">
                                <label for="category-image"> Image</label>
                                <input type="file" name="mission_image" id="mission_image">
                                <p class="help-block">Change Mission Image.</p>
                            </div>
                            <input type="submit" class="btn btn-primary updatebtn" name="editImage" value="Save"/>
                            <span class="loadingImage2">
                                <img src="customize\backend\images\Preloader_61.gif"/>
                             </span>
                        </form>
                    </div>
                    <div class="col-lg-2 pull-right">
                        <img src="" alt="" title="Edit Image" class="img-responsive old-image2"/>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--End Edit Mission  image Modal-->

<!-- Start edit vision  image Modal -->
<div class="modal fade" id="update-vision_image" role="dialog">
    <div class="modal-dialog modal-md">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit Vision Image Image</h4>
            </div>
            <div class="modal-body">
                <div id="updateImageResult3"></div>
                <div class="row">
                    <div class="col-lg-10 pull-left">
                        <form id="updateVision" method="post" enctype="multipart/form-data">
                            <div class="form-group">
                                <label for="category-image"> Image</label>
                                <input type="file" name="vision_image" id="vision_image">
                                <p class="help-block">Change Vision Image.</p>
                            </div>
                            <input type="submit" class="btn btn-primary updatebtn" name="editImage" value="Save"/>
                            <span class="loadingImage3">
                                <img src="customize\backend\images\Preloader_61.gif"/>
                             </span>
                        </form>
                    </div>
                    <div class="col-lg-2 pull-right">
                        <img src="" alt="" title="Edit Image" class="img-responsive old-image3"/>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--End Edit vision  image Modal-->

<!-- Start edit Value  image Modal -->
<div class="modal fade" id="update-value_image" role="dialog">
    <div class="modal-dialog modal-md">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit Value  Image</h4>
            </div>
            <div class="modal-body">
                <div id="updateImageResult4"></div>
                <div class="row">
                    <div class="col-lg-10 pull-left">
                        <form id="updateValue" method="post" enctype="multipart/form-data">
                            <div class="form-group">
                                <label for="category-image"> Image</label>
                                <input type="file" name="value_image" id="value_image">
                                <p class="help-block">Change Value Image.</p>
                            </div>
                            <input type="submit" class="btn btn-primary updatebtn" name="editImage" value="Save"/>
                            <span class="loadingImage4">
                                <img src="customize\backend\images\Preloader_61.gif"/>
                             </span>
                        </form>
                    </div>
                    <div class="col-lg-2 pull-right">
                        <img src="" alt="" title="Edit Image" class="img-responsive old-image4"/>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--End Edit vision  image Modal-->
<script>
    $(document).ready(function () {
        // start edit website logo
        $(".change-logo").click(function () {
            $("#updateImageResult").html("");
            // get image
            var image = $(this).attr("src");
            // set image into model
            $(".old-image").attr("src", image);
            $("#updateImage").submit(function () {
                $.ajax({
                    url: "<?php echo BASE_URL . "Aboutus/update_image"; ?>",
                    type: "POST",
                    data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                    contentType: false,       // The content type used when sending data to the server.
                    processData: false,
                    beforeSend: function () {
                        $(".loadingImage").show();
                    },
                    statusCode: {
                        404: function () {
                            alert("page not found");
                        },
                    },
                    success: function (valdata) {
                        $(".loadingImage").hide();
                        var da = jQuery.parseJSON(valdata);
                        if (da['status'] == "success") {
                            $(".loadingImage").hide();
                            $("#updateImageResult").html('<div class="alert alert-success" role="alert"><strong>Success </strong> Image Updated Successfuly </div>');
                            $('#update-img').modal('hide');
                            $('.change-logo').attr("src", "<?php echo UPLOAD_LINK ?>" + da['newImage']);

                        } else {
                            $("#updateImageResult").html('<div class="alert alert-danger" role="alert"><strong> Error ! </strong> Error Update Your Image (Not Allowed Image Extension Or You Did Not Choose Image)</div>');
                        }
                    }
                });
                return false;
            });
        });
        // end edit website logo

        // start mission  logo
        $(".change-logo2").click(function () {
            $("#updateImageResult2").html("");
            // get image
            var mission_image = $(this).attr("src");
            // set image into model
            $(".old-image2").attr("src", mission_image);
            $("#updateMission").submit(function () {
                $.ajax({
                    url: "<?php echo BASE_URL . "Aboutus/mission_image"; ?>",
                    type: "POST",
                    data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                    contentType: false,       // The content type used when sending data to the server.
                    processData: false,
                    beforeSend: function () {
                        $(".loadingImage2").show();
                    },
                    statusCode: {
                        404: function () {
                            alert("page not found");
                        },
                    },
                    success: function (valdata) {
                        $(".loadingImage2").hide();
                        var da = jQuery.parseJSON(valdata);
                        if (da['status'] == "success") {
                            $(".loadingImage2").hide();
                            $("#updateImageResult2").html('<div class="alert alert-success" role="alert"><strong>Success </strong> Image Updated Successfully </div>');
                            $('#update-mission_image').modal('hide');
                            $('.change-logo2').attr("src", "<?php echo UPLOAD_LINK ?>" + da['newImage']);

                        } else {
                            $("#updateImageResult2").html('<div class="alert alert-danger" role="alert"><strong> Error ! </strong> Error Update Your Image (Not Allowed Image Extension Or You Did Not Choose Image)</div>');
                        }
                    }
                });
                return false;
            });
        });
        // end edit website logo

        // start Vision  logo
        $(".change-logo3").click(function () {
            $("#updateImageResult3").html("");
            // get image
            var vision_image = $(this).attr("src");
            // set image into model
            $(".old-image3").attr("src", vision_image);
            $("#updateVision").submit(function () {
                $.ajax({
                    url: "<?php echo BASE_URL . "Aboutus/vision_image"; ?>",
                    type: "POST",
                    data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                    contentType: false,       // The content type used when sending data to the server.
                    processData: false,
                    beforeSend: function () {
                        $(".loadingImage3").show();
                    },
                    statusCode: {
                        404: function () {
                            alert("page not found");
                        },
                    },
                    success: function (valdata) {
                        $(".loadingImage3").hide();
                        var da = jQuery.parseJSON(valdata);
                        if (da['status'] == "success") {
                            $(".loadingImage3").hide();
                            $("#updateImageResult3").html('<div class="alert alert-success" role="alert"><strong>Success </strong> Image Updated Successfully </div>');
                            $('#update-vision_image').modal('hide');
                            $('.change-logo3').attr("src", "<?php echo UPLOAD_LINK ?>" + da['newImage']);

                        } else {
                            $("#updateImageResult3").html('<div class="alert alert-danger" role="alert"><strong> Error ! </strong> Error Update Your Image (Not Allowed Image Extension Or You Did Not Choose Image)</div>');
                        }
                    }
                });
                return false;
            });
        });
        // end edit website logo

        // start value  logo
        $(".change-logo4").click(function () {
            $("#updateImageResult4").html("");
            // get image
            var value_image = $(this).attr("src");
            // set image into model
            $(".old-image4").attr("src", value_image);
            $("#updateValue").submit(function () {
                $.ajax({
                    url: "<?php echo BASE_URL . "Aboutus/value_image"; ?>",
                    type: "POST",
                    data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                    contentType: false,       // The content type used when sending data to the server.
                    processData: false,
                    beforeSend: function () {
                        $(".loadingImage4").show();
                    },
                    statusCode: {
                        404: function () {
                            alert("page not found");
                        },
                    },
                    success: function (valdata) {
                        $(".loadingImage4").hide();
                        var da = jQuery.parseJSON(valdata);
                        if (da['status'] == "success") {
                            $(".loadingImage4").hide();
                            $("#updateImageResult4").html('<div class="alert alert-success" role="alert"><strong>Success </strong> Image Updated Successfully </div>');
                            $('#update-value_image').modal('hide');
                            $('.change-logo4').attr("src", "<?php echo UPLOAD_LINK ?>" + da['newImage']);

                        } else {
                            $("#updateImageResult4").html('<div class="alert alert-danger" role="alert"><strong> Error ! </strong> Error Update Your Image (Not Allowed Image Extension Or You Did Not Choose Image)</div>');
                        }
                    }
                });
                return false;
            });
        });
        // end edit website logo
    });
</script>
