@extends('portal.layout.app')
<link rel="stylesheet" href="{{ URL::asset('assets/css/global.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/input.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css') }}">
@section('content')
<style>
    .cheque_info label {
        color: #3080EA;
        font-size: 11.4px !important;
    }
    .emp_name_column{
        margin-left: -24px;
    }
    .datepicker .datepicker-switch {
        padding-left: 10px !important;
    }
    ::placeholder {
      color: #3080EA !important;
      opacity: 1 !important;
    }
    label {
        font-size: 11.9px !important;
        font-family: Roboto, sans-serif !important;
    }
    .view_attachement {
        /*ursor:pointer;*/
    }
   .amount {
        margin-right: 43px !important;
        text-align: right;
    }
    .type {
        margin-left: 0px;
        text-transform:capitalize;
    }
    .second_column {
        margin-left: -36px !important;
    }
    /*Allign columns and rows of table*/
    .table tr th, .table tr td {
        width: 119px !important;
        padding: 7px 15px;
    }
    .table table tr {
            display: table;
            width: 1208px !important;
            box-sizing: border-box;
    }
    .table table thead {
        display: table;
        width: 100%;
    }
    .table table tbody {
        display: block;
        max-height: 550px;
        overflow-y: auto;
        width: 1208px;
        overflow-x: hidden !important;
    }
    /*End allignment*/
   .notification_custom {
      bottom: 6% !important;
      margin-top: 0px !important;
      margin-right: auto !important;
      margin-left: auto !important;
   }
    .modal_title {
        margin-top: -7px;
        margin-left: -1px;
    }
    .modal-header {
        height: 29px !important;
    }
   .margin_left_thirtyfour {
        margin-left: 34px !important;
    }
    .disbursement_modal_footer{
        margin-top: -16px !important;
    }
    .table-condensed thead{
        background: #3080EA !important;
    }
    ::placeholder {
        color: #3080EA;
        opacity: 1;
        font-size: 11px Roboto;
    }
    .table thead tr th{
        padding: 6.5px;
    }
    .file-input {
        cursor: pointer;
        opacity: 0;
        margin-left: -179px;
    }
    .file-btn {
        position: absolute; 
        float: right;
        background: url('../assets/images/backgrounds/Attachment.svg') no-repeat left top !important;
        text-align: right;
        background-size: cover !important;
        width: 17px;
        height: 17px;
        background-position: right center;
        display: inline-block;
        margin-bottom: -6px;
        overflow: hidden;
        cursor: pointer;
        margin-left: -25px;
        top: 4px;
    }
    .modal-content {
        width: 596px !important;
        margin-left: 102px !important
    }
    .modal_content {
        height: 145px;
    }
    .table tbody tr td {
        height: 29px !important;
    }
    .search_btn {
        margin-left: unset;
    }
    thead::marker {
        display: none !important;
    }

    .datepicker {
        /*left: 40% !important;*/
        position: absolute !important;
        z-index: 9999;
    }
    .dropdown-menu {
        padding: 0 !important;
    }
    .datepicker-switch{
        color: white !important;
    }
    .dow{
        color: white !important;
    }
    .table table tr {
        display: table; /* display purpose; th's border */
        width: 100%;
        box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
    }
    .table table thead {
        display: table; /* to take the same width as tr */
        width: 100%;
    }
    .table table tbody {
        display: block; /* to enable vertical scrolling */
        max-height: 600px; /* e.g. */
        overflow-y: auto; /* keeps the scrollbar even if it doesn't need it; display purpose */
    }
    .sr_number 
    {
        padding-left: 10px !important;
    }
    .dropdown-menu {
        max-height: 300px !important;
        overflow: auto !important;
    }
</style>
<div class="breadcrum">
    HrServices / Loan & Advances / <span class="text-primary">Disbursement </span>
</div>
@php
    $data=(object)$data;
    if(isset($data->data))
    {
        $data->data=(object)$data->data;
    }
    $key_count=0;
