@extends('modules.head')
@section('contenido')
<style>
    td {
        white-space: nowrap;
    }

    div.dataTables_wrapper {
        height: fit-content;
        margin: 0px 10px 0px 10px;
    }

    .dataTables_scrollBody {
        max-height: none !important;
    }

    .scroll-ul {
        height: 140px;
        overflow: scroll;
        overflow-x: hidden;
    }
</style>
@php
$page_prefix = "ticket_subscribers";
@endphp
<div class="box-header">
    <a class="btn btn-app btnReportProducts" onclick="clickExportAll()">
        <i class="fa fa-file-excel-o"></i> {{ __('ticket_subscribers.texts.export') }}
    </a>
</div>

<!-- List Data -->
<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">{{__('ticket_subscribers.texts.ticket_subscribers')}}</h3>
    </div>

    <!-- filters -->
    <div class="box-body">
        <div class="col-12 col-md-12">
            <label for="states">{{ __('ticket_subscribers.labels.seasons') }}</label>
            <select class="form-control select2" multiple="multiple" data-placeholder="{{ __('ticket_subscribers.defaults.placeholder_select') }}" id="seasons" name="seasons" value="" required>
                <option value="">{{ __('ticket_subscribers.defaults.placeholder_select') }}</option>
                @foreach ($seasons as $season)
                <option value="{{ $season->id }}">{{ $season->name }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <!-- filters -->

    <!-- /.box-header -->
    <div class="box-body table-responsive ">
        <table id="{{$page_prefix}}" class="stripe row-border order-column" style="width:100%" role="grid" aria-describedby="{{$page_prefix}}_info"></table>
    </div>
    <!-- /.box-body -->
</div>
@endsection
@section('inline-js')
<script src="{{ asset('js/datetimepicker/moment.min.js') }}"></script>
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>
<script type="text/javascript">
    const SELECTOR_PREFIX = "{{$page_prefix}}";
    const dataSeats = <?php echo json_encode($dataSeats); ?>;

    $(document).ready(function() {
        $('.select2').select2();

        $("select[name='seasons']").on('change', function() {
            $(`#${SELECTOR_PREFIX}`).dataTable().fnDestroy();
            getData();
        });

        const getData = function() {
            $(`#${SELECTOR_PREFIX}`).DataTable({
                stateSave: true,
                stateSaveCallback: function(settings, data) {
                    localStore(`DataTables_${SELECTOR_PREFIX}`, data)
                },
                stateLoadCallback: function(settings) {
                    return localRetrieve(`DataTables_${SELECTOR_PREFIX}`)
                },
                responsive: true,
                processing: true,
                serverSide: true,
                language: {
                    url: window.DATATABLES_LANGUAGE_URL,
                },
                ajax: {
                    url: '/ticketing_subscribers/dashboard',
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                    },
                    type: "POST",
                    data: {
                        seasons: $('select[name="seasons"]').val(),
                    },
                    dataSrc: function(json) {
                        var totalRows = json.total;
                        json.recordsTotal = totalRows;
                        json.recordsFiltered = totalRows;
                        return json.data;
                    }
                },
                columns: [{
                        name: 'users.first_name',
                        data: 'users.first_name',
                        title: Lang.get('ticket_subscribers.datatables.columns.first_name'),
                        render: function(data, type, row, meta) {
                            return [
                                row.first_name,
                            ].join('');
                        }
                    },
                    {
                        name: 'users.last_name',
                        data: 'users.last_name',
                        title: Lang.get('ticket_subscribers.datatables.columns.last_name'),
                        render: function(data, type, row, meta) {
                            return [
                                row.last_name,
                            ].join('');
                        }
                    },
                    {
                        name: 'users.email',
                        data: 'users.email',
                        title: Lang.get('ticket_subscribers.datatables.columns.email'),
                        render: function(data, type, row, meta) {
                            return [
                                row.email,
                            ].join('');
                        }
                    },
                    {
                        name: 'users.document',
                        data: 'users.document',
                        title: Lang.get('ticket_subscribers.datatables.columns.document'),
                        render: function(data, type, row, meta) {
                            return [
                                row.document,
                            ].join('');
                        }
                    },
                    {
                        name: 'users.created_at',
                        data: 'users.created_at',
                        title: Lang.get('ticket_subscribers.datatables.columns.created_at'),
                        render: function(data, type, row, meta) {
                            return [
                                moment(row.created_at).format('YYYY-MM-DD HH:mm:ss'),
                            ].join('');
                        }
                    },
                    {
                        name: 'seasons',
                        data: 'seasons.name',
                        title: Lang.get('ticket_subscribers.datatables.columns.seasons'),
                        render: function(data, type, row, meta) {
                            return transactionSeasons(row.seasons).join('');
                        }
                    },
                    {
                        name: 'seats',
                        data: 'tickets.seat_id',
                        title: Lang.get('ticket_subscribers.datatables.columns.seats'),
                        render: function(data, type, row, meta) {
                            return transactionSeats(row.seats).join('');
                        }
                    },
                ]
            })
        };

        const transactionSeasons = function(seasons) {
            if (seasons == undefined) {
                return '';
            }
            let list = seasons.split(',');
            let data = list.map(function(d) {
                return '<li>' + d + '</li>';
            });

            return data;
        }

        const transactionSeats = function(seats) {
            if (seats == undefined) {
                return '';
            }

            let list = seats.split(',');
            let data = list.map(function(d) {
                let seat = dataSeats.find(seat => seat.id == d);
                return '<li>' + (seat ? seat.name : '') + '</li>';
            });

            return data;
        }

        getData();
    });

    const clickExportAll = function() {
        $('#loading').show();
        const table = $(`${SELECTOR_PREFIX}`).DataTable();
        var validateDownloadUrl = document.location.origin + "/ticketing_subscribers/downloadReport";
        var downloadUrl = document.location.origin + "/ticketing_subscribers/export/";

        info = {
            data: table.rows({
                filter: 'applied'
            }).data().toArray()
        }

        $.ajax({
            url: validateDownloadUrl,
            type: "POST",
            contentType: "application/json",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                "Content-Type": "application/json",
            },
            data: JSON.stringify({
                seasons: $('select[name="seasons"]').val(),
            }),
            success: function(response) {
                const filename = Lang.get('ticket_subscribers.export.file_name') + ".xlsx";
                const rows = response.data;
                const new_rows = rows.map(
                    ({
                        created_at,
                        seasons,
                        seats,
                        ...rest
                    }) => ({
                        ...rest,
                        created_at: moment(created_at).format('YYYY-MM-DD HH:mm:ss'),
                        seasons: seasons,
                        seats: transactionExportSeats(seats),
                    }));
                let headers = Object.keys(new_rows[0]);
                headers = headers.map((header) => Lang.get('ticket_subscribers.export.columns.' + header));
                const worksheet = XLSX.utils.json_to_sheet(new_rows);
                XLSX.utils.sheet_add_aoa(worksheet, [headers], {
                    origin: "A1"
                });
                const workbook = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(workbook, worksheet, "Report");
                XLSX.writeFile(workbook, filename, {
                    compression: true
                });
                $('#loading').hide();
            },
            error: function(response) {
                $('#loading').hide();
                swal("Error", response.responseJSON ? response.responseJSON.message :
                    'Hubo un error en el servidor, espere unos segundos e intente de nuevo',
                    "error");
            }
        });
    }

    const transactionExportSeats = function(seats) {
        if (seats == undefined) {
            return '';
        }

        let list = seats.split(',');
        let data = list.map(function(d) {
            let seat = dataSeats.find(seat => seat.id == d);
            return seat ? seat.name : '';
        });

        return data.join(',');
    }
</script>
@endsection