@extends('layout.master')
@section('content')

                <section class="content pb-5">
                    <div class="container-fluid">
                     <meta name="csrf-token" content="{!! csrf_token() !!}">
                     @if(auth()->user()->role=='super_admin')
                    
                     <div class="row py-sm-5">
                     <div class="col-md-12">
                        <div class="title-section">
                           <p>Training :: {{$page}}</p>
                        </div>
                        <form id="formSubs" enctype="multipart/form-data" method="post">
                            
                            <input name="id" class="form-control" type="hidden" id="id" value="{{@$Training->id}}">

                           <div class="card">
                              <div class="card-body">
                                 
                                 <div class="row">
                                    <div class="col-md-5">
                                       <div class="form-group custom-form-group">
                                            <label class="form-label" for="name">Topic<span class="text-danger">*</span></label>
                                                <input name="topic" class="form-control" type="text" id="topic" value="{{@$Training->topic}}">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                       <div class="form-group custom-form-group">
                                            <label class="form-label" for="name">Date<span class="text-danger">*</span></label>
                                                <input name="date" class="form-control date" type="date" id="date" value="{{@$Training->date}}">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                       <div class="form-group custom-form-group">
                                            <label class="form-label" for="name">From<span class="text-danger">*</span></label>
                                                <input name="from_time" class="form-control" type="time" id="from_time" value="{{@$Training->from_time}}">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                       <div class="form-group custom-form-group">
                                            <label class="form-label" for="name">To<span class="text-danger">*</span></label>
                                                <input name="to_time" class="form-control" type="time" id="to_time" value="{{@$Training->to_time}}">
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-3">
                                       <div class="form-group custom-form-group">
                                            <label class="form-label" for="meeting_link">Meeting Link<span class="text-danger">*</span></label>
                                                <input name="meeting_link" class="form-control" type="url" id="meeting_link" value="{{@$Training->meeting_link}}">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                       <div class="form-group custom-form-group">
                                            <label class="form-label" for="trainer_name">Trainer Name<span class="text-danger">*</span></label>
                                                <input name="trainer_name" class="form-control" type="text" id="trainer_name" value="{{@$Training->trainer_name}}">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                       <div class="form-group custom-form-group">
                                            <label class="form-label" for="trainer_email">Trainer Email<span class="text-danger">*</span></label>
                                                <input name="trainer_email" class="form-control" type="email" id="trainer_email" value="{{@$Training->trainer_email}}">
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                       <div class="form-group custom-form-group">
                                            <label class="form-label" for="name">Upload File<span class="text-danger"></span></label>
                                                <input name="file" class="form-control" type="file" id="file" accept=".jpg,.jpeg,.bmp,.png,.gif,.doc,.docx,.csv,.rtf,.xlsx,.xls,.txt,.pdf,.zip">
                                                @if(@$Training->meeting_files)
                                                <a href="{{asset('meeting_files/'.$Training->meeting_files)}}" download><i class="fa fa-download"></i> Download Uploaded File</a>
                                                @endif
                                        </div>
                                    </div>
                                    
                                    
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="row">
                                    <div class="col-md-12 text-center">
                                        <button type="submit" class="btn btn-outline-danger">Submit</button>
                                        <a href="{{route('training-list')}}" class="btn btn-outline-dark">Cancel</a>
                                    </div>
                                </div>
                            </div>
                          </div>
                        </form>
                        </div>
                        </div>
                        @endif
                        <div class="row">
                            <div class="col-md-12">
                                <div class="title-section">
                                    <p>Available Training Sessions</p>
                                </div>
                            </div>
                        </div>

                        <div class="row pt-sm-4 pt-0 mb-5">
                            <div class="col-md-12">
                                <div class="row align-items-center">
                                    <div class="col-md-12">
                                        <div class="table-responsive">
                                            <table class="table table-striped" id="pincodemasterList">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Training Date</th>
                                                        <th scope="col">From</th>
                                                        <th scope="col">To</th>
                                                        <th scope="col">Topic</th>
                                                        <th scope="col">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-5" style="display: {{auth()->user()->role!='super_admin'?'block': 'none'}};">
                            <div class="col-md-12">
                                <div class="title-section">
                                    <p>Registered Training Sessions</p>
                                </div>
                            </div>
                        </div>

                        <div style="display: {{auth()->user()->role!='super_admin'?'block': 'none'}};">
                            <div class="col-md-12">
                                <ul class="nav nav-tabs lsp-tabs mb-3" id="myTab" role="tablist">
                                  <li class="nav-item lsp-item" role="presentation">
                                    <button class="nav-link lsp-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">All</button>
                                  </li>
                                  <li class="nav-item lsp-item" role="presentation">
                                    <button class="nav-link lsp-link" id="upcoming-tab" data-toggle="tab" data-target="#upcoming" type="button" role="tab" aria-controls="upcoming" aria-selected="true">Upcoming</button>
                                  </li>
                                  <li class="nav-item lsp-item" role="presentation">
                                    <button class="nav-link lsp-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Attended</button>
                                  </li>
                                  <li class="nav-item lsp-item" role="presentation">
                                    <button class="nav-link lsp-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Non Attended</button>
                                  </li>
                                </ul>
                                <div class="row align-items-center">
                                    <div class="col-md-12">
                                        <div class="table-responsive">
                                            <table class="table table-striped" id="registeredTrainingSessions">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Training Date</th>
                                                        <th scope="col">From</th>
                                                        <th scope="col">To</th>
                                                        <th scope="col">Topic</th>
                                                        <th scope="col">Status</th>
                                                        <th scope="col">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </section>

