@extends('layouts.payrollapp')

@section('title', 'Users')
@section('dynamic_css_excpt')
@endsection
@section('dynamic_css')
    <!-- <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" media="all" rel="stylesheet" type="text/css"/>-->
    <link href="{!! asset('css/dataTables.bootstrap4.min.css') !!}" media="all" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css" media="all" rel="stylesheet" type="text/css"/>
    <style>
        select.form-control:not([size]):not([multiple]) {
            height: calc(1.95rem + 0px);
        }
        .panel-title{
            font-size: 15px;
            display: table-cell;
            vertical-align: middle;
        }
        .custom-col-md-6{
            width:50%;
            display: table;
            height: 40px;
        }
        .table td {
            padding: .5rem 1rem .5rem 1rem;
            vertical-align: middle;
            border-top: 1px solid #dee2e6;
        }
        .table .btn{
            min-width: 89px;
        }

        select options {
            text-transform: capitalize;
        }

        .text-blue{
            color: #304192;
            font-weight: 600;
            font-size: 14px;
        }
        /************************ slider button ************************************/

        /* The switch - the box around the slider */
        .switch {
            position: relative;
            display: inline-block;
            width: 55px;
            height: 26px;
        }

        /* Hide default HTML checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            /* background-color: red;*/
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 24px;
            width: 24px;
            left: 3px;
            bottom: 1px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;

        }

        input:checked + .slider {
            background-color: #2196F3;
            /* background-color: green;*/
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
            /* background-color: green;*/
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        .vl{
            height: 26px;
            border-left: 1px solid #999;
        }

        .fBlack{
            color:#999;
        }

        /*****************************************************************************/
        @media (max-width: 768px)
        {
            li.page-item {

                display: none;
            }
            .dataTables_length {
                margin-bottom: -5px;
                margin-left: 19px;
            }
            .custom-col-md-6{
                width:50%;
                display: table;
                height: 34px;
            }
            .page-item.previous,
            .page-item.next,
            .page-item:first-child,
            .page-item:last-child,
            .page-item.active {

                display: block;
            }

            .result-set{
                padding-left: 15px;
                padding-right: 15px;
            }

            .btn.btn-sm,.btn.btn-xsm {
                padding: .3rem .7rem;
                font-size: .54rem;
            }
            .table .btn {
                min-width: 50px;
            }

            .btn.btn-xsm{
                padding: .2rem .2rem;
            }

            #data-table{
                width: 100% !important;
            }

        }

        .dataTables_filter{
            display: inline-block;
            float: right;
        }

        .btn-secondary {
            background-color: #1c7095!important;
            color: #fff!important;
            padding: .40rem .60rem;
        }

        .verification{
            width: 100% !important;
        }

        /*.verification tbody tr td:nth-child(8){*/
        /*display: flex;*/
        /*}*/
        .verification th{
            text-align: center;
        }
        .verification td{
            text-align: center;
        }
        .dataTables_length{
            margin-bottom: -56px;
        }
        .dt-buttons{
            left: 165px;
        margin-bottom: -43px;
        }

        .img-circular{
            width: 95px;
            height: 95px;
            background-size: cover;
           
        }
        img{
            border-radius: 50%;
        }
        .mod_head{
            background-color: #1f2b49 !important;
        }

        .modal-dialog.modal-notify .modal-body {
            padding: 0px !important;
        }
        .modal-body {
            padding: 0px !important;
        }
        .modal-header{
            height: 52px !important;
            padding: 7px !important;
        }



    </style>
@endsection

