@extends('layouts/contentLayoutMaster')

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

@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="holders-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.Holders.Column.Code') }}</th>
                            <th>{{ __('locale.Table.Holders.Column.Name') }}</th>
                            <th>{{ __('locale.Table.Holders.Column.Group') }}</th>
                            <th>{{ __('locale.Table.Holders.Column.Company') }}</th>
                            <th>{{ __('locale.Table.Holders.Column.CPF') }}</th>
                            <th>{{ __('locale.Table.Holders.Column.Sex') }}</th>
                            <th>{{ __('locale.Table.Holders.Column.E-mail') }}</th>
                            <th>{{ __('locale.Table.Holders.Column.Status') }}</th>
                            <th>{{ __('locale.Table.Holders.Column.Actions') }}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </section>

    <div class="modal" id="modalBeneficiarioMulti" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Cadastrar Beneficiario</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_beneficiario_multi">
                    <form action="#" method="POST">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Cadastrar varios beneficiarios</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12 col-12">
                                        <div class="form-group">
                                            <label for="documents">Arquivo Beneficiarios</label>
                                            <input type="file" id="documents" name="documents" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 mt-2">
                                        <button type="button" class="btn btn-primary"
                                            onclick="javascript:salvarInformacoesBeneficiarioMulti()"
                                            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>
