<?php $__env->startSection('content'); ?>
     <title><?php echo e(trans('admin.Departure')); ?></title>


 <main id="js-page-content" role="main" class="page-content">
                    <ol class="breadcrumb page-breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0);"><?php echo e(trans('admin.HR')); ?> </a></li>
                        <li class="breadcrumb-item active">  <?php echo e(trans('admin.Departure')); ?>    </li>
                        <li class="position-absolute pos-top pos-right d-none d-sm-block"><span
                                class="js-get-date"></span></li>
                    </ol>
     
           <form action="<?php echo e(url('AddDeparture/'.$item->id)); ?>" method="post">
                         <?php echo csrf_field(); ?>

                     <?php echo view('honeypot::honeypotFormFields'); ?>
                    <div class="row">
                        <div class="col-lg-12">
                            <div id="panel-2" class="panel">
                                <div class="panel-hdr">
                                    <h2>
                                        <span class="fw-300"><i>  <?php echo e(trans('admin.Departure')); ?>  </i></span>
                                    </h2>
                                </div>
                                <div class="panel-container show">
                                   <span id="ex"> <?php echo $__env->make('admin.layouts.messages', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?></span>       
                                    <div class="panel-content">
                                    <div class="form-row">
                                        <div class="form-group col-lg-3">
                                   <label class="form-label" for="simpleinput"><?php echo e(trans('admin.Code')); ?> </label>
                                            <input type="text" value="<?php echo e($Code); ?>" class="form-control " disabled>
                                            <input type="hidden" name="Code" value="<?php echo e($Code); ?>" class="form-control">
                                        </div>
                                        <div class="form-group col-lg-3">
                                   <label class="form-label" for="simpleinput"><?php echo e(trans('admin.Date')); ?></label>
                           <input type="date"  value="<?php echo e($item->Date); ?>" class="form-control" disabled>
                           <input type="hidden" name="Date" value="<?php echo e($item->Date); ?>">
                                        </div>
                                               <div class="form-group col-lg-3">
                                           <label class="form-label" for="simpleinput"><?php echo e(trans('admin.Month')); ?></label>
                <input  type="month"  value="<?php echo e($item->Month); ?>" class="form-control" disabled>
                             <input type="hidden" name="Month" value="<?php echo e($item->Month); ?>">                       
                                        </div>
                                        <div class="form-group col-lg-3">
                <label class="form-label" for="simpleinput"><?php echo e(trans('admin.Notes')); ?>  </label>
                        <input type="text" name="Note" value="<?php echo e($item->Note); ?>" class="form-control">
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                    </div>
                    <div class="col-xl-12">
                        <div id="panel-1" class="panel">
                           
                            <div class="panel-container show">
                                <div class="panel-content">
                                    <div id="mobile-overflow">
                                    <table style="display: none" 
                                    class="table table-bordered table-hover table-striped w-100 mobile-width">
                                    <thead>
                                        <tr>
                                            <th> <?php echo e(trans('admin.Employee')); ?> </th>
                                            <th>  <?php echo e(trans('admin.Attendance_Time')); ?></th>
                                            <th>  <?php echo e(trans('admin.Notes')); ?></th>
                                            <th>  <?php echo e(trans('admin.Actions')); ?></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>   
                                            <td>
                                                <div class="form-group">
                       
                               <select class="js-data-example-ajax form-control w-100" id="Emp">

                                            </select>
                                        <input type="hidden" id="EmpName">            
                                                </div>
                                            </td>
                                            <td>
                                                <div class="form-group">
                                                    <input type="time" id="AttTime" class="form-control">
                                                </div>
                                            </td>
                                          
                                            <td>
                                                <div class="form-group">   
                                                    <input type="text" id="note" class="form-control">
                                                </div>
                                            </td>
                                            <td>
          <button type="button" onclick="Insert()" class="btn btn-default" id="add-data"><i class="fal fa-plus"></i></button>
                                            </td>
                                           
                                        </tr>
                                    </tbody>
                                    </table>
                                    </div>
                                    <!-- datatable start -->
                                    <div id="mobile-overflow">
                                    <table id="dt"
                                        class="table table-bordered table-hover table-striped w-100 mobile-width">
                                        <thead>
                                            <tr>
                                             <th> <?php echo e(trans('admin.Employee')); ?> </th>
                                            <th>  <?php echo e(trans('admin.Attendance_Time')); ?></th>
                                            <th>  <?php echo e(trans('admin.Dep_Time')); ?></th>
                                            <th>  <?php echo e(trans('admin.Hours_Number')); ?></th>
                                            <th>  <?php echo e(trans('admin.Notes')); ?></th>
                                            <th>  <?php echo e(trans('admin.Actions')); ?></th>
                                            </tr>
                                        </thead>
                                        <tbody id="data-dt">
                                         
                                    <?php $__currentLoopData = $details; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $det): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>        
                                      <tr> 
                                <td><?php if(!empty($det->Emp()->first()->Name)): ?> 
                                    
                                    
                                     <?php echo e(app()->getLocale() == 'ar' ?$det->Emp()->first()->Name :$det->Emp()->first()->NameEn); ?>

                                    <?php endif; ?>
                    <input type="hidden" name="Emp[]" value="<?php echo e($det->Emp); ?>">   
                                 
                                </td>
                                <td>
                                    <?php echo e($det->In_Time); ?>      
                          <input type="hidden" name="In_Time[]" id="In_Time<?php echo e($det->id); ?>" value="<?php echo e($det->In_Time); ?>">                  
                                </td>
                                        <td>
                                
             <input type="time" name="Out_Time[]" id="Out_Time<?php echo e($det->id); ?>" onkeyup="Dif(<?php echo e($det->id); ?>)" onchange="Dif(<?php echo e($det->id); ?>)" class="form-control">                  
                                </td>           
                                  
                              <td>
                                
             <input type="text" disabled  id="Hours_Number<?php echo e($det->id); ?>" class="form-control">  
                     <input type="hidden" name="Hours_Number[]" id="Hours_NumberHide<?php echo e($det->id); ?>">                 
                                </td>                                
                                          
                                <td>
     
       <input type="text" class="form-control" name="NoteEmp[]" value="<?php echo e($det->Note); ?>">
       
                               </td>
                                          
                                        
  
                                <td>
                    
                                </td>
                             </tr>      
                                            
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>        
                                        </tbody>
                                    </table>
                                    </div>
                                    <!-- datatable end -->
                                  
                                    <div class="buttons mt-3">
         <button type="submit" class="btn btn-primary"> <i class="fal fa-folder"></i> <?php echo e(trans('admin.Save')); ?> </button>
                                      </div>
                                </div>
                            </div>
                        </div>
                    </div>



                    </div>
                  </form>
                </main>

