@extends('layouts.app')

@section('title', 'Account Insights')

@section('page-specific-style')
<link href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="d-flex justify-content-between align-items-center">
            <h4 class="mb-0">Account Insights</h4>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12 mb-3">
            <div class="card">
                <div class="card-body">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-3">
                            <label for="account-date-range" class="form-label">Date Range</label>
                            <input type="text" id="account-date-range" class="form-control" placeholder="Select date range">
                        </div>
                        <div class="col-md-2">
                            <button type="button" id="account-clear-date" class="btn btn-outline-secondary w-100">Clear</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 mb-3">
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3 col-6">
                            <div class="text-muted small">Impressions</div>
                            <div id="account-summary-impressions" class="fw-semibold">0</div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="text-muted small">Clicks</div>
                            <div id="account-summary-clicks" class="fw-semibold">0</div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="text-muted small">Conversions</div>
                            <div id="account-summary-conversions" class="fw-semibold">0</div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="text-muted small">Spend</div>
                            <div id="account-summary-spend" class="fw-semibold">$0.00</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="account-insights-table" class="table table-bordered dt-responsive nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Source</th>
                                    <th>Account Name</th>
                                    <th>Impressions</th>
                                    <th>Clicks</th>
                                    <th>CTR</th>
                                    <th>CPC</th>
                                    <th>Conversions</th>
                                    <th>Spend</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>Total</th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </tfoot>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-specific-script')
<script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
    $(document).ready(function () {
        let startDate = @json($startDate);
        let endDate = @json($endDate);

        const table = $('#account-insights-table').DataTable({
            processing: true,
            serverSide: true,
            order: [[8, 'desc']],
            ajax: {
                url: '{{ route('insights.account.datatable') }}',
                data: function (d) {
                    if (startDate && endDate) {
                        d.start_date = startDate;
                        d.end_date = endDate;
                    }
                }
            },
            columns: [
                { data: 'source', name: 'source' },
                { data: 'account_name', name: 'account_name' },
                { data: 'impressions', name: 'impressions' },
                { data: 'clicks', name: 'clicks' },
                { data: 'ctr', name: 'ctr' },
                { data: 'cpc', name: 'cpc' },
                { data: 'conversions', name: 'conversions' },
                { data: 'spend', name: 'spend' },
                { data: 'date_start', name: 'date_start' }
            ],
            footerCallback: function () {
                const api = this.api();
                const toNumber = (value) => Number(String(value ?? '').replace(/[^0-9.-]/g, '')) || 0;
                const pageData = api.rows({ page: 'current' }).data();
                let impressions = 0;
                let clicks = 0;
                let conversions = 0;
                let spend = 0;

                for (let i = 0; i < pageData.length; i += 1) {
                    const row = pageData[i];
                    impressions += toNumber(row.impressions);
                    clicks += toNumber(row.clicks);
                    conversions += toNumber(row.conversions);
                    spend += toNumber(row.spend);
                }

                $(api.column(2).footer()).html(impressions.toLocaleString());
                $(api.column(3).footer()).html(clicks.toLocaleString());
                $(api.column(6).footer()).html(conversions.toLocaleString());
                $(api.column(7).footer()).html(`$${spend.toFixed(2)}`);
            }
        });

        table.on('xhr.dt', function () {
            const totals = table.ajax.json()?.totals || {};
            $('#account-summary-impressions').text(Number(totals.impressions || 0).toLocaleString());
            $('#account-summary-clicks').text(Number(totals.clicks || 0).toLocaleString());
            $('#account-summary-conversions').text(Number(totals.conversions || 0).toLocaleString());
            $('#account-summary-spend').text(`$${Number(totals.spend || 0).toFixed(2)}`);
        });

        const picker = $('#account-date-range');
        picker.daterangepicker({
            autoUpdateInput: false,
            locale: { cancelLabel: 'Clear' }
        });

        if (startDate && endDate) {
            picker.data('daterangepicker').setStartDate(moment(startDate));
            picker.data('daterangepicker').setEndDate(moment(endDate));
            picker.val(`${startDate} - ${endDate}`);
        } else {
            picker.val('');
        }

        picker.on('apply.daterangepicker', function (ev, selection) {
            startDate = selection.startDate.format('YYYY-MM-DD');
            endDate = selection.endDate.format('YYYY-MM-DD');
            $(this).val(`${startDate} - ${endDate}`);
            table.draw();
        });

        picker.on('cancel.daterangepicker', function () {
            startDate = null;
            endDate = null;
            $(this).val('');
            table.draw();
        });

        $('#account-clear-date').on('click', function () {
            startDate = null;
            endDate = null;
            picker.val('');
            table.draw();
        });
    });
</script>
@endsection