<script>
$(function() {
    $("#taskFrm").hide(); 
    $('input:radio[name="docbox"]').change(function() {
        if ($(this).val() == '1') {
          $("#memoFrm").show();
          $("#taskFrm").hide();
        } else if ($(this).val() == '2') {
           $("#memoFrm").hide();
           $("#taskFrm").show();
        }
    });
});
</script>




<div id="panel-compose" class="panel w-100 position-fixed pos-bottom pos-right mb-0 z-index-cloud mr-lg-4 shadow-3 border-bottom-left-radius-0 border-bottom-right-radius-0 expand-full-height-on-mobile expand-full-width-on-mobile shadow" style="max-width:40rem; height:35rem; display: none;">
    <div class="position-relative h-100 w-100 d-flex flex-column">

        <!-- desktop view -->
        <div class="panel-hdr bg-fusion-600 height-4 d-none d-sm-none d-lg-flex">
            <h4 class="flex-1 fs-lg color-white mb-0 pl-3">
             Start a Conversation
            </h4>
            <div class="panel-toolbar pr-2">

            <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" id="memo" name="docbox" checked="" value="1">
                <label class="custom-control-label" for="memo">Inter Office Memo</label>
            </div>

            <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" id="task" name="docbox" value="2">
                <label class="custom-control-label" for="task">Doc(s)</label>
            </div>

                <a href="javascript:void(0);" class="btn btn-icon btn-icon-light fs-xl mr-1" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen" data-placement="bottom">
                    <i class="fa fa-expand"></i>
                </a>
                <a href="javascript:void(0);" class="btn btn-icon btn-icon-light fs-xl" data-action="toggle" data-class="d-flex" data-target="#panel-compose" data-toggle="tooltip" data-original-title="Save & Close" data-placement="bottom">
                    <i class="fa fa-times" aria-hidden="true"></i>
                </a>
            </div>
        </div>
        <!-- end desktop view -->

        <!-- mobile view -->
        <div class="d-flex d-lg-none align-items-center px-3 py-3 bg-faded  border-faded border-top-0 border-left-0 border-right-0 flex-shrink-0">
            <!-- button for mobile -->
            <!-- end button for mobile -->
            <h3 class="subheader-title">
                Start a Conversation
            </h3>
            <div class="ml-auto">
                <button type="button" class="btn btn-outline-danger" data-action="toggle" data-class="d-flex" data-target="#panel-compose">Cancel</button>
            </div>
        </div>
        <!-- end mobile view -->

        <div id="memoFrm">
            <form method="post" action="" enctype="multipart/form-data" autocomplete="off">
                <div class="panel-container show rounded-0 flex-1 d-flex flex-column">
                    <div class="px-3">
                    <br>
                    <input type="hidden" name="userSent" value="<?php echo $userid;?>" required style="width: 90%;">
                    <input type="hidden" name="sentAppoint" value="<?php echo $tle_id;?>" required style="width: 90%;">
                    <input type="hidden" name="DeptSent" value="<?php echo $role_id;?>" required style="width: 90%;">
                    
                    <div class="row">
                        <label class="col-md-1">To: </label>
                        <div class="col-sm-10">
                            <select class="select2 form-control w-100" name="memoreceipt" id="memoreceipt">
                                <?php
                                $stmt = $db->query('select * from tbl_title t
                                inner join tbl_role r on r.role_id = t.department_id
                                WHERE status=1 ORDER BY department_id ASC');
        
                                    try
                                    {
                                        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                            ?>
                                                <option value="<?php echo $row['title_id']; ?>"><?php echo $row['title_name']; ?></option>
                                            <?php
                                            }
                                        }
                                        catch (PDOException $ex) {
                                        //Something went wrong rollback!
                                        echo $ex->getMessage();
                                    }
                                ?>	
                            </select>
                        </div>                       
                    </div>
                    <a href="javascript:void(0)" class="position-absolute pos-right pos-top mt-3 mr-4" data-action="toggle" data-class="d-block" data-target="#message-to-info" data-focus="message-to-info" data-toggle="tooltip" data-original-title="Add Info recipient" data-placement="bottom">Info:</a>
                    
                    <input name="infoRecip" type="text" id="message-to-info" placeholder="Info:" class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2 d-none" tabindex="3">
                
                    <input type="text" placeholder="Subject" name="subj" required 
                    class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2" tabindex="4">                                    
                    </div>

                    <div class="px-3">
                        <textarea class="js-summernote form-controlounded-0 w-100 h-100 border-0 py-3" name="msgecontent" placeholder="Text here..." 
                        id="saveToLocal" required></textarea>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="autoSave" checked="checked">
                            <label class="custom-control-label" for="autoSave">Autosave changes to LocalStorage <span class="fw-300">(every 3 seconds)</span></label>
                        </div>
                    </div>
                    <input type="hidden" name="document_type" value="1">
                    <div class="px-3 py-4 d-flex flex-row align-items-center flex-wrap flex-shrink-0">                                     
                        <button type="submit" name="btnprint" id="btnprint" class="btn btn-secondary mr-3"><i class="fa fa-print" aria-hidden="true"></i> Print & Save</button>
                    </div>
                    
                </div>            
            </form>
        </div>

        <div id="taskFrm">
        <form method="post" action="" enctype="multipart/form-data" autocomplete="off">
            <div class="panel-container show rounded-0 flex-1 d-flex flex-column">
                <div class="px-3">
                <br>
                <input type="hidden" name="userSent" value="<?php echo $userid;?>" required style="width: 90%;">
                <input type="hidden" name="sentAppoint" value="<?php echo $tle_id;?>" required style="width: 90%;">
                <input type="hidden" name="DeptSent" value="<?php echo $role_id;?>" required style="width: 90%;">
                
                <div class="row">
                    <label class="col-md-1">To: </label>
                    <div class="col-sm-10">
                        <select multiple="multiple" id="multiple-basic" name="receipto[]"
                        class="select2 form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2 pr-5" tabindex="2">                            
                        <?php
                        $stmt = $db->query('select * from tbl_title t
                        inner join tbl_role r on r.role_id = t.department_id
                         WHERE status=1 ORDER BY department_id ASC');
 
                            try
                            {
                                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                    ?>
                                        <option value="<?php echo $row['title_id']; ?>"><?php echo $row['title_name']; ?></option>
                                    <?php
                                    }
                                }
                                catch (PDOException $ex) {
                                //Something went wrong rollback!
                                echo $ex->getMessage();
                            }
                        ?>	
                        </select>
                    </div>                       
                </div>

                <input type="text" placeholder="Subject" name="subj" required 
                class="form-control border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2" tabindex="4">
                                    
                </div>
                                 
                <div class="px-3">
                    <textarea class="js-summernote form-controlounded-0 w-100 h-100 border-0 py-3" name="msgecontent" placeholder="Text here..." 
                    id="saveToLocal" required></textarea>
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="autoSave" checked="checked">
                        <label class="custom-control-label" for="autoSave">Autosave changes to LocalStorage <span class="fw-300">(every 3 seconds)</span></label>
                    </div>
                </div>
                
                <div class="px-3">
                    <div class="form-group">                    
                        <label class="form-label" for="example-fileinput"><i class="fa fa-paperclip" aria-hidden="true"></i>Attachment(s)</label>
                        <input type="file" name="file[]" id="file" class="form-control-file" multiple>                         
                    </div>
                </div>

                <input type="checkbox" class="custom-control-input" style="display: none;" id="autoSave" checked="checked">
                <input type="hidden" name="document_type" value="2">
                <div class="px-3 py-4 d-flex flex-row align-items-center flex-wrap flex-shrink-0">                    
                    <button type="submit" name="sendCompose" id="btnshare" class="btn btn-primary mr-3"><i class="fa fa-share-alt" aria-hidden="true"></i> Share</button>  
                </div>
                
            </div>            
        </form>
        </div>

    </div>
</div> 