<?php $__env->stopSection(); ?>
<?php $__env->startPush('js'); ?>
    <link rel="stylesheet" media="screen, print" href="<?php echo e(asset('Admin/css/datagrid/datatables/datatables.bundle.css')); ?>">
    <link rel="stylesheet" media="screen, print" href="<?php echo e(asset('Admin/css/formplugins/select2/select2.bundle.css')); ?>">
    <script src="<?php echo e(asset('Admin/js/formplugins/select2/select2.bundle.js')); ?>"></script>
    <script src="<?php echo e(asset('Admin/js/datagrid/datatables/datatables.export.js')); ?>"></script>
    <script src="<?php echo e(asset('Admin/js/datagrid/datatables/datatables.bundle.js')); ?>"></script>

    <script>
        //_fnFeatureHtmlLength();
        $(document).ready(function () {
            // Setup - add a text input to each footer cell
            $('#dt-basic-example thead tr').clone(true).appendTo('#dt-basic-example thead');
            $('#dt-basic-example thead tr:eq(1) th').each(function (i) {
                var title = $(this).text();
                $(this).html('<input type="text" class="form-control form-control-sm" placeholder="Search ' + title + '" />');

                $('input', this).on('keyup change', function () {
                    if (table.column(i).search() !== this.value) {
                        table
                            .column(i)
                            .search(this.value)
                            .draw();
                    }
                });
            });
            var table = $('#dt-basic-example').DataTable(
                {
                    responsive: true,
                    orderCellsTop: true,
                    fixedHeader: true,
                    lengthChange: true,

                    dom: "<'row mb-3'<'col-sm-12 col-md-3 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-9 d-flex align-items-center justify-content-end'B>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

                    buttons: [
                        {
                            extend: 'pageLength',
                            className: 'btn-outline-default'
                        },
                        {
                            extend: 'colvis',
                            text: 'Column Visibility',
                            titleAttr: 'Col visibility',
                            className: 'btn-outline-default'
                        },
                        {
                            extend: 'pdfHtml5',
                            text: 'PDF',
                            titleAttr: 'Generate PDF',
                            className: 'btn-outline-danger btn-sm mr-1'
                        },
                        {
                            extend: 'excelHtml5',
                            text: 'Excel',
                            titleAttr: 'Generate Excel',
                            className: 'btn-outline-success btn-sm mr-1'
                        },
                        {
                            extend: 'csvHtml5',
                            text: 'CSV',
                            titleAttr: 'Generate CSV',
                            className: 'btn-outline-primary btn-sm mr-1'
                        },
                        {
                            extend: 'copyHtml5',
                            text: 'Copy',
                            titleAttr: 'Copy to clipboard',
                            className: 'btn-outline-primary btn-sm mr-1'
                        },
                        {
                            extend: 'print',
                            text: 'Print',
                            titleAttr: 'Print Table',
                            className: 'btn-outline-primary btn-sm'
                        }
                    ],
                });
            $('.js-thead-colors a').on('click', function () {
                var theadColor = $(this).attr("data-bg");
                console.log(theadColor);
                $('#dt-basic-example thead').removeClassPrefix('bg-').addClass(theadColor);
            });

            $('.js-tbody-colors a').on('click', function () {
                var theadColor = $(this).attr("data-bg");
                console.log(theadColor);
                $('#dt-basic-example').removeClassPrefix('bg-').addClass(theadColor);
            });

        });

    </script>


