@extends('layouts.app')
@section('title', 'Insurance Tracking')

@section('content')
<style>
  select.form-control{
    display: inline;
    width: 200px;
    margin-left: 25px;
  }
</style>

<div class="container-fluid mt-1">
	<x-insurancetabs/>
	<div class="col-lg-12">
        <div class="card ">
        	<div class="p-0 text-center">
                <table class="w100">
                    <tr>
                        <td>
                             <span id="4" class="btn btn-light 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-light mr-1 statusfilter" style="cursor:pointer" onclick="getinsurancetracking(2)">Renewable(0-60 Days)</span>
                            <span id="3"  class="btn btn-light mr-1 statusfilter" style="cursor:pointer" onclick="getinsurancetracking(3)">Renewable(60+ Days)</span>
                        </td>
                    </tr>
                </table>
                <input type="hidden" id="statusid" value="All">
                <table id="datatable1" class="table table-bordered mb-0"  >
                    <thead>
                        <tr>
                            <th style="color:#fff">Parcel No.</th>
                            <th style="color:#fff">Insurance Carrier</th>
                            <th style="color:#fff">Insurance Amount</th>
                            <th style="color:#fff">Policy No</th>
                            <th style="color:#fff">Policy Start Date</th>
                            <th style="color:#fff">Policy 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">Document</th>
                            <th style="color:#fff">Updated By</th>
                            <th style="color:#fff">Updated On</th>
                            <th>View</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>
                                          </tr>                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<x-alert/>

<script type="text/javascript">

	$(document).ready(function() {
		$(".odtabs").not("#tab1").addClass('btn-outline-secondary');
		$("#tab2").addClass('btn-secondary');
        var table = $('#datatable1').DataTable({
            dom: 'lBfrtip',
                "lengthMenu": [10,50,100,200,500],
                "buttons":['excel']
                });
	});
    function getinsurancetracking(id)
    {
        location.href = '/insurancetracking/'+id;
    }
	</script>
@endsection