@extends('layouts.app_settings')
@section('title', __( 'user.users' ))

@section('content')

    <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="#">{{__('user.manage_roles')}}</a>
                </li>
                <li class="breadcrumb-item active">{{__('new.employee_roles')}}</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">
            <span class="badge bg-blue-gradient badge-pro ">{{__('report.filters')}}</span>

            <div class="card-body card-widget-separator" >

                <div class="row gy-4 gy-sm-1 ">

                    <div class="row">

                        <div class="col-sm-3 fv-plugins-icon-container  ">
                            <div class="form-floating form-floating-outline">
                                <input type="number" name="employee_code" id="employee_code" class="form-control  " placeholder="123">
                                <label for="code">{{__('hr.employee_code')}}</label>
                            </div>

                        </div>


                        <div class="col-sm-3 fv-plugins-icon-container ">
                            <div class="form-floating form-floating-outline">
                                <input type="text" name="first_name" id="first_name" class="form-control " placeholder="john" aria-label="john.doe">
                                <label for="first_name">{{__('business.first_name')}}</label>
                            </div>
                        </div>

                        <div class="col-sm-3 fv-plugins-icon-container">
                            <div class="form-floating form-floating-outline">
                                <input type="text" name="surname" id="surname" class="form-control " placeholder="john" aria-label="john.doe">
                                <label for="surname">{{__('business.prefix')}}</label>
                            </div>
                        </div>
                        <div class="col-sm-3   fv-plugins-icon-container ">
                            <div class="form-floating form-floating-outline">
                                <select  name="location_id" id="location_id"  class="select2 w-100 form-select form-select-lg" >
                                    <option value=""> {{__('messages.please_select')}}</option>
                                    @php
                                        $locations = \App\BusinessLocation::where('business_id',auth()->user()->business_id)->get()
                                    @endphp
                                    @foreach($locations as $location)
                                        <option  value="{{$location->id}}">{{$location->name}}</option>
                                    @endforeach
                                </select>
                                <label for="location">{{__('business.business_location')}}</label>
                            </div>
                        </div>
                    </div>


                    <div class="row mt-5">
                        <div class="col-sm-3   fv-plugins-icon-container ">
                            <div class="form-floating form-floating-outline">
                                <select  name="role" id="role"  class="select2 w-100 form-select form-select-lg" >
                                    <option value=""> {{__('messages.please_select')}}</option>
                                    @php
                                        $roles = \DB::table('roles')->where('business_id',auth()->user()->business_id)->get()
                                    @endphp
                                    @foreach($roles as $role)
                                        @php
                                             if (! empty($role->name)) {
                                                    $array = explode('#', $role->name, 2);
                                                    $role_name = ! empty($array[0]) ? $array[0] : '';
                                                }
                                        @endphp
                                        <option  value="{{$role->name}}">{{$role_name}}</option>
                                    @endforeach
                                </select>
                                <label for="location">{{__('user.roles')}}</label>
                            </div>
                        </div>

                        <div class="col-sm-3   fv-plugins-icon-container ">
                            <div class="form-floating form-floating-outline">
                                <select  name="department_id" id="department_id"  class="select2 w-100 form-select form-select-lg" >
                                    <option value=""> {{__('messages.please_select')}}</option>
                                    @php
                                        $departments = \App\Department::where('business_id',auth()->user()->business_id)->get()
                                    @endphp
                                    @foreach($departments as $department)
                                        <option  value="{{$department->id}}">{{$department->name}}</option>
                                    @endforeach
                                </select>
                                <label for="department_id">{{__('hr.department')}}</label>
                            </div>
                        </div>

                        <div class="col-sm-3   fv-plugins-icon-container ">
                            <div class="form-floating form-floating-outline">
                                <select  name="job_id" id="job_id"  class="select2 w-100 form-select form-select-lg" >
                                    <option value=""> {{__('messages.please_select')}}</option>
                                    @php
                                        $jobs = \App\Job::where('business_id',auth()->user()->business_id)->get()
                                    @endphp
                                    @foreach($jobs as $job)
                                        <option  value="{{$job->id}}">{{$job->name}}</option>
                                    @endforeach
                                </select>
                                <label for="job_id">{{__('hr.job')}}</label>
                            </div>
                        </div>

                        <div class="col-sm-3   fv-plugins-icon-container ">
                            <div class="form-floating form-floating-outline">
                                <select  name="employment_type_id" id="employment_type_id"  class="select2 w-100 form-select form-select-lg" >
                                    <option value=""> {{__('messages.please_select')}}</option>
                                    @php
                                        $EmploymentTypes = \App\EmploymentType::where('business_id',auth()->user()->business_id)
                                        ->where('active',1)->get()
                                    @endphp
                                    @foreach($EmploymentTypes as $EmploymentType)
                                        <option  value="{{$EmploymentType->id}}">{{$EmploymentType->name}}</option>
                                    @endforeach
                                </select>
                                <label for="employment_type_id">{{__('hr.employment_type')}}</label>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

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

    @component('components.widget', ['class' => 'card '])

        @can('user.view')
            <div class="table-responsive mt-5">
                <table class="datatables-users table dataTable no-footer dtr-column mt-5" id="users_table">
                    <thead>
                        <tr>
                            <th>@lang( 'business.username' )</th>
                            <th>@lang( 'user.name' )</th>
                            <th>@lang( 'user.role' )</th>
                            <th>@lang( 'business.email' )</th>
                            <th>@lang( 'messages.action' )</th>
                        </tr>
                    </thead>
                </table>
            </div>
        @endcan
    @endcomponent

    <div class="modal fade user_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>

</section>
<!-- /.content -->
@stop
@section('javascript')
<script type="text/javascript">
    //Roles table
    $(document).ready( function(){
        var users_table = $('#users_table').DataTable({
                    processing: true,
                    serverSide: true,
                    fixedHeader:false,
                     ajax: {
                        url: '/users',
                        data: function(d) {
                            d.employee_code = $('#employee_code').val();
                            d.first_name = $('#first_name').val();
                            d.surname = $('#surname').val();
                            d.location_id = $('#location_id').val();
                            d.department_id = $('#department_id').val();
                            d.job_id = $('#job_id').val();
                            d.role = $('#role').val();
                            d.employment_type_id = $('#employment_type_id').val();
                        }
                    },
                  "bDestroy": true,
                    columnDefs: [ {
                        "targets": [4],
                        "orderable": false,
                        "searchable": false
                    } ],
                    "columns":[
                        {"data":"username"},
                        {"data":"full_name"},
                        {"data":"role"},
                        {"data":"email"},
                        {"data":"action"}
                    ]
                });

            $(document).on('change', '#location_id,#department_id,#role,#job_id,#employment_type_id',
            function() {
                users_table.ajax.reload();

            });
            $('#employee_code,#first_name,#surname').keyup(function() {
                users_table.ajax.reload();
            });


    });
    
    
</script>
@endsection