@extends('layout.layout')
@section('title', 'Reports')
@section('report', 'active')
@section('layout.css')
    <style>
        .select2-choices {
            min-height: 150px;
            max-height: 150px;
            overflow-y: auto;
        }

        .select2-selection__rendered {
            max-height: 150px;
            overflow: auto;
        }

        #test {
            border-color: black;
        }
    </style>
@endsection

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h5>Reports 1</h5>
                </div>
            </div>

            <div class="callout callout-info mt-2">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="">Report Type</label>
                        <select class="form-control single-select2 report_type" name="report_type" id="report_type"
                            style="width: 100%" required>
                            <option value="business_unit" selected>Report by Business Unit</option>
                            <option value="ticket_owner">Report by Ticket Owner</option>
                            <option value="resource">Report by Resource</option>
                            <option value="ticket_activity">Ticket Activity Log</option>
                            @if (Auth::user()->is_admin === 1)
                                <option value="entity_sharing_by_resource">Entity Sharing By Resource</option>
                            @endif
                            <option value="work_load">Work Load Log</option>
                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="">Start</label>
                        <input type="date" class="form-control" name="start" id="start"
                            value="{{ date('Y-m-01') }}" max="2025-08-21" required>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="">End</label>
                        <input type="date" class="form-control" name="end" id="end"value="{{ date('Y-m-d') }}"
                            max="2025-08-21" required>
                    </div>
                </div>

                @include('report1.forms.businessUnitForm', ['form_name' => 'business_unit'])
                @include('report1.forms.ticketOwnerForm', ['form_name' => 'ticket_owner'])
                @include('report1.forms.resourceForm', ['form_name' => 'resource'])
                @include('report1.forms.ticketActivity', ['form_name' => 'ticket_activity'])
            </div>

            <div class="card card-cyan">
                <div class="card-header">
                    <i class="fa fa-file mr-1"></i> Report
                </div>
                <div class="card-body" id="datatable_container" style="overflow-y: hidden">
                    <table id="datatable" class="table table-bordered" style="width: 100%">
                        <thead id="datatable_head">
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                        </thead>
                        <tbody id="datatable_body">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">

        </div>
    </section>
@endsection

