@extends('layouts/contentLayoutMaster')

@section('title', __('locale.Teams'))

@section('vendor-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap5.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/rowGroup.bootstrap5.min.css')) }}">
@endsection

@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
@endsection

@section('content')
<!-- users list start -->
<section class="teams-list">
	<!-- list and filter start -->
	<div class="card">
		<div class="card-body border-bottom">
			<h4 class="card-title">{{ __('locale.List') }}</h4>
			<div class="row">
				<div class="col-md-4 company_type"></div>
				<div class="col-md-4 company_country"></div>
				<div class="col-md-4 company_status"></div>
			</div>
		</div>
		<div class="card-datatable table-responsive pt-0">
			<table class="user-list-table table">
				<thead class="table-light">
					<tr>
						<th>{{ __('locale.Table.team.Column.Registration') }}</th>
						<th>{{ __('locale.Table.team.Column.Name') }}</th>
						<th>{{ __('locale.Table.team.Column.CPF') }}</th>
						<th>{{ __('locale.Table.team.Column.Role') }}</th>
						<th>{{ __('locale.Table.team.Column.Regime') }}</th>
						<th>{{ __('locale.Table.team.Column.Parameter') }}</th>
						<th>{{ __('locale.Table.team.Column.Actions') }}</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	<div class="modal" id="modalAtribuirEmpresa" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Atribuir empresa</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{-- <input type="hidden" id="product_id_copay"> --}}
                    <form action="#">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <input type="hidden" id="employee_id">
                                    
                                    <div class="mb-1 col-md-12">
										<label class="form-label" for="company_id">Tipo de solicitação</label>
										<select name="company_id" id="company_id" class="select2" required multiple>
											@if ($companies)
                                                    @foreach ($companies as $company)
                                                        <option value="{{ $company->id }}">{{ $company->name }}</option>
                                                    @endforeach
                                                @endif
										</select>
									</div>
                                </div>
                                    <div class="col-md-12 mt-2">
                                        <button type="button" class="btn btn-primary"
                                            onclick="javascript:salvarAtribuirEmpresa()"
                                            data-bs-dismiss="modal">Salvar</button>
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Fechar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
	<!-- list and filter end -->
</section>
<!-- users list ends -->
@endsection

@section('vendor-script')
{{-- Vendor js files --}}
<script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/jszip.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/cleave/cleave.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/cleave/addons/cleave-phone.us.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/moment.min.js')) }}"></script>
@endsection

@section('page-script')

