@extends('layouts.app')
@section('content')
<section class="read">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Leads</h1>
            </div>
            <div class="col-12">
                <div class="actions mb-4">
                    <div id="leads-list" style="overflow-x:scroll;">
                        <table style="width:calc(100% + 200px);">
                            <thead>
                                    <tr>
                                        <th scope="col">Nombre</th>
                                        <th scope="col">Compañía</th>
                                        <th scope="col">Teléfono</th>
                                        <th scope="col">Ciudad</th>
                                        <th scope="col">Email</th>
                                        <th scope="col">Segmento</th>
                                        <th scope="col">Capacidad</th>
                                        <th scope="col">Momentos Cons.</th>
                                        <th scope="col">Intesado en</th>
                                    </tr>
                            </thead>
                            <tbody id="lists">
                                @foreach($leads as $lead)
                                    <tr>
                                        <td scope="col"> {{ $lead->full_name }} </td>
                                        <td scope="col"> {{ $lead->company_name }} </td>
                                        <td scope="col"> {{ $lead->phone  }} </td>
                                        <td scope="col"> {{ $lead->city }} </td>
                                        <td scope="col"> {{ $lead->email }} </td>
                                        <td scope="col"> {{ $lead->segment }} </td>
                                        <td scope="col"> {{ $lead->abilities }} </td>
                                        <td scope="col"> {{ $lead->consumption_moment }} </td>
                                        <td scope="col"> {{ $lead->interested }} </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <span class="btn btn-success" id="export-leads">Exportar</span>
            </div>
        </div>
    </div>
</section>
<script>
    var export_leads = document.getElementById('export-leads');
    export_leads.addEventListener('click', ()=>{
        var titles = [];
        var data = [];
        jQuery('#leads-list th').each(function() {
            titles.push(jQuery(this).text());
        });
        jQuery('#leads-list td').each(function() {
            data.push(jQuery(this).text());
        });
        var CSVString = prepCSVRow(titles, titles.length, '');
        CSVString = prepCSVRow(data, titles.length, CSVString);
        var downloadLink = document.createElement("a");
        var blob = new Blob(["\ufeff", CSVString]);
        var url = URL.createObjectURL(blob);
        downloadLink.href = url;
        downloadLink.download = "leads.csv";
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    });
    function prepCSVRow(arr, columnCount, initial) {
        var row = '';
        var delimeter = ',';
        var newLine = '\r\n'; 
        function splitArray(_arr, _count) {
            var splitted = [];
            var result = [];
            _arr.forEach(function(item, idx) {
            if ((idx + 1) % _count === 0) {
                splitted.push(item);
                result.push(splitted);
                splitted = [];
            } else {
                splitted.push(item);
            }
            });
            return result;
        }
        var plainArr = splitArray(arr, columnCount);
        plainArr.forEach(function(arrItem) {
            arrItem.forEach(function(item, idx) {
            row += item + ((idx + 1) === arrItem.length ? '' : delimeter);
            });
            row += newLine;
        });
        return initial + row;
    }
</script>
@endsection