@section('content')
    <div class="container">
        <div class="row container_layout">
            <div class="col-md-12 pl0 pr0 mobile_view">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{-- route('adminhome')--}}">
                                <i class="material-icons">home</i>
                            </a>
                        </li>
                        <li class="breadcrumb-item"><a href="">Employees</a></li>
                        <li class="breadcrumb-item active"><a href="">Employee Verification</a></li>
                    </ol>
                </nav>
            </div>


            <div class="col-md-12 p20 bg-white">
                <div class="panel panel-default">
                    <div class="panel-heading ">

                        <div class="row e1f5fe bdbdbd grey lighten-1 custom_row_o" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample" style="cursor: pointer;">
                            <div class="col-md-6 custom-col-md-6" style="max-width: 50%;">

                                <div class="panel-title pl5">
                                    <i class="fa fa-filter"></i> <span class="label_text"> Custom Filter </span>
                                </div>

                            </div>
                            <div class="col-md-6 custom-col-md-6 text-right" style="max-width: 50%;">

                            </div>
                        </div>

                    </div>
                    <div class="panel-body">
                        <div class="row bg_body custom_row_o">
                            <div class="col-md-12 collapse show mt10" id="collapseExample">

                                {{ csrf_field() }}
                                <div class="row result-set">
                                    <div class="col-md-3 mb-3">
                                        <label class="control-label text-blue"> District </label>
                                        <select class="form-control input-md" id="district" name="district">
                                            <option value="" disabled selected>==== Select A District ====</option>
                                            @foreach($data['districts'] as $dist)
                                                <option value="{{ $dist->district_code}}"> {{ $dist->district_name }} </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="control-label text-blue">Block</label>
                                        <select class="form-control input-md" id="block" name="block">

                                            
                                                <option value="" disabled selected>==== Select A Block ====</option>
                                                

                                        </select>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="control-label text-blue">Gram Panchayat</label>
                                        <select class="form-control input-md" id="panchyat" name="panchyat">
                                            <option value="">==== Select Gram Panchayat ====</option>
                                            
                                        </select>



                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="control-label text-blue">Program</label>
                                        <select class="form-control input-md" id="program" name="program">
                                            <option value=""  selected>==== Select Program ====</option>
                                            @foreach($data['program'] as $pr)
                                                    <option value="{{ $pr->program_id}}"> {{ $pr->program_name }} </option>
                                                   
                                                @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row result-set">
                                    <div class="col-md-3 mb-3">
                                        <label class="control-label text-blue">Level</label>
                                        <select class="form-control input-md" id="level" name="level">
                                            <option value=""  selected>==== Select Levels ====</option>
                                            @foreach($data['level'] as $lev)
                                                    <option value="{{ $lev->level_id}}"> {{ $lev->level_name }} </option>
                                                    
                                                @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="control-label text-blue"> Designation </label>
                                        <select class="form-control input-md" id="designation" name="designation">
                                            <option value="">==== Select Designation ====</option>
                                            
                                        </select>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="control-label text-blue">Service Status</label>
                                        <select class="form-control input-md" id="service_status" name="service_status">
                                            <option value="" disabled selected>==== Select Service Status ====</option>
                                            @foreach($data['status'] as $st)
                                                    <option value="{{ $st->status_id }}"> {{ $st->status_name }} </option>

                                                   
                                                @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3 text-right margin-auto">
                                        <button type="button" class="btn btn-primary btn-sm search" id="search-btn"><i class="fa fa-search" aria-hidden="true"></i> Search</button>
                                        <button class="btn btn-warning  btn-sm" type="reset"> <i class="fa fa-refresh" aria-hidden="true"></i> Reset</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="result-set mt10" id="no-more-tables">
                            <div class="row">
                                <div class="col-md-12 pl0 pr0">
                                    <table class="table table-responsive employeeList" cellspacing="10">
                                        <thead>
                                        <tr class="note note-primary">
                                            <th scope="col" class="note-dange">SL No.</th>
                                            <th scope="col">Employee Code</th>
                                            <th scope="col">Employee Name</th>
                                            <th scope="col">Designation</th>
                                            <th scope="col">Posted District</th>
                                            <th scope="col">Posted Block</th>
                                            <th scope="col">GP</th>
                                            <th scope="col">Service Status</th>
                                            <th scope="col">Date Of Joining</th>
                                           
                                            <th scope="col">Contact Nos</th>
                                            
                                            
                                        </tr>
                                        </thead>
                                        <tbody id="table-body">
                                            
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



        </div>

    </div>

    <div class="modal fade top" id="fluidModalTopWarningDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="true"  style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-top modal-notify modal-primary" role="document">
            <!--Content-->
            <div class="modal-content">
                <!--Header-->
                <div class="modal-header mod_head">
                    <p class="heading lead">Employement Details</p>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" class="white-text">×</span>
                    </button>
                </div>

                <!--Body-->
                <div class="modal-body">
                    <ul class="nav nav-tabs mt-5" id="myTab" role="tablist">
                        <li class="nav-item">
                          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
                            aria-selected="true">Profile</a>
                        </li>
                        
                        <li class="nav-item">
                          <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
                            aria-selected="false">Deduction</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#allowance" role="tab" aria-controls="contact"
                              aria-selected="false">Allowance</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#remuneration" role="tab" aria-controls="contact"
                              aria-selected="false">Remuneration</a>
                        </li>
                      </ul>
                      <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <div id="printSection">
                                <div class="container">
                                    <div class="row" id="profile" style="font-size:13px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                                       
                                        <div class="col-md-12 mt-2" style="text-align:center;">
                                            
                                           <img src="" id="dp" class="img-circular" onerror="if (this.src != '{{asset('images/profile_pic.jpg')}}') this.src = '{{asset('images/profile_pic.jpg')}}';" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                                        </div>
                                        <div class="col-md-3 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Employee Code</label>
                                            <p id="code"></p>
            
                                        </div>
                                        <div class="col-md-3 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Employee Name</label>
                                            <p id="name"></p>
                
                                        </div>
                                       
                                       <div class="col-md-3 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Designation</label>
                                            <p id="designation_name"></p>
            
                                        </div>
                                        {{-- <div class="col-md-3 mt-3">
                                                <div style="border:1px solid grey;width: 149px;
                                                height: 161px;padding: 8px;">
                                                    <img src="{{asset('images/profile_pic.jpg')}}" style="width: 131px;height: 146px;">
                                                </div>
                                           </div> --}}
                                        <div class="col-md-3 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Service Status</label>
                                            <p id="status" style="font-weight:bold"></p>
            
                                        </div>   
                                        <div class="col-md-3 mt-1">
                                                <label style="color:#2196F3;font-weight:bold;">Date Of Joining</label>
                                                <p id="joining_date"></p>
                
                                        </div>
                                        <div class="col-md-3 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Contract Date</label>
                                            <p id="contract_date"></p>
            
                                        </div>
                                        <div class="col-md-3 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Date of Birth</label>
                                            <p id="dob"></p>
            
                                        </div>
                                        <div class="col-md-3 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">PAN No</label>
                                            <p id="pan"></p>
                                        </div>
                                        <div class="col-md-3 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Posted District</label>
                                            <p id="posted_district"></p>
                                        </div>
                                        <div class="col-md-3 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Posted Block</label>
                                            <p id="posted_block"></p>
                                        </div>
                                        <div class="col-md-3 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Posted GP</label>
                                            <p id="posted_gp"></p>
                                        </div>
                                       
                                       
                                        
                                        
                                        <div class="col-md-12" style="background-color:#1f2b49">
                                            <p style="padding-top: 11px;color: white;font-size: 15px;">Contact Details</p>
                                        </div>
                                        <div class="col-md-4 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Mobile</label>
                                            <p id="mobile"></p>
            
                                        </div>
                                        <div class="col-md-4 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;" class="bs-linebreak">Alternate Mobile</label>
                                            <p id="alt_mobile"></p>
                                        </div>
                                        <div class="col-md-4 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Email</label>
                                            <p id="email"></p>
                                        </div>
                                        <div class="col-md-4 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Home District</label>
                                            <p id="home_district"></p>
                                        </div>
                                        <div class="col-md-4 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Home Block</label>
                                            <p id="home_block"></p>
                                        </div>
                                        <div class="col-md-4 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Home Town</label>
                                            <p id="home_town"></p>
                                        </div>
                                        <div class="col-md-12" style="background-color:#1f2b49">
                                            <p style="padding-top: 11px;color: white;font-size: 15px;">Bank Details</p>
                                        </div>
                                        <div class="col-md-4 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Account No</label>
                                            <p id="account_no"></p>
            
                                        </div>
                                        <div class="col-md-4 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">IFSC</label>
                                            <p id="ifsc"></p>
                                        </div>
                                        <div class="col-md-4 mt-1">
                                            <label style="color:#2196F3;font-weight:bold;">Bank Name</label>
                                            <p id="bank_name"></p>
                                        </div>
                                        <div class="col-md-12" style="text-align:center;">
                                            <button type="submit" onclick="printDiv('printSection')" class="btn btn-success btn-sm">Print</button>
                                            <button type="submit" data-dismiss="modal" aria-label="Close"  class="btn btn-danger btn-sm">Cancel</button>
                                        </div>
                                       
                                    </div>
                                    </div>
                                
                                </div>
                        </div>
                        
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                            <div class="row">
                                <div class="offset-2 col-md-7">
                                    <!-- Default form contact -->
