@extends('layouts.app_hr')
@section('title',__('hr.main_salary_over_time'))

@section('content')

@section('content')

   <!-- Content Header (Page header) -->
<section class="content-header">
      <nav aria-label="breadcrumb">
         <ol class="breadcrumb breadcrumb-style1">
            <li class="breadcrumb-item">
               <a href="#">{{__('home.home')}}</a>
            </li>
            <li class="breadcrumb-item">
               <a href="#">{{__('hr.salaries')}}</a>
            </li>
            <li class="breadcrumb-item active">{{__('hr.main_salary_over_time')}}</li>
         </ol>
      </nav>

   </section>

   <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
      <div class="card-widget-separator-wrapper">
         <div class="card-body card-widget-separator">
            <div class="row gy-4 gy-sm-1">
               <div class="col-sm-6 col-lg-3 fv-plugins-icon-container ">
                  <div class="  form-floating form-floating-outline">
                     <select id="financial_calendar_id" name="financial_calendar_id" class="select2 form-control" >
                        <option value=""> {{__('messages.please_select')}}</option>
                        @php
                           $finance_years = \App\FinancialCalendar::where('business_id',auth()->user()->business_id)->get()
                        @endphp
                        @foreach($finance_years as $item)
                           <option value="{{$item->id}}">{{$item->finance_year}}</option>
                        @endforeach
                     </select>
                     <label for="financial_calendar_id">{{__('hr.financial_calendar')}} </label>

                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
    <!-- Main content -->
   <section class="content">

      <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
         <div class="card-body">
            <div class="table-responsive mt-4 " >
               <table   class="table table-bordered table-hover "  id="main_salary_over_time_table">
                  <thead class="bg-primary">
                  <th>  @lang('hr.month')</th>
                  <th>  @lang('hr.start_date')</th>
                  <th>  @lang('hr.end_date')</th>
                  <th>  @lang('hr.start_date_for_zkteco')</th>
                  <th>  @lang('hr.end_date_for_zkteco')</th>
                  <th>  @lang('hr.month_days_count')</th>
                  <th>  @lang('hr.month_status')</th>
                  </thead>
               </table>
            </div>
         </div>

      </div>


   </section>

@endsection
@section('javascript')
   <script>
      $(document).ready(function(){
         var main_salary_over_time_table = $('#main_salary_over_time_table').DataTable({
            processing: true,
            serverSide: true,
            fixedHeader: false,
            ajax: {
               url: '/hr/main-salary-over-time',
               data: function(d) {
                  d.financial_calendar_id = $('#financial_calendar_id').val();
               }
            },
            columns: [{
               data:'month_id',
               name:'month_id'
            },
               {
                  data:'month_start_date',
                  name:'month_start_date'
               }, {
                  data:'month_end_date',
                  name:'month_end_date'
               }, {
                  data:'start_date_for_zkteco',
                  name:'start_date_for_zkteco'
               }, {
                  data:'end_date_for_zkteco',
                  name:'end_date_for_zkteco'
               },{
                  data:'number_of_days',
                  name:'number_of_days'
               },
               {
                  data:'status',
                  name:'status'
               },

            ],
         });

         $('#financial_calendar_id').change(function() {
            main_salary_over_time_table.ajax.reload();
         });

      })


   </script>

@stop