@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";
    }

    .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;
}

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

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

#downlaodBtn:hover {
    color:#ffffff;
    text-decoration:none;
    cursor:pointer;
}
#fetchMatchResult .check-box-container .checkmark {
	border: 1px solid #000;
}
</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>Business Name Match Report</h2>
    </div>
    <div class="calender-container" >
        <form id="CnameDateBySubmit" action="{{route('CnameDateBySubmit')}}" 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'));
                    //$( "#CnameDateBySubmit" ).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="margin-top-bottom textlabel">
        <label>Total CNAMEs:- </label> <span>0</span>
    </div> --}}
    <form method="POST" action="" id="fetchMatchResult">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="margin-top-bottom demo col-md-4">
            <div>
                <label class="check-box-container">
                    <input id="select-all-match" type="checkbox">
                    <span class="checkmark"></span>
                </label>
                <span id="sel-text" style="cursor: pointer;margin-left: -146px;">Select All Match Score</span>
            </div>

            <br>
            <input class="ignore-btn" type="button"  id="ignore-btn" name="ignore-btn" value="Ignore" style="padding: 0 20px;margin-left: -31px;">
            &nbsp;&nbsp;&nbsp; Match Score =  <input type="number" name="match_score" id="match_score" value="0" min="0" max="10" onkeydown="return false">
        </div>
        <div class="margin-top-bottom demo col-md-4">
            <div class="maintenance-device-dropdown-control-cont">
                <div class="maintenance-device-dropdown-control">
                    <select class="maintenance-device-select" id="carrierName" placeholder="Search Device" multiple="multiple">

                    </select>
                </div>
                <div class="blink-me blink-text" id="maintenance-device-progress" style="padding: 0 20px;">
                    Loading ...
                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
        <button type="button" class="update-cname-btn" onclick="submitBusinessData(event)">Submit</button>
        <button type="button" class="update-cname-btns" id="hidebutton" style="display:none;" disabled>
            Generating File...
        </button>
    </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 submit?.<!--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>
<div id="loaderModal" class="modal">
    <img class="loader-img" src="../images/ajax-spinner.gif">
    <span class="loader-text">Please wait ...</span>
