@extends('layouts.app')

@section('content')

<style>
    .daterangepicker .calendar-table th, .daterangepicker .calendar-table td{
        min-width: 18px;
        width: 18px;
        height: 15px;
        line-height: 15px;
        font-size: 12px;
    }

    .check-box-container {
        width:20px !important;
        margin-bottom: -23px !important;
        margin-left: 29px;
    }

    .checkmark {
    position: absolute;
    /* top: 5px !important;
    left: 76px !important; */
    height: 25px;
    width: 25px;
    background-color: #eee;
    accent-color: #34548A !important;
}

.fs-dropdown .fs-options {
    max-height: 113px;
    overflow: auto;
}

#downlaodBtn {
    color: #ffffff;
    text-decoration: none;
}

#downlaodBtn:hover {
    color:#ffffff;
    text-decoration:none;
    cursor:pointer;
}

#linechart_material
{
    /*overflow: scroll;*/
}

input[type="text"]
{
    padding: 5px 22px !important;
}

span.select2-selection.select2-selection--single
{
    height: 35px;
}

.capitalize
{
    min-height: 34px !important;
    text-transform: uppercase;
}

.pt-5, .py-5
{
    padding-top: 1.9rem!important;
}

.inline-label
{
   display:table-cell;
   white-space: nowrap
}

.modal
{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content
{
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    height: 60%;
}

/* The Close Button */
.close
{
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus
{
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal2
{
    padding-top: 6px !important;
    overflow: scroll !important;
}

.modal2 .modal-content
{
    height: 90% !important;
    text-align: left !important;
}

.checkBoxContents
{
    overflow-y: auto;
    max-height: 220px;
}
/* Class Starts for Google Charts */
#labelledChart g text{
    font-family: 'Montserrat',sans-serif;
    font-size: 14px;
}
#blockedChart g text{
    font-family: 'Montserrat',sans-serif;
    font-size: 14px;
}
/* CLass Ends For Google Charts */

.labelledStyle
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    margin-left: 36%;
    pointer-events: none;
    font-family: 'Montserrat';
}

.labelled_inner_1 input[type="checkbox"]:before
{
    content: '';
    display: inline-block;
    margin: 0px 0px -2px 0;
    width: 14px;
    height: 15px;
    background: #4185c6;
}

.labelled_inner_2 input[type="checkbox"]:before
{
    content: '';
    display: inline-block;
    margin: 0px 0px -2px 0;
    width: 14px;
    height: 15px;
    background: #34548a;
}

.pieChartCoreAll
{
    width: 14%;
}

.pieChartCarr
{
    width: 13%;
}

.labelledPieChart
{
    margin-left:20%
}

@media only screen and (max-width: 1500px)
{
    .pieChartCoreAll
    {
        width: 14%;
    }

    .pieChartCarr
    {
        width: 13%;
    }

    .labelledPieChart
    {
        margin-left:20%;
    }
}

</style>
<div class="container-fluid" >
    <div id="loaderModal" class="modal">
        <img class="loader-img" src="../images/ajax-spinner.gif">
        <span class="loader-text">Please wait ...</span>
    </div>
    <div class="card shadow-lg">
        <div class="card-header">
            <div class="row">
                <div class="col-md-3">
                    <label class="select-date-lbl">Select Date</label>
                    <input type="text" class="input-date datepicker" id="date-input" name="daterange" placeholder="yyyy/mm/dd" value="{{$daterange}}"  style="width: 100%;" />
                </div>

                <div class="col-md-4">
                    <label class="select-date-lbl">Users By Business Name: &nbsp;</label>
                    <div class="input-group-append">
                        <select class="userBox" multiple class="form-control col-md-12" id="userList" style="width:100%" name="users[]">
                            @foreach($users as $key => $value)
                                @php
                                    $selected = '';
                                    if(in_array($key, $whitelistedUsers))
                                    {
                                        $selected = 'selected';
                                    }
                                @endphp

                                <option value="{{$key}}" {{$selected}}>{{$value}}</option>
                            @endforeach
                        </select>
                        <span class="input-group-text" onclick="updateAll()" data-toggle="tooltip" data-placement="top" title="Select All Business Name">
                            <b>All</b>&nbsp;
                            <input type="checkbox" id="selectAll" value="yes" aria-label="Checkbox for following text input" style="accent-color: #34548A !important";>
                        </span>
                        <span class="input-group-text" onclick="refreshAll()">
                            <i class="fas fa-sync-alt" data-toggle="tooltip" data-placement="top" title="Reset to Default"></i>
                        </span>
                    </div>
                </div>

                <div class="col-md-2">
                    <label class="select-date-lbl"><b>Filter:</b></label>
                    <select class="filterBox form-control" id="includeExclude">
                        <option value="hide">To Display</option>
                        <option value="exclude">Exclude</option>
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="select-date-lbl"><b>Display Greater Than (%):</b></label>
                    <div class="row">
                        <div class="col-md-6">
                            <label class="inline-label" for="greaterThan"  data-toggle="tooltip" data-placement="top" title="Labelled"><b>L:</b></label>
                            <span style="display: table-cell;padding: 0 0 0 5px">
                                <input type="number" class="form-control" id="greaterThan" value="10">
                            </span>
                        </div>
                        <div class="col-md-6">
                            <label class="inline-label" for="greaterThanBlocked"  data-toggle="tooltip" data-placement="top" title="Blocked"><b>B:</b></label>
                            <span style="display: table-cell;padding: 0 0 0 5px">
                                <input type="number" class="form-control" id="greaterThanBlocked" value="5">
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row py-2">
                <div class="col-md-12">
                    <button id="compare" class="capitalize">Refresh</button>
                    <button id="carriersButton" class="capitalize">Carriers & Apps</button>
                    <button id="myBtn" class="capitalize px-2">Manage List</button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-10">
                    <div id="labelledPieChart" class="row labelledPieChart">

                    </div>
                </div>
                <div class="col-md-2" style="margin-top:58px">
                    <h6>Labelled Ratio</h6>
                    <div class="labelledStyle">
                        <div class="labelled_inner_1">
                            <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" checked>
                            <label class="form-check-label" for="defaultCheck2">
                                Not Labelled
                            </label>
                        </div>
                        <div class="labelled_inner_2">
                            <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" checked>
                            <label class="form-check-label" for="defaultCheck1">
                                Labelled
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div id="labelledChart" style="width:100%; height: 500px;"></div>

            <div class="row">
                <div class="col-md-10">
                    <div id="blockedPieChart" class="row labelledPieChart">

                    </div>
                </div>
                <div class="col-md-2" style="margin-top:58px">
                    <h6>Blocked Ratio</h6>
                    <div class="labelledStyle">
                        <div class="labelled_inner_1">
                            <input class="form-check-input" type="checkbox" value="" id="defaultCheck3" checked>
                            <label class="form-check-label" for="defaultCheck3">
                                Not Blocked
                            </label>
                        </div>
                        <div class="labelled_inner_2">
                            <input class="form-check-input" type="checkbox" value="" id="defaultCheck4" checked>
                            <label class="form-check-label" for="defaultCheck4">
                                Blocked
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div id="blockedChart" style="width:100%; height: 500px;"></div>
        </div>
    </div>
