@extends('layouts.app')
@section('title', 'TaxCycle - Liens Mapping')
@section('content')
<style>
        .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="container-fluid mt-1">
    <div id="loaderclass" class="loading d-none">Loading&#8230;</div>
    <div class="row p-1" id="viewloandetails">
        <div class="modal fade" id="taxlienmodal" tabindex="-1" aria-labelledby="taxlienmodalLabel" aria-hidden="true">
            <div class="modal-dialog" style="max-width: 2300px !important;margin:1rem">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="taxlienmodalLabel">Lien Information</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="taxliendetails">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 text-center">
            <button type="submit" class="btn btn-info" onclick="updatetaxcycledetails();">Update Taxcycle
            </button>
        </div>
        <div class="col-12" id="showtaxinfo">
            <table id="datatable1" class="table table-bordered">
                <thead>
                    <tr>
                        <th>All <input type="checkbox" name="selectall" id="selectall"></th>
                        <th class="text-center">State</th>
                        <th class="text-center">County</th>
                        <th class="text-center">Agency</th>
                        <th class="text-center">Year</th>
                        <th class="text-center">Installment</th>
                        <th class="text-center">TaxcyclenotupdatedCount</th>
                        <th class="text-center">Tax Cycle Id</th>
                    </tr>
                </thead>
                <tbody>
                                    </tbody>

            </table>
        </div>
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
var table = $('#datatable1').DataTable({
    dom: 'lBfrtip',
    "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');
        }
        else
        {
            $(".checkloanclass").prop("checked", false).removeClass('checkclass');
            $(".agencyclass").removeClass("agencyselected");
        }
    });
function updatecheckclass(id)
{
    if($("#"+id).is(':checked'))
    {
        $("#"+id).prop("checked", true).addClass('checkclass');
    }
    else
    {
        $("#"+id).prop("checked", false).removeClass('checkclass');
        var totallength = $('.checkloanclass').length;
        var numberOfChecked = $('.checkloanclass:checked').length;
        if(numberOfChecked < totallength)
        {
            $("#selectall").prop("checked", false);

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


        }
    }
}
function updatetaxcycledetails()
{
    var agencyids=[];checked = [];var countyids = [];var stateids = [];var installments = [];var years = [];var taxcycleids = [];
    let taxids = $(".checkloanclass:checked")
                .map(function (){
                return $(this).val();
            }).toArray();
    let taxdivids = $(".checkloanclass:checked")
        .map(function ()
    {
        checked.push(this.id);
    });
    // alert(checked);
    var i;
    for (i = 0; i < checked.length; i++)
    {
        var stateid = $("#stateid"+checked[i]).val();
        stateids.push(stateid);

        var countyid = $("#countyid"+checked[i]).val();
        countyids.push(countyid);

        var agencyid = $("#agencyid"+checked[i]).val();
        agencyids.push(agencyid);

        var year = $("#year"+checked[i]).val();
        years.push(year);

        var installment = $("#installment"+checked[i]).val();
        installments.push(installment);

        var taxcycleid = $("#taxcycleid"+checked[i]).val();
        taxcycleids.push(taxcycleid);
    }
     $("#loaderclass").removeClass('d-none');
    $.ajax({
            type: "POST",
            url: "{{route('updatetaxcycleids')}}",
            data: { "_token": "{{ csrf_token() }}",
                    "stateid":stateids,
                    "countyid":countyids,
                    "agencyid":agencyids,
                    "year":years,
                    "installment":installments,
                    "taxcycleid":taxcycleids
                },
                success: function()
                {
                    $("#loaderclass").addClass('d-none');
                    location.href = location.href;
                }
        });
}
function showtaxcycleinfo(taxcycleid)
{
    $.ajax({
            type: "POST",
            url: "{{route('showtaxcyclebyid')}}",
            data: { "_token": "{{ csrf_token() }}",
                    "taxcycleid":taxcycleid
                },
                success: function(html)
                {
                    $("#taxliendetails").html(html);
                    $('#taxlienmodal').modal('show');
                }
        });
}
</script>
@endsection