@extends('admin.layouts.admin')
@section('style')
<style>
.form-group .custom-radio .custom-control-label {
    height: 41px !important;
}
.form-group .custom-radio .custom-control-label:before {
    top: 10px !important;
}
</style>
@endsection
@section('content')
<!-- Page Content-->
<div class="page-content-tab">
    <div class="container-fluid">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">  
                    <div class="float-right">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="javascript:void(0);">Salary</a>
                            </li>
                            <li class="breadcrumb-item active">Salary StStop</li>
                        </ol>
                    </div>
                    <div class="card-body">
                        <h4 class="page-title">Salary Stop</h4>
                    </div>
                </div>
                <!--end page-title-box-->
            </div>
            <!--end col-->
        </div>
        <div class="row">
            <div class="col-sm-12">
                @if(session('alert-green'))
                    <div id="mydiv" class="alert alert-success mt-3 text-center">
                        {{ session('alert-green') }}
                    </div>
                @endif

                @if(session('alert-danger'))
                    <div id="mydiv" class="alert alert-danger mt-3 text-center">
                        {{ session('alert-danger') }}
                    </div>
                @endif
                @if($errors->any())
                    <div id="mydiv" class="row">
                        <div class="col-md-12 mb-5">
                            @foreach ($errors->all() as $error)
                                <div class="text-danger small mb-1">* {{$error}}</div>
                            @endforeach
                        </div>
                    </div>
                @endif
                {{ session('status') }}

               </div>
            <!--end col-->
        </div>
        <!--end row-->
        <!-- end page title end breadcrumb -->
        <div class="row" style="width:100%;"> 
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <form method="POST" action="{{ route('admin.salary.start_stop_action') }}" class="row" >
                        @csrf
                        
                            <div class="col-md-12">                               
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Department<span class="text-danger">*</span> </label>
                                    <select class="form-control" id="department"  required>
                                        <option value="">Select Department</option> 
                                        @foreach($departments as $department)                                       
                                        <option value="{{$department->id ?? '' }}"> {{ $department->name ?? '' }}</option> 
                                        @endforeach                                                                          
                                    </select>
                                </div>
                            </div> 
                            
                            <div class="col-md-12"> 
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Employee<span class="text-danger">*</span> </label>                                     
                                    <select class="form-control select2" name="emp_id"  id="emp_id" >   
                                        
                                    </select>
                                </div>
                            </div> 

                            <div class="col-md-12"> 
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Effective Date<span class="text-danger">*</span> </label>
                                    <input type="date" class="form-control" name="effective_date"  id="effective_date">   
                                </div>
                            </div> 
                            <div class="col-md-12"> 
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Type<span class="text-danger">*</span> </label>
                                    <select class="form-control" name="type"  id="type">
                                        <option value=''>Select type</option>
                                        <option value='Salary'>Salary</option>
                                        <option value='Bonus'>Bonus</option>
                                        <option value='Incentive'>Incentive</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12"> 
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Status<span class="text-danger">*</span> </label>
                                    <select class="form-control" name="type"  id="type">
                                        <option value=''>Select Status</option>
                                        <option value='Stop'>Stop</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12"> 
                                <div class="form-group">
                                    <label for="" class="mb-2 text-bold-600 text-uppercase">Description<span class="text-danger">*</span> </label>
                                    <textarea class="form-control" name="description"  id="description"></textarea>
                                </div>
                            </div>
                            <div class="col-12">
                                <button class="btn btn-primary" type="submit">Save</button>
                            </div>
                        </form>

                    </div><!--end card-body-->
                </div><!--end card-->
            </div><!--end col-->
        </div><!--end row-->
    </div>
    <!-- container -->
    <footer class="footer text-center text-sm-left">
        &copy; {{ now()->format('Y')}} SSL Wireless <span class="text-muted d-none d-sm-inline-block float-right">Design and Developed by <a href="#">SSL Wireless</a></span>
    </footer>
    <!--end footer-->
</div>
<!-- end page content -->
@endsection
@section('script')

<script type="text/javascript">
$( document ).ready(function() { 
    
    $('select#department').on('change', function() {
        let id = this.value;        
        var toAppend = '';
        $('#emp_id').empty();
    
        $.ajax({
            type: "get",
            url:  '{{ url("admin/salary/employeeBydepartment") }}/'+id,
            data: {
                "_token": "{{ csrf_token() }}",
               // id: id,
                },
            success: function(result) {
                var obj = $.parseJSON(result);              
                toAppend+='<option value="">Select Employee</option>';                
                $.each(obj, function (key, value) {                    
                    toAppend+='<option value="'+value.emp_id+'">'+value.user.name+'</option>';  
                });
                $("#emp_id").append(toAppend);                

            }
        })

    
    });

    setTimeout(function() {
        $('#mydiv').fadeOut('fast');
    }, 3000);
});  
  </script>
@endsection