<form class="text-center  p-5" action="#!" id="deduction-form">

    <p class="h4 mb-4">Deduction Form</p>

   
    <label>Deduction Type</label>
    <select class="browser-default custom-select mb-4" required id="deduction_type" name="deduction_type">
        <option value="">Choose Deduction Type</option>
        @foreach($deductionTypes AS $value)
    <option value="{{$value['id']}}">{{$value['deduction_name']}}</option>
        @endforeach
    </select>
    <label class="text text-danger deduction_type" ></label>
     <!-- Name -->
     <input type="text" id="deduction_amount" name="deduction_amount" class="form-control mb-4" placeholder="Deduction Amount">
     <label class="text text-danger deduction_amount" ></label>
    <!-- Message -->
    <div class="form-group">
        <textarea class="form-control rounded-0" id="deduction_remarks" name="deduction_remarks" rows="3" placeholder="Remarks"></textarea>
        <label class="text text-danger deduction_remarks" ></label>
    </div>
    <input type="hidden" id="deduction_employee_id" name="deduction_employee_id" class="form-control mb-4" placeholder="Deduction Amount" required>
    <input type="hidden" id="deduction_employee" name="deduction_employee" class="form-control mb-4" placeholder="Deduction Amount">
    <button class="btn btn-info btn-block" type="submit">DEDUCT</button>