@endphp
<section class="expense">
    <div class="row">
        <div class="container-fluid">
            <div class="expense_header reason_box_width margin_left_one">
               <!--  @if(session()->has('message'))
                <p class="alert alert-{{session('alert')}}">{{ session('message') }}</p>
                @endif -->
                <div class="expense_table">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="expense_table_hader">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="header_left" style="font-weight:bold !important">
                                            Loan & Advance Disbursement
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <table class="float-right" style="margin-top:-0.22em;">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="dropdown">
                                                          <button class="dropdown_custom table_dropdown common_dropdown_properties search_employee" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <span style="
                                                                display: inline-block;
                                                                width: 73%;
                                                                margin-left: 0px !important;
                                                                text-overflow: ellipsis;
                                                                white-space: nowrap;
                                                                overflow: hidden;
                                                            ">Not Set</span>
                                                            <span style="margin-left: 18px !important;margin-top: 3px;position: absolute;">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
                                                                  <path id="Down_Arrow" data-name="Down Arrow" d="M5,0l5,6H0Z" transform="translate(10 6) rotate(180)" fill="#343434"/>
                                                                </svg>
                                                            </span>

                                                          </button>
                                                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                             @if(is_array($emp_filters))
                                                                    @foreach ($emp_filters as $key=>$emp)
                                                                        @php
                                                                            $emp=(object)$emp;
                                                                        @endphp
                                                                        <a class="dropdown-item dropdown_option_custom" key-value="{{$emp->id}}">{{$emp->name}}</a>
                                                                     @endforeach
                                                                @endif
                                                          </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div">
                                                            <input type="text" value="" class="table_dropdown common_dropdown_properties py-0 dateselect" placeholder="dd-MM-yyyy">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div">
                                                            <button class="search_btn submit_btn_disbursment align_search_btn">Search</button>
                                                        </div>
                                                        </div>
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="table">
                                <table class="table" id="sorting_disbursment_table">
                                    <thead style="">
                                        <tr>
                                           <th class="sr_number sortTable" style="padding-left: 10px !important;">
                                                Sr #
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable" >
                                                <div style="margin-left:-35px;">
                                                    Emp Code
                                                    <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                                </div>
                                            </th>
                                            <th class="sortTable">
                                                <div style="margin-left:-24px;">
                                                Name
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                                </div>
                                            </th>
                                            <th class="sortTable" style="padding-left: 7px !important;">
                                                Application Date
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable">
                                                Type
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable">
                                                Loan Amount
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="sortTable">
                                                Tenure
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="approved sortTable">
                                                Status
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                            <th class="approved sortTable">
                                                Date
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                        </tr>
                                        <tr>
                                    </thead>
                                    <tbody id="disburment_data" >
                                    @if(isset($data->data))
                                        @foreach ($data->data as $key_count=>$app)
                                        @php
                                            $app=(object)$app;
                                        @endphp
                                        <tr>
                                            <td class="sr_number" style="padding-left: 10px !important;">{{$key_count+1}}</td>
                                            <td><span class="second_column">{{$app->empcode}}</td>
                                            <td><span class="emp_name_column">{{$app->name}}</span></td>
                                            <td>{{$app->application_date}}</td>
                                            <td><span class="type">{{ucfirst($app->application_type)}}</span></td>
                                            <td><div class="amount">{{$app->loan_amount}}</div></td>
                                            <td>{{$app->tenure}}</td>
                                            <td style="cursor: pointer;" onclick="disbursmentPopUp('{{$app->loan_amount}}' , '{{$app->disbursement_on}}' , '{{$app->loan_req_id}}', '{{$app->cheque_detail}}', '{{$app->attachment}}')">{!!loanStatus($app->disbursement_status)!!}</td>
                                            <td class="approved">{{$app->disbursement_on}}</td>
                                        </tr>
                                        @endforeach
                                    @endif
                                    </tbody>
                                </table>
                            </div>
                            <div class="expense_table_footer" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelexampleModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content modal_content">
            <div class="modal-header">
                <span class="modal-title modal_title w-100" id="myModalLabelexampleModal">Disbursement</span>
                <a class="close close_btn" data-dismiss="modal" aria-label="Close">
                    <span class="test" aria-hidden="true" style="padding-top: 10px !important;">&times;</span>
                </a>
            </div>
            <form action="{{route('update_loan_disbursement')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="loan_request_id" id="load_request_id">

                <div class="modal-body modal_body">
                    <div class="row mb-4">
                        <div class="input_div display_item_flex">
                            <div class="material-textfield margin-left-ten">
                                <input type="hidden" name="disbursement_status" value="1">
                                <input value="" name="disbursment_amount" type="text" readonly id="disbursment_amount">
                                <label>Disbursement Amount</label>
                            </div>
                            <div class="material-textfield margin-left-ten">
                                <input value="" name="cheque_detail" type="text" required>
                                <label>Cheque Detail</label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="input_div display_item_flex">
                            <div class="material-textfield margin-left-ten">
                                <input value="" name="disbursement_date" type="text" readonly id="disbursement_date">
                                <label>Disbursement Date</label>
                            </div>
                            <div class="material-textfield margin-left-ten">
                                <input value="" name="disbursement_attachment" type="file" id="monthly_installment">
                                <label>Attachment</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer py-2" style="border-top: 0 none;" border-0>
                <button type="submit" class="btn btn-sm mr-2">Disburse</button><button type="button" onclick="closePopUp()" class="btn btn-sm">Cancel</button>
                </div>

            </form>
        </div>
    </div>
