@extends('portal.layout.app')
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/global.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/input.css') }}">
@section('content')
<style type="text/css">
    .ml_twenty {
        margin-left: 20px;
    }
    .mt_five {
        margin-top: 5px;
    }
   .notification_custom {
      bottom: 6% !important;
      margin-top: 0px !important;
      margin-right: auto !important;
      margin-left: auto !important;
   }
    .footer_description {
        float: left;
        padding: 5px;
        margin-left:5px;
    }
    .footer_txt {
        display: block;
    }
    .table td {
        border-top: unset;
    }
    .margin_top_ten {
        margin-top: -10px;
    }
    .margin_left {
        margin-left: -27% !important;
    }
    .margin_left_fifteen {
        margin-left: 15px;
    }
    .font_size_thirteen {
        font-size: 12px;
    }
    .text_align {
        text-align: end;
    }
    .remove_btn {
        margin-right: 110px;
        margin-top: -19px;
    }
    .withdraw_btn {
        margin-right: 49px;
        margin-top: -19px;
    }
    .leave_update_btn {
        margin-right: -6px;
        margin-top: 5px;
    }

    .modal_title {
        line-height: 2.428571 !important;
        margin-left: 10px;
        font-weight: 700;
        font-family: Roboto, sans-serif;
    }
    .modal-body {
        height: 94px;
    }
    .close {
        margin-top: 4px !important;
        margin-right: 6px;
    }

    .expense_table {
        margin-left: 16px;
        width: 1208px;
        box-shadow: 1px 0 0 0 #d6d6d6, 0px 0 0 1px #d6d6d6;
    }
    .reason_submit_btn {
        margin-top: -19px !important;
        margin-left: 510px !important;
        margin-right: -5px !important;
    }
    .modal_tbl {
        border: 1px solid #D8DCDF;
        width: 587px !important;
        margin-left: 5px !important;
        margin-top: 4px !important;
        width: 587px !important;
    }
    .sub_heading {
        margin-top: -5px;
        color: #343434;
        margin-left: 5px;
        font-size: 13px;
        font-family: Roboto, sans-serif;
    }
    .modal_width {
        width: 48% !important;
    }
    .footer_btn {
        margin-top: -19px !important;
        margin-left: 498px !important;
        margin-right: -5px !important;
    }
    .termination_textarea_label {
        top: 21px !important;
        margin-left: 2.5rem !important;
    }
    label {
        font-weight: unset !important;
    }
    .terminate_textarea {
    width: 51.5%;
    margin-top: 18px;
    }
    .modal-content {
        width: 628px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .font_size {
        font-size: 12px !important;
    }
    .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
        background-color: #D8DCDF !important;
        color: black !important;
    }
    .dropdown-menu {
        padding-bottom: 0px !important;
    }
    .btn-default .badge {
        top: -1px !important;
    }
    .la_list_footer {
        margin-top: -2px !important;
    }
    .bs-searchbox>input {
        width: 236px !important;
        margin-left: 2px;
        height: 22px;
    }
    .badge {
        background-color: #61BF63 !important;
        font-size: 11px;
    }
    .badge-secondary {
        font-family: Roboto, sans-serif !important;
    }
    .form-control:focus {
        border-color: #D8DCDF;
        outline: 0;
        -webkit-box-shadow: unset !important;
        box-shadow: unset !important;
    }
    .nav, .nav-tabs{
        margin-left: 11px !important;
    }
    .nav-tabs>li>a {
        width: unset !important;
        height:  20px !important;
    }
    .nav>li>a{
        padding-left: 15px !important;
        padding-right: 10px;
        margin-top: 2px !important; 
        margin-left: -6px !important;
    }
    .reason_textarea {
        font-size: 11px !important;
    }
    a, a:link, a:active, a:visited {
        color: #3080EA;
    }
    textarea {
        border:1px solid #d8dcdf !important;
        resize: none;
    }
    .reason_table table tbody tr td a {
        font-size: 11px !important;
        font-family: Roboto, sans-serif !important;
        margin-left: 13px !important;
    }
    .reason_table table tbody tr td {
        padding: 5.1px !important;
    }

    .reason_table table tr {
        display: table;
        width: 100%;
        box-sizing: border-box;
    }
    .reason_table table thead {
        display: table;
        width: 100%;
    }
    .reason_table table tbody {
        display: block;
        max-height: 600px;
        overflow-y: auto;
    }
    .reason_table table tbody {
        max-height: 252px !important;
    }
    .disabled{
        color: #8D8D8D !important;
        border: 1px solid #999999a8 !important;
    }
    .table .table {
     background-color: unset !important; 
     margin-left: 0px; 
    }
    #universal_table table tbody {
        width: 1166px !important;
        /*max-height: 86px !important;*/
    }
    .checkbox_pool_amount {
        width:23px !important;
        height:18px !important;
        margin-left:70px !important;
    }
    .table table tbody tr td div span{
        margin-left: 14px !important;
    }
    select:disabled + label{
        color: #8D8D8D !important;
        font-weight: 100 !important;  
    }
    input:disabled{
        background-color: white !important;
    }
    input:disabled+label {
        color: #8D8D8D;
    }
    .disable-arrow:after {
    border-top: 5px solid red !important; 
    }
    .dropdown-menu ul li  a:hover{
        background-color: #D8DCDF!important;
    }
    .dropdown-menu ul li a {
        padding-left: 30px;
        padding-top: 6px;
    }
    .dropdown-menu {
        width: 0px !important;
        border-radius: 0px !important;
    }
    ::placeholder {
      color: transparent !important;
      opacity: 1; /* Firefox */
    }

    /*End alignment*/
    .dropdown-menu ul li:nth-child(odd) {
        background-color: #FAFAFB;
        opacity: 1;
        color: #343434;
    }
        .dropdown-menu ul li:nth-child(even) {
        background-color: #FFFFFF;
        opacity: 1;
        color: #343434;
    }

    /*Allign columns and rows of table*/
    .table tr th, .table tr td {
        width: 150px !important;
        padding: 7px 15px;
    }
    .table table tr {
            display: table; /* display purpose; th's border */
            width: 1208px !important;
            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;
        max-height: 291px !important;
        overflow-y: auto;
        width: 1208px;
        overflow-x: hidden !important;
    }
    /*End allignment*/

    table thead tr th span {
    margin-left: 16px !important;
    }
    table tbody tr td div span {
        margin-left: 14px !important;
    }
    .select:after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #333333;
        position: absolute;
        top: 11px !important;
        right: 9px;
     }
    .approval_details_footer {
        height: 27px !important;
        margin-top: 20px !important;
    }
    .expense_header{
        margin-left:  -14px;
    }
    .font_size_twelve {
        font-weight: 400 !important;
        font-size: 11px !important;
        font-family: Roboto !important;
    }
    .font_weight {
        font-weight: 400 !important;
        font-size: 11px !important;
        font-family: Roboto !important;
    }
    .table tbody tr td{
        padding: 6px !important;
    }
    .table tbody tr td a{
        font-size: 11px !important;
        font-family: Roboto, sans-serif;
    }
    .table thead tr th{
        padding: 4.5px !important;
    }
    .filter-option {
       font-size: 11px !important; 
    }
    .select-text {
        padding: 6px 5px 5px 5px;
        font-size: 11px;
        padding-left: 7px !important;
    }
    .dropdown_height {
        height: 26px !important;
        }
    .success_message{
        /*height: 40px !important;*/
    }
    .dropdown-toggle
    {
        border: unset !important;
        padding: unset !important;
    }
    .multi-lable
    {
        top: 6%;
    }
    .dropdown-toggle
    {
        box-shadow: unset !important;
        background-color: unset !important;
        outline: unset !important;
    }
    .dropdown-toggle:focus
    {
        outline: none !important;
        outline-offset: unset !important;
    }
    .bs-caret
    {
        display: none;
    }
    .multi_dropdown_color
    {
        color: #3080EA;
        opacity: 1;
    }
    .multi_dropdown_color_border
    {
        border: 1px solid #3080EA;
        border-radius: 4px;
    }
    .glyphicon-ok{
        color: white !important;
        font-size: 8px !important;
        background-color: #3080EA !important;
        padding: 3px;
        border-radius: 4px;
    }
    .dropdown-menu li:focus{
        border: 0 !important;
    }
    .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
        margin-left: -8px !important;
        font-size: 11px !important;
        font-family: Roboto !important;
    }
    .add_new {
        /*float: right !important;*/
        margin-top: 5px !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: 300px; /* e.g. */
        overflow-y: auto; /* keeps the scrollbar even if it doesn't need it; display purpose */
    }
    .panel-heading-nav {
      border-bottom: 0;
      padding: 10px 0 0;
    }
    .panel-heading-nav .nav {
      padding-left: 10px;
      padding-right: 10px;
    }
    .nav-tabs>li>a {
        border: 1px solid #d8dcdf;
        border-radius: 3px;
        background: linear-gradient(180deg, #ededed 0%, #fafafa 100%) 0% 0% no-repeat padding-box;;
        width: 168px;
        height: 28px;
    }
    .nav-tabs {
        border-bottom: unset;
        margin-left: 4px;
        margin-top: -20px;
    }
    .tabs_left_margin {
        margin-left: 10px;
    }
    .tabs_text {
        margin-top: -8px;
        margin-left: -5px;
        color: #3080EA;
        font-size: 11px !important;
    }

    .select-text {
            padding-left: 10px !important;
        }

    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
        font-family: Roboto, sans-serif;
        font-weight: bold !important;
        background: linear-gradient(0deg, #f1fafe 0%, #bde9fb 100%) 0% 0% no-repeat padding-box;
        border-bottom: 1px solid #d8dcdf;
    }
    .reason_save_btn{
        margin-left:96.19%;
        margin-top:5px;
    }
    .reason_update_btn{
        margin-left:95.23% !important;
        margin-top:5px;
    }
    .list {
        margin-top: 12px;
    }
    .file-input {
        cursor: pointer;
        opacity: 0;
        margin-left: -179px;
    }
    .file-btn {
        background: url(../assets/images/backgrounds/Attachment.svg) no-repeat left top !important;
        text-align: right;
        background-size: cover !important;
        width: 21px;
        height: 21px;
        background-position: right center;
        display: inline-block;
        margin-bottom: -6px;
        overflow: hidden;
        margin-left: 456px;
        margin-top: 1px;
        position: absolute;
        float: right;
    }
    .disbursement_modal_footer {
        width: 498px;
        margin-left: -15px;
    }
</style>
<div class="breadcrum">
    HrServices / Loan & Advances / <span class="text-primary">Setup</span>
</div>

<section class="expense">
    <div class="row">

        <div class="expense_table universal_section">
            <div class="row">
                <div class="col-md-12">
                    <form method="post" action="{{ url('/leave/cr_leave_details?id=').request()->id }}" id="frmLeave" name="frmLeave" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="comments" id="comments" value="" />
                    <div class="expense_table_hader">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="header_left">
                                    Leave Application Details
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- personal info start -->
                    <div class="row">
                       <div class="col-md-12">
                            <div class="approval_header">
                                <div class="approval_header_text">Personal Information</div>
                            </div>
                       </div>
                   </div>
                    <div class="row">
                       <div class="col-md-12">
                          <div class="universal_box">
                             <div class="table universal_table" id="universal_table">
                                <table class="table" cellSpacing=0 cellPadding=5px; border=0>
                                   <tbody >
                                        <tr>
                                            <td><b class="margin_left_fifteen font_size_thirteen">Employee ID:</b></td>
                                            <td></td>
                                            <td><div class="margin_left">{{ isset($data['details']->empcode)?$data['details']->empcode:null }}</div></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td><b class="margin_left_fifteen font_size_thirteen">Full Name:</b></td>
                                            <td></td>
                                            <td><div class="margin_left">{{ isset($data['details']->name)?$data['details']->name:null}}</div></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td><b class="margin_left_fifteen font_size_thirteen">Department</b></td>
                                            <td></td>
                                            <td><div class="margin_left">{{ isset($data['details']->department)?$data['details']->department:null }}</div></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td><b class="margin_left_fifteen font_size_thirteen">Designation:</b></td>
                                            <td></td>
                                            <td><div class="margin_left">{{ isset($data['details']->designation)?$data['details']->designation:null }}</div></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                   </tbody>
                                </table>
                             </div>
                          </div>
                       </div>
                    </div>
                    <!-- personal info end -->

                    <!-- leave detail start -->
                    <div class="row">
                       <div class="col-md-12">
                            <div class="approval_header">
                                <div class="approval_header_text">Leave Detail</div>
                            </div>
                       </div>
                   </div>
                    <div class="row">
                       <div class="col-md-12">
                          <div class="universal_box">
                             <div class="table universal_table" id="universal_table" style="    margin-bottom: 20px !important;">

                                <div style="display: flex; margin-top:15px;">
                                    <div class="select select_width margin_top_five ml_twenty">
                                        <select class="select-text dropdown_height select_width" name="type_id" id="leave-id">
                                            @foreach ($data['leave_db'] as $leave_db)
                                                @if(isset($leave_db->leaveSetup))
                                                    @if (isset($data['details']->type_id) && $leave_db->id == $data['details']->type_id)
                                                        <option label="{{$leave_db->name}}" data-setup={{$leave_db->leaveSetup->id}} value="{{$leave_db->id}}" selected>{{$leave_db->name}}</option>
                                                    @else
                                                        <option label="{{$leave_db->name}}" data-setup={{$leave_db->leaveSetup->id}} value="{{$leave_db->id}}">{{$leave_db->name}}</option>
                                                    @endif
                                                @endif
                                            @endforeach
                                        </select>
                                        <label class="select-label">Leave Type</label>
                                    </div>

                                    <div class="select select_width margin_top_five" style="margin-left: 28px;margin-right: 28px;">
                                        <select class="select-text dropdown_height select_width" id="leave-type" name="leave_type">
                                            <option value="1" @if($data['details']->nod > 0.5) selected = "selected" @endif>Full
                                            </option>
                                            <option value="0.5" @if ($data['details']->nod == 0.5) selected = "selected" @endif>Half
                                            </option>
                                            <option value="0.25" @if ($data['details']->nod == 0.25) selected = "selected" @endif>Short
                                            </option>
                                        </select>
                                        <label class="select-label">Leave category</label>
                                    </div>
                                    <input  name="setup_id" type="hidden"  class="setup_id_class" />

                                                    
                                    <div class="material-textfield select_width mt_five">
                                        <input disabled name="address" class="universal_pool_amount select_width dropdown_height" type="text" value="{{ dateFromat($data['details']->fdate) }}">
                                        <label class="font_size_twelve" style="font-size:11px !important">From</label>
                                    </div>

                                    <div class="material-textfield select_width mt_five" style="margin-left: 28px;">
                                        <input disabled name="address" class="universal_pool_amount select_width dropdown_height" type="text" value="{{ dateFromat($data['details']->tdate) }}">
                                        <label class="font_size_twelve" style="font-size:11px !important">To</label>
                                    </div>
                                </div> 


                             </div>
                          </div>
                       </div>
                    </div>
                    <!-- leave deatil end -->

                    <!-- contact details start -->
                    <div class="row">
                       <div class="col-md-12">
                            <div class="approval_header">
                                <div class="approval_header_text">Contact Details During Leave</div>
                            </div>
                       </div>
                   </div>
                    <div class="row">
                       <div class="col-md-12">
                          <div class="universal_box">
                             <div class="table universal_table" id="universal_table">
                                <table class="table" cellSpacing=0 cellPadding=5px; border=0>
                                   <tbody >
                                        <tr style="background-color: white;">
                                            <!-- <td><b class="margin_left_fifteen font_size_thirteen">Address:</b></td>
                                            <td></td> -->
                                            <td style="padding-top: 20px !important;padding-bottom: 20px !important;">
                                                <div class="row col-md-12">
                                                    <div class="col-md-12 input_div display_item_flex margin_left_five">
                                                        <div class="material-textfield select_width margin_top_ten">
                                                            <input name="address" class="universal_pool_amount select_width dropdown_height" type="text" value="{{ $data['details']->address }}">
                                                            <label class="font_size_twelve" style="font-size:11px !important">Address</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                   </tbody>
                                </table>
                             </div>
                          </div>
                       </div>
                    </div>
                    <!-- contact details end -->

                    <!-- telephone start -->
                    <div class="row">
                       <div class="col-md-12">
                            <div class="approval_header">
                                <div class="approval_header_text">Telephone</div>
                            </div>
                       </div>
                   </div>
                    <div class="row">
                       <div class="col-md-12">
                          <div class="universal_box">
                             <div class="table universal_table" id="universal_table">
                                <table class="table" cellSpacing=0 cellPadding=5px; border=0>
                                   <tbody >
                                        <tr style="background-color: white;">
                                            <!-- <td><b class="margin_left_fifteen font_size_thirteen">Home:</b></td>
                                            <td></td> -->
                                            <td style="padding-top: 20px !important;padding-bottom: 20px !important;">
                                                <div class="row col-md-12">
                                                    <div class="col-md-12 input_div display_item_flex margin_left_five">
                                                        <div class="material-textfield select_width margin_top_ten">
                                                            <input name="phone" class="universal_pool_amount select_width dropdown_height" type="text" value="{{ $data['details']->phone }}">
                                                            <label class="font_size_twelve" style="font-size:11px !important">Home</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <!-- <td></td> -->
                                            <!-- <td></td> -->
                                        <!-- </tr> -->
                                        <!-- <tr> -->
                                            <!-- <td><b class="margin_left_fifteen font_size_thirteen">Mobile:</b></td> -->
                                            <!-- <td></td> -->
                                            <td style="padding-top: 20px !important;padding-bottom: 20px !important;">
                                                <div class="row col-md-12">
                                                    <div class="col-md-12 input_div display_item_flex margin_left_five">
                                                        <div class="material-textfield select_width margin_top_ten">
                                                            <input name="mobile" class="universal_pool_amount select_width dropdown_height" type="text" value="{{ $data['details']->mobile }}">
                                                            <label class="font_size_twelve" style="font-size:11px !important">Mobile</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <!-- td></td>
                                            <td></ -->
                                        </tr>
                                   </tbody>
                                </table>
                             </div>
                          </div>
                       </div>
                    </div>
                    <!-- telephone end -->

                    <!-- line manager start -->
                    <div class="row">
                       <div class="col-md-12">
                            <div class="approval_header">
                                <div class="approval_header_text">For Line Manager Use</div>
                            </div>
                       </div>
                   </div>
                    <div class="row">
                       <div class="col-md-12">
                          <div class="universal_box">
                             <div class="table universal_table" id="universal_table">
                                <table class="table" cellSpacing=0 cellPadding=5px; border=0>
                                   <tbody >
                                        <tr style="background-color: white;">
                                            <td><b class="margin_left_fifteen font_size_thirteen">Application Status:</b></td>
                                            <td></td>
                                            <td><div class="margin_left">
                                                @if ($data['details']->appstatus == 1)
                                                    <span style="color:#ffa922;margin-left: 0px !important;">Pending</span>
                                                @elseif ($data['details']->appstatus == 2)
                                                    <span style="color:#1BC167;margin-left: 0px !important;">Approved</span>
                                                @elseif ($data['details']->appstatus == 3)
                                                    <span style="color:#f35e46;margin-left: 0px !important;">Disapproved</span>
                                                @endif
                                            </div></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr style="background-color: #FAFAFB">
                                            <td><b class="margin_left_fifteen font_size_thirteen">Signatures:</b></td>
                                            <td></td>
                                            <td><div class="margin_left">{{ $data['details']->c_sign }}</div></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr style="background-color: white;">
                                            <td><b class="margin_left_fifteen font_size_thirteen">Dated:</b></td>
                                            <td></td>
                                            <td><div class="margin_left">{{ dateFromat($data['details']->c_date) }}</div></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr style="background-color: #FAFAFB">
                                            <td><b class="margin_left_fifteen font_size_thirteen">Comments:</b></td>
                                            <td></td>
                                            <td>
                                                <div class="">
                                                    <div class="material-textfield margin_top_five" style="margin-left: 143px;">
                                                       <textarea class="comment_textarea" rows="2" cols="90" disabled style="background-color:white !important">{{$data['details']->comments}}</textarea>
                                                    </div>
                                                </div></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                   </tbody>
                                </table>
                             </div>
                          </div>
                       </div>
                    </div>
                    <!-- line manager end -->
                    <input type="hidden" name="leave_id" id="leave_id" value="{{ $data['leaveid'] }}" />
                    <input type="hidden" name="appstatus" id="appstatus" value="" />
                    <input type="hidden" value="{{ $data['details']->emp_date }}" name="application_date">
                    <input type="hidden" value="{{ $data['details']->nod }}" name="nod" id="nod">
                    <input type="hidden" name="frm_name" id="frm_name" value="frmLeave" />
                    </form>
                    <div class="col-md-12 approval_details_footer">
                       <div class="text_align">
                        @if ($data['role_title'] == "CR")
                            <div><button class="search_btn leave_update_btn" onclick="closescreen()">Cancel</button></div>
                            <div><button onclick="validate(document.frmLeave,'0')" class="search_btn withdraw_btn">Remove</button></div>
                            <div><button onclick="validate(document.frmLeave,'1')" class="search_btn remove_btn">Update</button></div>
                        @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Reason model start -->
    <div class="modal fade" id="reasonModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelreasonModal" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal_content" style="width: 500px !important;">
              <div class="modal-header" style="padding-top: 7px;">
                <span class="modal-title modal_title w-100" id="myModalLabelreasonModal" style="margin-left: 0px; margin-top: -8px;">Please Provide Reason</span>
                <a class="close close_btn" data-dismiss="modal" aria-label="Close"  style="margin-top: -14px !important;">
                  <span class="test" aria-hidden="true" style="padding-top: 10px !important;">&times;</span>
                </a>
              </div>
                <form>
                    <div class="modal-body modal_body" style="width: 500px !important;box-sizing: revert;">
                        <div class="col-md-12 display_item_flex">
                            <div id="messageBox" style="color: red;display: none;">Please enter the reason.</div>
                        </div>
                        <div class="row mb-12" style="margin-bottom: 1.5rem;">
                            <div class="input_div display_item_flex">
                                <div class="material-textfield margin_left_twentythree margin-top-two">
                                    <input placeholder="Reason" type="text" id="reason" style="width:460px;">
                                    <label>Reason</label>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-12" style="margin-bottom: 1.5rem;">
                            <div class="input_div display_item_flex">
                                <div class="material-textfield margin_left_twentythree margin-top-two">
                                    <input placeholder="Evidence" type="text" name="evidence" id="evidence" readonly style="width:460px;">
                                    <label>Evidence</label>
                                </div>
                                <div class="file-btn">
                                    <input type="file" class="file-input" name="attachment" form="frmLeave">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="modal-footer py-2" style="border-top: 0 none; padding-bottom: 0px !important;">
                    <div class="disbursement_modal_footer">
                        <div class="footer_description footer_txt" style="display:none;">
                            This application will be removed from the list also
                        </div>
                        <div class="footr float-right">
                            <button id="submit_request" class="search_btn mt-1" style="margin-right: 3px;">Continue</button>
                            <button class="search_btn mt-1" onclick="closePopUp()" style="margin-right: 10px;margin-left: 0px;">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- model end -->
</section>
@include('notification')
@section('scripts')
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    var response_error = "";
    var response_message = "";
    if(response_message!= 1 && response_error ==1)
    {
        $('.success_message').show();
        $('.success_message_text').html(response_message);
        setInterval(function () {$('.success_message').hide()}, 3000);
    }
    else if(response_error != 1 && response_message ==1)
    {
        $('.error_message').show();
        $('.error_message_text').html(response_error);
        setInterval(function () {$('.error_message').hide()}, 3000);
    }

    function validate(frm,id) {
        document.getElementById('appstatus').value=id;
        $('#reasonModal').modal('show');
    }

    function closePopUp() {
       $(".modal").modal('hide');
    }

    $("input.file-input").change(function () {
        $('#evidence').val($(this).val());
    });
    $(".remove_btn").click(function () {
        $(".footer_txt").hide();
    });
    $(".withdraw_btn").click(function () {
        $(".footer_txt").show();
    });

    $(document).on('click', '#submit_request', function (e) {
        let setup_id=$('#leave-id :selected').attr('data-setup');
        $('.setup_id_class').val(setup_id);
        e.preventDefault();
        if($('#reason').val() == ''){
            $('.error_message').show();
            $('.error_message_text').html('Please enter the reason.');
            setInterval(function () {$('.error_message').hide()}, 3000);
            return false;
        }
        if($("#reason").val().length < 25){
            $('.error_message').show();
            $('.error_message_text').html('Please enter the reason of at least 25 characters.');
            setInterval(function () {$('.error_message').hide()}, 5000);
            return false;
        }
        $("#comments").val($("#reason").val());
        document.frmLeave.submit();
    });

    $('#reason').on('input', function() {
        if($(this).val() != ''){
            $('#messageBox').css("display", "none");
        }
    });

    function closescreen() {
        location.href = "{{url('leave/leave_list') }}";
    }
</script>
@endsection
@stop