@extends('layouts.app')

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

@section('content')
@section('page_title')
Feed Landing Page
@endsection
<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <h3> Landing Page Report
            @can('hasExcelPermission')
                <form action="{{ url('exportfeedLandingPage') }}" class="pull-right">
                    @csrf
                    <button type="submit" class="landingpage_excel_btn btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
                    <input type="hidden" name="fromdate" id="from_date_hidden" />
                    <input type="hidden" name="todate" id="to_date_hidden" />
                </form>
                @endcan
            </h3>
        </div>

        <div class="card-body table-responsive">
            <form class="flex">
                <div class="form-group col-md-2">
                    <label for="period_filter">Choose Time Period</label>
                    <select id="period_filter" class="form-control">
                        <option value=''>Select</option>
                        <option value="1" selected>Today</option>
                        <option value="2">Yesterday</option>
                        <option value="3">This Month</option>
                        <option value="4">Last Month</option>
                        <option value="5">Last 6 Months</option>
                        <option value="6">This Year</option>
                        <option value="7">Last Year</option>
                    </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="start_date">From Date</label>
                    <input type="text" class="form-control" id="start_date" name="start_date" placeholder="Select Date" value="{{date('Y-m-d')}}">
                </div>

                <div class="form-group col-md-2">
                    <label for="end_date">To Date</label>
                    <input type="text" class="form-control" id="end_date" name="end_date" placeholder="Select Date" value="{{date('Y-m-d')}}">
                </div>
            </form>
            <div class="col-8 pl-0 mb-5 custom-z-index">
                @include('whistle_feed.feed_reports.clearFilter')
            </div>
            <table class="table-bordered table-hover" id="landing-table">
                <thead>
                    <tr>
                        <th>Assign Lead</th>
                        <th>Username</th>
                        <th>Mobile</th>
                        <th>Email</th>
                        <th>City</th>
                        <th>Web Url</th>
                        <th>Category</th>
                        <th>Web Visitors</th>
                        <th>Domain Age</th>
                        <th>Domain Auth</th>
                        <th>Page Authority</th>
                        <th>Average Time Spent</th>
                        <th>Bounce Rate</th>
                        <th>Utm Source</th>
                        <th>Created On</th>
                        <th>Lead Assigned To</th>
                        <th>Lead Status</th>
                        <th>Code Intergration</th>
                        <th>Comments</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>


    <!-- Lead Assigned modal start -->
    <div class="modal fade" id="assign_lead" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="modal-title">Lead Assign Details
                        <button type="button" class="close" data-dismiss="modal">
                            <span><i class="fa fa-times-circle" aria-hidden="true"></i></span>
                        </button>
                    </h5>
                    <hr>
                    <input type="hidden" id="modal-row-id">
                    <div class="row">
                        <label class="col-sm-4 control-label">UserName</label>
                        <label class="col-sm-1">:</label>
                        <div class="col-sm-7">
                            <p class="word-break-all view-modal-username">NA</p>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-sm-4 control-label">Mobile Number</label>
                        <label class="col-sm-1">:</label>
                        <div class="col-sm-7">
                            <p class="word-break-all view-modal-mobile">NA</p>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-sm-4 control-label">Email</label>
                        <label class="col-sm-1">:</label>
                        <div class="col-sm-7">
                            <p class="word-break-all view-modal-email">NA</p>
                        </div>
                    </div>
                    <div class="row">
                        <label for="datatypes" class="col-sm-4 control-label">Assigned To</label>
                        <label class="col-sm-1">:</label>
                        <div class="col-md-7 modal-assigned-to-block">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Lead Assinged modal end -->

    <div class="modal fade" id="status_comment" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title status-div-username">Username</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <label class="col-sm-4 control-label">Status</label>
                        <label class="col-sm-1">:</label>
                        <div class="col-md-7 modal-change-status-block">
                        </div>
                    </div>
                     <input type="hidden" id="comment-div-row-id">
                    <label class="control-label" for="comments">Write a Comment...</label>
                    <textarea id="comments" class="form-control height-100"></textarea>
                    <span class="comment-error redIcon"></span>
                    <button class="btn btn-primary btn-sm border-radius-0 mt-3 float-right" id="submit_comment">Submit</button>
                </div>
            </div>
        </div>
    </div>
<!-- status  modal end -->

     <!-- Lead Comment modal start -->
     <div class="modal fade" id="view_comment" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa fa-comment" aria-hidden="true"></i> View Comments <br>
                    <small>UserName: <span class="view-comment-username"></span></small></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- view Comments -->
                    <div class="panel-body view-comment-block mt-2">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
<script type="application/javascript" src="{{ asset('js/Whistle_Feed/feedlanding.js') }}"></script>
@endsection