</div> -->
<!-- model start -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelexampleModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content modal_content">
          <div class="modal-header">
            <span class="modal-title modal_title" id="myModalLabelexampleModal"><b>Disbursement</b></span>
            <a class="close close_btn" data-dismiss="modal" aria-label="Close" style="margin-top: -20px !important;">
              <span class="test" aria-hidden="true" style="padding-top: 10px !important;">&times;</span>
            </a>
          </div>
          <div class="modal-body modal_body">
                <form action="{{route('update_loan_disbursement')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="loan_request_id" id="load_request_id">
                    <div class="row mb-4">
                        <div class="input_div display_item_flex">
                            <div class="material-textfield margin_left_twentythree margin-top-two" >
                                <input type="hidden" name="disbursement_status" value="1">
                                <input type="text" readonly id="disbursment_amount_old" >
                                 <input value="" name="disbursment_amount" type="hidden" readonly id="disbursment_amount" >
                                <label>Disbursement Amount</label>
                            </div>
                            <!-- <div class="material-textfield margin_left_thirtyfour">
                                <input value="" name="cheque_detail" type="text" required>
                                <label>Cheque Detail</label>
                            </div> -->
                            <div class="material-textfield margin_left_thirtyfour margin-top-two cheque_info">
                              <input class="mui_placeholder_color" value="" id="cheque_detail" name="cheque_detail" placeholder="Cheque Detail" type="text" required>
                              <label>Cheque Detail/Payment Reference</label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="input_div display_item_flex">
                            <div class="material-textfield margin_left_twentythree margin-top-thirteen">
                                <input value="" name="disbursement_date" type="text" readonly id="disbursement_date">
                                <label>Disbursement Date</label>
                            </div>
                            <div class="material-textfield margin_left_thirtyfour margin-top-thirteen" id="attachment_view">
                                <!-- <input value="" name="disbursement_attachment" type="file" id="monthly_installment"> -->
                                <!-- <input value=""  type="" id="attached-file">
                                <label>Attachment</label>
                                <div class="file-btn">
                                    <input value="" type="file" class="file-input" name="disbursement_attachment" id="monthly_installment" required>
                                </div> -->
                            </div>
                        </div>
                    </div>
          </div>
            <div class="modal-footer py-2" style="border-top: 0 none;" border-0>
                <div class="disbursement_modal_footer">
                    <div class="footr float-right">
                        <button class="search_btn disbursement_modal_search installment_rec_btn">Disburse</button>
                        <button class="search_btn mt-1" type="button" onclick="closePopUp()" style="margin-right: 10px;">Cancel</button>
                    </div>
                </div>
            </div>
        </form>
        </div>
    </div>
</div>
<!-- model end -->
<div class="modal" id="datepicker" tabindex="-1" role="dialog" aria-labelledby="myModalLabeldatepicker" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content modal_content">
            <div class="modal-body modal_body p-0">

            </div>
        </div>
    </div>
</div>
@include('notification')
@stop
@section('scripts')
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/calendar.js') }}"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> -->
<script>
    var response_message =