@extends('layouts.app')

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

@section('content')
<style>
   #sms-dashboard-table_length{
display: block;
    }
</style>
@section('page_title') SMS Campaign @endsection
<div class="container-fluid">
	<div class="card">
        <div class="card-header"><h4> <b>SMS Campaign Dashboard</b>
        @can('hasExcelPermission')
        <form class="pull-right mb-0" action="{{ url('devops/devopsexportsmsdashboard') }}" method="POST">
                @csrf
                <button type="submit" class="export-sms-excel btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
                <input type='hidden' name="from_data_hidden" id="from_data_hidden"/>
                <input type='hidden' name="to_data_hidden" id="to_data_hidden"/>
            </form>
            @endif
            </h4>
        </div>
        <div class="card-body table-responsive" >
            <form class="flex">
            <div class="form-group col-md-2 pl-0">
                        <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>
            <table class="table table-bordered table-hover" id="sms-dashboard-table">
                <thead>
                    <tr>
                    <th scope="col"> Launch ID  </th>
                    <th scope="col"> Organisation Name</th>
                    <th scope="col"> Created On</th>
                    <th scope="col"> Exexuted On</th>
                    <th scope="col"> Parent ID  </th>
                    <th scope="col"> Brand Name</th>
                    <th scope="col"> Pushed Volume</th>
                    <th scope="col"> Submission </th>
                    <th scope="col">Delivered</th>
                    <th scope="col"> Clicks     </th>
                    <th scope="col"> Unique Clicks </th>
                    <th scope="col">Bot Clicks  </th>
                    <th scope="col"> P2S
                         <span data-toggle="tooltip" title="(Volume count * 100) / Pushed Volume "><i class="fa fa-info-circle" aria-hidden="true"></i></span>
                    </th>
                    <th scope="col"> Actual CTR  <span data-toggle="tooltip" title=" (Clicks * 100)/Submission "><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th scope="col"> UCR <span data-toggle="tooltip" title=" (Unique Clicks * 100)/Clicks "><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th scope="col"> Bot% <span data-toggle="tooltip" title=" (Bot Clicks * 100)/(Clicks + Bot Clicks) "><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                
                    <th scope="col">Status</th>
                </tr>
                </thead>
            </table>
        </div>
	</div>
</div>
<script>
    $(document).ready(function() {
            getsmsreport();
         
       
           
            
        });
    </script>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}"/>
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="application/javascript" src="{{ asset('js/Devops/smsdashboard.js') }}"></script>
@endsection