@extends('backend.layouts.app')

@section('title') {{ __($module_action) }} {{ $module_title }} @endsection



@section('content')
<!--begin::Content-->
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Toolbar-->
       @include('backend.includes.breadcrumb',['remove_create'=>'true','title_change'=>'Reports'])
        <!--end::Toolbar-->
        <!--begin::Post-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-xxl">
                <!--begin::Products-->
                <div class="card card-flush">
                    <!--begin::Card header-->
                    <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                        <!--begin::Card title-->
                        <div class="card-title">
                            <!--begin::Search-->
                            <div class="d-flex align-items-center position-relative my-1">
                                <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                                <span class="svg-icon svg-icon-1 position-absolute ms-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
                                        <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                                <input type="text"  id="mainsearch" class="form-control form-control-solid w-250px ps-14 me-5" placeholder="Search Report" />
                                

                                <button type="button" data-kt-feeds-table-filter="search" class="btn btn-light-primary my-1" >Search</button>
                            </div>
                            <!--end::Search-->
                            <!--begin::Export buttons-->
                            <div id="kt_ecommerce_report_shipping_export" class="d-none"></div>
                            <!--end::Export buttons-->
                        </div>
                        <!--end::Card title-->

                        <!--begin::Card toolbar-->
                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5">

                            <!--begin::Daterangepicker-->
                            <input class="form-control form-control-solid w-100 mw-250px" placeholder="Pick date range" id="kt_ecommerce_report_sales_daterangepicker" />
                            <!--end::Daterangepicker-->

                            <!-- Start For Column Visibility -->
                            <div class="dropdown">
                                <button class="btn btn-light-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-eye"></i> Column Visibility
                                </button>
                                <ul class="dropdown-menu dropdownMenuButton1" aria-labelledby="dropdownMenuButton1" onclick="event.stopPropagation()">
                                    <!--end::Menu item-->
                                    <li> 
                                        
                                        <div class="menu-item px-3 mb-1">
                                        <a class=" menu-link px-3 toggle-vis " tabindex="0" aria-controls="kt_report_feeds_table" data-column="0"><span>ID</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis active" tabindex="0" aria-controls="kt_report_feeds_table" data-column="1"><span>Job Id</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis active" tabindex="0" aria-controls="kt_report_feeds_table" data-column="2"><span>Job URL</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="3"><span>SubId</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="4"><span>CW SubId</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="5"><span>Client Click ID</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="6"><span>Original CPC</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis active" tabindex="0" aria-controls="kt_report_feeds_table" data-column="7"><span>CPC</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="8"><span>Client CPC</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis " tabindex="0" aria-controls="kt_report_feeds_table" data-column="9"><span>Job Title</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis " tabindex="0" aria-controls="kt_report_feeds_table" data-column="10"><span>Feed Name</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis active" tabindex="0" aria-controls="kt_report_feeds_table" data-column="11"><span>Client</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="12"><span>IP</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="13"><span>IPV4</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="14"><span>IPV6</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis active" tabindex="0" aria-controls="kt_report_feeds_table" data-column="15"><span>Device Type</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="16"><span>Ip Details</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="17"><span>User Agent</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="18"><span>Captcha Passed ?</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis active" tabindex="0" aria-controls="kt_report_feeds_table" data-column="19"><span>BOT Status</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="20"><span>Bot Reason</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis active" tabindex="0" aria-controls="kt_report_feeds_table" data-column="21"><span>Country</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="22"><span>Duplicate ?</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="23"><span>Created At</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="24"><span>HTTP Referrer</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="25"><span>Affiliate Name</span></a>
                                        </div>
                                        <div class="menu-item px-3 mb-1">
                                        <a class="menu-link px-3 toggle-vis" tabindex="0" aria-controls="kt_report_feeds_table" data-column="26"><span>E mail</span></a>
                                        </div>

                                    </li>
                                    <!--end::Menu item-->   
                                </ul>
                            </div>
                            <!-- End For Column Visibility -->

                            {!! Form::open(array('route' => 'export.job.click.ipqs.data', 'class' => 'form exportform', 'novalidate' => 'novalidate','method'=>'GET')) !!}            
                                @include('flash::message')
                            
                            <button type="button" class="btn btn-light-primary exportbutton"><i class="glyphicon glyphicon-minus"></i>Export</button>
                            <input type="hidden" class="ipqs_start_date" name="ipqs_start_date" value="" />
                            <input type="hidden" class="ipqs_end_date" name="ipqs_end_date" value="" />
                            <input type="hidden" class="form-control" name="ipqs_id" id="ipqs_id" autocomplete="off">
                            <input type="hidden" class="form-control" name="ipqs_job_id" id="ipqs_job_id" autocomplete="off">
                            <input type="hidden" class="form-control" name="ipqs_sub_id" id="ipqs_sub_id" autocomplete="off">

                            <input type="hidden" class="form-control" name="ipqs_job_title" id="ipqs_job_title" autocomplete="off">
                            <input type="hidden" class="form-control" name="ipqs_name" id="ipqs_name" autocomplete="off">
                            <input type="hidden" class="form-control" name="ipqs_client_name" id="ipqs_client_name" autocomplete="off">
                            <input type="hidden" class="form-control" name="ipqs_email" id="ipqs_email" autocomplete="off">
                            <input type="hidden" class="form-control" name="ipqs_aff_name" id="ipqs_aff_name" autocomplete="off">
                            <input type="hidden" class="form-control" name="ipqs_ip" id="ipqs_ip" autocomplete="off">
                            <input type="hidden" class="form-control" name="ipqs_ipv4" id="ipqs_ipv4" autocomplete="off">
                            <input type="hidden" class="form-control" name="ipqs_ipv6" id="ipqs_ipv6" autocomplete="off">
                            <input type="hidden" class="form-control" name="ipqs_country" id="ipqs_country" autocomplete="off">
                            {!! Form::close() !!}

                            <!--begin::Export dropdown-->
                            <button type="button" class="btn btn-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr078.svg-->
                            <span class="svg-icon svg-icon-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1" transform="rotate(90 12.75 4.25)" fill="currentColor" />
                                    <path d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z" fill="currentColor" />
                                    <path d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z" fill="#C4C4C4" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->Export Report</button>
                            <!--begin::Menu-->
                            <div id="kt_ecommerce_report_shipping_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4" data-kt-menu="true">
                                <!--begin::Menu item-->
                                <div class="menu-item px-3">
                                    <a href="#" class="menu-link px-3" data-kt-ecommerce-export="copy">Copy to clipboard</a>
                                </div>
                                <!--end::Menu item-->
                                <!--begin::Menu item-->
                                <div class="menu-item px-3">
                                    <a href="#" class="menu-link px-3" data-kt-ecommerce-export="excel">Export as Excel</a>
                                </div>
                                <!--end::Menu item-->
                                <!--begin::Menu item-->
                                <div class="menu-item px-3">
                                    <a href="#" class="menu-link px-3" data-kt-ecommerce-export="csv">Export as CSV</a>
                                </div>
                                <!--end::Menu item-->
                                <!--begin::Menu item-->
                                <div class="menu-item px-3">
                                    <a href="#" class="menu-link px-3" data-kt-ecommerce-export="pdf">Export as PDF</a>
                                </div>
                                <!--end::Menu item-->
                            </div>
                            <!--end::Menu-->
                            <!--end::Export dropdown-->
                            <!--begin::Group actions-->
                            <div class="d-flex justify-content-end align-items-center d-none" data-kt-feeds-table-toolbar="selected">
                                <div class="fw-bolder me-5">
                                <span class="me-2" data-kt-feeds-table-select="selected_count"></span>Selected</div>
                                <button type="button" class="btn btn-danger" data-kt-feeds-table-select="delete_selected">Delete Selected</button>
                            </div>
                            <!--end::Group actions-->
                        </div>
                        <!--end::Card toolbar-->
                    </div>
                    <!--end::Card header-->
                    
                    <!--begin::Card body-->
                    <div class="card-body pt-0">
                        <!--begin::Table-->
                        <input type="hidden" class="start_date" name="start_date" value="" />
                        <input type="hidden" class="end_date" name="end_date" value="" />

                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_report_feeds_table">
                            <!--begin::Table head-->
                            <thead>
                                
                                <tr role="row" class="filter">
                                    <td><input type="text" data-kt-table-widget-4="search" class="form-control w-150px fs-7 ps-5" placeholder="Search ID" name="id" id="id" autocomplete="off"></td>
                                    <td><input type="text" data-kt-table-widget-4="search" class="form-control w-150px fs-7 ps-5" placeholder="Search Job ID" name="job_id" id="job_id" autocomplete="off"></td>
                                    <td></td>
                                    <td><input type="text" data-kt-table-widget-4="search" class="form-control w-150px fs-7 ps-5" placeholder="Search Sub ID" name="sub_id" id="sub_id" autocomplete="off"></td>
                                    <td><input type="text" data-kt-table-widget-4="search" class="form-control w-150px fs-7 ps-5" placeholder="Search CW subid" name="cw_subid" id="cw_subid" autocomplete="off"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td><input type="text" data-kt-table-widget-4="search" class="form-control w-150px fs-7 ps-5" placeholder="Search Job Title" name="job_title" id="job_title" autocomplete="off"></td>
                                    <td><input type="text" data-kt-table-widget-4="search" class="form-control w-150px fs-7 ps-5" placeholder="Search Feed Name" name="feed_name" id="feed_name" autocomplete="off"></td>
                                    <td><input type="text" data-kt-table-widget-4="search" class="form-control w-150px fs-7 ps-5" placeholder="Search Client" name="client_name" id="client_name" autocomplete="off"></td>
                                    <td><input type="text" data-kt-table-widget-4="search" class="form-control w-150px fs-7 ps-5" placeholder="Search IP" name="ip" id="ip" autocomplete="off"></td>
                                    <td>
                                        <!--begin::Status-->
                                        <div class="d-flex align-items-center fw-bolder">
                                            <!--begin::Select-->
                                            <select name="ipv4" id="ipv4" class="form-select form-select-transparent text-dark fs-7 lh-1 fw-bolder py-0 ps-3 w-auto" data-control="select2" data-hide-search="true" data-dropdown-css-class="w-150px" data-placeholder="IPV4?" data-kt-table-widget-4="ipv4">
                                            <option value="all" selected="selected">IPV4?</option>
                                            <option value="yes">Yes</option>
                                            </select>
                                            <!--end::Select-->
                                        </div>
                                        <!--end::Status-->
                                    </td>
                                    <td>
                                        <!--begin::Status-->
                                        <div class="d-flex align-items-center fw-bolder">
                                            <!--begin::Select-->
                                            <select name="ipv6" id="ipv6" class="form-select form-select-transparent text-dark fs-7 lh-1 fw-bolder py-0 ps-3 w-auto" data-control="select2" data-hide-search="true" data-dropdown-css-class="w-150px" data-placeholder="IPV6?" data-kt-table-widget-4="ipv6">
                                            <option value="all" selected="selected">IPV6?</option>
                                            <option value="yes">Yes</option>
                                            </select>
                                            <!--end::Select-->
                                        </div>
                                        <!--end::Status-->
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td><input type="text" data-kt-table-widget-4="search" class="form-control w-150px fs-7 ps-5" placeholder="Search Country" name="country" id="country" autocomplete="off"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td><input type="text" data-kt-table-widget-4="search" class="form-control w-150px fs-7 ps-5" placeholder="Search Affiliate" name="affiliate_name" id="affiliate_name" autocomplete="off"></td>
                                    <td></td>
                                    
                                </tr>
                           
                                <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                                    <th>
                                        id
                                    </th>
                                    <th>
                                        Job Id
                                    </th>
                                    <th>
                                        Job URL
                                    </th>
                                    <th>
                                        SubId
                                    </th>
                                    <th>
                                        CW SubId
                                    </th>
                                    <th>
                                         client click id
                                    </th>
                                       
                                    <th>
                                        Original Cpc
                                    </th>
                                    <th>
                                        CPC
                                    </th>
                                    <th>
                                        Client Cpc
                                    </th>
                                    <th>
                                        Job Title
                                    </th>
                                    <th>
                                        feed Name
                                    </th>
                                    <th>
                                        Client
                                    </th>
                                    <th>
                                        Ip
                                    </th>
                                    <th>
                                        Ipv4
                                    </th>
                                    <th>
                                        Ipv6
                                    </th>
                                    <th>
                                        Device Type
                                    </th>
                                    <th>
                                        Ip Details
                                    </th>
                                    <th>
                                        user agent
                                    </th>
                                    <th>
                                        Captcha Passed ?
                                    </th>
                                    <th>
                                        BOT Status
                                    </th>
                                    <th>
                                        Bot Reason
                                    </th>
                                    <th>
                                        Country
                                    </th>
                                    <th>Duplicate ?</th>
                                    <th>
                                        Created At
                                    </th>
                                    <th>
                                        HTTP Referrer
                                    </th>
                                    <th>
                                        Affiliate Name
                                    </th>
                                    <th>
                                       E-mail
                                    </th>
                                    <!-- <th class="text-right">
                                        Action
                                    </th> -->
                                </tr>
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody class="text-gray-600 fw-bold">
                            </tbody>
                            <!--end::Table body-->
                        </table>
                        <!--end::Table-->
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Products-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>
<!--end::Content-->

 <div class="card-footer">
    <div class="row">
        <div class="col-7">
            <div class="float-left">

            </div>
        </div>
        <div class="col-5">
            <div class="float-right">

            </div>
        </div>
    </div>
</div>

@endsection

@push ('after-styles')
<!-- DataTables Core and Extensions -->
<style type="text/css">
    .hide_column{
         display : none;
    }

    .toggle-vis.active{
    transition: color .2s ease,background-color .2s ease;
    background-color: #f1faff;
    color: #009ef7;
    }
    .dropdownMenuButton1{    
        max-height: 400px;
        overflow: scroll;
    }

    td.max_width_class {
        max-width: 500px;
    }
</style>
@endpush

@push ('after-scripts')
<!-- DataTables Core and Extensions -->
<script src="{{asset('assets/js/custom/apps/ecommerce/reports/stats/stats.js')}}"></script>
<script type="text/javascript">
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');    
    var feedurl = '{{ url("$module_name/index_data") }}';

    $(".exportbutton").on('click', function(event){
        event.preventDefault();
        $('.exportform').get(0).submit();

    });
</script>

@endpush