EVOLUTION-NINJA

Edit File: add_new_cpd.php

<?php
    echo view('includes/flow-header');    
?>

<section class="spec-main">
    <div class="row">
        <div class="col-sm-3">
            <div class="spec-left">
                <ul>
                    <li><a href="">My CPD Portfolio</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-9 view_cpd_bg">
            <div class="cme-right-new" style="padding: 2% 5% 0 0;">
                <div class="row">
                    <div class="col-sm-9">
                    <div class="row">
                            <div class="col-sm-3 mb-5 cpd_back" id="go-back-new">
                                <a href="<?php echo base_url('cpd-dashboard');?>">
                                    <i class="fa fa-arrow-left" aria-hidden="true"></i>Back</a>
                            </div>
                        </div>
                        <div class="row cpd_start_four">
                            <div class="col-sm-3">

<a href="<?php echo base_url('cpd-dashboard');?>"><span><button type="button" class="form-control" id="dash-button-1"><img class="avc-img" src="public/assets/cpdimage/Dashboard 1.png">Dashboard</button></a></span>
                                
                            </div>
                            <div class="col-sm-3 mob_cpdacti">
                                 <a href="<?php echo base_url('cpd-activity');?>"><button type="button" class="form-control dash-button"><img class="avc-img" src="public/assets/cpdimage/Activities 1.png">Activities</button></a>
                            </div>
                            <div class="col-sm-4 mob_cpdproto">
                                 <a href="<?php echo base_url('my-cpd-portfolio');?>"><button type="button" class="form-control cps-summary-button "><img class="avc-img" src="public/assets/cpdimage/My CPD Portfolio 1.png">CPD Summary/Download</button></a>
                            </div>

</div>
                        <div class="row">
                        <div class="col-sm-3 mob_cpdactivity">
                                
                                <a href="<?php echo base_url('add-cpd');?>"> <img src="public/assets/cpdimage/Subtract.png" class="cpd_subtract">
                                <button type="button" class="form-control add_act_new">Add Activity</button></a>

</div>
</div>
                        <!-- <div class="row cpd_start_four">
                            <div class="col-sm-3">
                                <a href="<?php echo base_url('cpd-dashboard');?>"> <img src="public/assets/cpdimage/Rectangle 4108 (2).png">
                                    <h5 class="cpd_dash">Dashboard</h5>
                                </a>
                            </div>
                            <div class="col-sm-3 mob_cpdacti">
                                <a href="<?php echo base_url('cpd-activity');?>"><img src="public/assets/cpdimage/Rectangle 4108 (2).png">
                                    <h5 class="cpd_acti">Activities</h5>
                                </a>
                            </div>
                            <div class="col-sm-5 mob_cpdproto">
                                <a href="<?php echo base_url('my-cpd-portfolio');?>"><img src="public/assets/cpdimage/Rectangle 4108 (2).png">
                                    <h5 class="cpd_proto">My CPD Portfolio</h5>
                                </a>
                            </div>

<div class="col-sm-5 mt-2 mob_cpdactivity">
                                <a href="<?php echo base_url('add-cpd');?>"><img src="public/assets/cpdimage/Rectangle 4108 (1).png">
                                    <img src="public/assets/cpdimage/Subtract.png" class="cpd_subtract">
                                    <h5 class="cpd_addaccti">Add Activity</h5>
                                </a>
                            </div>
                        </div> -->
                        <form id ="add_cpd">
                            <div class="row">
                                <div class="col-sm-12 ml-3 mt-3 cpd_box1">
                                    <div class="row">
                                        <h4 class="box_cpdcont">Add Activity</h4>
                                    </div>
                                    <div class="row cpd_border"></div>

<div class="col-sm-4 mt-2 ml-2 ">
                                            <label for="select_category"> Select Category<span class="mandat">*</span></label>
                                            <select id="mainHeading"  class="mt-2 form-control cpd_input1 category" name = "category_name">
                                                <option value="">Select</option>
                                                <option value="Practice_Improvement_Activity">Practice Improvement Activity
                                                </option>
                                                <option value="Emergency_Response_Activity">Emergency Response Activity
                                                </option>
                                                <option value="Personal_Educational">Personal Educational & Skills Activity
                                                </option>

</select>
                                        </div>

<div class="col-sm-4 mt-2" id="mob_sel_cate">
                                            <label for="select_selection" style="margin-left: 80px;">Select
                                                Section</label>
                                            <select id="subHeading" class="form-control cpd_input2 " name="section_name">
                                                <option value="none">Select</option>
                                            </select>