@section('scripts')
    <script>
        var businessUnitData, entityData, brandData, statusData, ticketManagerData, resourceData;

        var _report = {
            init: function() {
                this.initDatatable();
                this.initSelect2();
                this.events();
                this.bindInputData(() => {
                    this.onChangeReportType($("#report_type"));
                });

            },
            initDatatable: function() {
                $('#datatable').DataTable({
                    search: false,
                    "paging": false,
                    "ordering": false,
                    "info": false
                })
            },
            initSelect2: function() {
                $('.select2').select2({
                    maximumSelectionLength: 0,
                    selectOnClose: true,
                })

                $('.single-select2').select2({
                    maximumSelectionLength: 0,
                    selectOnClose: true,
                })
            },
            bindInputData: function(callback) {
                $.ajax({
                    type: "GET",
                    url: "/report/data/get-data",
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(data) {
                        businessUnitData = data['business_units'];
                        entityData = data['entities'];
                        brandData = data['brands'];
                        statusData = data['statuses'];
                        ticketManagerData = data['ticket_manager'];
                        resourceData = data['resources'];

                        if (typeof callback === 'function') {
                            callback();
                        }

                        // console.log(ticketManagerData);
                    },
                });
            },
            events: function() {
                $("#report_type").on('change', this.onChangeReportType.bind(this))

                $(".entity").on('change', this.onChangeEntity.bind(this))

                $("#ticket_activity-business_unit").on('change', this.onChangeBusinessUnit.bind(this))

                $(".form").on('submit', function(e) {
                    e.preventDefault()

                    var reportAttr = $(this).data('attr')
                    let formData = new FormData(this);

                    formData.append('start', $('input[name="start"]').val());
                    formData.append('end', $('input[name="end"]').val());

                    if (formData.get(reportAttr + "-report_view") === "table") {
                        let newURL = _hooks.convertFormDataToString(
                            'download_' + reportAttr + '_form_' + formData.get(reportAttr +
                                "-report_view"),
                            formData
                        );

                        switch (reportAttr) {
                            case "business_unit":
                                return _report.tableBusinessUnit(newURL);
                                break;
                            case "ticket_owner":
                                return _report.tableTicketOwner(newURL);
                                break;
                            case "resource":
                                let newResourceArr = $('#resource-resource').val();

                                formData.delete('resource-resource');
                                formData.append('resource-resource', newResourceArr.join(','))

                                newURL = _hooks.convertFormDataToString(
                                    'download_' + reportAttr + '_form_' + formData.get(reportAttr +
                                        "-report_view"),
                                    formData
                                );

                                return _report.tableResource(newURL);
                                break;
                            case "ticket_activity":
                                let newBusinessUnitArr = $('#ticket_activity-business_unit').val();
                                let newTicketManagerArr = $('#ticket_activity-ticket_manager').val();

                                formData.delete('ticket_activity-business_unit');
                                formData.delete('ticket_activity-ticket_manager');

                                formData.append('ticket_activity-business_unit', newBusinessUnitArr.join(
                                    ','))
                                formData.append('ticket_activity-ticket_manager', newTicketManagerArr.join(
                                    ','))

                                newURL = _hooks.convertFormDataToString(
                                    'download_' + reportAttr + '_form_' + formData.get(reportAttr +
                                        "-report_view"),
                                    formData
                                );

                                return _report.tableTicketActivity(newURL);
                                break;
                            case "entity_sharing_by_resource":
                                break;
                            case "work_load":
                                break;
                            default:
                                break;
                        }
                    } else {
                        let newURL = _hooks.convertFormDataToString(
                            'download_' + reportAttr + '_form_' + formData.get(reportAttr +
                                "-report_view"),
                            formData
                        );

                        window.open(newURL);
                    }
                })

                $(".multi-select").on('select2:select', function(e) {
                    _report.onChangeMultiple(e, $(this))
                })
            },
            onChangeReportType: function(event) {
                var reportTypeValue = $("#report_type").val();

                switch (reportTypeValue) {
                    case "business_unit":
                        var reportType = document.getElementById('report_type');
                        var start = document.getElementById('start');
                        var end = document.getElementById('end');

                        var business_unit = document.getElementsByName('business_unit-business_unit')[0];
                        var entity = document.getElementsByName('business_unit-entity')[0];
                        var brand = document.getElementsByName('business_unit-brand')[0];
                        var status = document.getElementsByName('business_unit-status')[0];

                        $(".form_input").addClass('d-none')
                        $("#business_unit_input").removeClass('d-none')

                        $(".form_input").addClass('active')
                        $("#business_unit_input").removeClass('active')

                        this.bindBusinessUnit(reportType, start, end, business_unit, entity, brand, status)
                        break;
                    case "ticket_owner":
                        var reportType = document.getElementById('report_type');
                        var start = document.getElementById('start');
                        var end = document.getElementById('end');

                        var ticket_owner = document.getElementsByName('ticket_owner-ticket_owner')[0];
                        var entity = document.getElementsByName('ticket_owner-entity')[0];
                        var brand = document.getElementsByName('ticket_owner-brand')[0];
                        var status = document.getElementsByName('ticket_owner-status')[0];

                        $(".form_input").addClass('d-none')
                        $("#ticket_owner_input").removeClass('d-none')

                        $(".form_input").addClass('active')
                        $("#ticket_owner_input").removeClass('active')

                        this.bindTicketOwner(reportType, start, end, ticket_owner, entity, brand, status)
                        break;
                    case "resource":
                        var reportType = document.getElementById('report_type');
                        var start = document.getElementById('start');
                        var end = document.getElementById('end');

                        var resource = document.getElementsByName('resource-resource')[0];
                        var entity = document.getElementsByName('resource-entity')[0];
                        var brand = document.getElementsByName('resource-brand')[0];
                        var status = document.getElementsByName('resource-status')[0];

                        $(".form_input").addClass('d-none')
                        $("#resource_input").removeClass('d-none')

                        $(".form_input").addClass('active')
                        $("#resource_input").removeClass('active')

                        this.bindResource(reportType, start, end, resource, entity, brand, status)
                        break;
                    case "ticket_activity":
                        var reportType = document.getElementById('report_type');
                        var start = document.getElementById('start');
                        var end = document.getElementById('end');

                        var business_unit = document.getElementsByName('ticket_activity-business_unit')[0];
                        var ticket_manager = document.getElementsByName('ticket_activity-ticket_manager')[0];
                        var status = document.getElementsByName('ticket_activity-status')[0];

                        $(".form_input").addClass('d-none')
                        $("#ticket_activity_input").removeClass('d-none')

                        $(".form_input").addClass('active')
                        $("#ticket_activity_input").removeClass('active')

                        this.bindTicketActivity(reportType, start, end, business_unit, ticket_manager, status)
                        break;
                    case "entity_sharing_by_resource":
                        alert(reportTypeValue);
                        break;
                    case "work_load":
                        alert(reportTypeValue);
                        break;
                    default:
                        break;
                }
            },
            onChangeMultiple: function(event, currentTargetId) {
                var targetVal = $("#" + currentTargetId.attr('id')).val();

                if (targetVal.length > 1) {
                    if (event.params.data.id === 'all') {
                        $("#" + currentTargetId.attr('id')).val('all')
                    } else {
                        $("#" + currentTargetId.attr('id') + ' option[value="all"]').prop('selected', false);
                    }
                }

                $("#" + currentTargetId.attr('id')).trigger("change");
            },
            onChangeBusinessUnit: function() {
                // console.log(true)
                // $("#ticket_activity-business_unit").val('all')
                // $("#ticket_activity-business_unit").trigger("change");
            },
            onChangeEntity: function(event) {
                let entityId = parseInt(event.target.value, 11);
                let dataLinkTo = $(event.target).data('link');

                let filteredBrand = $.grep(brandData, function(obj) {
                    return obj.entity_id === entityId;
                });

                $('select[name="' + dataLinkTo + '"]')
                    .empty()
                    .append($('<option>', {
                        value: "all",
                        text: "Select All",
                    }));

                $.each(filteredBrand, function(index, value) {
                    $('select[name="' + dataLinkTo + '"]').append($('<option>', {
                        value: value.id,
                        text: value.description,
                    }));
                });
            },
            bindBusinessUnit: function(reportType, start, end, business_unit, entity, brand, status) {
                $(business_unit).append($('<option>', {
                    value: "all",
                    text: "Select All",
                }));

                $(entity).append($('<option>', {
                    value: "all",
                    text: "Select All",
                }));

                $(brand).append($('<option>', {
                    value: "all",
                    text: "Select All",
                }));

                $(status).append($('<option>', {
                    value: "all",
                    text: "Select All",
                }));

                $.each(businessUnitData, function(index, value) {
                    $(business_unit).append($('<option>', {
                        value: value.id,
                        text: value.description,
                    }));
                });

                $.each(entityData, function(index, value) {
                    $(entity).append($('<option>', {
                        value: value.id,
                        text: value.description,
                    }));
                });

                $.each(statusData, function(index, value) {
                    $(status).append($('<option>', {
                        value: value.id,
                        text: value.description,
                    }));
                });
            },
            bindTicketOwner: function(reportType, start, end, ticket_manager, entity, brand, status) {
                $(ticket_manager).append($('<option>', {
                    value: "all",
                    text: "Select All",
                }));

                $(entity).append($('<option>', {
                    value: "all",
                    text: "Select All",
                }));

                $(brand).append($('<option>', {
                    value: "all",
                    text: "Select All",
                }));

                $(status).append($('<option>', {
                    value: "all",
                    text: "Select All",
                }));

                $.each(ticketManagerData, function(index, value) {
                    $(ticket_manager).append($('<option>', {
                        value: value.id,
                        text: value.firstname + " " + value.lastname,
                    }));
                });

                $.each(entityData, function(index, value) {
                    $(entity).append($('<option>', {
                        value: value.id,
                        text: value.description,
                    }));
                });

                $.each(statusData, function(index, value) {
                    $(status).append($('<option>', {
                        value: value.id,
                        text: value.description,
                    }));
                });
            },
            bindResource: function(reportType, start, end, resource, entity, brand, status) {
                $(resource).append($('<option>', {
                    value: "all",
                    text: "Select All",
                    selected: true
                }));

                $(entity).append($('<option>', {
                    value: "all",
                    text: "Select All",
                }));

                $(brand).append($('<option>', {
                    value: "all",
                    text: "Select All",
                }));

                $(status).append($('<option>', {
                    value: "all",
                    text: "Select All",
                }));

                $.each(resourceData, function(index, value) {
                    $(resource).append($('<option>', {
                        value: value.id,
                        text: value.firstname + " " + value.lastname,
                    }));
                });

                $.each(entityData, function(index, value) {
                    $(entity).append($('<option>', {
                        value: value.id,
                        text: value.description,
                    }));
                });

                $.each(statusData, function(index, value) {
                    $(status).append($('<option>', {
                        value: value.id,
                        text: value.description,
                    }));
                });
            },
            bindTicketActivity: function(reportType, start, end, business_unit, ticket_manager, status) {
                $(business_unit).append($('<option>', {
                    value: "all",
                    text: "Select All",
                    selected: true
                }));

                $(status).append($('<option>', {
                    value: "all",
                    text: "Select All",
                }));

                $(ticket_manager).append($('<option>', {
                    value: "all",
                    text: "Select All",
                    selected: true
                }));

                $.each(ticketManagerData, function(index, value) {
                    $(ticket_manager).append($('<option>', {
                        value: value.id,
                        text: value.firstname + " " + value.lastname,
                    }));
                });

                $.each(businessUnitData, function(index, value) {
                    $(business_unit).append($('<option>', {
                        value: value.id,
                        text: value.description,
                    }));
                });

                $.each(statusData, function(index, value) {
                    $(status).append($('<option>', {
                        value: value.id,
                        text: value.description,
                    }));
                });
            },
            tableBusinessUnit: function(urlParams) {
                $('#datatable').DataTable().destroy();

                _hooks.addEmptyCellsToTableHeader(9)

                let table = $('#datatable').DataTable({
                    ajax: {
                        url: urlParams,
                    },
                    columns: [{
                            data: 'ticket_reference',
                            title: 'Ticket Reference'
                        },
                        {
                            data: 'ticket_name',
                            title: 'Ticket Name'
                        },
                        {
                            data: 'resource',
                            title: 'Resource'
                        },
                        {
                            data: 'status',
                            title: 'Status'
                        },
                        {
                            data: 'entity',
                            title: 'Entity'
                        },
                        {
                            data: 'brand',
                            title: 'Brand'
                        },
                        {
                            data: 'date_log',
                            title: 'Date Log'
                        },
                        {
                            data: 'ticket_type',
                            title: 'Ticket Type'
                        },
                        {
                            data: 'hours',
                            title: 'Hours'
                        },
                    ],
                    initComplete: function(settings, json) {
                        $("#datatable").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                    },
                })
            },
            tableTicketOwner: function(urlParams) {
                $('#datatable').DataTable().destroy();

                _hooks.addEmptyCellsToTableHeader(9)

                let table = $('#datatable').DataTable({
                    ajax: {
                        url: urlParams,
                    },
                    columns: [{
                            data: 'ticket_reference',
                            title: 'Ticket Reference'
                        },
                        {
                            data: 'ticket_name',
                            title: 'Ticket Name'
                        },
                        {
                            data: 'resource',
                            title: 'Resource'
                        },
                        {
                            data: 'status',
                            title: 'Status'
                        },
                        {
                            data: 'entity',
                            title: 'Entity'
                        },
                        {
                            data: 'brand',
                            title: 'Brand'
                        },
                        {
                            data: 'date_log',
                            title: 'Date Log'
                        },
                        {
                            data: 'ticket_type',
                            title: 'Ticket Type'
                        },
                        {
                            data: 'hours',
                            title: 'Hours'
                        },
                    ],
                    initComplete: function(settings, json) {
                        $("#datatable").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                    },
                })
            },
            tableResource: function(urlParams) {
                $('#datatable').DataTable().destroy();

                _hooks.addEmptyCellsToTableHeader(9)

                let table = $('#datatable').DataTable({
                    ajax: {
                        url: urlParams,
                    },
                    columns: [{
                            data: 'ticket_reference',
                            title: 'Ticket Reference'
                        },
                        {
                            data: 'ticket_name',
                            title: 'Ticket Name'
                        },
                        {
                            data: 'resource',
                            title: 'Resource'
                        },
                        {
                            data: 'status',
                            title: 'Status'
                        },
                        {
                            data: 'entity',
                            title: 'Entity'
                        },
                        {
                            data: 'brand',
                            title: 'Brand'
                        },
                        {
                            data: 'date_log',
                            title: 'Date Log'
                        },
                        {
                            data: 'ticket_type',
                            title: 'Ticket Type'
                        },
                        {
                            data: 'hours',
                            title: 'Hours'
                        },
                    ],
                    initComplete: function(settings, json) {
                        $("#datatable").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                    },
                })
            },
            tableTicketActivity: function(urlParams) {
                $('#datatable').DataTable().destroy();

                _hooks.addEmptyCellsToTableHeader(10)

                let table = $('#datatable').DataTable({
                    ajax: {
                        url: urlParams,
                    },
                    columns: [{
                            data: 'date_log',
                            title: 'Date Log'
                        },
                        {
                            data: 'ticket_name',
                            title: 'Ticket Name'
                        },
                        {
                            data: 'ticket_type',
                            title: 'Ticket Type'
                        },
                        {
                            data: 'status',
                            title: 'Status'
                        },
                        {
                            data: 'ticket_manager',
                            title: 'Ticket Manager'
                        },
                        {
                            data: 'resource',
                            title: 'resource'
                        },
                        {
                            data: 'task_type',
                            title: 'Task Type'
                        },
                        {
                            data: 'entity',
                            title: 'Entity'
                        },
                        {
                            data: 'brand',
                            title: 'Brand'
                        },
                        {
                            data: 'hours',
                            title: 'Hours'
                        },
                    ],
                    initComplete: function(settings, json) {
                        $("#datatable").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                    },
                })
            }
        };

        _report.init()

        var _hooks = {
            convertFormDataToString: function(link, formData) {
                let queryString = new URLSearchParams(formData).toString();
                let url = "/" + link + "?" + queryString;
                return url;
            },
            addEmptyCellsToTableHeader: function(size) {
                $("#datatable_head tr")
                    .empty()
                    .append("<td>&nbsp;</td>");

                for (var i = 1; i < size; i++) {
                    $("#datatable_head tr").append("<td>&nbsp;</td>")
                }
            }
        }
    </script>
@endsection