<?php defined('BASEPATH') or exit('Direct access is not allowed'); ?>
<!DOCTYPE html>
<html>
<head>
  <style>  .table thead th {
    vertical-align: center !important;
}</style>
<?php include 'app/views/common/css.php';?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link href="app/views/assets/css/kendo_cal/examples-offline.css" rel="stylesheet">
<link href="app/views/assets/css/kendo_cal/default-ocean-blue.css" rel="stylesheet">
<script src="app/views/assets/css/kendo_cal/jquery.min.js"></script>
<script src="app/views/assets/css/kendo_cal/jszip.min.js"></script>
<script src="app/views/assets/css/kendo_cal/kendo.all.min.js"></script>
    <script src="app/views/assets/css/kendo_cal/console.js"></script>
<script src="app/views/assets/css/kendo_cal/schedulerTasks.js"></script>
<script src="app/views/client/operations_js/trainingschedule_js.js"></script>
<style>
  .card-counter{
    box-shadow: 2px 2px 10px #DADADA;
    margin: 5px;
    padding: 20px 10px;
    background-color: #fff;
    height: 100px;
    border-radius: 5px;
    transition: .3s linear all;
  }

  .card-counter:hover{
    box-shadow: 4px 4px 20px #DADADA;
    transition: .3s linear all;
  }

  .card-counter.primary{
    background-color: #007bff;
    color: #FFF;
  }

  .card-counter.danger{
    background-color: #ef5350;
    color: #FFF;
  }  

  .card-counter.success{
    background-color: #66bb6a;
    color: #FFF;
  }  

  .card-counter.info{
    background-color: #26c6da;
    color: #FFF;
  }  

  .card-counter i{
    font-size: 5em;
    opacity: 0.2;
  }

  .card-counter .count-numbers{
    position: absolute;
    right: 35px;
    top: 20px;
    font-size: 32px;
    display: block;
  }

  .card-counter .count-name{
    position: absolute;
    right: 35px;
    top: 65px;
    font-style: italic;
    text-transform: capitalize;
    opacity: 0.5;
    display: block;
    font-size: 18px;
  }

</style>

<style>

  /* Kendo Schedular css */
    .template-container {
        margin-top: -8px;
    }

    .template-container img {
        float: left;
        margin: 0 4px;
        margin-right: 10px;
    }

    .template-container h3 {
        padding: 0 4px 4px;
        font-size: 12px;
        font-weight: 400;
        margin-right: 14px;
    }

    .template-title-1 {
        color: #65CCFF;
    }

    .template-title-2 {
        color: #D0D03B;
    }

    .k-event .k-i-reload,
    .k-event .k-i-non-recurrence {
        display: none;
    }
</style>