<span class="sptextarea"> <textarea id="longTextDisplay"
                                                    class="form-control "
                                                    style="display: none; margin-top: 10px; border-radius: 15px; width: 300px; height: 70px; overflow: visible; margin-left: -95px;"></textarea></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-1 mt-4 ml-1">
                                            <label for="Title">
                                                <h6 class="mt-1">Title</h6>
                                            </label>
                                        </div>
                                        <div class="col-sm-6  mt-4">
                                            <input type="text" class="form-control cpd_title" name="title">
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-sm-2 mt-2">
                                            <label for="Start Date">Start Date<span class="mandat">*</span></label>
                                        </div>
                                        <div class="col-sm-4 ">
                                            <input type="date" for="date" class="form-control cpd_fromdate" name="start_date" required>
                                        </div>
                                        <div class="col-sm-2 mt-2 cpd_enddate">
                                            <label for="end Date">End Date<span class="mandat">*</span></label>
                                        </div>
                                        <div class="col-sm-4 ">
                                            <input type="date" for="date" class="form-control cpd_fromdate1" name="end_date" required>
                                        </div>
                                    </div>

<div class="row mt-4">
                                        <div class="col-sm-2 mt-2 mob-cpd-hours">
                                            <label for="hours">Hours</label>
                                        </div>
                                        <div class="col-sm-4 ">
                                            <input type="text" class="form-control cpd-dat-mob" name="hours"    style="width:100px;" />
                                        </div>
                                        <div class="col-sm-2 mt-2 cpd_points">
                                            <label for="cpd points">CPD Points</label>
                                        </div>
                                        <div class="col-sm-4 ">
                                            <input type="text" for="text" class="form-control cpd_points1" name="cpd_points">
                                        </div>
                                    </div>

<div class="row">
                                        <div class="col-sm-1 mt-4 ml-1">
                                            <label for="notes">
                                                <h6 class="mt-1 cpd_label-notes">Notes</h6>
                                            </label>
                                        </div>
                                        <div class="col-sm-6  mt-4">
                                            <input type="text" class="form-control cpd_notes" name="notes">
                                        </div>
                                    </div>
                                    <div id  = "add_new">
                                    <div class="row">
                                        <div class="col-sm-1 mt-4 ml-1">
                                            <label for="Title">
                                                <h6 class="mt-1 cpd_supporting">Supporting Evidence</h6>
                                            </label>
                                        </div>
                                        <div class="col-sm-6  mt-4">
                                           <input type="file" class="form-control ml-5 file-cpd-multi" name="upload_file_data[]" multiple>
                                        </div>
                                        <div class="col-sm-3  mt-4 ">
                                            
                                            <button type="button" class="form-control add_addition " > <i class="fa fa-plus-square-o increase-font" aria-hidden="true"></i>
                                            </button>
                                                
                                            
                                       </div>
                                    </div>
                                </div>
                                    <div class="row">
                                        <div class="col-sm-6"></div>
                                        <div class="col-sm-3 mob_savecpd">
                                            
                                            <button  type="submit" value="submit"  class="btn cpd_save1"><h6>Save</h6></button>
                                        </div>
                                        <div class="col-sm-3 mob_cancelspd">
                                            <a href="<?php echo base_url('cpd-dashboard');?>">
                                                <img src="public/assets/cpdimage/Rectangle 4110 (1).png"
                                                    class="cancel_cpdimg">
                                                <h6 class="cpd_cancel"> Cancel</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

</div>

</div>
    
</section>

<script type="text/javascript" src="<?php echo base_url('public/assets/js/timepicki.js'); ?>"></script>
<script>

$(document).ready(function () {
     $(function() {
        $("#timepicker").timepicki(); 
        
    } );
    });
     $(".add_addition").click(function(){
        addrow();
    });
    function addrow(){
        var mode = '';
        mode += ' <div class="row"><div class="col-sm-6  mt-4"><input type="file" class="form-control" name="upload_file_data[]" multiple></div></div>';
         $("#add_new").append(mode).fadeIn('slow');
    }

$(document).ready(function(){
        $('#add_cpd').submit(function(e){
            e.preventDefault();

const cat = $('.category');
            const catValue = cat.val();
            if (!catValue) {
                toastr["error"]('Please select Category');
                return;
            }
            var formData = new FormData(this);

$.ajax({
                type : "POST",
                url : '<?php  echo base_url("add-cpd-case")?>',
                data : formData,
                contentType: false,
                processData: false,
                success:function(response){
                    response = jQuery.parseJSON(response);
                    if(response.result == 1){
                        toastr["success"](response.message);
                        // $(".add_conferences").modal("hide");         
                       
                        window.location = '<?php echo base_url("cpd-activity")?>';       
                    }
                    else{
                        toastr["error"](response.message);                        
                    }
                }
            });
        });
    });
    const mainHeadingSelect = document.getElementById('mainHeading');
    const subHeadingSelect = document.getElementById('subHeading');
    const longTextDisplay = document.getElementById('longTextDisplay');