@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} group_id
         */
        const deleteHolder = async (group_id) => {

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

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

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

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

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

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

                    }
                });

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

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

            }

        }

        const cadastrarBeneficiarioMulti = (product_id) => {

            $("#modalBeneficiarioMulti form").get(0).reset();

            //if (window.data.holder[product_id]) carregarInformacoesBeneficiario(product_id);

            $("#product_id_beneficiario_multi").val(product_id);

            $("#modalBeneficiarioMulti").modal('show')

        }

        const salvarInformacoesBeneficiarioMulti = async () => {

            try {
                let formData = new FormData($("#modalBeneficiarioMulti form")[0]);
                
                let response = await axios.post("{{ route('api.holders.import') }}", formData, {
                    headers: {
                        "Authorization": "Bearer {{ session('Authorization') }}",
                        "Content-Type": "multipart/form-data"
                    }
                });

                // Lidar com a resposta do controlador Laravel
                console.log("Resposta do controlador Laravel:", response.data);

                // Exibir uma mensagem de sucesso para o usuário
                Swal.fire({
                    title: 'Uhuul!',
                    text: "{{ __('locale.Table.Holder.Column.AddSuccess') }}",
                    icon: "success"
                })
                .then((result) => {
                    if (result.isConfirmed) {
                        window.location.href =
                            "{{ route('dashboard.holders.index') }}";
                    }
                });
            } catch (error) {
                // Lidar com erros
                console.error('Erro ao enviar dados para o controlador Laravel:', error);
                
                // Exibir uma mensagem de erro para o usuário
                Swal.fire({
                    title: 'Erro!',
                    text: 'Houve um erro ao enviar os dados para o controlador Laravel. Por favor, tente novamente mais tarde.',
                    icon: 'error'
                });
            }
            $("#modalBeneficiarioMulti").modal('hide')
        }

        const cancelDeleteAction = () => {
            window.toastr.error('{{ __("locale.Table.Holders.Column.DeleteOperationCanceled") }}', '{{ __("locale.Table.Holders.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.holders.index') }}",
                        dataSrc: '',
                        beforeSend: function(request) {
                            request.setRequestHeader("Authorization",
                                "Bearer {{ session('Authorization') }}")
                        }
                    },
                    columns: [{
                            data: 'id'
                        },
                        {
                            data: 'name'
                        },
                        {
                            data: 'company.group.name'
                        },
                        {
                            data: 'company.name'
                        },
                        {
                            data: 'cpf'
                        },
                        {
                            data: 'sex'
                        },
                        {
                            data: 'email'
                        },
                        {
                            data: 'status'
                        },
                        {
                            data: null,
                        },
                    ],
                    columnDefs: [{
                            targets: 4,
                            render(data, type, full, meta) {
                                let 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: 5,
                            render(data, type, full, meta) {
                                
                                return (
                                    full.sex_name
                                )
                                //let sex = full['sex'];
                                // if (sex === 0) {
                                //     return '{{ __("locale.Table.Holders.Column.SexCisgenderWoman") }}';
                                // } else if (sex === 1) {
                                //     return '{{ __("locale.Table.Holders.Column.SexCisgenderMan") }}';
                                // } else if (sex === 2) {
                                //     return '{{ __("locale.Table.Holders.Column.SexTransgenderWoman") }}';
                                // } else if (sex === 3) {
                                //     return '{{ __("locale.Table.Holders.Column.SexTransgenderMan") }}';
                                // } else if (sex === 4) {
                                //     return '{{ __("locale.Table.Holders.Column.SexTranssexualWoman") }}';
                                // } else if (sex === 5) {
                                //     return '{{ __("locale.Table.Holders.Column.SexTranssexualMan") }}';
                                // } else if (sex === 6) {
                                //     return '{{ __("locale.Table.Holders.Column.SexAgender") }}';
                                // } else {
                                //     return '{{ __("locale.Table.Holders.Column.SexOthers") }}';
                                // }
                            }
                        },
                        {
                            targets: 7,
                            render: function(data, type, full, meta) {
                                
                                if (full.holder_status && full.holder_status.name) {
                                    return (
                                        '<span class="badge rounded-pill badge-light-success text-capitalized">' +
                                            full.holder_status.name +
                                        '</span>'
                                    );
                                } else {
                                    return '<span class="badge rounded-pill badge-light-secondary text-capitalized">Status não disponível</span>';    
                                }
                            }
                        },
                        {
                            targets: -1,
                            title: 'Actions',
                            orderable: false,
                            render: function(data, type, full, meta) {
                                
                                // return (
								// '<div>' +
								// 	'<div class=" d-flex">' +
								// 		`<a href="{{ route("dashboard.holders.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:deleteHolder(${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>'
							    // );
                                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="{{ route('dashboard.holders_documents.index', '') }}/${full.id}" class="dropdown-item">` +
                                    // feather.icons['folder'].toSvg({
                                    //     class: 'font-small-4 me-50'
                                    // }) +
                                    // '{{ __("locale.Table.Holders.Column.DocumentsButton") }}</a>' +
                                    // `<a href="{{ route('dashboard.dependents.index','') }}/${full.id}" class="dropdown-item">` +
                                    // feather.icons['users'].toSvg({
                                    //     class: 'font-small-4 me-50'
                                    // }) +
                                    // '{{ __("locale.Table.Holders.Column.DependentsButton") }}</a>' +
                                    '<a href="{{ route('dashboard.holders.index') }}/' + full.id + '" class="dropdown-item">' +
                                    feather.icons['file-text'].toSvg({
                                        class: 'font-small-4 me-50'
                                    }) +
                                    '{{ __("locale.Table.Holders.Column.EditButton") }}</a>' +
                                    '<a href="javascript:deleteHolder(' + full.id +
                                    ');" class="dropdown-item delete-record">' +
                                    feather.icons['trash-2'].toSvg({
                                        class: 'font-small-4 me-50'
                                    }) +
                                    '{{ __("locale.Table.Holders.Column.DeleteButton") }}</a>' +
                                    '</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-3 d-flex justify-content-center justify-content-lg-start" l>' +
                        '<"col-sm-12 col-lg-9 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.holders.create') }}";
                            },
                            init: function(api, node, config) {
                                $(node).removeClass('btn-secondary');
                            }
                        },
                        {
                            text: feather.icons['upload'].toSvg({
                                class: 'font-small-4 '
                            }),
                            className: 'add-new btn btn-primary me-2',
                            action: function() {
                                //window.location.href = "{{ route('dashboard.holders.create') }}";
                                javascript:cadastrarBeneficiarioMulti()
                            },
                            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'];
                                }
                            }),
                        }
                    },
                    // responsive: false,
                    // scrollX: true,
                    // scrollCollapse: true,
                    initComplete: function() {

                        window.tableList = this.api();

                        this.api()
                            .columns(2)
                            .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