@extends('layouts/contentLayoutMaster')

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

@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="companies-list">
        <!-- list and filter start -->
        <div class="card">
            <div class="card-body border-bottom">
                <h4 class="card-title">{{ __('locale.Report') }}</h4>
                {{-- <div class="row">
                    <div class="col-md-4 registration"></div>
                    <div class="col-md-4 id"></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.Reports.Column.Groups') }}</th>
                            <th>{{ __('locale.Table.Reports.Column.Company') }}</th>
                            <th>{{ __('locale.Table.Reports.Column.Beneficiary') }}</th>
                            <th>{{ __('locale.Table.Reports.Column.Registration') }}</th>
                            <th>{{ __('locale.Table.Reports.Column.Beneficiary code') }}</th>
                            <th>{{ __('locale.Table.Reports.Column.CPF') }}</th>
                            <th>{{ __('locale.Table.Reports.Column.Request') }}</th>
                            <th>{{ __('locale.Table.Reports.Column.Operator') }}</th>
                            <th>{{ __('locale.Table.Reports.Column.Product') }}</th>
                            <th>{{ __('locale.Table.Reports.Column.Request Date') }}</th>
                            <th>{{ __('locale.Table.Reports.Column.Closing Date') }}</th>
                            <th>{{ __('locale.Table.Reports.Column.Observations') }}</th>
                            <th>{{ __('locale.Table.Reports.Column.Request status') }}</th>
                            <th style="display: none;">mes</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- list and filter end -->
    </section>
    <!-- users list ends -->
@endsection

@section('vendor-script')
    {{-- Vendor js files --}}
    <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>
@endsection

@section('page-script')

    <script>

        var dtUserTable;

        $(function() {

            'use strict';

            dtUserTable = $('.user-list-table');

            let select = $('.select2');

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

            function transformData(data) {
                const monthNames = [
                    'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
                    'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
                ];

                let transformedData = [];

                data.forEach(row => {
                    // Extraí o mês do campo `created_at` e converta para o nome do mês
                    let monthName = '';
                    if (row.created_at) {
                        const date = new Date(row.created_at);
                        const month = date.getMonth(); // Mês baseado em zero (0 para Janeiro, 1 para Fevereiro, etc.)
                        monthName = monthNames[month];
                    }

                    if (row.holders && row.holders.length > 0) {
                        row.holders.forEach(holder => {
                            let newRow = { 
                                ...row, 
                                holder_name: holder.name,
                                holder_registration: holder.registration,
                                holder_cpf: holder.cpf,
                                holder_id: holder.id,
                                Observations: 'teste',
                                month_name: monthName // Adiciona o nome do mês
                            };
                            transformedData.push(newRow);
                        });
                    } else {
                        let newRow = {
                            ...row,
                            Observations: 'teste',
                            month_name: monthName // Adiciona o nome do mês
                        };
                        transformedData.push(newRow);
                    }
                });

                return transformedData;
            }


            if (dtUserTable.length) {
                dtUserTable = dtUserTable.DataTable({
                    ajax: {
                        url: "{{ route('api.movements-reports.index') }}",
                        dataSrc: function(json) {
                            return transformData(json);
                        },
                        beforeSend: function(request) {
                            request.setRequestHeader("Authorization",
                                "Bearer {{ session('Authorization') }}")
                        }
                    },
                    columns: [
                        {
                            data: 'company.group.name'
                        },
                        {
                            data: 'company.name',
                        },
                        {
                            data: 'holder_name'
                        },
                        {
                            data: 'holder_registration'
                        },
                        {
                            data: 'holder_id'
                        },
                        {
                            data: 'holder_cpf'
                        },
                        {
                            data: 'supplier_type_request.type_request'
                        },
                        {
                            data: 'product.supplier.name'
                        },
                        {
                            data: 'product.name'
                        },
                        {
                            data: 'created_at'
                        },
                        {
                            data: 'closing_date'
                        },
                        {
                            data: 'Observations'
                        },
                        {
                            data: 'status'
                        },
                        {
                            data: 'month_name'
                        },
                        
                    ],
                    columnDefs: [
                        // {
                        //     targets: 0,
                        //     render(data, type, full, meta) {
                                
                               
                        //        console.log(full);
                       
                                
                        //     }
                        // },
                        {
                            targets: 13,
                            visible: false,
                            render(data, type, full, meta) {
                                
                               return full.month_name                    
                                
                            }
                        },
                        {
                            targets: 9,
                            render(data, type, full, meta) {
                                
                               
                                if (type === 'display') {
                                    var date = new Date(data);
                                    var day = String(date.getDate()).padStart(2, '0');
                                    var month = String(date.getMonth() + 1).padStart(2, '0');
                                    var year = date.getFullYear();
                                    return day + '/' + month + '/' + year;
                                }
                                return data;
                       
                                
                            }
                        },
                        {
                            targets: 10,
                            render(data, type, full, meta) {
                                
                               
                                if (type === 'display') {
                                    var date = new Date(data);
                                    var day = String(date.getDate()).padStart(2, '0');
                                    var month = String(date.getMonth() + 1).padStart(2, '0');
                                    var year = date.getFullYear();
                                    return day + '/' + month + '/' + year;
                                }
                                return data;
                       
                                
                            }
                        },

                        {
                            targets: 12, 
                            render(data, type, full, meta) {
                                
                                const statusMap = {
                                    1: 'Ativo',
                                    2: 'Encerrado',
                                    3: 'Com pendências solicitante',
                                    4: 'Com pendências operadora'
                                };

                                return statusMap[data] || 'Status desconhecido';
                            }
                        }

                    ],
                    
                    order: [
                        [0, 'desc']
                    ],
                    pageLength: 50,
                    dom: '<"d-flex justify-content-between align-items-center header-actions mx-2 row mt-75"' +
                        '<"col-sm-12 col-lg-6 d-flex justify-content-center justify-content-lg-start" l>' +
                        '<"col-sm-12 col-lg-6 ps-xl-75 ps-0"<"dt-action-buttons d-flex align-items-center justify-content-center justify-content-lg-between flex-lg-nowrap flex-wrap"<"status d-inline-flex mt-50"><"movement d-inline-flex mt-50">B>>' +
                        '>t' +
                        '<"d-flex justify-content-between align-items-center header-actions mx-2 my-75 flex-wrap"' +
                        '<"broker d-inline-flex mt-50"><"product d-inline-flex mt-50"><"group d-inline-flex mt-50"><"company d-inline-flex mt-50"><"registration d-inline-flex mt-50"><"beneficiary d-inline-flex mt-50"><"id d-inline-flex mt-50"><"cpf d-inline-flex mt-50">' +
                        '>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: [
                        {
                            extend: 'collection',
                            className: 'btn btn-outline-secondary dropdown-toggle me-2',
                            text: feather.icons['external-link'].toSvg({
                                class: 'font-small-4 me-50'
                            }),
                            buttons: [
                                {
                                    extend: 'csv',
                                    text: feather.icons['file-text'].toSvg({
                                        class: 'font-small-4 me-50'
                                    }) + 'Csv',
                                    className: 'dropdown-item',
                                    filename: 'Movimentações',
                                    exportOptions: {
                                        columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                                    }
                                },
                                {
                                    extend: 'pdf',
                                    text: feather.icons['clipboard'].toSvg({
                                        class: 'font-small-4 me-50'
                                    }) + 'Pdf',
                                    className: 'dropdown-item',
                                    filename: 'Movimentações',
                                    orientation: 'landscape',
                                    pageSize: 'A4',
                                    title: 'Movimentações',
                                    exportOptions: {
                                        columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                                    }
                                },
                            ],
                            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(0)
                        .every(function() {
                            var column = this;
                            
                            var select = $(
                                    `<select id="FilterTransaction" class="form-select mb-md-0 mb-2xx"><option value=""> Grupos </option></select>`
                                )
                                .appendTo('.group')
                                .on('change', function() {
                                    var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                    column.search(val ? '^' + val + '$' : '', true, false).draw();
                                });

                            var groups = [];

                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function(d, j) {
                                    if (d) {
                                        groups.push(d);
                                    }
                                });


                            if (groups.length > 0) {
                                groups = [...new Set(groups)];

                                groups.forEach(function(group) {
                                    select.append(
                                        '<option value="' +
                                        group +
                                        '" class="text-capitalize">' +
                                        group + 
                                        '</option>'
                                    );
                                });
                            }
                        });

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

                            var companies = [];

                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function(d, j) {
                                    if (d) {
                                        companies.push(d);
                                    }
                                });


                            if (companies.length > 0) {
                                companies = [...new Set(companies)];

                                companies.forEach(function(company) {
                                    select.append(
                                        '<option value="' +
                                        company +
                                        '" class="text-capitalize">' +
                                        company + 
                                        '</option>'
                                    );
                                });
                            }
                        });

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

                            var products = [];

                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function(d, j) {
                                    if (d) {
                                        products.push(d);
                                    }
                                });


                            if (products.length > 0) {
                                products = [...new Set(products)];

                                products.forEach(function(product) {
                                    select.append(
                                        '<option value="' +
                                        product +
                                        '" class="text-capitalize">' +
                                        product + 
                                        '</option>'
                                    );
                                });
                            }
                        });

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

                            var brokers = [];

                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function(d, j) {
                                    if (d) {
                                        brokers.push(d);
                                        console.log(d);
                                    }
                                });


                            if (brokers.length > 0) {
                                brokers = [...new Set(brokers)];

                                brokers.forEach(function(broker) {
                                    select.append(
                                        '<option value="' +
                                        broker +
                                        '" class="text-capitalize">' +
                                        broker + 
                                        '</option>'
                                    );
                                });
                            }
                        });

                        this.api()
                        .columns(2)
                        .every(function() {
                            var column = this;
                            
                            var select = $(
                                    `<select id="FilterTransaction" class="form-select mb-md-0 mb-2xx"><option value=""> Beneficiário </option></select>`
                                )
                                .appendTo('.beneficiary')
                                .on('change', function() {
                                    var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                    column.search(val ? '^' + val + '$' : '', true, false).draw();
                                });

                            var beneficiaries = [];

                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function(d, j) {
                                    if (d) {
                                        beneficiaries.push(d);
                                    }
                                });


                            if (beneficiaries.length > 0) {
                                beneficiaries = [...new Set(beneficiaries)];

                                beneficiaries.forEach(function(beneficiary) {
                                    select.append(
                                        '<option value="' +
                                        beneficiary +
                                        '" class="text-capitalize">' +
                                        beneficiary + 
                                        '</option>'
                                    );
                                });
                            }
                        });

                        this.api()
                        .columns(3)
                        .every(function() {
                            var column = this;
                            
                            var select = $(
                                    `<select id="FilterTransaction" class="form-select mb-md-0 mb-2xx"><option value=""> Matrícula </option></select>`
                                )
                                .appendTo('.registration')
                                .on('change', function() {
                                    var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                    column.search(val ? '^' + val + '$' : '', true, false).draw();
                                });

                            var registrations = [];

                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function(d, j) {
                                    if (d) {
                                        registrations.push(d);
                                    }
                                });


                            if (registrations.length > 0) {
                                registrations = [...new Set(registrations)];

                                registrations.forEach(function(registration) {
                                    select.append(
                                        '<option value="' +
                                        registration +
                                        '" class="text-capitalize">' +
                                        registration + 
                                        '</option>'
                                    );
                                });
                            }
                        });

                        this.api()
                        .columns(4)
                        .every(function() {
                            var column = this;
                            
                            var select = $(
                                    `<select id="FilterTransaction" class="form-select mb-md-0 mb-2xx"><option value=""> Código </option></select>`
                                )
                                .appendTo('.id')
                                .on('change', function() {
                                    var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                    column.search(val ? '^' + val + '$' : '', true, false).draw();
                                });

                            var ids = [];

                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function(d, j) {
                                    if (d) {
                                        ids.push(d);
                                    }
                                });


                            if (ids.length > 0) {
                                ids = [...new Set(ids)];

                                ids.forEach(function(id) {
                                    select.append(
                                        '<option value="' +
                                        id +
                                        '" class="text-capitalize">' +
                                        id + 
                                        '</option>'
                                    );
                                });
                            }
                        });

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

                            var cpfs = [];

                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function(d, j) {
                                    if (d) {
                                        cpfs.push(d);
                                    }
                                });


                            if (cpfs.length > 0) {
                                cpfs = [...new Set(cpfs)];

                                cpfs.forEach(function(cpf) {
                                    select.append(
                                        '<option value="' +
                                        cpf +
                                        '" class="text-capitalize">' +
                                        cpf + 
                                        '</option>'
                                    );
                                });
                            }
                        });

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

                            var status = [];

                            var statusMap = {
                                1: 'Ativo',
                                2: 'Encerrado',
                                3: 'Com pendências solicitante',
                                4: 'Com pendências operadora'
                            };

                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function(d, j) {
                                    if (d) {
                                        var statusText = statusMap[d] || 'Desconhecido';
                                        status.push({ value: d, text: statusText });
                                    }
                                });


                            if (status.length > 0) {
                                status = [...new Set(status.map(item => item.text))];

                                status.forEach(function(statusText ) {
                                    select.append(
                                        '<option value="' +
                                        statusText  +
                                        '" class="text-capitalize">' +
                                        statusText  + 
                                        '</option>'
                                    );
                                });
                            }
                        });

                        this.api()
                        .columns(13)
                        .every(function() {
                            var column = this;
                            
                            var select = $(
                                    `<select id="FilterTransaction" class="form-select mb-md-0 mb-2xx"><option value=""> Competência da movimentação </option></select>`
                                )
                                .appendTo('.movement')
                                .on('change', function() {
                                    var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                    column.search(val ? '^' + val + '$' : '', true, false).draw();
                                });

                            var movements = [];

                            column
                                .data()
                                .unique()
                                .sort()
                                .each(function(d, j) {
                                    if (d) {
                                        movements.push(d);
                                    }
                                });


                            if (movements.length > 0) {
                                movements = [...new Set(movements)];

                                movements.forEach(function(movement) {
                                    select.append(
                                        '<option value="' +
                                        movement +
                                        '" class="text-capitalize">' +
                                        movement + 
                                        '</option>'
                                    );
                                });
                            }
                        });







                    }
                });
            }
        });
    </script>

@endsection