@extends('layouts.app')
@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header d-flex flex-row justify-content-between">
            <div class="">
                <strong>Whistle Feed Hourly Based Sourcing Url Data</strong>
            </div>
            <div>
                <strong>From Date</strong> :: {{$from_date}}
                <strong> To Date</strong> :: {{$to_date}}
            </div>
            <div>
                <p><strong>Website Id :</strong> WFP{{$website_id}}</p>
            </div>
            <div>
                @can('hasExcelPermission')
                <!-- <form class="pull-right mr-3" action="{{ url('exportSourcingUrlData') }}">
                    @csrf
                    <button type="submit" class="btn excel-btn btn-sm border-radius-0"><i class="fa fa-download"></i> Export All Sourcing URL Data</button>
                    <input type="hidden" name="sourcingfromdate" id="sourcing_from_date_hidden" value="{{$from_date}}" />
                    <input type="hidden" name="sourcingtodate" id="sourcing_to_date_hidden" value="{{$to_date}}" />
                    <input type="hidden" name="sourcingwebsiteid" id="sourcing_website_id_hidden" value="{{$website_id}}" />
                </form> -->
                <form class="pull-right mr-3" action="{{ url('exportSourcingUrlDataHourly') }}">
                    @csrf
                    <button type="submit" class="export-feedpublishersourcingurlreport btn excel-btn btn-sm border-radius-0"><i class="fa fa-download"></i> Export Hourly Wise Sourcing URL Data</button>
                    <input type="hidden" name="sourcingfromdatehourly" id="sourcing_from_date_hourly_hidden" value="{{$from_date}}" />
                    <input type="hidden" name="sourcingtodatehourly" id="sourcing_to_date_hourly_hidden" value="{{$to_date}}" />
                    <input type="hidden" name="sourcingwebsiteidhourly" id="sourcing_website_id_hourly_hidden" value="{{$website_id}}" />
                </form>
                @endcan
            </div>
        </div>
        <div class="card-body">
            <table class="table-bordered table-hover text-center" id="sourcing-url-table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Publisher Token</th>
                        <th>Date</th>
                        <th>Hours</th>
                        <th>Sourcing Url</th>
                        <th>Impressions</th>
                        <th>Clicks</th>
                        <th>Unique Clicks</th>
                        <th>Conversions</th>
                        <th>Revenue</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($data as $val)
                    <tr>
                        <td>{{$loop->index +1 }}</td>
                        <td>{{$val->publisher_token}}</td>
                        <td>{{$val->created_date}}</td>
                        <td>
                            0:00                        </td>
                        <td><a href="{{$val->sourcing_url}}" target="_blank">{{$val->sourcing_url}}</a></td>
                        <td>{{$val->impressions}}</td>
                        <td>{{$val->clicks}}</td>
                        <td>{{$val->unique_clicks}}</td>
                        <td>{{$val->conversions}}</td>
                        <td>{{$val->revenue}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="application/javascript">
    $(function() {
        $('#sourcing-url-table').DataTable({
            "bLengthChange": false,
            "pageLength": 20,
            "scrollX": true,
            "lengthChange": false,
            "scrollY":  400,
            "scrollCollapse": true,
            "fixedHeader":{ header: true}
        });
    });
</script>
@endsection