@extends('layouts.master')

@section('styles')
@endsection

@section('content')

                <!-- Start::app-content -->
                <div class="main-content app-content">
                    <div class="container-fluid">

                        <!-- Page Header -->
                        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
                            <h1 class="page-title fw-medium fs-24 mb-0">Taboola leads</h1>
                        </div>
                        <!-- Page Header Close -->

                        <div class="row">
                            <div class="col-xl-4">
                                <div class="card custom-card">
                                    <div class="card-header justify-content-between">
                                        <div class="card-title">
                                            Leads by site ID
                                        </div>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive">
                                            <table class="table text-nowrap mb-0">
                                                <thead class="thead-light">
                                                    <tr>
                                                        <th scope="col">Site ID</th>
                                                        <th scope="col">Total leads</th>
                                                        <!-- <th scope="col">Total CTA clicks</th> -->
                                                    </tr>
                                                </thead>
                                                <tbody class="top-selling">
                                                    @foreach($data['leads_by_site_id'] as $key => $leads_by_site_id)
                                                    <tr>
                                                        <td>
                                                            <span class="fw-semibold">{{ $leads_by_site_id->site_id }}</span>
                                                        </td>
                                                        <td>
                                                            <span class="fw-semibold">{{ $leads_by_site_id->leads_count }}</span>
                                                        </td>
                                                        {{--<td>
                                                            <span class="fw-semibold">{{ $leads_by_site_id->leads_cta_count }}</span>
                                                        </td>--}}
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-12">
                            <div class="card custom-card">
                                <div class="card-header justify-content-between">
                                    <div class="card-title">Taboola leads report</div>
                                    <!-- <div class="dropdown">
                                        <a aria-label="anchor" href="javascript:void(0);" class="btn btn-sm btn-outline-light shadow-sm" data-bs-toggle="dropdown" aria-expanded="false">
                                            View All
                                        </a>
                                        <ul class="dropdown-menu" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(0px, 30px);" data-popper-placement="bottom-start">
                                            <li><a class="dropdown-item" href="javascript:void(0);">Download</a></li>
                                            <li><a class="dropdown-item" href="javascript:void(0);">Import</a></li>
                                            <li><a class="dropdown-item" href="javascript:void(0);">Export</a></li>
                                        </ul>
                                    </div> -->
                                </div>
                                <div class="card-body active-tab">
                                    <div class="table-responsive">
                                        <table class="table table-bordered text-nowrap mb-0">
                                            <thead>
                                                <tr>
                                                    <th scope="col">S.NO</th>
                                                    <th scope="col">Lead</th>
                                                    <th scope="col">Phone number</th>
                                                    <th scope="col">Landing page</th>
                                                    <th scope="col">Location</th>
                                                    <th scope="col">Date</th>
                                                    <!-- <th scope="col">Call connected?</th> -->
                                                    <!-- <th scope="col">Action</th> -->
                                                </tr>
                                            </thead>
                                            <tbody class="">
                                                @foreach($data['leads_report'] as $key => $lead)
                                                <tr>
                                                    <td>{{ $key+1 }}</td>
                                                    <td>
                                                        <div class="d-flex">
                                                            <div class="flex-1">
                                                                <span class="mb-0 fs-14">{{ $lead->name }} ({{ $lead->annual_household_income }})</span><br>
                                                                <small>{{ $lead->age_range }}</small><br>
                                                                <small>Coverage type: {{ $lead->coverage_type }}</small>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span class="">{{ $lead->phone_number }}</span>
                                                    </td>
                                                    <td>{{ $lead->landing_page->name }}</td>
                                                    <td>
                                                        <span><i class="ri-map-pin-fill text-muted me-1"></i>{{ $lead->ip_info?->region_name }}, {{ $lead->ip_info?->country_name }}</span>
                                                    </td>
                                                    <td>{{ $lead->created_at->format('d-m-Y h:m:s') }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                {{ $data['leads_report']->links() }}
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- End::app-content -->

@endsection

@section('scripts')

@endsection