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

@section('content')
    @php $user = auth()->user(); @endphp

    <div class='content'>
        <x-content.header title="{{__('title.team')}}" subTitle="{{__('title.team_subtitle')}}">
            <x-slot:headerRight>
                <a class="btn-secondary-base" data-toggle="modal" data-target="#exportModal" href="javascript:;"><x-svg-icon icon="icon-plus" /> {{trans('menu.export')}}</a>
            </x-slot:headerRight>
        </x-content.header>


        <form id="dt-search-form" onsubmit="return false;">

            @if ($user->can('view deactivated profile employee'))
                <div class="w-full lg:w-max">
                    <div class="tabs overflow-x-scroll no-scrollbar">
                        <button class="tabs-btn-box activeStatus {{ $status == 'undefined' ? 'active' : '' }} min-w-[94px]"  data-val="all">{{__('forms.lbl_all')}}</button>
                        <button class="tabs-btn-box active activeStatus {{ $status == 1 ? 'active' : '' }} min-w-[94px]" data-val="1">{{__('forms.lbl_active')}}</button>
                        <button class="tabs-btn-box activeStatus {{ $status == '0' ? 'active' : '' }} min-w-[94px]" data-val="0">{{__('forms.lbl_inactive')}}</button>
                    </div>
                </div>
            @endif


            <div class="mt-5 flex flex-wrap gap-4 mb-3">

                <div class="search-bar w-full lg:w-auto lg:max-h-10">
                    <input type="text" id="search" class="form-input search-input filter-search w-full lg:w-[320px]"
                        name="query"
                        value="{{$term??''}}"
                        placeholder="{{ __('forms.lbl_search') }} ..."
                    />
                    <x-svg-icon icon="icon-search" />
                </div>

                <div class="w-full lg:w-auto" wire:ignore>
                    <div class="multi-select-dropdown">
                        <div class="multi-select-box text-sm-regular">{{__('forms.filter_by_location')}}</div>
                        <div class="multi-select-options-content !z-[200]" data-name="location">
                            <div class="search-bar w-full p-2">
                                <input type="text" data-multisearch="1" class="form-input w-full multisearch"
                                    name="query"
                                    placeholder="{{ __('forms.lbl_search') }} ..."
                                />
                                <x-svg-icon icon="icon-search" />
                            </div>

                            @foreach ($locations as $key => $value)
                                <div class="multi-select-option" >
                                    <div class="flex gap-2">
                                        <input class="location" name="location[]"
                                            {{ in_array($value->id , $location_id) ?  "checked" : ""  }}
                                            type="checkbox" value="{{$value->id}}">
                                        <span>{{$value->name}}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-custom-grey-500">
                            <x-svg-icon icon="icon-chevron-down" width="20" height="20" />
                        </div>
                    </div>
                </div>

                <div class="relative inline-block text-left w-full lg:w-1/5" wire:ignore>
                    <div class="multi-select-dropdown">
                        <div class="multi-select-box text-sm-regular">{{__('forms.filter_by_department')}}</div>
                        <div class="multi-select-options-content !z-[200]"  data-name="department">
                            <div class="search-bar w-full p-2">
                                <input type="text" data-multisearch="1" class="form-input w-full multisearch"
                                    name="query"
                                    placeholder="{{ __('forms.lbl_search') }} ..."
                                />
                                <x-svg-icon icon="icon-search" />
                            </div>

                            @foreach ($departments as $key => $value)
                                <div class="multi-select-option">
                                    <div class="flex gap-2">
                                        <input class="department"
                                            {{ in_array($value->id , $department_id) ?  "checked" : ""  }}
                                            name="department[]" type="checkbox" value="{{$value->id}}">
                                        <span>{{$value->name}}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-custom-grey-500">
                            <x-svg-icon icon="icon-chevron-down" width="20" height="20" />
                        </div>
                    </div>
                </div>


                <div class="relative inline-block text-left w-full lg:w-1/5" wire:ignore>
                    <div class="multi-select-dropdown">
                        <div class="multi-select-box text-sm-regular">{{__('forms.filter_by_postion')}}</div>
                        <div class="multi-select-options-content !z-[200]"  data-name="position">
                            <div class="search-bar w-full p-2">
                                <input type="text" data-multisearch="1" class="form-input w-full multisearch"
                                    name="query"
                                    placeholder="{{ __('forms.lbl_search') }} ..."
                                />
                                <x-svg-icon icon="icon-search" />
                            </div>

                            @foreach ($positions as $key => $value)
                                <div class="multi-select-option">
                                    <div class="flex gap-2">
                                        <input class="position"
                                            {{ in_array($value->id , $position_id) ?  "checked" : ""  }}
                                            name="position[]" type="checkbox" value="{{$value->id}}">
                                        <span>{{$value->name}}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-custom-grey-500">
                            <x-svg-icon icon="icon-chevron-down" width="20" height="20" />
                        </div>
                    </div>
                </div>

                <div class="w-full lg:w-auto self-center grow">
                    <div class="flex justify-end lg:w-auto items-center gap-0">
                        <x-svg-icon class="cursor-pointer gridView px-2 py-2 text-sm text-sm-regular text-custom-grey-700 border border-gray-200 rounded-s-sm" icon="icon-grid" width="16" height="16" />
                        <x-svg-icon class="cursor-pointer px-2 py-2 text-sm text-sm-regular text-custom-grey-700 bg-custom-grey-300 border border-gray-300 rounded-e-sm" icon="icon-list" width="16" height="16" />
                    </div>
                </div>
            </div>

            <div class="filter-tags-selection flex items-center gap-2  bg-gray-50 rounded-lg p-4 overflow-x-scroll no-scrollbar hidden">
            </div>
        </form>

        <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
            <thead>
                <tr>
                    <th>{{trans("tables.name_title")}}</th>
                    {{-- <th>{{trans("tables.emp_id_title")}}</th> --}}
                    {{-- <th>{{trans("tables.joining_date_title")}}</th>
                    <th>{{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>

    @php
        $users = App\User::where('status', 1)->get(['id', 'name', 'display_name'])->sortBy('display_name');
    @endphp
    <livewire:emails::livewire.email-modal :modalId="'modal-email'" :users="$users" />
    </div>

    @include('layouts.partials.excelModal')
@endsection

@section('footer-script')
    <script src="{{ asset('js/jquery-file-upload.js') }}"></script>
    <script type="text/javascript">
        PDDataTable({
            url: "{{ route('team-members.list') }}",
            searching : false,
            columns:[
                { data: 'name', name: 'name', className:"text-center text-md-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: 'departments', orderable : false, className:"text-center"},
                // { data: 'status', name: 'status', orderable : false, className:"text-center"},
                { data: 'action', name: 'action', className:"text-right", orderable: false, searchable : false }
            ],
            order : [0, '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 = 1;
				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', '.gridView', function(e) {

                var status = $('.activeStatus.active').attr('data-val');

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

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

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

				var term = $('#search').val();
                if (status == undefined) {
                    status = '';
                }

				window.location.href = "{{ url('/team-members')}}"+'?location='+location+ '&position='+position+ '&department='+department+ '&term='+term+ '&status='+status;
			});
		});
    </script>

@stop