</head>
<body>
<!-- **************** MAIN CONTENT START **************** -->

  <!-- =======================
  Header START -->
  <header class="navbar-light fixed-top header-static bg-mode">
    <!-- Logo Nav START -->
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <!-- Logo START -->
        <a class="navbar-brand" href="index-2.html">
          <img class="light-mode-item navbar-brand-item" src="app/views/assets/images/logo.png" alt="logo">
				  <img class="dark-mode-item navbar-brand-item" src="app/views/assets/images/logo.png" alt="logo">		
        </a>
        <!-- Logo END -->

        <button class="icon-md btn btn-light p-0 d-block d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarVerticaloffcanvas" aria-controls="navbarVerticaloffcanvas">
          <i class="bi bi-justify-left fs-4"></i>
        </button>

        <!-- Responsive navbar toggler -->
        <button class="navbar-toggler ms-auto icon-md btn btn-light p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-animation">
          <span></span>
          <span></span>
          <span></span>
        </span>
      </button>

        <!-- Main navbar START -->
        <div class="collapse navbar-collapse" id="navbarCollapse">

          <!-- Nav Search START -->
          <div class="nav mt-3 mt-lg-0 flex-nowrap align-items-center px-4 px-lg-0">
            <div class="nav-item w-100">
              <form class="rounded position-relative">
                <input class="form-control ps-5 bg-light" type="search" placeholder="Search..." aria-label="Search">
                <button class="btn bg-transparent px-2 py-0 position-absolute top-50 start-0 translate-middle-y" type="submit"><i class="bi bi-search fs-5"> </i></button>
              </form>
            </div>
          </div>
          <!-- Nav Search END -->

          <ul class="navbar-nav navbar-nav-scroll mx-auto">
            <!-- Nav item 1 Demos -->
            <li class="nav-item">
              <a class="nav-link active" href="#">Overview</a>
            </li>
            <!-- Nav item 1 Demos -->
            <li class="nav-item">
              <a class="nav-link" href="#">Subscriptions</a>
            </li>
            <!-- Nav item 1 Demos -->
            <li class="nav-item">
              <a class="nav-link" href="#">Streams</a>
            </li>
            <!-- Nav item 1 Demos -->
            <li class="nav-item">
              <a class="nav-link" href="#">Results</a>
            </li>
            <!-- Nav item 2 Pages -->
          </ul>
        </div>
        <!-- Main navbar END -->

        <!-- Nav right START -->
        <ul class="nav flex-nowrap align-items-center ms-lg-3 list-unstyled">

          <!-- Notification dropdown END -->
          
          <li class="nav-item ms-3 dropdown">
            <a class="nav-link p-0" href="#" id="profileDropdown" role="button" data-bs-auto-close="outside" data-bs-display="static" data-bs-toggle="dropdown" aria-expanded="false">
              <div class="d-flex align-items-center position-relative">
                <!-- Avatar -->
                <div class="avatar avatar-sm me-xl-3">
                  <img class="avatar-img rounded-circle" src="<?= $profile_image_path ?>" alt="avatar">
                </div>
                <div class="d-none d-xl-block">
                  <span class="h6 stretched-link"><?= $user_name ?></span>
                  <p class="small m-0"><?= $designation ?></p>
                </div>
              </div>
            </a>
            <ul class="dropdown-menu dropdown-animation dropdown-menu-end pt-3 small me-md-n3" aria-labelledby="profileDropdown">
              <!-- Links -->
             
              <li class="dropdown-divider"></li>
              <li><a class="dropdown-item bg-danger-soft-hover" href="/trainingportal/Main/Logout"><i class="bi bi-power fa-fw me-2"></i>Sign Out</a></li>
              <li> <hr class="dropdown-divider"></li>
              <!-- Dark mode switch START -->
              <li>
                <div class="modeswitch-wrap" id="darkModeSwitch">
                  <div class="modeswitch-item">
                    <div class="modeswitch-icon"></div>
                  </div>
                  <span>Dark mode</span>
                </div>
              </li> 
              <!-- Dark mode switch END -->
            </ul>
          </li>
          <!-- Profile START -->
          
        </ul>
        <!-- Nav right END -->
      </div>
    </nav>
    <!-- Logo Nav END -->
  </header>
  <!-- =======================
  Header END -->
  
  <main> 

  <!-- Container START -->
  <div class="container-fluid">

    <!-- Sidenav START -->
    <div class="navbar navbar-vertical navbar-light">
      <div class="offcanvas offcanvas-start custom-scrollbar rounded pt-3" tabindex="-1" id="navbarVerticaloffcanvas">
        <div class="offcanvas-body pt-5 pt-lg-0">
          <!-- Card START -->
          
            <!-- Avatar -->
            <div class="avatar avatar-lg mb-3">
              <a href="#!"><img class="avatar-img rounded-circle border border-white border-3" src="<?= $profile_image_path ?>" alt=""></a>
            </div>
            <!-- Info -->
            <h5 class="mb-0"> <a href="#!"><?= $user_name ?>   </a> </h5>
          <small><?= $designation ?></small>
          <!-- User stat START  -->
          <div class="hstack gap-2 gap-xl-3 mt-3">
            <!-- User stat item -->
            <div>
              <h6 class="mb-0"><?= $enroll_courses ?> </h6>
              <small>Enrolled Courses</small>
            </div>
            <!-- Divider -->
            <div class="vr"></div>
            <!-- User stat item -->
            <div>
              <h6 class="mb-0"><?= $rating ?></h6>
              <small>Skill Map</small>
            </div>
            <!-- Divider -->
            <div class="vr"></div>
            <!-- User stat item -->
          </div>
            <!-- User stat END -->

            <!-- Divider -->
            <hr>

            <!-- Side Nav START -->
            <ul class="nav nav-link-secondary flex-column fw-bold gap-2">
              <li class="nav-item">
                <a class="nav-link" href="/trainingportal/Pne" > <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/home-outline-filled.svg" alt=""><span>Training Programs</span></a>
              </li>
              <!-- <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/medal-outline-filled.svg" alt=""><span>Online Training Programs</span></a>
              </li> -->
              <? if ($role_id==1): ?>
                <li class="nav-item">
                <a class="nav-link" href="/trainingportal/Applicationstatus"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/star-outline-filled.svg" alt=""><span>Application Status</span></a>
              </li>
              <? endif;?>
              <li class="nav-item">
                <a class="nav-link" href="/trainingportal/Trainingschedule"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/clock-outline-filled.svg" alt=""><span>Training Schedules </span></a>
              </li>            
              <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/task-done-outline-filled.svg" alt=""><span>Training Monitoring </span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/star-outline-filled.svg" alt=""><span>Reports </span></a>
              </li>
          
              <? if ($role_id==1): ?>
                <li class="nav-item">
                <a class="nav-link" href="/trainingportal/Adddetails"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/star-outline-filled.svg" alt=""><span>Add Details</span></a>
              </li>
              <? endif;?>
              <li class="nav-item">
                <a class="nav-link" href="/trainingportal/Main/Logout"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/arrow-boxed-outline-filled.svg" alt=""><span>Logout </span></a>
              </li>
            
            </ul>
            <!-- Side Nav END -->
          </div>
        </div>
      </div>
      <!-- Sidenav END -->

     
      <div class="page-content"> <!-- Main content START -->
   
     