</form>
<!-- Default form contact -->
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="allowance" role="tabpanel" aria-labelledby="contact-tab">
                            <div class="row">
                                <div class="offset-2 col-md-7">
                                    <!-- Default form contact -->
<form class="text-center  p-5" action="#!" id="allowance-form">

    <p class="h4 mb-4">Allowance Form</p>

   
    <label>Allowance Type</label>
    <select class="browser-default custom-select mb-4" required id="allowance_type" name="allowance_type">
        <option value="">Choose Allowance Type</option>
        @foreach( $allowanceTypes AS $value)
    <option value="{{$value['id']}}">{{$value['allowance_name']}}</option>
        @endforeach
    </select>
    <label class="text text-danger allowance_type" ></label>
     <!-- Name -->
     <input type="text" id="allowance_amount" name="allowance_amount" class="form-control mb-4" placeholder="Allowance Amount" required>
     <label class="text text-danger allowance_amount" ></label>
    <!-- Message -->
    <div class="form-group">
        <textarea class="form-control rounded-0" id="allowance_remarks" name="allowance_remarks" rows="3" placeholder="Remarks" required></textarea>
        <label class="text text-danger allowance_remarks" ></label>
    </div>
    <input type="hidden" id="allowance_employee_id" name="allowance_employee_id" class="form-control mb-4" placeholder="Allowance Amount">
    <input type="hidden" id="allowance_employee" name="allowance_employee" class="form-control mb-4" placeholder="Allowance Amount">
    <button class="btn btn-info btn-block" type="submit">ADD</button>

</form>
<!-- Default form contact -->

 <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                            <div class="row">
                                <div class="offset-2 col-md-7">
                                    <!-- Default form contact -->