</div>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <div class="row">
            <div class="col-md-12">
                <label class="select-date-lbl">Users By Business Name: &nbsp;</label>
                <div class="input-group-append">
                    <select
                        class="userBox"
                        multiple
                        class="form-control col-md-12"
                        id="userListWhitelist"
                        style="width:100%"
                        name="users[]"
                    >
                        <option value="">Please Select</option>
                        @foreach($users as $key => $value)
                            @php
                                $selected = '';
                                if(in_array($key, $whitelistedUsers))
                                {
                                    $selected = 'selected';
                                }
                            @endphp
                            <option value="{{$key}}" {{$selected}}>{{$value}}</option>
                        @endforeach
                    </select>
                    <span class="input-group-text" onclick="updateAllPopUp()" data-toggle="tooltip" data-placement="top" title="Select All Business Name">
                        <b>All</b>&nbsp;
                        <input type="checkbox" id="selectAllPopup" value="yes" aria-label="Checkbox for following text input" style="accent-color: #34548A !important";>
                    </span>
                    <span class="input-group-text" onclick="refreshAllSelected()">
                        <i class="fas fa-sync-alt" data-toggle="tooltip" data-placement="top" title="Reset to Default"></i>
                    </span>
                </div>
            </div>
        </div>

        <div class="row py-5">
            <div class="col-md-12">
                <button id="saveList">SAVE LIST</button>
            </div>
        </div>
    </div>
</div>

<div id="carriersPopUp" class="modal modal2">
    <div class="modal-content">
        <span class="close">&times;</span>
        <div class="row">
            <div class="col-md-12">
                <div class="accordion" id="accordionExample">
                    @php
                        $carriersCount = array();
                    @endphp
                    @foreach($carriers as $key => $value)
                        @php
                            $carriersCount[$key] = 0;
                        @endphp
                        <div class="card">
                            <div
                                class="card-header px-4"
                                data-toggle="collapse"
                                data-target="#collapse{{$key}}"
                                aria-expanded="true"
                                aria-controls="collapse{{$key}}"
                            >
                                <span
                                    onclick="AllCarriers(event, '{{$key}}')"
                                >
                                    <input
                                        type="checkbox"
                                        id="checkBox{{$key}}"
                                        class="form-check-input"
                                        type="checkbox"
                                        {{($key == 'top_carriers')? 'checked': ''}}
                                    >
                                    <label class="form-check-label" for="checkBox{{$key}}">
                                        {{ucwords(str_replace('_', ' ', $key))}}
                                    </label>
                                </span>
                            </div>
                            <div
                                id="collapse{{$key}}"
                                class="collapse {{($key == 'top_carriers')? 'show': ''}}"
                                aria-labelledby="{{$key}}"
                                data-parent="#accordionExample"
                            >
                                <div class="card-body p-2 checkBoxContents">
                                    @foreach($value as $carr)
                                        @php
                                            $carriersCount[$key]++;
                                        @endphp
                                        <div class="form-check">
                                            <input
                                                type="checkbox"
                                                name="carriers[]"
                                                class="form-check-input"
                                                id="carrier{{str_replace('&', '',$carr['value'])}}"
                                                value="{{$carr['value']}}"
                                                {{$carr['select']}}
                                                onclick="UpdateCheckedCarriers()"
                                                carriertype="{{$key}}"
                                            >

                                            <label
                                                class="form-check-label"
                                                for="carrier{{$carr['value']}}"
                                            >
                                                {{$carr['value']}}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="row py-5">
            <div class="col-md-12 text-center">
                <button id="refreshCarr" class="capitalize">Refresh</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    var modal = document.getElementById("myModal");
    var endDate = "";
    var startDate = "";
    var users = {{json_encode($whitelistedUsers)}};
    var type = $('#type').val()
    var includeExclude = $('#includeExclude').val();
    var greaterThan = $('#greaterThan').val();
    var greaterThanBlocked = $('#greaterThanBlocked').val();
    var totalUsers =