@extends('layouts.app')
<style>
   .multiple_emails-container {
      border:1px #00ff00 solid;
      border-radius: 1px;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      padding:0; margin: 0; cursor:text; width:100%;
   }

   .multiple_emails-container input {

      width:100%;
      border:0;
      outline: none;
      margin-bottom:30px;
      padding-left: 5px;

   }

   .multiple_emails-container input{
      border: 0 !important;
   }

   .multiple_emails-container input.multiple_emails-error {
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px red !important;
      outline: thin auto red !important;
   }

   .multiple_emails-container ul {
      list-style-type:none;
      padding-left: 0;
   }

   .multiple_emails-email {
      margin: 3px 5px 3px 5px;
      padding: 3px 5px 3px 5px;
      border:1px #BBD8FB solid;
      border-radius: 3px;
      background: #F3F7FD;
   }

   .multiple_emails-close {
      float:left;
      margin:0 3px;
   }

   .captionTable{
      padding-top: 20px;
   }

   .tableCollumsFull{
      margin-top: 10px;
   }

   .tableCollumsFull td{
      padding: 8px;
   }

   .tableCollumsFull input{
      cursor: pointer;
   }
</style>

@section('content')
<section id="content_outer_wrapper" class="">
   <div id="content_wrapper" class="rightnav_v2 toggle-right">
      <div id="header_wrapper" class="header-md" style="height:6%">
         <div class="container-fluid">
            <div class="row">
               <div class="col-xs-5">
                  <header id="header">
                     <h1 class="geo-font-sub-m">ტერენინგები</h1>
                  </header>
               </div>
            </div>
         </div>
      </div>
      <div id="content" class="container-fluid">
         <a class="btn btn-info" href="{{ route('trainings.create')}}">
            <i class="zmdi zmdi-plus"></i> დამატება
            <div class="ripple-container"></div>
         </a>
         <div class="content-body">
            <div class="row">
               <div class="col-xs-12">
                  <div class="card card-data-tables product-table-wrapper">
                     <div class="card-body p-0">
                        <div class="table-responsive">
                           <table id="datatable" class="mdl-data-table product-table m-t-30" cellspacing="0" width="100%">
                              <thead>
                                 <tr>
                                    <th class="col-xs-2">id</th>
                                    <th class="col-xs-2">დასახელება</th>
                                    <th class="col-xs-2">დაწყების დრო</th>
                                    <th class="col-xs-2">დამთავრების დრო</th>
                                    <th class="col-xs-2">ტრენერი</th>
                                    <th class="col-xs-2">აღწერა</th>
                                    <th class="col-xs-2">ბიუჯეტი</th>
                                    <th class="col-xs-2">არქივი</th>
                                    <th class="col-xs-2">რედაქტირება</th>
                                    <th class="col-xs-2">წაშლა</th>
                                 </tr>
                              </thead>
                              <tbody>
                              </tbody>
                           </table>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

<div class="modal fade" id="trainings_participant" tabindex="-1" role="dialog" aria-labelledby="basic_modal" style="display: none;">
   <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">ტრენინგის მონაწილეების დამატება</h4>
            <ul class="card-actions icons right-top">
               <a href="javascript:void(0)" data-dismiss="modal" onclick="clearData()" class="text-white" aria-label="Close">
                  <i class="zmdi zmdi-close"></i>
               </a>
            </ul>
         </div>
         <div class="modal-body">
            <div class="card">
               <div class="card-body">
                  <form action="{{ route('add_trainings_participant') }}" method="POST">
                     @csrf
                     <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-flat" onclick="clearData()" data-dismiss="modal">დახურვა</button>
                        <input type="hidden" id="trainings_id" name="id">
                        <button type="submit" class="btn btn-primary">გაგზავნა</button>
                     </div>
                     <div style="min-height: 50px">
                        <div class='col-md-8'>
                           <label class="control-label" style="margin-bottom: 10px;">მონაწილეები</label>
                           <input type='text' id='example_emailBS' name='example_emailBS' class='form-control'>
                        </div>
                     </div>
                     <div class='form-group' style="min-height: 50px; border: 0px;">
                        <div class='col-md-6 captionTable'>
                           <caption>ყველა მონაწილე</caption>
                           <table id="full_participants" class="table-bordered tableCollums tableCollumsFull">
                           </table>
                        </div>
                        <div class='col-md-6 captionTable'>
                           <caption>დარეგისტრირებული მონაწილე</caption>
                           <table id="registered_participants" class="table-bordered tableCollums tableCollumsFull">
                           </table>
                        </div>
                     </div>
                     <div class="modal-footer"></div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

@push('custom-scripts')
<script type="text/javascript" src="{{ asset ('js/page-managers/trainings_manage.js') }}"></script>
<script type="text/javascript" src="{{ asset ('js/page-managers/mail_script.js') }}"></script>
<script type="text/javascript">
   //Plug-in function for the bootstrap version of the multiple email
   $(function() {
      //To render the input device to multiple email input using BootStrap icon
      $('#example_emailBS').multiple_emails({position: "bottom"});
      //OR $('#example_emailBS').multiple_emails("Bootstrap");

      //Shows the value of the input device, which is in JSON format
      $('#current_emailsBS').text($('#example_emailBS').val());
      $('#example_emailBS').change( function(){
         $('#current_emailsBS').text($(this).val());
      });
   });



   //Plug-in function for the bootstrap version of the multiple email
   $(function() {
      //To render the input device to multiple email input using a simple hyperlink text
      $('#example_emailB').multiple_emails({theme: "Basic"});

      //Shows the value of the input device, which is in JSON format
      $('#current_emailsB').text($('#example_emailB').val());
      $('#example_emailB').change( function(){
         $('#current_emailsB').text($(this).val());
      });
   });
</script>
@endpush
@endsection