<div class="page-titles">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
        <li class="breadcrumb-item active"><a href="javascript:void(0)">About Us</a></li>
    </ol>
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">About Broker</h4>
            </div>
            <div class="card-body">
                <form action="<?= ADMIN_URL . 'about-us/save' ?>" method="post" enctype="multipart/form-data">
                    <?php if (isset($about_us['id'])) { ?>
                        <?php if (!empty($about_us['id'])) { ?>
                            <input type="hidden" name="id" value="<?= $about_us['id'] ?>">
                        <?php } ?>
                    <?php } ?>
                    <div class="row">
                        <div class="mb-3 col-lg-2 col-md-2 col-sm-12">
                            <div class="avatar-upload d-flex align-items-center">
                                <div class=" position-relative ">
                                    <div class="avatar-preview">
                                        <?php if (!empty($about_us['image'])) { ?>
                                            <img id="image_preview" class="img img-responsive img-fluid" src="../public/images/about_us/<?= $about_us['image']; ?>">
                                        <?php } else { ?>
                                            <img id="image_preview" class="img img-responsive img-fluid" src="<?= SITE_URL ?>public/admin/assets/images/no-img-avatar.png">
                                        <?php } ?>
                                    </div>
                                    <div class="change-btn d-flex align-items-center flex-wrap">
                                        <input type="file" class="form-control d-none" name="image" data-attr="image_preview" id="image" onchange="readURL(this);" accept=".png, .jpg, .jpeg">
                                        <label for="image" class="btn btn-primary light btn-sm ms-0">Select Image</label>
                                        <input type="hidden" name="image_old" value="<?php echo $about_us['image'] ?? ''; ?>">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 col-lg-10 col-md-10 col-sm-12">
                            <label class="form-label">Title</label>
                            <input type="text" class="form-control" placeholder="Title" required="" value="<?= $about_us['heading'] ?? '' ?>" name="title">
                        </div>
                        <div class="mb-3 col-12">
                            <label class="form-label">Main Description</label>
                            <textarea class="form-control" id="editor" rows="4" required="" name="description" placeholder="Description"><?= $about_us['description'] ?? '' ?></textarea>
                        </div>

                        <div class="mb-3 col-12">
                            <label class="form-label">Extra Description</label>
                            <textarea class="form-control" id="editor_2" rows="4" required="" name="extra_description" placeholder="Extra Description"><?= $about_us['description_extra'] ?? '' ?></textarea>
                        </div>
                        <div class="mb-3 col-12">
                            <div class="col-sm-12 pt-3">
                                <input type="submit" class="btn btn-sm btn-primary me-2" name="about_us" value="Update">
                                <!-- <a href="< ?= ADMIN_URL ?>" class="btn light btn-warning">Back to Listing</a> -->
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



<script src='https://cdn.ckeditor.com/4.14.0/full-all/ckeditor.js'></script>
<script>
    var editor = CKEDITOR.replace('editor', {
        height: 300,
        extraPlugins: 'mentions',
        filebrowserUploadUrl: '/uploader/upload.php',
    });
    var editor = CKEDITOR.replace('editor_2', {
        height: 300,
        extraPlugins: 'mentions',
        filebrowserUploadUrl: '/uploader/upload.php',
    });
</script>

<script>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                let web_id = $(input).attr('data-attr');
                $('#' + web_id).attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>