<form class="text-center  p-5" action="#!" id="deduction-form">

    <p class="h4 mb-4">Deduction Form</p>

   
    <label>Deduction Type</label>
    <select class="browser-default custom-select mb-4" required id="deduction_type" name="deduction_type">
        <option value="">Choose Deduction Type</option>
        @foreach($deductionTypes AS $value)
    <option value="{{$value['id']}}">{{$value['deduction_name']}}</option>
        @endforeach
    </select>
    <label class="text text-danger deduction_type" ></label>
     <!-- Name -->
     <input type="text" id="deduction_amount" name="deduction_amount" class="form-control mb-4" placeholder="Deduction Amount" required>
     <label class="text text-danger deduction_amount" ></label>
    <!-- Message -->
    <div class="form-group">
        <textarea class="form-control rounded-0" id="deduction_remarks" name="deduction_remarks" rows="3" placeholder="Remarks"></textarea>
        <label class="text text-danger deduction_remarks" ></label>
    </div>
    <input type="hidden" id="deduction_employee_id" name="deduction_employee_id" class="form-control mb-4" placeholder="Deduction Amount" required>
    <input type="hidden" id="deduction_employee" name="deduction_employee" class="form-control mb-4" placeholder="Deduction Amount" required>
    <button class="btn btn-info btn-block" type="submit">DEDUCT</button>

</form>
<!-- Default form contact -->
                                </div>
                            </div>
                        </div>
                        
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="remuneration" role="tabpanel" aria-labelledby="contact-tab">
                            <div class="row">
                                
                                <div class="col-md-6">
                           

    <!--Panel-->
    <div class="card mt-2 mb-2 ml-2">
      <h5 class="card-header light-blue lighten-1 white-text text-uppercase font-weight-bold text-center py-1">Deduction</h5>
      <div class="card-body">
        <ul class="list-group" id="deduction-list">
          
        </ul>
        
      </div>
    </div>
    <!--/.Panel-->

 
                                </div>
                                <div class="col-md-6">
                           

                                    <!--Panel-->
                                    <div class="card mt-2 mb-2 mr-2">
                                      <h5 class="card-header light-blue lighten-1 white-text text-uppercase font-weight-bold text-center py-1">Allowance</h5>
                                      <div class="card-body">
                                        <ul class="list-group" id="allowance-list">
                                          
                                        </ul>
                                        
                                      </div>
                                    </div>
                                    <!--/.Panel-->
                                
                                 
                                                                </div>
                                                                <div class="col-md-11">
                           

                                                                    <!--Panel-->
                                                                    <div class="card mt-2 mb-2 ml-5">
                                                                      <h5 class="card-header light-blue lighten-1 white-text text-uppercase font-weight-bold text-center py-1">Remuneration</h5>
                                                                      <div class="card-body">
                                                                        <ul class="list-group" id="total-list">
                                                                          
                                                                        </ul>
                                                                       
                                                                      </div>
                                                                    </div>
                                                                    <!--/.Panel-->
                                                                
                                                                 
                                                                                                </div>
                            </div>
                        </div>
                      </div>
                    
                    
                
                </div>
            </div>
        </div>
    </div>



@endsection