<div class="container">
    <div class="row">
    <div class="col-md-3">
      <div class="card-counter primary">
        <i class="fa fa-calendar"></i>
        <span class="count-numbers"  id="Total">0</span>
        <span class="count-name">Total </span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="card-counter info">
        <i class="fa fa-calendar-minus-o"></i>
        <span class="count-numbers"  id="Pending">0</span>
        <span class="count-name">Pending</span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="card-counter success">
        <i class="fas fa-calendar-check"></i>
        <span class="count-numbers"  id="Completed">0</span>
        <span class="count-name">Completed</span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="card-counter danger">
        <i class="fas fa-calendar-times"></i>
        <span class="count-numbers" id="Cancelled">0</span>
        <span class="count-name">Cancelled</span>
      </div>
    </div>

  </div>
</div>   


 <div class="col-lg-12"> 
                      <div id="example">
                            <div id="scheduler"></div>
                          </div>
                      
                          <script id="customEditorTemplate" type="text/x-kendo-template">
          
                          <div class="k-edit-label"><label for="trainingtitle">Select Traning</label></div>
                          <div data-container-for="trainingtitle" class="k-edit-field">
                              <select id="trainingtitle" data-bind="value:trainingtitle" data-role="dropdownlist" data-value-field="value" data-text-field="text">
                              <?php foreach ($res_training_list as $training_list_obj) {?>
                                <option value="<?php echo $training_list_obj['id']; ?>"><?php echo $training_list_obj['name']; ?></option>
                                <?php }?>
                            </select>
                            </div>
                            <div class="k-edit-label"><label for="module">Select Module</label></div>
                          <div data-container-for="module" class="k-edit-field">
                              <select id="module" data-bind="value:module" data-role="dropdownlist" data-value-field="value" data-text-field="text">
                              <?php foreach ($res_module_list as $module_list_obj) {?>
                                <option value="<?php echo $module_list_obj['id']; ?>"><?php echo $module_list_obj['module_name']; ?></option>
                                <?php }?>
                            </select>
                            </div>
                          <div class="k-edit-label">
                              <label for="start">Start</label>
                            </div>
                          <div data-container-for="start" class="k-edit-field">
                              <input type="text"
                                    data-role="datetimepicker"
                                    data-interval="120"
                                    data-type="date"
                                    data-bind="value:start,invisible:isAllDay"
                                    name="start"/>
                              <input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" name="start" />
                              <span data-bind="text: startTimezone"></span>
                              <span data-for="start" class="k-invalid-msg" style="display: none;"></span>
                            </div>
                          <div class="k-edit-label"><label for="end">End</label></div>
                          <div data-container-for="end" class="k-edit-field">
                              <input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
                              <input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
                              <span data-bind="text: endTimezone"></span>
                              <span data-bind="text: startTimezone, invisible: endTimezone"></span>
                              <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
                            </div>
      
                     
                          <div class="k-edit-label"><label for="description">Description</label></div>
                          <div data-container-for="description" class="k-edit-field">
                              <textarea name="description" data-role="textarea" data-bind="value:description"></textarea>
                            </div>
                          <div class="k-edit-label"><label for="trainer">Trainer</label></div>
                          <div data-container-for="trainer" class="k-edit-field">
                              <select id="trainer" data-bind="value:trainer" data-role="dropdownlist" data-value-field="value" data-text-field="text">
                              <?php foreach ($user_list as $user_list_obj) {?>
                                <option value="<?php echo $user_list_obj['id']; ?>"><?php echo $user_list_obj['user_name']; ?></option>
                                <?php }?>
                            </select>
                          </div>
                          <div class="k-edit-label"><label for="color">Status</label></div>
                                <div data-container-for="color" class="k-edit-field">
                                    <select id="color" data-bind="value:color" data-role="dropdownlist"
                                                    data-value-field="value" data-text-field="text">
                                      <option value="0">Pending</option>
                                      <option value="1">Inprogress</option>
                                      <option value="2">Cancle</option>
                                  </select>
                                  </div>
                            </div>
                          </script>
                          <script>
                        $(document).ready(function() {
                            
                              let jsVariable = <?php echo $schedule_list; ?>;
                              let allData = <?php echo $schedules_data_count; ?>;
                              for (let data of allData) {
                                            $("#Total").text(data.total);
                                            $("#Pending").text(data.pending);
                                            $("#Completed").text(data.inprogress);
                                            $("#Cancelled").text(data.cancle);                                           
                                        }
                              var colordata=["#26c6da","#66bb6a","#ef5350"];
                              const myEventData = jsVariable.map(event => ({
                                                id: event.id,
                                                title: event.training_name + ' <br> ' + event.module_name  + ' <br> ' + event.trainer_name, // You can customize the title based on your data
                                                start: new Date(event.start_date), // Assuming your start_date is in a format parsable by Date
                                                end: new Date(event.end_date), // Assuming your end_date is in a format parsable by Date
                                                description: event.discription, // Adjust this according to your data structure
                                                color: colordata[parseInt(event.status)],
                                              }));

                              $("#scheduler").kendoScheduler({
                                date: new Date(),
                                startTime: new Date(),
                                height: 600,
                                views: [
                                  "day",
                                  { type: "workWeek", selected: true },
                                  "week",
                                  "month",
                                  "agenda"
                                ],
                                dataSource: {
                                          data: myEventData
                                      },
                                editable: {
                                  template: $("#customEditorTemplate").html(),
                                },
                                resources: [
                                                {
                                                  field: "color",
                                                  dataColorField: "color",
                                                  dataValueField: "color",
                                                  dataSource: [
                                                    { text: "Pending",value: 0, color: "#26c6da" },
                                                    { text: "Inprogress",value: 1, color: "#66bb6a"},
                                                    { text: "Cancle",value: 2, color: "#ef5350"}
                                                  ]
                                                }
                                              ],
                                eventTemplate: function(e) {
                                  if(e.trainingtitle && e.trainingtitle.value !== undefined){
                                    return `<div class="custom-event">
                                                      <p>Training: ${e.trainingtitle.text}</p>
                                                      <p>Module: ${e.module.text}</p>
                                                      <p>Trainer:${e.trainer.text}</p>                                                
                                                  </div>`;
                                  }else{
                                            return `<div class="custom-event">
                                                <h3>${e.title}</h3>
                                               </div>`;
                                  }
                                         
                                      },
                                edit: function(e) {
                                 console.log(e);
                                },
                                save: function(e) {
                               
                                 var formData = new FormData();  
                                 var s = new Date(e.event.start);                      
                                  var date_time1 = s.getFullYear()+"-"+(s.getMonth()+1)+"-"+ s.getDate()+" "+ s.getHours()+":"+s.getMinutes()+":"+ s.getSeconds();	

                                var s2 = new Date(e.event.end);
                                var date_time2 = s2.getFullYear()+"-"+(s2.getMonth()+1)+"-"+ s2.getDate()+" "+ s2.getHours()+":"+s2.getMinutes()+":"+ s2.getSeconds();	
                            
                                    

                                      if(e.event.id != 0 || e.event.id != "0" ){
                                      formData.append("id", e.event.id);
                                      formData.append("start_date",date_time1);
                                      formData.append("end_date", date_time2);                                    
                                      if(e.event.color == "0" || e.event.color == "1" || e.event.color == "2"){
                                        formData.append("status",e.event.color);
                                      }
                                      
                                      }else{
                                      formData.append("training_title", e.event.trainingtitle.text);
                                      formData.append("training_id",e.event.trainingtitle.value);
                                      formData.append("module_title", e.event.module.text);
                                      formData.append("module_id", e.event.module.value);
                                      formData.append("start_date",date_time1);
                                      formData.append("end_date", date_time2);
                                      formData.append("discription", e.event.description);
                                      formData.append("trainer_name", e.event.trainer.text);
                                      formData.append("trainer_id",e.event.trainer.value);
                                      formData.append("is_allday",e.event.isAllDay);
                                      formData.append("status",e.event.color.value);
                                      }
                                      $.ajax({
                                              type:'POST',
                                            // enctype: 'multipart/form-data',
                                              url:window.location.origin+"/trainingportal/Trainingschedule/create_traning_schedule",
                                              data: formData,
                                              contentType: false,
                                              processData: false,
                                              beforeSend: function() {
                                                // document.getElementById("content_error_alert").style.display = "none";
                                                // document.getElementById("content_success_alert").style.display ="none";
                                            },
                                              success:function(data){
                                                if(data==1){

                                                 // document.getElementById("content_success_alert").style.display = "block";
                                                }else{
                                                 // document.getElementById("content_error_alert").style.display = "block";
                                                  
                                                }
                                              }
                                          });
                                },
                                remove: function(e) {
                                  var formData = new FormData(); 
                                  if(e.event.id != 0 || e.event.id != "0" ){
                                    var s = new Date();                      
                                    var date_time1 = s.getFullYear()+"-"+(s.getMonth()+1)+"-"+ s.getDate()+" "+ s.getHours()+":"+s.getMinutes()+":"+ s.getSeconds();	

                                    var s2 = new Date();
                                    var date_time2 = s2.getFullYear()+"-"+(s2.getMonth()+1)+"-"+ s2.getDate()+" "+ s2.getHours()+":"+s2.getMinutes()+":"+ s2.getSeconds();	
                            
                                      formData.append("id", e.event.id);
                                      formData.append("start_date",date_time1);
                                      formData.append("end_date", date_time2);
                                      $.ajax({
                                              type:'POST',
                                            // enctype: 'multipart/form-data',
                                              url:window.location.origin+"/trainingportal/Trainingschedule/delete_traning_schedule",
                                              data: formData,
                                              contentType: false,
                                              processData: false,
                                              beforeSend: function() {
                                                // document.getElementById("content_error_alert").style.display = "none";
                                                // document.getElementById("content_success_alert").style.display ="none";
                                            },
                                              success:function(data){
                                                if(data==1){

                                                 // document.getElementById("content_success_alert").style.display = "block";
                                                }else{
                                                 // document.getElementById("content_error_alert").style.display = "block";
                                                  
                                                }
                                              }
                                          });
                                      }
                                },
                                // timezone: "Etc/UTC",
                              });
                             
                            });
                          </script>

</div>
</div>              
</div><!-- Main content END -->

</div>
</main>
<!-- **************** MAIN CONTENT END **************** -->
</body>

<script src="app/views/assets/vendor/pswmeter/pswmeter.min.js"></script>
<script src="app/views/assets/vendor/tiny-slider/dist/tiny-slider.js"></script>
<script src="app/views/assets/vendor/OverlayScrollbars-master/js/OverlayScrollbars.min.js"></script>
<script src="app/views/assets/vendor/plyr/plyr.js"></script>
<script src="app/views/assets/vendor/dropzone/dist/min/dropzone.min.js"></script>
<script src="app/views/assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</html>