@extends('layouts/contentLayoutMaster')

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

@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')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection

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

@section('content')
<!-- users list start -->
<section class="operator_contacts-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.Operator.Contact.Column.Code') }}</th>
						<th>{{ __('locale.Table.Operator.Contact.Column.Name') }}</th>
						<th>{{ __('locale.Table.Operator.Contact.Column.Phone') }}</th>
						<th>{{ __('locale.Table.Operator.Contact.Column.Phonetype') }}</th>
						<th>{{ __('locale.Table.Operator.Contact.Column.E-mail') }}</th>
						<th>{{ __('locale.Table.Operator.Contact.Column.Actions') }}</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</section>
@endsection

@section('vendor-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>
<script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>

@endsection


@section('page-script')

<script>
	/**
	 * @param {number} operator_id
	 */
	const deleteOperatorContacts = async (operator_contact_id) => {

		if (typeof operator_contact_id !== 'number') {
			if (window.Swal !== undefined) {
				return window.Swal.fire({
					title: 'Ops!',
					text: "{{ __('locale.Table.Operator.Contact.Column.DeleteInt') }}",
					icon: "error"
				})
			}
			return window.alert("{{ __('locale.Table.Operator.Contact.Column.DeleteInt') }}");
		}

		if (window.Swal === undefined) return window.alert('{{ __("locale.Table.Operator.Contact.Column.ModelSweetAlert2") }}');
		if (window.toastr === undefined) return window.alert('{{ __("locale.Table.Operator.Contact.Column.ModelSweetToastr") }}');

		let swal = await window.Swal.fire({
			title: "{{ __('locale.Table.Operator.Contact.Column.DeleteAttention') }}",
			text: "{{ __('locale.Table.Operator.Contact.Column.DeleteMessageDelete') }}",
			icon: "question",
			showCancelButton: true,
			cancelButtonText: "{{ __('locale.Table.Operator.Contact.Column.DeleteMessageCancel') }}",
			confirmButtonText: "{{ __('locale.Table.Operator.Contact.Column.DeleteMessage') }}"
		})

		if (!swal.isConfirmed) return cancelDeleteAction();

		let {
			data: json,
			...response
		} = await axios({
				url:`{{route('api.operators.contacts.delete','')}}/${operator_contact_id}`,
				method: 'delete',
				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:  "error",
						cancelButtonText: "{{ __('locale.Table.Operator.Contact.Column.Close') }}"
					})
				} else if (response.status === 404) {
					Swal.fire({
						title: 'Ops!',
						text: "{{ __('locale.Table.Operator.Contact.Column.Status404Error') }}",
						icon: "error",
						cancelButtonText: "{{ __('locale.Table.Operator.Contact.Column.Close') }}"
					})
				} else {

					Swal.fire({
						title: 'Ops!',
						text: "{{ __('locale.Table.Operator.Contact.Column.DeleteErrorForm') }}",
						icon: "error",
						cancelButtonText: "{{ __('locale.Table.Operator.Contact.Column.Close') }}"
					})

				}
			});

		if (response.status === 204) {
			swal = await window.Swal.fire({
				title: 'Uhuul!',
				text: "{{ __('locale.Table.Operator.Contact.Column.DeleteSuccess') }}",
				icon: "success"
			});

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

		}

	}

	const cancelDeleteAction = () => {
		window.toastr.error("{{ __('locale.Table.Operator.Contact.Column.DeleteOperationCanceled') }}", "{{ __('locale.Table.Operator.Contact.Column.DeleteAttention') }}", {
			positionClass: "toast-top-right",
			progressBar: true
		})
	}

	var dtUserTable = $('.user-list-table'),
		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';

		var assetPath = '../../../app-assets/',
			userView = 'app-user-view-account.html';

		assetPath = 'laravel' in window ? window.laravel.assetPath : assetPath;
		userView = assetPath + 'app/user/view/account';

		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) {
			dtUserTable = dtUserTable.DataTable({
				ajax: {
					url: `{{ route('api.operators.contacts',$operator->id) }}`,
					dataSrc: '',
					beforeSend: function(request) {
						request.setRequestHeader("Authorization",
							"Bearer {{ session('Authorization') }}")
					}
				},
				columns: [{
						data: 'id'
					},
					{
						data: 'name'
					},
					{
						data: 'phone'
					},
					{
						data: 'phone_type'
					},
					{
						data: 'email'
					},
					{
						data: null,
					},
				],
				columnDefs: [{
						targets: 2,
						render(data, type, full) {
							let phone = full.phone;
							if(full.phone_type == 1){
								phone = phone.replace(/(\d{2})(\d{4})(\d{4})/,"($1) $2-$3"); // Format -> (99) 9999-9999
							} else {
								phone = phone.replace(/(\d{2})(\d{1})(\d{4})(\d{4})/,"($1) $2 $3-$4"); // Format -> (99) 9 9999-9999
							}
							return phone;
						}
					},
					{
						targets: 3,
						render(data, type, full) {
							let phone_type = "{{ __('locale.Table.Operator.Contact.Column.PhonetypeCellPhone') }}";
							if(full.phone_type == 2) phone_type = "{{ __('locale.Table.Operator.Contact.Column.PhonetypeCommercial') }}"
							return phone_type;
						}
					},
					{
						targets: 4,
						render(data, type, full) {
							let email = full?.email;
							if(!email){
								email = `<span class="badge rounded-pill badge-light-warning"><b>Não informado</b></span>`
							}
							return email;
						}
					},
					{
						targets: -1,
						title: 'Actions',
						orderable: false,
						render: function(data, type, full, meta) {
							return (
								'<div>' +
									'<div class=" d-flex">' +
										`<a href="{{ route("dashboard.operator_contacts.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:deleteOperatorContacts(${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.operator_contacts.create', $operator->id) }}"
						},
						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['full_name'];
							}
						}),
					}
				},
				initComplete: function() {
					window.tableList = this.api();



				}
			});
		}

	});
</script>

@endsection