@section('dynamic_js')
    <script src="{{ asset('js/lib/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/lib/dataTables.bootstrap4.min.js') }}"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
    <script src="{{ asset('plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script>

    <!--<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>-->
    <script>

        $(document).ready( function () {
            $('.employeeList').DataTable({
                buttons: [
                        { extend: 'excel', className: 'excel' }
                ]
            });
        } );
        $(document).on('change','#district',function(){
            $.get("{{route('block_list')}}",{
                district:$(this).val()
            },function(j){
                  var option = "<option value='' selected>==== Select Block ====</option>";    
                  for(var i = 1; i < j.length; i++){
                    option += "<option value="+j[i].block_id+">"+j[i].block_name+"</option>";  
                  }  
                  $('#block').html(option);
            });
        });
        
        $(document).on('click','#search-btn',function(){
            getEmloyeeList();
        });
		$(document).ready(function(){
			$('#district').val("999");
			getEmloyeeList();
		});
        function getEmloyeeList(){
			var table = $('.employeeList').DataTable();
            table.destroy();
            $.get("{{route('remuneration_employee_list')}}",{
                district:$('#district').val(),
                block:$('#block').val(),
                gp:$('#panchyat').val(),
                status:$('#service_status').val(),
                designation:$('#designation').val(),
                program:$('#program').val(),
                level:$('#level').val()
            },function(j){
                var tr = "";
                for(var i = 1; i < j.length; i++){
                    tr += "<tr><td>"+i+"</td><td><a href='' class='employee-row text-info'data-toggle='modal' data-target='#fluidModalTopWarningDemo' data-employee='"+j[i].employee_code+"' data-id='"+j[i].employe_id+"' style='font-size:0.9rem; font-weight:bold;'>"+j[i].employee_code+"</a></td><td>"+j[i].name+"</td><td>"+j[i].designation_name+"</td><td>"+j[i].district+"</td><td>"+j[i].block+"</td><td>"+j[i].gp+"</td><td>"+j[i].status_name+"</td><td>"+j[i].join_date+"</td><td>"+j[i].mobile+"</td></tr>";
                }
                $('#table-body').html(tr);
                $('.employeeList').DataTable({
                buttons: [
                        { extend: 'excel', className: 'excel' }
                ]
                });
            });
		}
        $(document).on('change','#block',function(){
            $.get("{{route('gp_list')}}",{
                block:$(this).val()
            },function(j){
                  var option = "<option value='' selected>==== Select Gram Panchayat ====</option>";    
                  for(var i = 1; i < j.length; i++){
                    option += "<option value="+j[i].gp_id+">"+j[i].gp_name+"</option>";  
                  }  
                  $('#panchyat').html(option);
            });
        });
    
        $(document).on('change','#level',function(){
           $.get("{{route('designation_list')}}",{
               level:$(this).val()
           },function(j){
               var option = "<option value='' selected>==== Select Designation ====</option>";    
                  for(var i = 1; i < j.length; i++){
                    option += "<option value="+j[i].designation_id+">"+j[i].designation_name+"</option>";  
                  }  
                  $('#designation').html(option);
           }) 
        });
        
      $(document).on('click','.employee-row',function(){
          var employeeId = $(this).data("id");
          var employee = $(this).data("employee");
          $('#deduction_employee').val(employee);
          $('#allowance_employee').val(employee);
          $('#deduction_employee_id').val(employeeId);
          $('#allowance_employee_id').val(employeeId);
        $.get("{{route('employee_data')}}",{
            employee:$(this).data("employee")
        },function(j){
            for(var i = 1; i < j.length; i++){
                $('#code').text(j[i].employee_code);
                $('#name').text(j[i].employee_name);
                $('#designation_name').text(j[i].designation);
                $('#status').text(j[i].status);
                $('#joining_date').text(j[i].status);
                $('#contract_date').text(j[i].contract_date);
                $('#dob').text(j[i].birth_date);
                $('#pan').text(j[i].pan_no);
                $('#posted_district').text(j[i].district_name);
                $('#posted_block').text(j[i].block_name);
                $('#posted_gp').text(j[i].gram_panchayat_name);
                $('#mobile').text(j[i].mobile);
                $('#alt_mobile').text(j[i].alternate_mobile);
                $('#email').text(j[i].email);
                $('#account_no').text(j[i].account_no);
                $('#ifsc').text(j[i].ifsc_code);
                $('#bank_name').text(j[i].bank_name);
                
                var totalDeduction = 0;
                var totalArrear = 0;
                var netSalary = j[i].net_salary;
                var deductionList = "";
                for(var k = 1; k < j[i].deduction.length; k++){
                    deductionList += '<li class="list-group-item d-flex justify-content-between align-items-center">'+j[i].deduction[k].deduction_name+'<span class="badge badge-primary badge-pill">'+j[i].deduction[k].deduction_amount+'</span></li>'
                    totalDeduction += j[i].deduction[k].deduction_amount;
                }
                $('#deduction-list').html(deductionList);
                var allowanceList = "";
                for(var k = 1; k < j[i].allowance.length; k++){
                    allowanceList += '<li class="list-group-item d-flex justify-content-between align-items-center">'+j[i].allowance[k].allowance_name+'<span class="badge badge-primary badge-pill">'+j[i].allowance[k].allowance_amount
                    +'</span></li>'
                    totalArrear += j[i].allowance[k].allowance_amount;
                }
                var totalRemuneration = netSalary+totalArrear ;
                $('#allowance-list').html(allowanceList);
                var remunerationList = '<li class="list-group-item d-flex justify-content-between align-items-center">Total Deduction<span class="badge badge-primary badge-pill">'+
                   totalDeduction +'</span></li>'
                   remunerationList += '<li class="list-group-item d-flex justify-content-between align-items-center">Total Arrear<span class="badge badge-primary badge-pill">'+
                   totalArrear +'</span></li>'
                   remunerationList += '<li class="list-group-item d-flex justify-content-between align-items-center">Total Remuneration<span class="badge badge-primary badge-pill">'+
                   totalRemuneration +'</span></li>'
                   $('#total-list').html(remunerationList);
            }
        });
      });


      $(document).on('submit', '#deduction-form', function (e) {
    e.preventDefault();
    Swal.fire({
        position: 'top-end',
        title: 'Are you sure that you want to deduct employee remuneration?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Confirm'
    }).then((result) => {
        if (result.value) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: "{{route('salary_deduct')}}",
                dataType: "json",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                statusCode: {
                    422: function (data) {
                        // Error...
                        var object = "";
                        $.each(data, function (key, val) {

                            if (key === "responseText") {
                                object = jQuery.parseJSON(val);
                            }

                        });
                        var error = "";
                        $.each(object.errors, function (key, val) {
                            alert(key);
                            $('.' + key).text(val);

                        });
                        Swal.fire("In valid data has been provided please check!", "", "error");
                    },
                    200: function (data) {
                        var message = data.success;
                        var status = "success";
                        var heading = "Success";
                        if (data.error) {
                            message = data[1].error;
                            status = "error";
                            heading = "In valid data has been provided please check!"
                        }
                        
                        Swal.fire({
                                    title: heading,
                                    text: message,
                                    icon: status,
                                    showCancelButton: false,
                                    confirmButtonColor: '#3085d6',
                                    cancelButtonColor: '#d33',
                                    confirmButtonText: 'OK'
                                    }).then((result) => {
                                    if (result.value) {
                                        location.reload();
                                     }
                                    })
                    },
                },
                error: function (data) {

                },
                success: function (data) {

                }
            });
        }
    });

});