const subHeadings = {
        Practice_Improvement_Activity: ["CNB/Labour/Obstetric Database", "Reflective Anaesthesia Logbook", "Clinical Audits", "Patient Related Experience Measures (PREMs)",
            "Patient Centered Outcome Measures (PCOMs)", "PIA Others"],
        //   =====================
        Emergency_Response_Activity: ["Crisis Management Workshops", "Emergency Response Seminars", "ERA Others"],
        Personal_Educational: ["Conferences & Seminars", "Workshops", "Learning Videos", "Exams", "Formal Courses", "Journal Reading", "Learning Sessions", "Publications", "Research", "Presentations", "Training and Development"]
    };

subHeadingSelect.addEventListener('change', () => {
        const selectedSubHeadingText = subHeadingSelect.options[subHeadingSelect.selectedIndex].text;
        longTextDisplay.value = selectedSubHeadingText;

if (selectedSubHeadingText.length > 10) { // You can adjust this threshold
            longTextDisplay.style.display = 'block';
        } else {
            longTextDisplay.style.display = 'none';
        }
    });

mainHeadingSelect.addEventListener('change', () => {
        const selectedMainHeading = mainHeadingSelect.value;
        subHeadingSelect.innerHTML = ''; // Clear previous options

if (selectedMainHeading !== 'none') {
            const subHeadingOptions = subHeadings[selectedMainHeading];
            subHeadingOptions.forEach(option => {
                const optionElement = document.createElement('option');
                optionElement.value = option;
                optionElement.textContent = option;
                subHeadingSelect.appendChild(optionElement);
            });
        } else {
            const defaultOption = document.createElement('option');
            defaultOption.value = 'none';
            defaultOption.textContent = 'Select more information';
            subHeadingSelect.appendChild(defaultOption);
        }

longTextDisplay.style.display = 'none';
    });
</script>

.dash-button{
        background: linear-gradient(to left, #0160A2,#0198CD, #0160A2);
    color: white;
    border: none;
    border-radius: 6px;
    width: 100%;
    height: 45px;
    font-size: 17px;
    }
    #dash-button-1{
        background: linear-gradient(to left, #0160A2,#0198CD, #0160A2);
        /* background-color: #0160A2; */
    color: white;
    border: none;
    border-radius: 6px;
    width: 100%;
    height: 45px;
    font-size: 17px;
    }
    .cps-summary-button{
        background: linear-gradient(to left, #0160A2,#0198CD, #0160A2);
    color: white;
    border: none;
    border-radius: 6px;
    width: 105%;
    height: 45px;
    font-size: unset;
    }
    .add_act_new{
        /* background: linear-gradient(to left, #0160A2,#0198CD, #0160A2); */
        background-color: #0065a3;
        box-shadow: #6c757d 0px 0px 0px 3px;
        color: white;
    border: none;
    border-radius: 6px;
    width: 85%;
    height: 30px;
   
    font-size: 14px;
    text-align: center;
  
    }
    .cpd_subtract{
        margin-left: 3px;
    position: relative;
    top: 24px;
    width: 14px;
    left: 3px;
    
    }
    .cpd_back{
        position: relative;
        top: 0px;
    }
    .mob_cpdacti{
        /* margin-left: -50px; */
    }
    .mob_cpdproto{
        /* margin-left: -50px; */
    }
    .cpd_start_four{
        margin-top: -80px;
    }
    .avc-img{
        width: 28px;
    height: 28px;
    position: relative;
    left: -7px;
    }

@media only screen and (max-width: 600px){
            .mob_cpdactivity{
                width: 50%;
    margin-left: -148px;
    margin-top: 160px !important;
            }
           
            #dash-button-1{
                margin-top: 50px;
                margin-left: 0px;
            }
            .cps-summary-button{
                margin-left: 50px;
                margin-top: 10px;
                width: 80%;
            }
            .mob_cpdacti{
                margin-top: 50px;
    margin-left: -189px !important;
            }
            .cpd_start_four{
                margin-top: -45px;
                margin-left: 10px !important;
            }
            .can-mo{
                    position: relative;
                    top: -30px;
                    left: 4px;
                        }
            .can-mo1{
                    position: relative;
                    top: -12px;
                    left: 4px;
            }  
            .mob_cpdacti {
                position: relative;
                top: -35px;
                left: 187px;
        }
       
            .cps-summary-button {
                margin-left: 0px;
                margin-top: 10px;
                width: 100%;
        }
        .cpd_enddate {
               position: relative;
               top: -70px !important;
               left: 165px;
               margin-top: 4px !important;
        }
        .cpd_fromdate1 {
               margin-top: -72px !important;
               margin-left: 160px;
               width: 150px !important;
        }
        }
        @media only screen and (max-width: 600px){
        .cpd_enddate {
            position: relative;
            top: -70px !important;
            left: 165px;
            margin-top: -10px !important;
        }
        }
</style>