@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;
            font-family: "Montserrat";
        }
        .count-and-button-container {
            width: 48%;
            margin: auto;
            display: inline-block;
        }
        .count-and-button-container #cname_download_btn {
            float: right;
            margin-top: 10px;
        }
        .count-and-button-container .margin-top-bottom.textlabel {
            margin: auto;
        }
        
    </style>
    <div class="container" >
        <div class="margin-top-bottom pagetextlabel">
            <div class="cnamepage-submenus" id="cnamePageMenu">
                <ul class="navbar-nav ml-auto cnamepage-submenus-list">
                    <li class="nav-item dropdown {{ Request::is('aT1s4D1YX9dhBcz5kr') ? 'menu-item-selected':''}}">
                        <a class="menu-item " href="{{route('NewCnameResult')}}">
                            <span>New CNAMEs Section</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown {{ Request::is('VsRew3F2StfSqM4GHd1Zx') ? 'menu-item-selected':''}}" >
                        <a class="menu-item " href="{{route('CnameChangeResult')}}">
                            <span>Change Cname Section</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown {{ Request::is('jgohb5q6bow7elqp') ? 'menu-item-selected':''}}" >
                        <a class="menu-item " href="{{route('BusinessNameMatchResult')}}">
                            <span>Business Name Match Section</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="margin-top-bottom textlabel">
            <h2>Change to Labeled Report </h2>
        </div>
        <div class="calender-container" >
            <form id="CnameChangeDateBySubmit" action="{{route('CnameChangeDateBySubmit')}}" method="POST">
                @csrf
                <p><label class="select-date-lbl">Select Date: &nbsp;</label>
                    <input type="text" class="input-date datepicker" id="date-input" name="daterange" placeholder="yyyy/mm/dd" value="{{$daterange}}"  style="width: 242px;" />
                    <!--button class="select-date-btn">Submit</button-->
                </p>
            </form>
            <script>
                $(function() {
                    var date = new Date();
                    var lastMonthFirstDay = new Date(date.getFullYear(), date.getMonth()-1, 1);
                    var lastMonthFirstDate = formatDate(lastMonthFirstDay);
                    var currentMonthLastDay = new Date(date.getFullYear(), date.getMonth(), daysInMonth(date.getMonth()+1, date.getFullYear()));
                    var currentMonthLastDate = formatDate(currentMonthLastDay);
                    $('input[name="daterange"]').daterangepicker({
                        "drops": "down",
                        "opens": "left",
                        "autoUpdateInput": true,
                        "minDate": lastMonthFirstDate,
                        "maxDate": currentMonthLastDate
                    }, function(start, end, label) {
                        $('input[name="daterange"]').val(start.format('MM/DD/YYYY')+' - '+end.format('MM/DD/YYYY'));
                        $( "#CnameChangeDateBySubmit" ).submit();
                        console.log("A new date selection was made: " + start.format('MM/DD/YYYY') + ' to ' + end.format('YYYY-MM-DD'));
                    });
                });

                function formatDate(value){
                    return (('0' + (value.getMonth()+1)).slice(-2) + "/" + ('0' + value.getDate()).slice(-2) + "/" + value.getFullYear());
                }

                function daysInMonth (month, year) {
                    return new Date(year, month, 0).getDate();
                }
            </script>
        </div>
        <div class="count-and-button-container">
            @if(isset($cname_change_data) && count($cname_change_data) > 0)
                <!--button type="button" class="update-cname-btn" onclick="verifyFunction('downloadCnameChangeBySubmitForm()')">Download</button-->
                    <a href="{{route('downloadCnameChangeBySubmit')}}?daterange={{$daterange}}" target="_blank" id='cname_download_btn'>
                        <button type="button" class="update-cname-btn" >Download</button>
                    </a>
            @endif
            <div class="margin-top-bottom textlabel">
                <label>Total CNAMEs:- </label> <span>{{ (isset($cname_change_data)) ? count($cname_change_data): 0 }}</span>
            </div>
        </div>
        <form method="POST" action="{{route('downloadCnameChangeBySubmit')}}" id="downloadCnameChangeBySubmit">
            @csrf
            <div class="margin-top-bottom">
                @if(isset($cname_change_data))
                    @if(count($cname_change_data) > 0)
                        <table>
                            <thead>
                            <th>Date</th>
                            <th>User Name</th>
                            <th>Carrier / APP</th>
                            <th>OBN Number</th>
                            <th>Current Results</th>
                            <th>Service Plan</th>
                            </thead>
                            <tbody>
                                                        @foreach($cname_change_data as $cname_change_data_val)
                                <tr>
                                    <td>{{ date("Y-m-d", strtotime($cname_change_data_val->telephony_call_time)) }}</td>
                                    <td style="text-align: left;">{{ $cname_change_data_val->user_login }}</td>
                                    <td>{{ $cname_change_data_val->carrier_name }}</td>
                                    <td>{{ $cname_change_data_val->called_from }}</td>
                                    <td>{{ $cname_change_data_val->cname }}</td>
                                    <td>{{ $cname_change_data_val->plan_group }}</td>
                                </tr>
                                                            @endforeach
                            </tbody>
                        </table>
                    @else
                        <span>
                        No CNAMEs Change Data to display
                    </span>
                    @endif
                @endif
            </div>
            
        </form>
    </div>
    <!-- The Enter PW Modal -->
    <div id="myPWModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <p id="model_msg"> Are you sure, you want to Download?.<!--input type="password" id="password" name="pass" placeholder = "Enter Key" --></p>
            <div class="margin-top-bottom">
                <input type="button" id="PwYesBTN" name="PwYesBTN" value = "Yes" onclick="">
                <input type="button" id="PWNoBTN" name="PWNoBTN" value = "No" >
            </div>
        </div>
    </div>
    <script>
        var pwmodal = document.getElementById("myPWModal");
        function verifyFunction(callFor){
            pwmodal.style.display = "block";
            $("#PwYesBTN").attr('onclick',callFor);
        }

        function downloadCnameChangeBySubmitForm(){
            pwmodal.style.display = "none";
            $( "#downloadCnameChangeBySubmit" ).submit();
        }

        $('#PWNoBTN').click(function() {
            pwmodal.style.display = "none";
            // ^-- missing #
        });
        $(document).ready(function() {
            $(window).keydown(function(event){
                if(event.keyCode == 13) {
                    event.preventDefault();
                    return false;
                }
            });


        });
        /*************************added by 1206 *******************/

        /**********************************************************/

        /*var date = new Date();
        var lastMonthFirstDay = new Date(date.getFullYear(), date.getMonth()-1, 1);
        var lastMonthFirstDate = formatDate(lastMonthFirstDay);
        var currentMonthLastDay = new Date(date.getFullYear(), date.getMonth(), daysInMonth(date.getMonth()+1, date.getFullYear()));
        var currentMonthLastDate = formatDate(currentMonthLastDay);
        var currentMonthLastDate = formatDate(currentMonthLastDay);
        $('button[name="date-input"]').daterangepicker({
            "drops": "up",
            "opens": "left",
            "autoUpdateInput": false,
            "minDate": lastMonthFirstDate,
            "maxDate": currentMonthLastDate
        });*/

    </script>
    {{--</body>--}}
    {{--</html>--}}
@endsection