@extends('layouts.app')
@section('title', 'Annual Loans')
@section('content')
<style>
    thead
{
    background-color: #7680ff !important;
    color: #fff !important;
}
th{
    color:#fff !important;
}
.loading
    {
        position: fixed;
        z-index: 999;
        height: 2em;
        width: 2em;
        overflow: show;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

/* Transparent Overlay */
    .loading:before
    {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));

    background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
    }

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required)
{
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.loading:not(:required):after
{
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 150ms infinite linear;
  -moz-animation: spinner 150ms infinite linear;
  -ms-animation: spinner 150ms infinite linear;
  -o-animation: spinner 150ms infinite linear;
  animation: spinner 150ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner
{
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner
{
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner
{
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner
{
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>
<div class="m-0 p-0">
    <div id="loaderclass" class="loading d-none">Loading&#8230;</div>
    <div class="container-fluid">
        <div id="taxautomationdiv">
             <div id="addtaxautomate" class="col-12 text-center mt-2 d-none">
                <button type="button" name="gettaxdetails" class="btn btn-warning" onclick="updateAgencyannual();">Update Agencyannual</button>
            </div>
            <div class="row">
                <div class="col-lg-3 col-sm-12 col-xl-3 col-md-3">
                    <select id="lenderdrop" class="form-control float-right" onchange="getalllendercounties(this.value);">
                         <option  value="All">Filter By Lender</option>
                                            </select>
                </div>
                <div class="col-lg-3 col-sm-12 col-xl-3 col-md-3">
                    <select id="countydrop" class="form-control float-right" onchange="getalllenderliens(this.value);">
                                             </select>
                </div>
            </div>
            <table id="datatable2" class="table table-bordered mb-0"  >
                <thead class="correctionheader">
                    <tr>
                        <th><input type="checkbox" id="selectall"> All </th>
                        <th>Loan No.</th>
                        <th>Parcel No</th>
                        <th>Agency</th>
                        <th>Installment</th>
                        <th>Annual Taxes</th>
                    </tr>
                </thead>
                <tbody>
                                    </tbody>
            </table>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
    $('#datatable2').DataTable({
        dom: 'lBfrtip',
        "paging": true,
        "info": true,
        searching:true,
        'columnDefs': [
      {
         'targets': 0,
         orderable: false,
         'checkboxes': {
            'selectRow': true
         }
      }
   ],
        "lengthMenu": [10,50,100,200,500,1000,2000,5000],
            "buttons":['excel'],
                    });
    $("#selectall").on('change', function()
    {
        if($("#selectall").is(':checked'))
        {
            $(".checkloanclass").prop("checked", true).addClass('checkclass');

                $("#addtaxautomate").removeClass("d-none");
        }
        else
        {
            $(".checkloanclass").prop("checked", false).removeClass('checkclass');
             $("#addtaxautomate").addClass("d-none");

        }

    });
    function updatecheckclass(id,tabid)
    {
        if($("#"+id).is(':checked'))
        {
            $("#"+id).prop("checked", true).addClass('checkclass');

                $("#addtaxautomate").removeClass("d-none");
        }
        else
        {
            $("#"+id).prop("checked", false).removeClass('checkclass');
            var totallength = $('.checkloanclass').length;
            var numberOfChecked = $('.checkloanclass:checked').length;
            if(totallength > numberOfChecked)
            {
                $("#selectall").prop("checked", false);

                 $("#addtaxautomate").removeClass("d-none");

            }
            if(numberOfChecked == 0)
            {
                $("#selectall").prop("checked", false);

                $("#addtaxautomate").addClass("d-none");

            }
        }
    }
    function updateAgencyannual()
    {
         let taxids = $(".checkloanclass:checked")
                .map(function (){
                return $(this).val();
            }).toArray();
        $.ajax({
        type:'POST',
        url:"{{route('hideagencynotannual')}}",
        data: {
            "_token": "{{ csrf_token() }}",
                "taxids":taxids
        },
        success: function()
        {
            location.href = location.href;
        }
    });
    }
    function getalllendercounties(lenderid)
    {
        $.ajax({
        type:'POST',
        url:"{{route('getalllendercountiesannual')}}",
        data: {
            "_token": "{{ csrf_token() }}",
                "lenderid":lenderid
        },
        success: function(html)
        {
            $("#countydrop").html();
            $("#countydrop").html(html);
            
        }
        });
    }
    function getalllenderliens(countyid)
    {
        var lenderid = $("#lenderdrop").val();
        location.href = '/fetchannualtaxesloans/'+lenderid+'/'+countyid;
    }
</script>
@endsection