@extends('layouts.master')
@section('title', $title)

@section('page_css')
<style>
    td{
        color: black !important;
    }
</style>
@endsection

@section('content')
    @include($view . '.filter_modal')
    <div class="main-body" style="color: black !important;">
        <div class="page-wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <div style="display:flex; justify-content:flex-end;">
                        <div class="mb-2">
                            @if (count($parameters) > 0)
                                <a href="#" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#filter_modal">
                                    <i class="fa-solid fa-filter"></i>
                                </a>
                            @endif
                            <a href="#" class="btn btn-primary "
                                onclick="print_div('print_div', 'Print report', 800, 1000) " title="Print report">
                                <i class="fa-solid fa-print"></i>
                            </a>

                            <a href="#" class="btn btn-success" onclick="ExportToExcel('xlsx')">
                                <i class="fa-solid fa-file-excel"></i>
                            </a>
                        </div>

                    </div>
                    <div class="card" id="print_div" style="color: black !important;">
                        <div class="card-header">

                            <div class="row">
                                <div class="col-3">
                                    @if (isset($settings['icon']) && is_file('storage/settings/' . $settings['icon']))
                                        <div>
                                            <img src="{{ asset('storage/settings/' . $settings['icon']) }}"
                                                class="" style="width: 90px !important; height: 90px"
                                                alt="ICON">
                                        </div>
                                    @endif
                                </div>
                                <div class="col-6">
                                    <div class="d-flex justify-content-center" style="padding:0 !important;">
                                        <h4> {{ $settings['website_name'] ?? '' }} </h4>
                                    </div>
                                    <div class="d-flex justify-content-center">
                                        <h5> {{ $settings['address'] ?? '' }} </h5>
                                    </div>
                                    <div class="d-flex justify-content-center">
                                        <h6> {{ $settings['number_1'] ?? '' }}, {{ $settings['number_2'] ?? '' }} </h6>
                                    </div>
                                </div>

                                <div class="col-3" style="display: flex; justify-content:right">
                                    @if (isset($settings['icon']) && is_file('storage/settings/' . $settings['icon']))
                                        <div>
                                            <img src="{{ asset('storage/settings/' . $settings['icon']) }}"
                                                class="" style="width: 90px !important; height: 90px"
                                                alt="ICON">
                                        </div>
                                    @endif
                                </div>
                            </div>
                            {{--
                            <div class="d-flex justify-content-center">

                                @if (isset($settings['icon']) && is_file('storage/settings/' . $settings['icon']))
                                    <div>
                                        <img src="{{ asset('storage/settings/' . $settings['icon']) }}" class=""
                                            style="width: 90px !important; height: 90px" alt="ICON">
                                    </div>
                                @endif
                                <div class="">
                                    <div>
                                        <h3> {{ $settings['website_name'] ?? '' }}</h3>
                                    </div>
                                    <div>
                                        <h6> {{ $settings['address'] ?? '' }}</h6>
                                    </div>
                                    <div>
                                        <h6> {{ $settings['number_1'] ?? '' }}, {{ $settings['number_2'] ?? '' }}</h6>
                                    </div>
                                </div>
                            </div> --}}




                            <div class="text-center" id="print_3">

                                <h2>{{ $title }}</h2>
                            </div>





                            <div id="print_4">
                                <div class="row col-12">
                                    @foreach ($parameters as $parameter)
                                        <div class="col-6">
                                            {{ $parameter->label }} : <span id='{{ $parameter->name }}_label'>
                                                {{ eval("return {$parameter->default_value};") }} </span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="card-body" id="print_5">
                            <div class="table-responsive">
                                <table id="table" class="display table nowrap table-striped table-hover"
                                    style="width:100%">
                                    <thead id="thead">
                                    </thead>
                                    <tbody id="tbody">
                                    </tbody>
                                    <tfoot id="tfoot">
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection




@section('page_js')
    {{-- <script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

    <script src="{{ asset('assets/xlsx.full.min.js') }}"></script>
    <script>
        $(function() {

            total_col = @json($meta)

            function objectifyForm(formArray) {
                const formdata = new FormData();
                var returnArray = {};
                for (var i = 0; i < formArray.length; i++) {
                    returnArray[formArray[i]['name']] = formArray[i]['value'];
                }
                return returnArray;
            }


            @foreach ($parameters_with_children as $prmc)
                $('#{{ $prmc->parent_name }}').on("change", async function() {

                    let data = await $.post("{{ route('admin.report_center.filter_parent') }}", {
                        parent_id: $(this).val(),
                        context_data: "{{ $prmc->context_data }}",
                        _token: "{{ csrf_token() }}"
                    })
                    option = '<option> --Select-- </option>'
                    data.forEach(element => {
                        option += `<option value="${element.id}"> ${element.text} </option>`
                    });

                    console.log(option)



                    $('#{{ $prmc->child_name }}').html(option)
                })
            @endforeach

            $("#filter_form").on("submit", async function(e) {
                e.preventDefault()
                form = $(this).serializeArray()
                data = objectifyForm($(this).serializeArray())
                let res = await _client('{{ route($route . '.getdata') }}', "post", data)

                if (res.status == 200) {
                    // console.log(form)
                    form.forEach((el) => {
                        if (el.name == "report_id") return;
                        if ($(`#${el.name}`).prop('nodeName') == "SELECT") {
                            text = $(`#${el.name} option:selected`).text() == "Select" ? "All" :
                                $(`#${el.name} option:selected`).text()
                            $(`#${el.name}_label`).text(text)
                        } else {
                            $(`#${el.name}_label`).text(el.value)
                        }


                    })
                    let thead = ''
                    let tbody = ''
                    foot_total = []
                    $.each(res.data, function(key, value) {
                        thead = '<tr>'
                        tbody += '<tr>'
                        counter = 1;
                        $.each(value, function(k, v) {
                            thead += `<th>${k}</th>`
                            tbody += `<td>${v}</td>`
                            // console.log(counter)
                            // console.log(total_col)
                            if (total_col.includes((counter).toString())) {
                                total = foot_total[counter] == undefined ? 0 : foot_total[counter]
                                console.log(v)

                                if(v &&  typeof v === 'string' && v.includes(" ")){
                                    foot_total[counter] =  total + parseFloat(v.split(" ")[1])
                                }else{
                                    foot_total[counter] =  total + parseFloat(v)
                                }

                            }else{
                                foot_total[counter] = ""
                            }
                            // console.log(foot_total)
                            counter++
                        })
                        thead += '</tr>'
                        tbody += '</tr>'
                    });
                    tfoot = '<tr>'
                    for (let index = 1; index < foot_total.length; index++) {
                        const element = foot_total[index];
                        tfoot +=`
                                <th>
                                    ${element.toLocaleString()}
                                </th>
                                `
                    }
                    tfoot += '</tr>'

                    console.log(foot_total)

                    $("#thead").html(thead)
                    $("#tbody").html(tbody)
                    $("#tfoot").html(tfoot)
                    $("#filter_modal").modal("hide")
                }
            })

            $("#filter_form").trigger("submit")
        })

        const ExportToExcel = (type, fn, dl) => {
            var elt = document.getElementById('table');
            var wb = XLSX.utils.table_to_book(elt, {
                sheet: "sheet1"
            });
            return dl ?
                XLSX.write(wb, {
                    bookType: type,
                    bookSST: true,
                    type: 'base64'
                }) :
                XLSX.writeFile(wb, fn || ('{{ $title ."_". now() }}.' + (type || 'xlsx')));
        }
    </script>
@endsection