<div class="breadcrumb">
    <h1>Documentation</h1>
    <ul>
        <li><a href="<?php echo SITE_URL.ADMIN_DIR ?>">Dashboard</a></li>
        <li><?php echo (isset($documentationDetail->id)) ? "Edit Documentation" : "Add New Documentation"; ?></li>
    </ul>
</div>
<div class="separator-breadcrumb border-top"></div>

<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-body">
                <div class="card-title mb-3">
                    <?php echo (isset($documentationDetail->id)) ? "Edit Documentation" : "Add New Documentation"; ?>
                </div>

                <form action="" id="frm-documentation" method="post" enctype="multipart/form-data">
                    <?php if(isset($documentationDetail->id)) { ?>
                        <input type="hidden" id="doc_id" name="doc_id" value="<?php echo $documentationDetail->id ?>" />
                    <?php } ?>

                    <div class="row">
                        <!-- Title -->
                        <div class="col-md-6 form-group mb-3">
                            <label for="title">Title <span class="asterisk">*</span></label>
                            <input type="text" class="form-control" id="title" name="title" 
                                   value="<?php echo isset($documentationDetail->title) ? $documentationDetail->title : ''; ?>" 
                                   placeholder="Enter title">
                            <div class="invalid-tooltip" id="msg_title"></div>
                        </div>

                        <!-- Status -->
                        <div class="col-md-3 form-group mb-3">
                            <label class="control-label">Status</label>
                            <select class="form-control" id="status" name="status">
                                <option value="1" <?php echo (isset($documentationDetail) && $documentationDetail->status == 1) ? "selected" : ""; ?>>Active</option>
                                <option value="0" <?php echo (isset($documentationDetail) && $documentationDetail->status == 0) ? "selected" : ""; ?>>Inactive</option>
                            </select>
                        </div>

                        <!-- Description -->
                        <div class="col-md-12 form-group mb-3">
                            <label for="description">Description</label>
                            <textarea id="description" name="description"><?php echo isset($documentationDetail->description) ? $documentationDetail->description : ''; ?></textarea>
                        </div>

                        <!-- Submit Button -->
                        <div class="col-md-12">
                            <input type="submit" class="btn btn-primary" id="submit" name="submit" value="Submit">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="./assets/ckeditor/ckeditor.js"></script>

<script type="text/javascript">
// Initialize CKEditor with custom configuration to allow <style> tags and video/iframe embeds
CKEDITOR.replace('description', {
    // Allow <style>, <div>, <iframe>, and <video> tags and their content
    extraAllowedContent: 'style[*]{*}(*); div[*]{*}(*); iframe[*]{*}(*); video[*]{*}(*)',

    // Toolbar configuration (no external embed plugins required)
    toolbar: [
        { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates'] },
        { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
        { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'] },
        '/',
        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
        { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
        { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
        { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] },
        '/',
        { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
        { name: 'colors', items: ['TextColor', 'BGColor'] },
        { name: 'tools', items: ['Maximize', 'ShowBlocks'] }
    ]
});

$( "form" ).on( "submit", function(e) {
    e.preventDefault();

    var title = $("#title").val();
    //var description = $("#description").val();
    var description = CKEDITOR.instances['description'].getData();
    var status = $("#status").val();
    if(title == ''){
        $("#title").addClass('error');
        $("#title").focus();
        $("#msg_title").html('Please input title').show();
        return false;
    } else {
        $("#title").removeClass('error');
        $("#msg_title").hide();
    }
    
    <?php if(!isset($_REQUEST['id'])) { ?>
        // Insert new
        $.ajax({
            url: "documentationadd.php",
            method: 'POST',
            data: { act:"load", title:title, description:description, status:status },
            success: function(msg){
                if(msg!=''){
                    window.location='documentationlist.php';
                }
            }
        });
    <?php } else { ?>
        // Update existing
        $.ajax({
            url: "documentationadd.php",
            method: 'POST',
            data: { act:"load", id:<?php echo $_REQUEST['id']; ?>, title:title, description:description, status:status },
            success: function(msg){
                if(msg!=''){
                    window.location='documentationlist.php';
                }
            }
        });
    <?php } ?>
});
</script>