@extends('layouts.app')
@section('title', 'Clarifications')
@section('content')

<div class="p-0 m-0" id="loandisplay">
    <div class="container-fluid mt-1">
        <div class="row p-0 m-0">
            <div class="col-lg-1 col-sm-12 col-xl-2 col-md-1"></div>
            <div class="col-lg-1 col-sm-12 col-xl-2 col-md-1">
                <select id="portalfilter" class="form-control float-right fnSize">
                    <option value="All" >All</option>
                    <option value="1" >By Ztax</option>
                    <option value="2" >By Lender</option>
                </select>
            </div>
            <div class="col-lg-4 col-sm-12 col-xl-3 col-md-4">
                <select id="clientsdrop" class="form-control float-right fnSize">
                    <option value="">Filter By Client</option>
                    @foreach($clientDt as $client_details)
                        <option value="{{ $client_details->id }}" Selected>{{ $client_details->client_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-lg-4 col-sm-12 col-xl-3 col-md-4">
                <select id="lendersdrop" class="form-control float-right fnSize">
                    @if($lendersDt != NULL)
                        <option value="">Filter By Lender</option>
                        <option value="All" >All Lenders</option>
                        @foreach($lendersDt as $lenders_details)
                            <option value="{{ $lenders_details->id }}" Selected>{{ $lenders_details->lender_name }}</option>
                        @endforeach
                    @else
                        <option value="">Select Client First</option>
                    @endif
                </select>
                 <input type="hidden" id="statusid" value="All">
            </div>
           <div class="col-lg-2 col-sm-12 col-xl-3 col-md-2"></div>
        </div>
        <div class="row serviceTypeSection" style="justify-content:center;">
            <div class="row py-2">
                <div class="col-lg-12 col-md-12 col-xl-12 col-sm-12">
                    <table align="center" class="nonescrow_table_status">
                        <tr>
                            <td>
                                <button id="statusclAll" class="btn btn-outline-primary nonescrowtab taxstatustabs tabbtn" value="All">All</button>
                                <button id="status1" class="btn nonescrowtab btn-outline-primary taxstatustabs tabbtn" value="1">Open</button>
                                <button id="status2" class="btn btn-outline-primary nonescrowtab taxstatustabs tabbtn" value="2">In Process</button>
                                  <button id="status4" class="btn nonescrowtab btn-outline-primary taxstatustabs tabbtn" value="4">Awaiting</button>
                                <button id="status3" class="btn nonescrowtab btn-outline-primary taxstatustabs tabbtn" value="3">Closed</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="row mt-1 justify-content-center">
            <div class="col-lg-12 col-md-12 col-xl-12 col-sm-12 mt-3">
                <table id="loan_details_table" class="table table-bordered nowrap table-striped mb-0 mt-2" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                    <thead style="background-color:rgb(23, 25, 104) !important;">
                        <tr>
                        	<th>Loan No</th>
                        	<th>Lender</th>
                        	<th>Parcel</th>
                            <th>Added On</th>
                            <th>Clarification</th>
                            <th>Follow Up</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        
    </div>
</div>
<style>
    .tabbtn {
        width:200px !important;
    }
    table.dataTable > thead > tr > th, table.dataTable > tbody > tr > td  {
        white-space: nowrap;
        font-weight: normal;
    }
    tr, .table.table-bordered.dataTable td {
        font-size: 11px !important;
    }
    .pagination {
        margin-top: -30px !important;
    }
    .fnSize {
        font-size: 11px !important;
    }
    .fnSize1 {
        font-size: 11px !important;
        height: 30px !important;
    }
    .taxstatustabs {
        height: 32px !important;
        font-size:12px !important;
    }
    .table thead tr th {
        color: #FFFFFF;
        font-weight:400 !important;
        padding: 0.25rem 0.25rem !important;
    }
    .loandetaildata {
        font: normal normal 600 13px Poppins !important;
        color: #106B49 !important;
        opacity: 1;
    }
    .cardheading {
        font: normal normal 600 14px Poppins !important;
        color: #106B49 !important;
        opacity: 1;
    }
    .red_top_border {
        border-top: 5px solid #ff0c0c;
        border-radius: 5px;
    }
    .brown_top_border {
        border-top: 5px solid #e6886c;
        border-radius: 5px;
    }
    .blue_top_border {
        border-top: 5px solid #6c74e6;
        border-radius: 5px;
    }
    .green_top_border {
        border-top: 5px solid #6ce6b2;
        border-radius: 5px;
    }
    .orange_top_border {
        border-top: 5px solid #ff8724;
        border-radius: 5px;
    }
    .pink_top_border {
        border-top: 5px solid #fd3c97;
        border-radius: 5px;
    }
    .skyblue_top_border {
        border-top: 5px solid #0cb4db;
        border-radius: 5px;
    }
    .blinking {
        animation: animate
        1.5s linear infinite;
    }
    @keyframes animate {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0.6;
        }
        100% {
            opacity: 0;
        }
    }
    .parsley-required, .parsley-custom-error-message {
        color: red;
        font-size:12px;
        margin-top:4px;
        list-style-type: none;
        margin-left: -25px;
    }
    .parsley-length, .parsley-type {
        color: red;
        font-size:12px;
        margin-top:4px;
        list-style-type: none;
        margin-left: -25px;
    }
   .ajaxloader {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 99999;
        opacity: 0.8;
        background:rgb(82, 82, 85);
    }
    .ajaxloader .spinnerDiv {
        position: absolute;
        top: 40%;
        left:0px;
        right:0px;
        font-size:30px;
    }
    div.dataTables_wrapper div.dataTables_filter input {
        font-size: 11px !important;
        height: 31px !important;
    }
    div.dataTables_wrapper div.dataTables_length select {
        font-size:11px !important;
    }
</style>

<script>
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        });
        var loanDetailTb = $('#loan_details_table').DataTable({
            processing: false,
            serverSide: true,
            ajax: {
                url: "{{ route('filterclarifications') }}",
                 data: function (d) {
                        d.clientid = $('#clientsdrop').val(),
                        d.lenderid = $('#lendersdrop').val(),
                        d.statusid = $('#statusid').val(),
                        d.portalfilter = $('#portalfilter').val()
                }
            },
            dom: 'lBfrtip',
            order: [],
            buttons: [
                { extend: 'excel', className: 'btn-sm' }
            ],
            "lengthMenu": [10,50,100,200,500,1000,2000,5000],
            columns: [
                {
                    data: 'loan_number',
                    name: 'loan_no',
                    defaultContent: "--"
                },
                {
                    data: 'lender_name',
                    name: 'ztp_lenders.lender_name',
                    defaultContent: "--",
                },
                {
                    data: 'parcel_no',
                    name: 'parcel_no',
                    defaultContent: "--"
                },
                {
                    data: 'date_time',
                    name: 'date_time',
                    defaultContent: "--"
                },
                {
                    data: 'comments',
                    name: 'comments',
                    defaultContent: "--"
                },
                {
                    data: 'followup_date',
                    name: 'followup_date',
                    defaultContent: "--"
                },
                {
                    data: 'clarification_status',
                    name: 'clarification_status',
                    defaultContent: "--"
                }
            ],
        });

        $('#clientsdrop').on('change', function(){
            var clientid = $(this).val();
            $(".ajaxloader").show();
            if (clientid) {
                $.ajax({
                    url: '/get_lenders/' + clientid,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $('#lendersdrop').empty();
                        if(data[0] == undefined) {
                            $('#lendersdrop').html('<option value="">No Lenders Associated with Client</option>');
                            loanDetailTb.draw();
                            $(".ajaxloader").hide();
                        } else {
                            if (data[0].length == 0)
                            {
                                $('#lendersdrop').append('<option value="">No Lenders Associated with Client</option>');
                                loanDetailTb.draw();
                                $(".ajaxloader").hide();
                            } else {
                                $('#lendersdrop').append('<option value="">Filter By Lender</option>');
                                $('#lendersdrop').append('<option value="All">All Lenders</option>');
                                $.each(data[0], function(key, value) {
                                    $('#lendersdrop').append(
                                        '<option value="' + value['id'] + '">' + value[
                                            'lender_name'] + '</option>');
                                });
                                loanDetailTb.draw();
                                $(".ajaxloader").hide();
                            }
                        }
                    }
                });
            } 
            else 
            {
                $.ajax({
                    url: '/get_lenders/' + clientid,
                    type: "GET",
                    dataType: "json",
                    success: function(data) 
                    {
                        $('#lendersdrop').html('<option value="">Select Lender first</option>');
                        loanDetailTb.draw();
                        $(".ajaxloader").hide();
                    }
                });
            }
        });

        $('#lendersdrop').on('change', function() 
        {
            var lenderid = $(this).val();
            $(".ajaxloader").show();
            $.ajax({
                url: '/update_lenderDt/',
                type: "GET",
                data: {"_token":"{{ csrf_token() }}","lenderId":lenderid},
                success: function() {
                    loanDetailTb.draw();
                    $(".ajaxloader").hide();
                }
            });
        });
         $('#portalfilter').on('change', function() 
        {
            var portalfilter = $(this).val();
            $(".ajaxloader").show();
            loanDetailTb.draw();
            $(".ajaxloader").hide();
        });
        $('.taxstatustabs').on('click', function() 
        {
            var statustabId = $(this).val();
            $(".taxstatustabs").removeClass('btn-primary');
            $(".taxstatustabs").addClass('btn-outline-primary');
            $('#status' + statustabId).removeClass('btn-outline-primary');
            $('#status' + statustabId).addClass('btn-primary');
             $("#statusid").val(statustabId);
            loanDetailTb.draw();
            $(".ajaxloader").hide();
        });
    });
    function showclarification()
    {
        $("#cldiv").removeClass('d-none');
    }
    function hideclarification()
    {
        $("#cldiv").addClass('d-none');
    }
    function viewclhistory(clid)
    {
        $.ajax({
            type: "POST",
            url: '{{ route("viewclhistory") }}',
            data: {
                    "_token": "{{ csrf_token() }}",
                    clid:clid
                  },
            success: function(html)
            {
                $('#clhistorymodal').modal('show');
                $("#cl_historydiv").html("");
                $("#cl_historydiv").html(html);
            }
        });
    }
    function edit_clarification(clid)
    {
        $.ajax({
            type: "POST",
            url: '{{ route("editclhistory") }}',
            data: {
                    "_token": "{{ csrf_token() }}",
                    clid:clid
                  },
            success: function(html)
            {
                $('#clhistorymodal').modal('show');
                $("#cl_historydiv").html("");
                $("#cl_historydiv").html(html);
            }
        });
    }
    function updateclarification()
    {
        $.ajax({
            url: "{{route('updateclarification')}}",
            type: 'post',
            async: false,
            cache: false,
            data: new FormData($("#clhistoryform")[0]),
            dataType: 'html',
            processData: false,
            contentType: false,
            success: function(html)
            {
                $("#clhistoryupdate").html("");
                $("#clhistoryupdate").html(html);
            }
        });
    }
     function showclarificationnew()
    {
        $('#clnewmodal').modal('show');
        $('#clarifications').val("");
    }
     function addclarification()
    {
        $.ajax({
            url: "{{route('storeclarification')}}",
            type: 'post',
            async: false,
            cache: false,
            data: new FormData($("#clarificationform")[0]),
            dataType: 'html',
            processData: false,
            contentType: false,
            success: function(html)
            {
                $('#clnewmodal').modal('hide');
                $("#clarificationoutput").html("");
                $("#clarificationoutput").html(html);
            }
        });
    }
</script>
@endsection