@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";
    }
</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 class="" style="width:100%;display:flex;">
                <div class="" style="width:50%;">
                    <a class="menu-item {{ Request::is('aT1s4D1YX9dhBcz5kr') ? 'menu-item-selected':''}}" href="{{route('NewCnameResult')}}">
                        <span>New CNAMEs Section</span>
                    </a>
                </div>
                <div class="" style="width:50%;">
                    <a class="menu-item {{ Request::is('VsRew3F2StfSqM4GHd1Zx') ? 'menu-item-selected':''}}" href="{{route('CnameChangeResult')}}">
                        <span>Change Cname Section</span>
                    </a>
                </div>
            </div>-->
        </div>
    </div>
    <div class="margin-top-bottom textlabel">
        <h2>New CNAMEs and Detected Labels</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 id="total_new_cname">0</span>
    </div>
    <form method="POST" action="{{route('updateCnameBySubmit')}}" id="updateCnameBySubmit">
        @csrf
        <div class="margin-top-bottom" id="new_cnames_data_container">
            
        </div>
        <button type="button" class="update-cname-btn" onclick="verifyFunction('updateCnameBySubmitForm()')" style="display:none;">Submit</button>
    </form>
</div>

<div id="loaderModal" class="modal">
    <img class="loader-img" src="../images/ajax-spinner.gif">
    <span class="loader-text">Please wait ...</span>
</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>
<script>
    var getNewCnameDataUrl = "{{ route('getCnameDataAjax') }}";
    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 #
    });
    $(document).ready(function() {
        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });

        $(document).on('change', '.cname_main', 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("_");
                console.log("sub_res=>"+ sub_res);
                console.log("sub_res[2]=>"+ sub_res[2]);
                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);
                }
                
                if($('#isGen_'+sub_res[2]).is(':checked')){
                    $('#isNL_'+sub_res[2]).prop('checked', true);
                    $(".sub_class_match_select_"+sub_res[2]).prop('disabled', false);
                } 

                if($('#isNL_'+sub_res[2]).is(':checked')){
                    $(".sub_class_match_select_"+sub_res[2]).prop('disabled', false);
                } else {
                    $(".sub_class_match_select_"+sub_res[2]).prop('disabled', true);
                }


                // if(sub_res[1] == 'isNL' && $('#isNL_'+sub_res[2]).is(':checked')){
                //     $(".sub_class_match_select_"+sub_res[2]).prop('disabled', false);
                // }else if(sub_res[1] == 'isNL') {
                //     $(".sub_class_match_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);
                $(".sub_class_match_select_"+sub_res[2]).prop('disabled', true);
                if($('#isNL_'+sub_res[2]).is(':checked')){
                    $(".sub_class_match_select_"+sub_res[2]).prop('disabled', false);
                } else {
                    $(".sub_class_match_select_"+sub_res[2]).prop('disabled', true);
                }
            }

            //$('#textbox1').val(this.checked);
        });


        
        $('#CnameDateBySubmit').on('submit', function (e) {
            e.preventDefault();
            var form_data = $(this).serialize();
            jQuery("#loaderModal").show();
            $.ajax({
                type:"POST",
                url : getNewCnameDataUrl,
                dataType:'json',
                data: form_data,
                timeout: 100000,
                success: function(res)
                {
                    jQuery("#loaderModal").hide();
                    if(res.success) {
                        $('#new_cnames_data_container').html(res.cname_html);
                        $('#total_new_cname').html(res.cname_count);
                        if(res.cname_count > 0) {
                            $('.update-cname-btn').show();
                        } else {
                            $('.update-cname-btn').hide();
                        }
                    }
                },
                error: function(res)
                {
                    jQuery("#loaderModal").hide();
                },
            });
        });

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

    
</script>
@endsection