$(document).on('submit', '#allowance-form', function (e) {
    e.preventDefault();
    Swal.fire({
        position: 'top-end',
        title: 'Are you sure that you want to arrear to employee remuneration?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Confirm'
    }).then((result) => {
        if (result.value) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: "{{route('salary_arrear')}}",
                dataType: "json",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                statusCode: {
                    422: function (data) {
                        // Error...
                        var object = "";
                        $.each(data, function (key, val) {

                            if (key === "responseText") {
                                object = jQuery.parseJSON(val);
                            }

                        });
                        var error = "";
                        $.each(object.errors, function (key, val) {
                            alert(key);
                            $('.' + key).text(val);

                        });
                        Swal.fire("In valid data has been provided please check!", "", "error");
                    },
                    200: function (data) {
                        var message = data.success;
                        var status = "success";
                        var heading = "Success";
                        if (data.error) {
                            message = data[1].error;
                            status = "error";
                            heading = "In valid data has been provided please check!"
                        }
                        
                        Swal.fire({
                                    title: heading,
                                    text: message,
                                    icon: status,
                                    showCancelButton: false,
                                    confirmButtonColor: '#3085d6',
                                    cancelButtonColor: '#d33',
                                    confirmButtonText: 'OK'
                                    }).then((result) => {
                                    if (result.value) {
                                        location.reload();
                                     }
                                    })
                    },
                },
                error: function (data) {

                },
                success: function (data) {

                }
            });
        }
    });

});

    </script>
@endsection