@extends('layouts.app')
@section('title', trans('title.users'))

@section('content')

    @php $user = request()->user(); @endphp
    <div class='content'>
        <x-content.header title="{{__('title.users')}}" subTitle="{{__('title.team_subtitle')}}" left_width="lg:w-1/3" right_width="lg:w-2/3">
            <x-slot:headerRight>
                @can('create', App\User::class)
                    <a href="{{url('users/create')}}" class="btn-secondary-base"><x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}</a>
                @endcan

                <a href="{{url('users/deleted-user-list')}}" class="btn-secondary-base"><i class="mdi mdi-library-books"></i>{{__('forms.deleted_user_list')}}</a>
                <a class="btn-secondary-base" data-toggle="modal" data-target="#exportModal" href="javascript:;"><i class="mdi mdi-file-pdf"></i> {{trans('menu.export')}}</a>

                <a class="btn-secondary-base" data-toggle="modal" data-target="#exportModalSendMail" href="javascript:;"><i class="mdi mdi-email-outline"></i> {{trans('menu.send_as_email')}}</a>
            </x-slot:headerRight>
        </x-content.header>


        @include('users.filter')

        <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
            <thead>
                <tr>
                    {{-- @if($user->can('create', App\User::class))
                        <th>
                            <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                        </th>
                    @endif --}}
                    <th>{{trans("tables.name_title")}}</th>
                    {{-- <th>{{trans("tables.emp_id_title")}}</th> --}}
                    <th class="min-w-[135px]">{{trans("tables.joining_date_title")}}</th>
                    <th class="min-w-[135px]">{{trans("tables.ending_date_title")}}</th>
                    <th>{{trans("tables.department_title")}}</th>
                    <th>{{trans("tables.status_title")}}</th>
                    @if($user->hasAnyPermission(['edit users', 'delete users']))
                        <th>{{trans("tables.action_title")}}</th>
                    @endif
                </tr>

            </thead>
        </table>

        @include('layouts.partials.excelModal')

        @include('layouts.partials.excelModalSendEmail')

    </div>

@endsection

@section('footer-script')

    <script type="text/javascript">

        PDDataTable({
            url: "{{ url('users') }}",
            searching : false,
            columns:[
                {{-- @if($user->can('create', App\User::class))
                     { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                 @endif --}}
                { data: 'name', name: 'name', className:"text-left"},
                // { data: 'profile.employee_id', name: 'profile.employee_id', className:"text-center"},
                { data: 'profile.start_date', name: 'profile.start_date', className:"text-center"},
                { data: 'profile.end_date', name: 'profile.end_date', className:"text-center"},
                { data: 'departments.name', name: 'departments.name', orderable : false, className:"text-center"},
                { data: 'status', name: 'status', orderable : false, className:"text-center"},
                @if($user->hasAnyPermission(['edit users', 'delete users']))
                    { data: 'action', name: 'action', orderable: false, searchable : false,  className: "text-right"}
                @endif
            ],
            order : [5, 'asc'],
            callbackFunc  : function( d ){
                 let term = $('input[name="query"]').val();

                if (term.endsWith(' ')) {
                    term = term.slice(0, -1) + '__';
                }

                d.term = term;

                d.status = $('#dt-search-form .tabs-btn-box.active').attr('data-val');

                d.location = $('input[name="location[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();

                d.deparment = $('input[name="department[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();

                d.position = $('input[name="position[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();
			}
        });

        $( document ).on( "multi_select_option_change", function( event, eventInfo ) {
             PDTable.draw();
        });

        $('body').on('click', '.tabs-btn-box', function () {
            // Reset all tabs and contents for the second set filter
            $(".tabs-btn-box").removeClass("active");

            // Set new active state for the clicked tab in the filter set
            $(this).addClass("active");

            PDTable.draw();
        });

        $(document).ready(function() {
			$('body').on('click', '.printOnPage', function(e) {
                var team = 0;
				var exportType = $(this).attr('data-name');
				var activeStatus = $('.activeStatus.active').attr('data-val');

                const location_id = $('input[name="location[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();

                const department_id = $('input[name="department[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();

                const position_id = $('input[name="position[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();

				var search = $('#search').val();
				var url = "{{route('users/excel')}}"+'?exportType='+exportType+ '&location_id='+location_id+ '&position_id='+position_id+ '&department_id='+department_id+ '&search='+search+ '&activeStatus='+activeStatus+ '&team='+team;
				var myWindow = window.open(url, "");
			});

            $('body').on('click', '.printOnPageSendMail', function(e) {

                var team = 0;
				var exportType = $(this).attr('data-name');
				var activeStatus = $('.activeStatus.active').attr('data-val');

                const location_id = $('input[name="location[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();

                const department_id = $('input[name="department[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();

                const position_id = $('input[name="position[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();

				var role_id = $('#role').val();
				var search = $('#search').val();
				var url = "{{route('users/excelSendMail')}}"+'?exportType='+exportType+ '&location_id='+location_id+ '&position_id='+position_id+ '&department_id='+department_id+ '&search='+search+ '&activeStatus='+activeStatus+ '&team='+team+ '&role_id='+role_id;
				var myWindow = window.open(url, "");
			});
		});
    </script>
@stop