@extends('layouts.app')

@section('content')

<div class="container" >
    <div class="margin-top-bottom textlabel">
        <h2>Test Call Status</h2>
    </div>
    <div class="calender-container">
            <form action="" method="POST">
                @csrf
                <p><label class="select-date-lbl">Select Date: &nbsp;</label><input type="text" class="input-date datepicker" id="date-input" name="date-input" placeholder="yyyy/mm/dd" value={{$date_input}} autocomplete="off" />
                    <button class="select-date-btn">Submit</button>
                </p>
            </form>
    </div>
    <div class="margin-top-bottom textlabel">
        <label>Pending: </label> <span>{{$counts['pendding']}}</span>
        <label>Success: </label> <span>{{$counts['success']}}</span>
        <label>Retries: </label> <span>{{number_format($retryPercent, 2)}}% ({{$totalRetry}})</span>
        <label>Initiated: </label> <span>{{$initiated['initiated']}}</span>

    </div>

    @php
        $high = array(
            'reboots' => max(array_column($all_counts, 'rebootRequestsResult')),
            'pending' => max(array_column($all_counts, 'pendingResult')),
            'success' => max(array_column($all_counts, 'successResult')),
            'retries' => max(array_column($all_counts, 'retryResult')),
            'lb' => max(array_column($all_counts, 'labeledBlockedResult')),
            'nocname' => max(array_column($all_counts, 'NoBusinessNamePresentedResult')),
        );

        $low = array(
            'reboots' => min(array_column($all_counts, 'rebootRequestsResult')),
            'pending' => min(array_column($all_counts, 'pendingResult')),
            'success' => min(array_column($all_counts, 'successResult')),
            'retries' => min(array_column($all_counts, 'retryResult')),
            'lb' => min(array_column($all_counts, 'labeledBlockedResult')),
            'nocname' => min(array_column($all_counts, 'NoBusinessNamePresentedResult')),
        );
    @endphp

    <div class="margin-top-bottom">
        <div class="container daily-calling-status-table-container">
                <table id="daily-calling-status-count-table">
                    <thead>
                        <tr>
                            <th class="search-field-th" colspan="2"></th>
                            <th class="textlabel reboots-head-count">High:  {{$high['reboots']}}<br>Low: {{$low['reboots']}}</th>
                            <th class="textlabel pending-head-count">High: {{$high['pending']}}<br>Low: {{$low['pending']}}</th>
                            <th class="textlabel stalled-head-count">Count: {{array_sum(array_column($all_counts, 'stalled10'))}}</th>
                            <th class="textlabel success-head-count">High: {{$high['success']}}<br>Low: {{$low['success']}}</th>
                            <th class="textlabel retries-head-count">High: {{$high['retries']}}<br>Low: {{$low['retries']}}</th>
                            <th class="textlabel label-block-head-count">High: {{$high['lb']}}<br>Low: {{$low['lb']}}</th>
                            <th class="textlabel no-cname-head-count">High: {{$high['nocname']}}<br>Low: {{$low['nocname']}}</th>
                        </tr>
                        <tr>
                            <th>Device Name</th>
                            <th>Device #</th>
                            <th>Carrier Name</th>
                            <th>Reboots</th>
                            <th>Pending</th>
                            <th>Stalled 10</th>
                            <th>Success</th>
                            <th>Retries</th>
                            <th>Labels & Blocks</th>
                            <th>No CNAME</th>
                        </tr>
                    </thead>
                </table>
        </div>
    </div>
</div>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
<script>
    /*************************added by 1206 *******************/
    $( function() {
        $( ".datepicker" ).datepicker({
                dateFormat: 'yy-mm-dd',
                maxDate: 0,
                minDate: '-3M',
                showOn: "button",
                    buttonImage: "{{env('WP_URL')}}/wp-content/uploads/2022/07/Calender-blue-1.png",
                    buttonImageOnly: true
            });
        $( ".datepicker" ).val('{{$date_input}}');
    });

    $(document).ready( function ()
    {
        let data = null
        $('#daily-calling-status-count-table').DataTable(
        {
            data:data,
            columns: [
                    { data: 'post_title' },
                    { data: 'mobile_number' }, //or { data: 'MONTH', title: 'Month' }`
                    { data: 'website_carrier_name' },
                    { data: 'rebootRequestsResult' },
                    { data: 'pendingResult' },
                    { data: 'stalled10' },
                    { data: 'successResult' },
                    { data: 'retryResult' },
                    { data: 'labeledBlockedResult' },
                    { data: 'NoBusinessNamePresentedResult' },
                ],
            "bLengthChange": false,
            "bFilter": true,
            "bInfo": true,
            "bAutoWidth": false,
            "responsive": {
                "breakpoints": [
                    { name: 'desktop', width: Infinity },
                    { name: 'tablet',  width: 1024 },
                    { name: 'fablet',  width: 768 },
                    { name: 'phone',   width: 480 }
                ]
            },
            "pagingType": "full_numbers",
            "pageLength": 100,
            "language": { "search": "" },
            "order": [[ 4, "desc" ]],
            "aoColumnDefs": [{ "bSortable": false, "aTargets": []}, { "bSearchable": false, "aTargets": [3,4,5,6,7,8,9]}],
        });
        jQuery('.dataTables_filter input').attr('placeholder','Search');
        jQuery('.dataTables_filter input').attr('autocomplete','off');
        jQuery(".dataTables_filter input").wrap("<form>");
        jQuery(".dataTables_filter input").closest("form").attr("autocomplete","off");
        jQuery('#daily-calling-status-count-table_wrapper > table').wrap('<div class="table-responsive"></div>');
        //jQuery('.dataTables_filter').addClass('icon-addon');
        //jQuery(".dataTables_filter input" ).after( "<i for='search-for-template' class='lyphicon glyphicon-search fa fa-search'></i>" );
    });
    /**********************************************************/
</script>
@endsection