@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title')
Whistle Feed Report
@endsection
<style>
.dataTables_scroll {
    overflow: auto;
}
.oemApiRefreshBtn{
    height : 34px;
    border-radius:5px;
}
.item_url {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid #DEE2E6;
    border-radius: 5px;
    background-color: #F8F9FA;
    width: 80%;
    height: 60%;
}
.copy-button {
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.url-payload{
    margin-bottom: 0px;
    font-weight: 800;
}
.item_payload {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #DEE2E6;
    border-radius: 5px;
    width: 60%;
    height: 40px;
    margin-left: 5px;
    background-color: #F8F9FA;
    white-space: revert;
    word-break: break-all;
    padding-top: 37px;
    padding-bottom: 37px;
}
.copy-button:hover {
    background-color: #3b3b3b;
}
.copy-button i {
    font-size: 16px;
}
</style>
<div class="container-fluid">
    <div class="card">
        <div class="row ml-0 mr-0 mt-4 mb-n4">
            <div class="form-group col-md-3">@include('whistle_feed.menu_dropdown.report')</div>
            <div class="col-md-9">
                <div class="pull-right mr-3">
                    <button type="submit" class="oemApiRefreshBtn btn excel-btn btn-sm border-0 border-radius-0">Run Report</button>
                </div>
                <div class="item_url">
                    <div>
                        <label for="api_url" class="url-payload">URL : </label>
                        <span class="text" id="api_url"></span>
                    </div>
                    <div>
                       <button class="copy-button" id="copy_url"><i class="fas fa-copy"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body table-responsive">
            <form>
                <div class="d-flex flex-wrap">
                    <div class="form-group col-md-2 pl-0" style="margin-top:15px;">
                        <label for="period_filter">Choose OEM ID</label>
                        <select id="oemIdFilter" class="form-control cform-control divs input-size">
                        </select>
                    </div>
                    <div class="form-group col-md-1 pl-0"></div>
                    <div class="item_payload">
                       <div>
                            <label for="api_request" class="url-payload">Payload : </label>
                            <span class="text payload" id="api_request"></span>
                        </div>
                        <div>
                            <button class="copy-button" id="copy_request"><i class="fas fa-copy"></i></button>
                        </div>
                    </div>
                </div>
            </form>
            <table class="table-bordered table-hover text-center" id="oemapi-report-table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Brand Name</th>
                        <th>Campaign Id</th>
                        <th>Creative Id</th>
                        <th>Website</th>
                        <th>Image URL</th>
                        <th>Bid Price</th>
                        <th>Capping</th>
                        <th>Currency</th>
                        <th>SubText</th>
                        <th>Geo</th>
                        <th>Dimension</th>
                        <th>Campaign Type</th>
                        <th>Language</th>
                        <th>Category</th>
                        <th>Event Name</th>
                        <th>Campaign App</th>
                        <th>Final URL</th>
                        <th>Imp URL</th>
                        <th>King URL</th>
                        <th>Tracker</th>
                        <th>Redirection URL</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Total</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script type="application/javascript">
$(document).ready(function() {
    $('#copy_url, #copy_request').hide();
    var excludeWebsites = "