<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.js')}}"></script>
<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.min.js')}}"></script>
            
<script>
$(document).ready(function(){
            $(".lsp-tabs").on('click','button.lsp-link',function(){
                setTimeout(function(){
                    var table1 = $('#registeredTrainingSessions').DataTable();
                    table1.draw();    
                },500);
                
            });

                    $("#pincodemasterList").DataTable({
                    "language": {
                        "zeroRecords": "No record(s) found."
                    },
                    processing: true,
                    serverSide: true,
                    lengthChange: true,
                    order: [0, 'asc'],
                    searchable: true,
                    bStateSave: false,
                    //responsive: true,
                    ajax: {
                        url: "{{ url('training/data') }}",
                        data: function(d) {}
                    },

                    columns: [
                        {
                            data: 'date',
                            name: 'date',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'from_time',
                            name: 'from_time',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'to_time',
                            name: 'to_time',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'topic',
                            name: 'topic',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            searchable: false,
                            orderable: false,
                            defaultContent: 'NA'
                        }
                    ],createdRow: function( row, data, dataIndex){
                        $( row ).attr('id','row_id_'+data.id);
                    },

                });

                //Upload Bulk Booking
                
                var status='';
                $("#registeredTrainingSessions").DataTable({
                    "language": {
                        "zeroRecords": "No record(s) found."
                    },
                    processing: true,
                    serverSide: true,
                    lengthChange: true,
                    order: [0, 'asc'],
                    searchable: true,
                    bStateSave: false,
                    //responsive: true,
                    ajax: {
                        url: "{{ url('training/registered-data') }}",
                        data: function(d) {
                           d.data_type = $(".lsp-tabs").find('button.active').text();
                        }
                    },

                    columns: [

                        {
                            data: 'date',
                            name: 'date',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'from_time',
                            name: 'from_time',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'to_time',
                            name: 'to_time',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'topic',
                            name: 'topic',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'status',
                            name: 'status',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            searchable: false,
                            orderable: false,
                            defaultContent: 'NA'
                        }
                    ],createdRow: function( row, data, dataIndex){
                        $( row ).attr('id','row_id_'+data.id);
                    },

                });

                //Upload Bulk Booking
            });

  $("table").on('click','.joinmeeting',function(){
    // var join_update_url=$(this).attr('data-url');
    var data_id=$(this).attr('data-id');
    $.ajax({
          url: "{{url('training/update-training-status')}}",
          type: "POST",
          headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          data:{
            'id':data_id
          },
          success: function (data, textStatus, jqXHR) {
             var table = $('#pincodemasterList').DataTable();
             table.draw();
             var table1 = $('#registeredTrainingSessions').DataTable();
             table1.draw();
          }
      });
  });
  $("table").on('click','.register',function(){
        var reg_url=$(this).attr('data-url');
        var data_id=$(this).attr('data-id');
        new swal({
                title: '',
                text: "Are you Sure want to register ?",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#343a40',
                confirmButtonText: "Yes, Register",
                cancelButtonText: 'No, Cancel'
            },
            function(isConfirm){
              if (isConfirm) {
                $.ajax({
                        url: reg_url,
                        type: "GET",
                        headers: {
                              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function () { 
                              $('#custum-loader').removeClass('hidden');
                              $('body').addClass('no-scroll');
                        },
                        success: function (data, textStatus, jqXHR) {
                           $('#custum-loader').addClass('hidden');
                           new swal({
                                title: '',
                                text: "Registered successfully ?",
                                type: 'success'
                            });
                           var table = $('#pincodemasterList').DataTable();
                           table.draw();
                           var table1 = $('#registeredTrainingSessions').DataTable();
                            table1.draw();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {

                        }
                    });
              } 
          });

    });
    $("table").on('click','.delete',function(){
        var delete_url=$(this).attr('data-url');
        var data_id=$(this).attr('data-id');
        new swal({
                title: '',
                text: "Are you Sure want to delete ?",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#343a40',
                confirmButtonText: "Yes, Delete",
                cancelButtonText: 'No, Cancel'
            },
            function(isConfirm){
              if (isConfirm) {
                $.ajax({
                        url: delete_url,
                        type: "POST",
                        headers: {
                              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function () { 
                              $('#custum-loader').removeClass('hidden');
                              $('body').addClass('no-scroll');
                        },
                        success: function (data, textStatus, jqXHR) {
                           $('#custum-loader').addClass('hidden');
                           new swal({
                                title: '',
                                text: "Deleted successfully ?",
                                type: 'success'
                            });
                           $('#row_id_'+data_id).remove();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {

                        }
                    });
              } 
          });

    });

    $("#formSubs").validate({
            rules: {
                topic: {required:true},
                date: {required:true},
                from_time: {required:true},
                to_time: {required:true},
                meeting_link: {required:true},
                trainer_name: {required:true},
                trainer_email: {required:true},
            },submitHandler: function(form) {
               //form.preventDefault();

                var file_data = $('#file').prop('files')[0];   
                var form_data = new FormData();                  
                form_data.append('file', file_data);
                form_data.append('topic', $('#topic').val());
                form_data.append('date', $('#date').val());
                form_data.append('from_time', $('#from_time').val());
                form_data.append('to_time', $('#to_time').val());
                form_data.append('meeting_link', $('#meeting_link').val());
                form_data.append('trainer_name', $('#trainer_name').val());
                form_data.append('trainer_email', $('#trainer_email').val());
                form_data.append('id', $('#id').val());
                

               $.ajax({
                  method: 'POST',
                  url:"{{route('post-training-save')}}",
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  },
                  data: form_data,
                  contentType:false,
                  cache:false,
                  processData:false,
                  dataType:'JSON',
                  beforeSend: function () { // Before we send the request, remove the .hidden class from the spinner and default to inline-block.
                      $('#custum-loader').removeClass('hidden');
                      $('body').addClass('no-scroll');
                  },
                  success: function (data) {
                  if(data.status == 'true'){
                      
                      swal({
                          title: "Success",
                          text: data.message,
                          type: "success",
   
                          closeOnConfirm: false,
                          showLoaderOnConfirm: true,
                      },
                      function(){
                          window.location.reload();
                      });
                      
                  }
                  else{
   
                      swal({
   
                        title: "oops!",
                        text: data.message,
                        type: "error",
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
   
                    });
   
                  }
              },
              error: function () {
                    swal({
                        title: "oops!",
                        text: "Invalid Data",
                        type: "error",
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
                    }); 
              },
              complete: function () { // Set our complete callback, adding the .hidden class and hiding the spinner.
                  $('#loader').addClass('hidden');
                  $('body').removeClass('no-scroll');
                  $('#custum-loader').addClass('hidden');
              },
   
        });
            }

        });
        </script>
    @endsection