@extends('layouts.app')
@section('js')
    {{-- <script src="{{ asset('js/tracking.js') }}"></script> --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- DataTables core -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <!-- Buttons extension -->
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

@endsection
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css"/>
@endsection
@section('content')
    <div class='row'>
        <div class='col-8 mb-5'>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Leads Tracking') }}
            </h2>
        </div>
    </div>
    <form action="">
        <div class='row'>
            <div class='col-5'>
                <div class="input-daterange input-group" id="datepicker">
                    <input required type="text" class="form-control" name="start_date" placeholder="From" value="{{ request('start_date') }}" />
                </div>
            </div>
            <div class='col-5'>
                <div class="input-daterange input-group" id="datepicker">
                    <input required type="text" class="form-control" name="end_date" placeholder="To" value="{{ request('end_date') }}"/>
                </div>
            </div>
            <div class='col-1'>
                <input type="submit" class="btn btn-primary" id="filter" value="Filter"/>
            </div>
        </div>
    </form>
    <div class='row'>
        <div class='col-12'>
            <div class="container">
                <canvas id="lineChart"></canvas>
            </div>
            <script>
                var ctx = document.getElementById('lineChart').getContext('2d');
                var lineChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: {!! json_encode($labels) !!},
                        datasets: [
                            {
                                label: 'Total Leads',
                                data: {!! json_encode($data) !!},
                                fill: false,
                                borderColor: 'rgba(0, 0, 0, 1)',
                                tension: 0.1
                            },
                            {
                                label: 'Siu Lim Tao',
                                data: {!! json_encode($data_slt) !!},
                                fill: false,
                                borderColor: 'rgba(255, 99, 132, 1)',
                                tension: 0.1
                            },
                            {
                                label: 'Practical',
                                data: {!! json_encode($data_practical) !!},
                                fill: false,
                                borderColor: 'rgba(54, 162, 235, 1)',
                                tension: 0.1
                            }
                        ]

                    },
                    options: {
                        plugins: {
                            legend: {
                                display: true,
                                position: 'top'
                            }
                        }
                    }
                });
            </script>
        </div>
    </div>
    <div class='row'>
        <div class='col-12'>
            <div style="margin: auto;">
                <canvas id="myBarChart"></canvas>
            </div>
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                var ctx = document.getElementById('myBarChart').getContext('2d');

                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        {{-- labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], --}}
                        datasets: [{
                            label: '# of Leads',
                            data: {!! json_encode($grouped_leads) !!},
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            });
            </script>
        </div>
    </div>
    <div class='row'>
        <div class='col-12'>
            <table id="leads-table" class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">id</th>
                        <th scope="col" style="width: 100px;">Page</th>
                        <th scope="col" style="width: 100px;">Book</th>
                        <th scope="col">Email</th>
                        <th scope="col">Referral</th>
                        <th scope="col">Date</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($leads as $lead)
                        @php
                            $fullRef = $lead->ref;
                            $refParts = explode('|', $fullRef);
                            $lastRef = trim(end($refParts));
                        @endphp

                        <tr>
                            <th scope="row">{{ $lead->id }}</th>
                            <td style="width: 100px;">{{ $lead->name }}</td>
                            <td style="width: 100px;">{{ $lead->book }}</td>
                            <td>{{ $lead->email }}</td>
                            <td>
                                <span id="ref-short-{{ $lead->id }}">{{ $lastRef }}</span>
                                <span id="ref-full-{{ $lead->id }}" style="display:none;">{{ $fullRef }}</span>

                                <i class="bi bi-eye ms-2" style="cursor:pointer;"
                                onclick="toggleRef({{ $lead->id }})"></i>
                            </td>

                            <td>{{ $lead->created_at }}</td>
                        </tr>
                    @endforeach

                </tbody>
            </table>
        </div>
    </div>
    <script>
    $(document).ready(function(){
        $('.input-daterange').datepicker({
            todayBtn: 'linked',
            format: 'yyyy-mm-dd',
            autoclose: true
        });
    });
    </script>

    <script>
        function toggleRef(id) {
            const shortEl = document.getElementById('ref-short-' + id);
            const fullEl = document.getElementById('ref-full-' + id);

            const isShortVisible = shortEl.style.display !== 'none';

            shortEl.style.display = isShortVisible ? 'none' : 'inline';
            fullEl.style.display = isShortVisible ? 'inline' : 'none';
        }
    </script>
    <script>
        $(document).ready(function () {
            $('#leads-table').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'copyHtml5',
                        text: '📋 Copia',
                        className: 'btn btn-sm btn-outline-dark'
                    },
                    {
                        extend: 'csvHtml5',
                        text: '📄 CSV',
                        className: 'btn btn-sm btn-outline-dark'
                    },
                    {
                        extend: 'excelHtml5',
                        text: '📊 Excel',
                        className: 'btn btn-sm btn-outline-success'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '📕 PDF',
                        className: 'btn btn-sm btn-outline-danger'
                    },
                    {
                        extend: 'print',
                        text: '🖨️ Stampa',
                        className: 'btn btn-sm btn-outline-primary'
                    }
                ],
                pageLength: 25,
                order: [[0, 'desc']],
                language: {
                    url: '/i18n/it-IT.json'
                }
            });
        });
    </script>



@endsection