<!-- Search Selecet -->
<script>
    $(document).ready(function () {
        $(function () {
            $(".select2").select2();

            $(".select2-placeholder-multiple").select2({
                placeholder: "Select State",
            });
            $(".js-hide-search").select2({
                minimumResultsForSearch: 1 / 0,
            });
            $(".js-max-length").select2({
                maximumSelectionLength: 2,
                placeholder: "Select maximum 2 items",
            });
            $(".select2-placeholder").select2({
                placeholder: "Select a state",
                allowClear: true,
            });

            $(".js-select2-icons").select2({
                minimumResultsForSearch: 1 / 0,
                templateResult: icon,
                templateSelection: icon,
                escapeMarkup: function (elm) {
                    return elm;
                },
            });

            function icon(elm) {
                elm.element;
                return elm.id ? "<i class='" + $(elm.element).data("icon") + " mr-2'></i>" + elm.text : elm.text;
            }

            $("#Emp").select2({
                placeholder: "select...",
                ajax: {
                    type: "GET",
                    dataType: "json",
                    url: "AllEmps",
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (obj, index) {
                                return { id: index, text: obj };
                            }),
                        };

                        console.log(data);
                    },
                  data: function (params) {  
   
            
                   var query = {
                            search: params.term,
                        };
                                
            
              $.ajax({
                              url: 'AllEmpsJ/'+params.term,
                              type:"GET",
                              dataType:"json",
                              beforeSend: function(){
                                  $('#loader').css("visibility", "visible");
                              },

                              success:function(data) {
                                          $('#Emp').empty();  
                                  $.each(data, function(key, value){
   
                         $('#Emp').append('<option value="'+ key +'">' + value + '</option>');
                   
                                  });
                              },
                              complete: function(){
                                  $('#loader').css("visibility", "hidden");
                              }
                          });
            
            
            
        }
                },
            });

            $("#Emp").on("select2:select", function (e) {
                console.log("select done", e.params.data);
            });
        });
    });
</script>

<!-- Emp Name -->
<script>
   $(document).ready(function() {
   
                  $('#Emp').on('change', function(){
                      var countryId = $(this).val();
                      if(countryId) {
                          $.ajax({
                              url: 'EmpNameFilter/'+countryId,
                              type:"GET",
                              dataType:"json",
                              beforeSend: function(){
                                  $('#loader').css("visibility", "visible");
                              },
   
                              success:function(data) {
                                  $.each(data, function(key, value){
   
        
                        $('#EmpName').val(data.name); 
        
                                  });
                              },
                              complete: function(){
                                  $('#loader').css("visibility", "hidden");
                              }
                          });
                      } else {
   
                          $('select[name="state"]').empty();
                      }
   
                  });
   
              });
</script>  

<script>
    function  Dif(r){
       
             function parseTime(s) {
   var c = s.split(':');
   return (parseInt(c[0]) * 60 + parseInt(c[1]) )/ 60;
}
        
    var In_Time = $('#In_Time'+r).val();    
    var Out_Time = $('#Out_Time'+r).val();    
       
        
var z= parseTime(Out_Time) -  parseTime(In_Time);


$('#Hours_Number'+r).val(parseFloat(z)); 
$('#Hours_NumberHide'+r).val(parseFloat(z)); 


        
    }
</script>    



<!-- Insert -->
 <script>
        function Insert(){
        var Emp = document.getElementById('Emp').value;
        var EmpName = document.getElementById('EmpName').value;
        var AttTime = document.getElementById('AttTime').value;
        var Note = document.getElementById('note-code').value;
      



        var table =  ` <tr> 
                                <td>${EmpName}</td>
                                <td>${AttTime}</td>
                                <td>${Note}
       <input type="hidden" name="In_Time[]" value="${AttTime}">
       <input type="hidden" name="NoteEmp[]" value="${Note}">
       <input type="hidden" name="Emp[]" value="${Emp}">
                               </td>
                                <td>
                    <button type="button" id="Del" class="btn btn-default"><i class="fal fa-trash"></i></button>
                                </td>
                             </tr>`;
                             document.getElementById('data-dt').innerHTML += table;
            
            
            
    $('#dt-basic-example #data-dt').on('click', '#Del', function(e){
   $(this).closest('tr').remove();
    
})         
            
            
        }

        

    </script>

<script>
    $('#dt-basic-example #data-dt').on('click', '#Del', function(e){
   $(this).closest('tr').remove();
    
})         
        
</script>

<?php $__env->stopPush(); ?>

<?php echo $__env->make('admin.index', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/klarapps/public_html/test.klarapps.com/resources/views/admin/HR/Departure.blade.php ENDPATH**/ ?>