<script>
	/**
	 * @param {number} employee_id
	 * @return {Promise<boolean>}
	 */
	const AtribuirEmpresa = async (id) => {

		$("#modalAtribuirEmpresa").modal('show');
	    $("#modalAtribuirEmpresa #employee_id").val(id);
		
		try {
			let createUrl = `{{ route('api.employee-by-functions.find', '') }}/${id}`;

			let response = await axios.get(createUrl, {
				headers: {
					"Content-Type": "application/json",
					"Authorization": `Bearer {{ session('Authorization') }}`
				}
			});

			let companies = response.data;

			let companyIds = companies.map(company => company.company_id);

			$('#company_id').select2();

			$("#modalAtribuirEmpresa #company_id").val(companyIds).trigger('change');
			//$("#modalAtribuirEmpresa #company_id").val(companies.company_id).trigger('change');

		} catch (error) {
			console.error(error);
			// Tratar o erro aqui
		}



	}

	const salvarAtribuirEmpresa = async  () => {
    
		let company_id = $("#modalAtribuirEmpresa #company_id").val();
		let employee_id = $("#modalAtribuirEmpresa #employee_id").val();

		let json = {
			employee_id: employee_id,
			company_id: company_id,
		};

		if (Object.keys(json).length > 0) {
			try {
				console.log(json)
				let createUrl = `{{ route('api.employee-by-functions.store') }}`;

				response = await axios.post(createUrl, json, {
					headers: {
						"Content-Type": "application/json",
						"Authorization": `Bearer {{ session('Authorization') }}`
					}
				});
				
											
				//Exibir mensagem de sucesso
				Swal.fire({
					title: 'Uhuul!',
					text: "{{ __('locale.Table.team.Column.AddSuccess') }}",
					icon: "success"
				}).then((result) => {
					if (result.isConfirmed) {
						
						window.location.href = window.location.href;
					}
				});
				} catch (error) {
					
					// Tratar erros da API
					if (error.response) {
						const {
							status,
							data
						} = error.response;
						if (status === 400 || status === 422) {
							Swal.fire({
								title: 'Ops!',
								text: data.message,
								icon: "error",
								cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
							});
						} else if (status === 404) {
							Swal.fire({
								title: 'Ops!',
								text: "{{ __('locale.Table.Contract.Column.RequestedNotFound') }}",
								icon: "error",
								cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
							});
						} else {
							Swal.fire({
								title: 'Ops!',
								text: "{{ __('locale.Table.Contract.Column.RegisterError') }}",
								icon: "error",
								cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
							});
						}
					} else {
						console.error('Erro ao chamar API:', error);
					}
				}
			}
			$("#modalAtribuirEmpresa").modal('hide')
	}

	const deleteEmployee = async (employee_id) => {

		if (typeof employee_id !== 'number') {
			if (window.Swal !== undefined) return Swal.fire({
				title: 'Ops!',
				text: "{{ __('locale.Pages.team.Alert.DeleteEmployee') }}",
				icon: "{{ __('locale.Pages.team.Icon.Error') }}"
			});
			return window.alert("{{ __('locale.Pages.team.Alert.DeleteEmployee') }}");
		}

		let confirmed = false;

		if (window.Swal !== undefined) {
			swal = await Swal.fire({
				title: "{{ __('locale.Pages.team.Alert.Attention') }}",
				text: "{{ __('locale.Pages.team.Alert.Question') }}",
				icon: "{{ __('locale.Pages.team.Icon.Question') }}",
				showConfirmButton: true,
				showCancelButton: true,
				confirmButtonText: "{{ __('locale.Pages.team.Button.Delete') }}",
				cancelButtonText: "{{ __('locale.Pages.team.Button.Cancel') }}"
			});

			if (swal.isConfirmed) confirmed = true;

		} else {
		 confirmed = window.confirm("{{ __('locale.Pages.team.Alert.Question') }}");
		}


		if (!confirmed) return false;

		let {
			data: json,
			...response
		} = await axios({
				method: `delete`,
				url: `{{ route('api.employees.delete','') }}/${employee_id}`,
				headers: {
					"Authorization": "Bearer {{ session('Authorization') }}"
				}
			})
			.catch((e) => {

				let response = e.response;

				@if(env('APP_DEBUG'))
				console.warn(e)
				@endif

				if (response.status === 400 || response.status === 422) {
					Swal.fire({
						title: 'Ops!',
						text: response.data.message,
						icon: "{{ __('locale.Pages.team.Icon.Error') }}",
						cancelButtonText: "{{ __('locale.Pages.team.Botton.ToClose') }}"
					})
				} else if (response.status === 404) {
					Swal.fire({
						title: 'Ops!',
						text: "{{ __('locale.Pages.team.Alert.Required') }}",
						icon: "{{ __('locale.Pages.team.Icon.Error') }}",
						cancelButtonText: "{{ __('locale.Pages.team.Botton.ToClose') }}"
					})
				} else {

					Swal.fire({
						title: 'Ops!',
						text: "{{ __('locale.Pages.team.Alert.RegistrationError')}}",
						icon: "{{ __('locale.Pages.team.Icon.Error') }}",
						cancelButtonText: "{{ __('locale.Pages.team.Botton.ToClose') }}"
					})

				}

				return false;

			});

		if (response.status === 200 || response.status === 204) {
			swal = await window.Swal.fire({
				title: 'Uhuul!',
				text: "{{ __('locale.Pages.team.Alert.ExcludedEmployee') }}",
				icon: "{{ __('locale.Pages.team.Icon.Success') }}"
			});

			if (swal.isConfirmed) {
				dtUserTable.ajax.reload()
			}
		}

	}

	var dtUserTable = $('.user-list-table'),
		newUserSidebar = $('.new-user-modal'),
		newUserForm = $('.add-new-user'),
		select = $('.select2'),
		dtContact = $('.dt-contact'),
		statusObj = {
			1: {
				title: "{{ __('locale.Active') }}",
				class: 'badge-light-success '
			},
			0: {
				title: "{{__('locale.Inactive')}}",
				class: 'badge-light-secondary'
			}
		};

	$(function() {
		'use strict';

		select.each(function() {
			var $this = $(this);
			$this.wrap('<div class="position-relative"></div>');
			$this.select2({
				dropdownAutoWidth: true,
				width: '100%',
				dropdownParent: $this.parent()
			});
		});

		if (dtUserTable.length) {

			let regimeRowDefs = {
				1: {
					title: "CLT",
					class: 'badge-light-success '
				},
				2: {
					title: "PJ",
					class: 'badge-light-secondary'
				}
			}

			dtUserTable = dtUserTable.DataTable({
				ajax: {
					url: "{{ route('api.employees.index') }}",
					dataSrc: '',
					beforeSend(request) {
						request.setRequestHeader("Authorization",
							"Bearer {{ session('Authorization') }}")
					}
				},
				columns: [{
						data: 'registration'
					},
					{
						data: 'name'
					},
					{
						data: 'cpf'
					},
					{
						data: 'role'
					},
					{
						data: 'regime'
					},
					{
						data: 'parameter.name'
					},
					{
						data: null
					},
				],
				columnDefs: [{
						targets: 2,
						render: function(data, type, full, meta) {
							console.log(full)
							var cpf = full['cpf'];
							if (cpf.search(/\./) === -1) {
								cpf = cpf.replace(/^(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4")
							}
							return (cpf);
						}
					},
					{
						targets: 4,
						render: function(data, type, full, meta) {
							var regime = full['regime'];
							return (
								'<span class="badge rounded-pill ' +
								regimeRowDefs[regime].class +
								'" text-capitalized>' +
								regimeRowDefs[regime].title +
								'</span>'
							);
						}
					},
					// {
					// 	targets: 5,
					// 	title: "{{ __('locale.Table.team.Column.Broker') }}",
					// 	render: function(data, type, full, meta) {
					// 		var broker = full['broker'];
							
					// 		//return (broker.name);
					// 	}
					// },
					{
						targets: -1,
						title: "{{ __('locale.Table.team.Column.Actions') }}",
						orderable: false,
						render: function(data, type, full, meta) {

							const urlShow = `{{ route("dashboard.teams.show", ":id") }}`;
                            const urlShowWithId = urlShow.replace(':id', full.id);
							
							return (
								'<div class="btn-group">' +
								'<a class="btn btn-sm dropdown-toggle hide-arrow" data-bs-toggle="dropdown">' +
								feather.icons['more-vertical'].toSvg({
									class: 'font-small-4'
								}) +
								'</a>' +
								'<div class="dropdown-menu dropdown-menu-end">' +
								`<a href="${urlShowWithId}" class="dropdown-item">` +
								feather.icons['file-text'].toSvg({
									class: 'font-small-4 me-50'
								}) +
								'{{ __("locale.Table.parameter.Column.EditButton") }}</a>' +
								`<a href="javascript:deleteEmployee(${full.id});" class="dropdown-item delete-record">` +
								feather.icons['trash-2'].toSvg({
									class: 'font-small-4 me-50'
								}) +
								'{{ __("locale.Table.parameter.Column.DeleteButton") }}</a></div>' +
								'</div>' +
								'</div>'
								// '<div>' +
								// 	'<div class=" d-flex">' +
								// 		`<a href="{{ route("dashboard.teams.index") }}/${full.id}" style="padding:0.4rem 0.6rem;" class="btn btn-primary me-50">` +
								// 		feather.icons['file-text'].toSvg({
								// 			class: 'font-small-4 text-white'
								// 		}) +
								// 		'</a>' +
								// 		`<a href="javascript:deleteEmployee(${full.id});" style="padding:0.4rem 0.6rem;" class="delete-record btn btn-secondary">` +
								// 		feather.icons['trash-2'].toSvg({
								// 			class: 'font-small-4'
								// 		}) +
								// 		'</a>' +
								// 		'</div>' +
								// 	'</div>' +
								// '</div>'
							);
						}
					}
				],
				order: [
					[0, 'desc']
				],
				dom: '<"d-flex justify-content-between align-items-center header-actions mx-2 row mt-75"' +
					'<"col-sm-12 col-lg-4 d-flex justify-content-center justify-content-lg-start" l>' +
					'<"col-sm-12 col-lg-8 ps-xl-75 ps-0"<"dt-action-buttons d-flex align-items-center justify-content-center justify-content-lg-end flex-lg-nowrap flex-wrap"<"me-1"f>B>>' +
					'>t' +
					'<"d-flex justify-content-between mx-2 row mb-1"' +
					'<"col-sm-12 col-md-6"i>' +
					'<"col-sm-12 col-md-6"p>' +
					'>',
				language: {
					sLengthMenu: "{{ __('locale.Listing') }} _MENU_",
					search: "{{ __('locale.Search') }}",
					searchPlaceholder: "{{ __('locale.Search') }}..",
					paginate: {
						previous: '&nbsp;',
						next: '&nbsp;'
					},
					info: "{{ __('locale.ListingInfo') }}",
					infoEmpty: "{{ __('locale.ListingEmpty') }}",
					zeroRecords: "{{ __('locale.ZeroRecords') }}"

				},
				buttons: [{
						text: "+ {{ __('locale.Add') }}",
						className: 'add-new btn btn-primary me-2',
						action: function() {
							window.location.href = '{{ route("dashboard.teams.create") }}';
						},
						init: function(api, node, config) {
							$(node).removeClass('btn-secondary');
						}
					},
					{
						extend: 'collection',
						className: 'btn btn-outline-secondary dropdown-toggle me-2',
						text: feather.icons['external-link'].toSvg({
							class: 'font-small-4 me-50'
						}) + "{{__('locale.Export')}}",
						buttons: [{
								extend: 'print',
								text: feather.icons['printer'].toSvg({
									class: 'font-small-4 me-50'
								}) + 'Print',
								className: 'dropdown-item',
								exportOptions: {
									columns: [0, 1, 2, 3, 4, 5, 6, 7]
								}
							},
							{
								extend: 'csv',
								text: feather.icons['file-text'].toSvg({
									class: 'font-small-4 me-50'
								}) + 'Csv',
								className: 'dropdown-item',
								exportOptions: {
									columns: [0, 1, 2, 3, 4, 5, 6, 7]
								}
							},
							{
								extend: 'excel',
								text: feather.icons['file'].toSvg({
									class: 'font-small-4 me-50'
								}) + 'Excel',
								className: 'dropdown-item',
								exportOptions: {
									columns: [0, 1, 2, 3, 4, 5, 6, 7]
								}
							},
							{
								extend: 'pdf',
								text: feather.icons['clipboard'].toSvg({
									class: 'font-small-4 me-50'
								}) + 'Pdf',
								className: 'dropdown-item',
								exportOptions: {
									columns: [0, 1, 2, 3, 4, 5, 6, 7]
								}
							},
							{
								extend: 'copy',
								text: feather.icons['copy'].toSvg({
									class: 'font-small-4 me-50'
								}) + 'Copy',
								className: 'dropdown-item',
								exportOptions: {
									columns: [1, 2, 3, 4, 5]
								}
							}
						],
						init: function(api, node, config) {
							$(node).removeClass('btn-secondary');
							$(node).parent().removeClass('btn-group');
							setTimeout(function() {
								$(node).closest('.dt-buttons').removeClass('btn-group').addClass('d-inline-flex mt-50');
							}, 50);
						}
					}
				],
				responsive: {
					details: {
						display: $.fn.dataTable.Responsive.display.modal({
							header: function(row) {
								var data = row.data();
								return 'Details of ' + data['name'];
							}
						}),
					}
				},
				// responsive: false,
				// scrollX: true,
				// scrollCollapse: true,
				initComplete: function() {
					window.tableList = this.api();
					/*
                        this.api()
                            .columns(3)
                            .every(function () {

                                var column = this;
                                var label = $(`<label class="form-label" for="FilterTransaction">{{ __('locale.Type') }}</label>`).appendTo('.company_type');
                                var select = $(
                                    `<select id="FilterTransaction" class="form-select mb-md-0 mb-2xx"><option value=""> {{ __('locale.Type') }} </option></select>`
                                )
                                    .appendTo('.company_type')
                                    .on('change', function () {
                                        var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                        column.search(val ? '^' + val + '$' : '', true, false).draw();
                                    });



                                column
                                    .data()
                                    .unique()
                                    .sort()
                                    .each(function (d, j) {
                                        select.append(
                                            '<option value="' +
                                            d +
                                            '" class="text-capitalize">' +
                                            d +
                                            '</option>'
                                        );
                                    });
                            });

                        this.api()
                            .columns(5)
                            .every(function () {

                                var column = this;
                                var label = $(`<label class="form-label" for="FilterTransaction">{{ __('locale.Country') }}</label>`).appendTo('.company_country');
                                var select = $(
                                    `<select id="FilterTransaction" class="form-select mb-md-0 mb-2xx"><option value=""> {{ __('locale.SelectCountry') }} </option></select>`
                                )
                                    .appendTo('.company_country')
                                    .on('change', function () {
                                        var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                        column.search(val ? '^' + val + '$' : '', true, false).draw();
                                    });



                                column
                                    .data()
                                    .unique()
                                    .sort()
                                    .each(function (d, j) {
                                        select.append(
                                            '<option value="' +
                                            d +
                                            '" class="text-capitalize">' +
                                            d +
                                            '</option>'
                                        );
                                    });
                            });

                        this.api()
                            .columins(7)
                            .every(function () {

                                var column = this;
                                var label = $(`<label class="form-label" for="FilterTransaction">Status</label>`).appendTo('.company_status');
                                var select = $(
                                    `<select id="FilterTransaction" class="form-select mb-md-0 mb-2xx"><option value=""> {{ __('locale.SelectStatus') }} </option></select>`
                                )
                                    .appendTo('.company_status')
                                    .on('change', function () {
                                        var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                        column.search(val ? '^' + val + '$' : '', true, false).draw();
                                    });



                                column
                                    .data()
                                    .unique()
                                    .sort()
                                    .each(function (d, j) {
                                        select.append(
                                            '<option value="' +
                                            statusObj[d].title +
                                            '" class="text-capitalize">' +
                                            statusObj[d].title +
                                            '</option>'
                                        );
                                    });
                            });
						*/
				}
			});
		}

	});
</script>

@endsection