@extends('layouts.app')
@section('title', 'Insurance')
@section('content')
<style>
  select.form-control{
    display: inline;
    width: 200px;
    margin-left: 25px;
  }
  .w100
  {
     width:100%;
  }
  .btn-info{
    color:#fff !important;
    font-weight: bold !important;
  }
</style>
<div class="p-0 m-0" id="loandisplayd">
    <div class="container-fluid mt-5">
        <div class="row mt-3">
            <div class="col-lg-12 text-center mt-2">
                <table class="w100">
                    <tr>
                        <td>
                            <span id="1" class="btn btn-outline-info mr-2 pagefilter" style="cursor:pointer" onclick="showpages(1)">Insurance Setup</span>
                            <span id="2" class="btn btn-info mr-2 pagefilter" style="cursor:pointer" onclick="showpages(2)">Insurance Tracking</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="row mt-1">
            <div class="col-lg-12">
                <div class="card mt-3">
                    <div class="card-body">
                        <div class="p-0 text-center">
                            <table style="width:100%;text-align: center;">
                                <tr>
                                    <td>
                                         <span id="4"  class="btn btn-outline-primary mr-1 statusfilter" style="cursor:pointer" onclick="getinsurancetracking(4)">All</span>
                                        <span id="1" class="btn btn-primary  mr-1 statusfilter" style="cursor:pointer" onclick="getinsurancetracking(1)">Expired</span>
                                        <span id="2" class="btn btn-outline-primary mr-1 statusfilter" style="cursor:pointer" onclick="getinsurancetracking(2)">Renewable(0-60 Days)</span>
                                        <span id="3"  class="btn btn-outline-primary mr-1 statusfilter" style="cursor:pointer" onclick="getinsurancetracking(3)">Renewable(60+ Days)</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                            <input type="hidden" id="statusid" value="All">
                            <div class="table-responsive">
                                <table id="datatable1" class="table table-bordered mb-0"  >
                                <thead>
                                    <tr>
                                        <th style="color:#fff">Loan No</th>
                                        <th style="color:#fff">Borrower Name</th>
                                        <th style="color:#fff">Carrier</th>
                                        <th style="color:#fff">Amount</th>
                                        <th style="color:#fff">Policy No</th>
                                        <th style="color:#fff">End Date</th>
                                        <th style="color:#fff">Agent Name</th>
                                        <th style="color:#fff">Agent Phone</th>
                                        <th style="color:#fff">Agent Fax</th>
                                        <th style="color:#fff">Updated By</th>
                                        <th style="color:#fff">Updated On</th>
                                        
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                      </tr>                                </tbody>
                            </table>
                            </div>
                    </div>
                </div>
            </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;
    }
   
    .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 type="text/javascript">

    $(document).ready(function() {
        
        var table = $('#datatable1').DataTable({
                dom: 'lBfrtip',
                "lengthMenu": [10,50,100,200,500,1000],
                buttons: [
                { extend: 'excel', className: 'btn-sm' }
                ]
        });
    });
    function getinsurancetracking(id)
    {
        location.href = '/insurance/'+id;
    }
    function showpages(page)
     {
        if(page == 1)
        {
            location.href = '/insurancesetup';
        }
        else if(page == 2)
        {
            location.href = '/insurance';
        }
     }
</script>
@endsection