</div>
<script>
    var pwmodal = document.getElementById("myPWModal");
    function verifyFunction(callFor){
        pwmodal.style.display = "block";
        $("#PwYesBTN").attr('onclick',callFor);
    }

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

    $('#PWNoBTN').click(function() {
        pwmodal.style.display = "none";
        // ^-- missing #
    });

    function submitBusinessData(e){
        e.preventDefault();
        var baseURL = "{{ URL::to('/') }}" + "/";

        if($('#select-all-match').is(':checked')){
            var math_score = 'ALL';
            var ignore_btn = '';
            $('#ignore-btn').attr('disabled',true);
        } else {
            var math_score = $('#match_score').val();
            var ignore_btn = $('#ignore-btn').val();
            $('#ignore-btn').attr('disabled',false);
        }
        var datefilter = $('#date-input').val();
        var carrierlist = $('#carrierName').val();
        //var carrierlist = carrier_name.toString();
        if(carrierlist== null){
            alert('Please select at least one carrier Devices!');
            return false;
        }
        //line item 508
        //forbidden issue for this carrier so we have change the name while searching and if found
        var index = carrierlist.indexOf('CallApp: Caller ID, Call Block & Call Recorder');

        if (index !== -1) {
            carrierlist[index] = 'callApp:';
        }
        var milliseconds = new Date().getTime();
        var file_name = 'upload/BusinessName/BusinessNameMatchesReport_'+ milliseconds +'_Excel.xlsx';
        var query = {
                'math_score':math_score,
                'ignore_btn':ignore_btn,
                'datefilter':datefilter,
                'carrierlist':carrierlist,
                'file_name' : file_name,
                'file_key' : 'key_'+milliseconds,
        }
        //data: JSON.stringify({eventData:query}),
        //var str = JSON.stringify({eventData:query}),
        var url = "{{URL::to('FetchMatchResultFromDetectedLabel')}}?data=" + encodeURIComponent(JSON.stringify(query));
       // alert(url);
        //window.location.href = url;
        $('.update-cname-btn').html('Downloading...');
        $.ajax({
            type:"POST",
            url : url,
            dataType:'json',
            //async:false,
            success: function(res){
            console.log(res);
                //$('.update-cname-btn').html('Submit');
                downloadfile('key_'+milliseconds);
                $('.update-cname-btn').html('Submit');
                $('#hidebutton').show();

                // window.open(res.file_name,'_blank');
                //window.location.href = baseURL+res.file_name;
            },
             error: function(res)
             {
                downloadfile('key_'+milliseconds);
                  $('.update-cname-btn').html('Submit');
                  $('#hidebutton').show();
              // setTimeout(function(){
              //    window.open(baseURL+ file_name,'_blank');
              // }, 10000);
            },
           //  complete: function (data) {
           //     window.open(baseURL+data.file_name,'_blank');
           // }
        })
    }

    function downloadfile(file_name)
    {
        let url = "{{URL::to('BusinessExceldownload')}}?filename=" + file_name;
        setTimeout(() =>
        {
            $.ajax(
            {
                url:url,
                type:'get',
                dataType:'json',
                async:false,
                success:(response) =>
                {
                    console.log(response.data.file_name)
                    if(response.code === 200)
                    {
                        let btn = '<a href="'+response.data.file_name+'" target="_blank" onclick="donwloadRefresh()" id="downlaodBtn">Download File</a>';
                        $('#hidebutton').show();
                        $('#hidebutton').html(btn)
                        $('#hidebutton').prop('disabled', false)
                        // window.open(response.file_name, '_blank');
                    }
                    else
                    {
                        $('#hidebutton').show();
                        downloadfile(file_name);
                    }
                },
                error: (response) =>
                {
                    alert(response)
                }
            })
        }, 10000)
    }

    function donwloadRefresh(){
        setTimeout(location.reload(), 500);

    }
    $(document).ready(function() {

        var baseURL = "{{ URL::to('/') }}" + "/";
        $('.ignore-btn').click(function(){
            if(!$('#select-all-match').is(':checked')){
                var dval = $(this).val();
                if(dval=='Ignore'){
                    $(this).val('Include');
                } else {
                    $(this).val('Ignore');
                }
            }
        })
        $('#sel-text').click(function(){
            $('#select-all-match').trigger('click');
        });
        $('#select-all-match').change(function(){
            if($(this).is(':checked')){
                $('#match_score').attr('disabled',true);
                $('#ignore-btn').attr('disabled',true);
            } else {
                $('#match_score').val(0);
                $('#match_score').removeAttr('disabled');
                $('#ignore-btn').removeAttr('disabled');
            }
        })
        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });

        $('.cname_main').change(function() {
            if(this.checked) {
                console.log(this);
                var global_id = $(this).attr('class');
                var res = global_id.split(" ");
                $("."+res[1]).prop('checked', false);
                $("."+res[2]).prop('checked', true);
                var sub_res = res[2].split("_");
                if(sub_res[1] == 'isLabeled'){
                    $(".sub_class_risk_select_"+sub_res[2]).prop('disabled', false);
                }else {
                    $(".sub_class_risk_select_"+sub_res[2]).prop('disabled', true);
                }
                //var returnVal = confirm("Are you sure?"+sub_res[1]);
                //$(this).prop("checked", returnVal);
            }else{
                var global_id = $(this).attr('class');
                var res = global_id.split(" ");
                var sub_res = res[2].split("_");
                $(".sub_class_risk_select_"+sub_res[2]).prop('disabled', true);
            }
            //$('#textbox1').val(this.checked);
        });

        var ajaxApiUrl = baseURL + "GetAllParentDevices";
        jQuery.ajax({
            type : "GET",
            url : ajaxApiUrl,
            success: function(res) {
                if( res.success ){
                    if( res.data.all_devices.length > 0 ){
                        var all_device_names = res.data.all_devices;
                        allDevicesArr = res.data.all_devices;
                        var deviceNameOptions = "<option value=''></option>";
                        var deviceMaintenanceNameOptions = "";
                        for( var k=0;k<all_device_names.length;k++ ){
                            deviceNameOptions = deviceNameOptions + "<option value='"+all_device_names[k].carrier_name+"'>"+all_device_names[k].carrier_name+"</option>";

                        }
                    }


                    jQuery(".maintenance-device-select").html('');
                    jQuery(".maintenance-device-select").append(deviceNameOptions);
                    jQuery(".maintenance-device-select").fSelect({
                        placeholder: 'Select some device(s)',
                        numDisplayed: 4,
                        overflowText: '{n} device(s) selected',
                        noResultsText: 'No device(s) found',
                        searchText: 'Search device(s)',
                        showSearch: true
                    });
                    jQuery(".maintenance-device-dropdown-control-cont").show();


                    jQuery("#loaderModal").hide();
                }
                else {
                    jQuery("#loaderModal").hide();
                }
            },
            error: function( jqXHR,error, errorThrown ) {
                if( jqXHR.status && jqXHR.status == 400 ){
                    var res_json = JSON.parse(jqXHR.responseText);
                }
            }
        });
    });
    /*************************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