@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>
    .margin-left {
        margin-left: 208px;
    }
    textarea {
        border:1px solid #d8dcdf !important;
        resize: none;
    }
    select:disabled + label{
        color: #343434 !important;
        font-weight: 100 !important;
    }
    input:disabled{
        background-color: white !important;
    }
    input:disabled+label {
        color: #343434;
    }
    .bg_color {
        background-color: white;
    }
   .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;
    }
    .dropdown_height {
    height: 27px !important;
    }
    .footer_txt {
        display: block;
    }
    .comment_textarea {
        margin-top: -18px;
        border: 1px solid #d8dcdf;
        background-color: white !important;
    }
    #wrapper #container {
        position: relative;
        padding: 12px 2px 20px 7px;
    }
    #wrapper {
        text-align: left;
    }
    h1:first-child {
        margin: -3px 0 0;
    }
    h1{
        font: 12px Arial, Tahoma, Verdana;
        color: #0096dc;
        font-weight: 600;
        margin-bottom: 5px !important;
        padding: 0px 0 5px 7px;
    }
    .gray {
        color: #666666;
    }
    #wrapper #container .section {
        float: left;
        background: #FFFFFF;
        width: 100%;
    }
    #wrapper #container .section .box {
        display: block;
        margin: 0 5px 10px 5px;
        zoom: 1;
        background: white;
        border: 1px solid #e7e7e7;
        border-spacing: 0;
        -webkit-border-radius: 4px 4px 0 0;
    }
    #wrapper #container .section .box .title {
        position: relative;
        background: transparent linear-gradient(180deg, #F7F7F7 0%, #D6D6D6 100%) 0% 0% no-repeat padding-box;
        padding: 8px 10px 0;
        font: 13px/1em Roboto;
        color: #343434;
        height: 28px;
        font-weight: 600;
        opacity: 1;
    }
    #wrapper #container .section .box {
        border-spacing: 0;
        margin-top: 18px;
    }
    #wrapper #container .section .box .content {
        display: block;
        padding: 5px;
        padding-right: 15px;
        padding-left: 15px;
    }
    #upper_section div {
        display: block;
        position: relative;
        border: none;
        padding: 0;
    }
    label.row-title {
        font-weight: bold;
        color: #4c4c4c;
    }
    label {
        font-size: 12px;
    }
    form div .right {
        margin: 0 0 0 35%;
        display: block;
        padding-left: 10px;
        border-left: 1px solid #eee;
    }
    .file-btn {
        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;
        margin-left: 209px;
        margin-top: 20px;
        position: absolute;
    }
    form div .right {
        margin : 0 0 0 15%;0
    }
    .form-field{
        border:solid 1px #cccccc;
        font-size:100%;
    }

    .datepicker {
        /*left: 40% !important;*/
        position: absolute !important;
        z-index: 9999;
    }
    .datepicker_size {
        padding: 9px 10px;
    }
    .search_btn {
        margin-left: unset;
    }
    .table tbody tr td {
        border: 1px solid transparent;
        padding: 6.9px 7px 5px 10px !important;
        transition-timing-function: ease-in-out;
        transition: 0.3s;
    }
    .dropdown-menu{
        padding: 0 !important;
    }
    .modal-content {
        width: 596px !important;
        margin-left: 102px !important
    }
    .search_btn {
        margin-left: unset;
    }
    .modal-header {
        height: 29px !important;
    }
    .mb-12 {
        margin-bottom: 1.5rem;
    }
    .file-input {
        cursor: pointer;
        opacity: 0;
        margin-left: -179px;
    }
    .select:after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #333333;
        position: absolute;
        top: 11px !important;
        right: 9px;
    }

    .links {
        margin-left: 10px;
        margin-top: -19px;
    }
    .footr{
        margin-top: 2px;
    }
    #upper_section{
        margin-top: 7px !important;
    }
    .expense_table_footer{
        margin-top: 20px;
        height: 28px !important;
    }
    .currency_dropdown_width{
        width: 210px !important;
    }

    .select_box_arrow:after{
        right: 9px !important;
        margin-top: -1px;
    }

    .height_twenty_two{
        height: 26px !important;
    }
    .select-text{
        padding: 7px 5px 5px 5px !important;
        color: #000000d1 !important;
        opacity: 1;
    }
    .margin_top_five {
        margin-top: 15px !important;
    }
    #frmexpense input {
        width: 201px !important;
        height: 26px;
    }
    .delete_img{
        margin-top: 20px;
        margin-left: 23px;
    }
    .margin_left_ten{
        margin-left: 28px !important;
    }
    .dropdown_height{
        height: 26px !important;
    }
    .select{
        width: 210px !important;
    }
    .detail_box{
        background: transparent !important;
        width: 1220px !important;
        margin-left: 8px;
    }
    ::placeholder {
      color: transparent;
    }
    .expense_detail_footer {
        background: #D8DCDF;
        width: 100%;
        height: 27px;
        height: 28px !important;
    }
    .red-color
    {
        color: red;
        font-size: 11px;
        font-weight: 500;
    }
    .type_label{
        margin-top: -14px;
        font-size: 10.5px;
    }
</style>
<div class="breadcrum">
    HR Services / Expenses / <span class="text-primary">Application Detail</span>
</div>
<div id="container" style="padding-top: 0;">
    <div class="section detail_box">
        <!-- <p class="alert" id="submit_msg" style="width: 100%;padding: 5px;margin-top: 3px;margin-bottom: 10px;display: none;"></p>
        @if ($data['error'])
            <p class="alert alert-danger" style="width: 100%;padding: 5px;margin-top: 3px;margin-bottom: 10px;">{{$data['error']}}</p>
        @endif
        @if ($data['message'])
            <p class="alert alert-success" style="width: 100%;padding: 5px;margin-top: 3px;margin-bottom: 10px;">{{$data['message']}}</p>
        @endif -->
        <div>
            <div class="box">
                <div class="title">
                    Expense Basic Summary
                </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 Name:</b></td>
                                            <td><div class="margin_left">{{$data['expense']->name}}</div></td>
                                        </tr>
                                        <tr>
                                            <td><b class="margin_left_fifteen font_size_thirteen">Employee Code:</b></td>
                                            <td><div class="margin_left">{{$data['expense']->empcode}}</div></td>
                                        </tr>
                                        <tr>
                                            <td><b class="margin_left_fifteen font_size_thirteen">Department:</b></td>
                                            <td><div class="margin_left">{{$data['expense']->department_name}}</div></td>
                                        </tr>
                                        <tr>
                                            <td><b class="margin_left_fifteen font_size_thirteen">Designation:</b></td>
                                            <td><div class="margin_left">{{$data['expense']->designation}}</div></td>
                                        </tr>
                                   </tbody>
                                </table>
                             </div>
                          </div>
                       </div>
                    </div>
                    <!-- personal info end -->
                   <!-- expense section start -->
                    <div class="row">
                       <div class="col-md-12">
                            <div class="approval_header">
                                <div class="approval_header_text">Expense Basic Summary</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="    background: white;">
                                <div class="content">
                                    <form action="{{ url('/expense/cr_expense_edit?id=').request()->id }}" id="frmexpense"  method="post" enctype="multipart/form-data">
                                        @csrf
                                        <div id="upper_section">

                                            <div style="display: flex; margin-top:-11px; margin-bottom:-18px; margin-left: -10px;">
                                                <div class="material-textfield margin_top_five">
                                                    <input disabled placeholder="Description" type="text" name="" value="{{ dateFromat($data['expense']->added_on) }}" class="bg_color">
                                                    <label>Application Date</label>
                                                </div>
                                                <div class="select select_width margin_top_ten select_box select_box_arrow" style="margin-top: 15px; margin-left: 28px;">
                                                    <select class="select-text currency_dropdown_width height_twenty_two" name="country_id" id="country_id" style="padding: 6px 5px 5px 9px !important;">
                                                        @foreach($data['currencies'] as $currencies)
                                                            @php $currencies=(object)$currencies; @endphp
                                                            @if (isset($data['expense']->currency_id) && $currencies->id == $data['expense']->currency_id)
                                                                <option value="{{$currencies->id}}" selected>{{$currencies->symbol}}</option>
                                                            @else
                                                                <option value="{{$currencies->id}}">{{$currencies->symbol}}</option>
                                                            @endif
                                                        @endforeach()
                                                    </select>
                                                    <label class="select-label font_size_twelve">Currency</label>
                                                </div>

                                                @if (isset($data['expense']->tar_detail_id) && $data['expense']->tar_detail_id + 0 > 0)
                                                    <div class="material-textfield margin_top_five margin_left_ten">
                                                        <input disabled placeholder="Description" type="text" name="" value="{{ number_format($data['expense']->tamount+0, 0, ".", ",") }}" class="bg_color">
                                                        <label>Total Amount</label>
                                                    </div>

                                                    <div class="material-textfield margin_top_five margin_left_ten">
                                                        <input disabled placeholder="Description" type="text" name="" value="{{ number_format($data['expense']->tar_adv_amt+0, 0, ".", ",") }}" class="bg_color">
                                                        <label>Advance Amount</label>
                                                    </div>
                                                    @if ($data['expense']->tar_adv_amt + 0 == 0)
                                                        <div class="material-textfield margin_top_five margin_left_ten">
                                                            <input disabled placeholder="Description" type="text" name=""
                                                            value="{{ number_format($data['expense']->tamount + 0 - $data['expense']->tar_adv_amt + 0, 0, ".", ",") }}" class="bg_color">
                                                            <label>Remaining Balance</label>
                                                        </div>
                                                    @else
                                                        <div class="material-textfield margin_top_five margin_left_ten">
                                                            <input disabled placeholder="Description" type="text" name=""
                                                            value="{{ number_format($data['expense']->tamount + 0 - $data['expense']->tar_adv_amt + 0, 0, ".", ",") }}" class="bg_color">
                                                            <label>Remaining Balance</label>
                                                        </div>
                                                    @endif

                                                @else
                                                    @php
                                                        if($data['expense']->tar_adv_amt){
                                                            $var = number_format($data['expense']->tamount + 0 - $data['expense']->tar_adv_amt + 0, 0, ".", ",");
                                                        }
                                                        else{
                                                            $var = number_format($data['expense']->tamount + 0, 0, ".", ",");
                                                        }
                                                    @endphp
                                                    <div class="material-textfield margin_top_five margin_left_ten">
                                                        <input disabled placeholder="Description" type="text" name="" value="{{$var}}" class="bg_color">
                                                        <label>Total Amount</label>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        @if (isset($data['expense']->tar_adv_amt) && $data['expense']->tar_adv_amt + 0 > 0)
                                            <input type="hidden" name="adv_amt" id="adv_amt" value="{{$data['expense']->tar_adv_amt+0}}" />
                                            <input type="hidden" name="currency_id_temp" id="currency_id" value="{{$data['expense']->currency_id}}" />
                                        @endif
                                        <br/>
                                        @if ($data['edit'] > 0)
                                            @foreach ($data['expense_detail'] as $key => $expense_detail)
                                            <div class="row col-md-12">
                                                <div class="material-textfield margin_top_five" style="margin-left:-10px;">
                                                    <input placeholder="Expense Month" type="text" name="expense[{{$key}}][exp_date]"  value="{{dateFromat($expense_detail->exp_date)}}" class="dateselect datepicker_size" placeholder="{{ date('m-d-Y') }}">
                                                    <label>Expense Month</label>
                                                </div>
                                                <div class="select margin_top_five margin_left_ten select_box">
                                                    <select  disabled="disabled" class="select-text select_width" name="expense[{{$key}}][type_id]" style="width: 100% !important; height: 27px;">
                                                        @foreach($data['expense_types'] as $expense_type)
                                                            @php $expense_type=(object)$expense_type; @endphp
                                                            @if ($expense_type->id == $expense_detail->type_id)
                                                                <option value="{{$expense_type->id}}" selected>{{$expense_type->type}}</option>
                                                            @else
                                                                <option value="{{$expense_type->id}}">{{$expense_type->type}}</option>
                                                            @endif
                                                        @endforeach()
                                                    </select>
                                                    <label class="select-label font_size_twelve type_label">Expense Type</label>
                                                </div>
                                                <div class="material-textfield margin_top_five margin_left_ten">
                                                    <input placeholder="Description" type="text" name="expense[{{$key}}][descr]" value="{{$expense_detail->descr}}">
                                                    <label>Description</label>
                                                </div>
                                                <div class="material-textfield margin_top_five margin_left_ten">
                                                    <input placeholder="Amount" type="text" name="expense[{{$key}}][amount]" value="{{$expense_detail->amount}}" class="adv_amount onlynum" disabled>
                                                    <label>Amount</label>
                                                </div>
                                                <div class="display_item_flex">
                                                    <div class="material-textfield margin_top_five margin_left_ten" style="margin-bottom: 4px !important;">
                                                        <input placeholder="Receipt" type="text" class="file form-field" value=" " readonly>
                                                        <label>Receipt</label>
                                                        <div class="links">
                                                        @if ($expense_detail->receipt)
                                                            <a id="receipt_{{$expense_detail->id}}" href="#" onclick="getAttachment({{$expense_detail->id}})">View</a>&nbsp;
                                                            <!-- <a id="remove_{{$expense_detail->id}}" href="javascript:post(this,'remove_receipt',{{$expense_detail->id}});">Remove</a> -->
                                                        @else
                                                            <span style="position: relative;left: 12px;top: -21px; z-index: 99;opacity: 0;">------</span>&nbsp;<span style="position: relative;left: 12px;top: -21px; z-index: 99;opacity: 0;">-----</span>
                                                        @endif
                                                        </div>
                                                    </div>
                                                    <div class="file-btn"><input type="file" name="expense[{{$key}}][receipt]" size="5" class="form-field add_file" start="mouseover" style="opacity: 0;cursor: pointer;"></div>
                                                </div>
                                                @if (($expense_detail->id + 0) > 0)  @else  @endif
                                         <!--        <a href="javascript:post(this, 'delete', {{ $record_id }});"><img width="15" height="15" border="0" src="{{asset('images/delete.gif')}}" alt="Delete" class="delete_img">
                                                </a> working button -->
                                                <!-- <a href="#"><img width="15" height="15" border="0" src="{{asset('images/delete.gif')}}" alt="Delete" class="delete_img">
                                                </a> -->
                                            </div>
                                            <input type="hidden" name="expense[{{$key}}][ed]" value="{{$expense_detail->id}}" />
                                            <input type="hidden" name="receipt_img[]" value="{{$expense_detail->receipt}}" />
                                            @endforeach
                                        @endif
                                        <!-- <div id="button-list" class="subtitle">
                                            <a id="test" href="javascript:post(this,'addnew',null);" style="float:right; margin-right: 15px;">Add New</a>
                                        </div> -->
                                        <input type="hidden" name="action" class="action_input" value="edit" />
                                        <input type="hidden" name="edit" />
                                        <input type="hidden" name="remove_receipt" />
                                        <input type="hidden" name="id" value="{{ request()->id }}" />
                                        <input type="hidden" name="addnew" value="{{$data['addnew']}}" />
                                        <input type="hidden" name="javascriptOutPut" id="javascriptOutPut" value="{{date('Y-m-d')}}"/>
                                    </form>
                                </div>
                                <div class="expense_detail_footer">
                                    <div class="footr float-left ml-3 mt-2 red-color">
                                        <p>Note: Minor alterations are allowed only</p>
                                    </div>
                                </div>
                             </div>
                          </div>

                       </div>
                    </div>
                    <!-- expense section end -->
                    <!-- approval detail start -->
                    <div class="row">
                       <div class="col-md-12">
                            <div class="approval_header">
                                <div class="approval_header_text">Approval Details</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" style="border:none !important; margin-bottom:10px !important">
                                   <tbody >
                                        @foreach($data['approval_queue'] as $approval_queue)
                                        <tr>
                                            <td style="width: 250px;"><b class="margin_left_fifteen font_size_thirteen">{{$approval_queue->role}} Name: ( {{$approval_queue->line_manager}})</b></td>
                                            <td>
                                                <div class="margin-left">
                                                    @if ($approval_queue->status == 1)
                                                        <span style="margin-left: 0px !important; color:#ffa922">Pending</span>
                                                    @elseif ($approval_queue->status == 2)
                                                        <span style="margin-left: 0px !important; color:#1BC167">Approved</span>
                                                    @elseif ($approval_queue->status == 3)
                                                        <span style="margin-left: 0px !important; color:#f35e46">Disapproved</span>
                                                    @endif
                                                </div>
                                            </td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td><b class="margin_left_fifteen font_size_thirteen">Dated:</b></td>

                                            <td><div class="margin-left">{{ dateFromat($approval_queue->date) }}</div></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td style="width: 87px;"><b class="margin_left_fifteen font_size_thirteen">{{$approval_queue->role}} Comments:</b></td>
                                            <td>
                                                <div class="margin-left">
                                                    <div class="material-textfield">
                                                       {{$approval_queue->comments}}
                                                    </div>
                                                </div>
                                            </td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        @endforeach
                                   </tbody>
                                </table>
                             </div>
                          </div>
                       </div>
                    </div>
                    <!-- approval detail end -->
                <div class="expense_table_footer">
                    <div class="footr float-left ml-3 mt-2 red-color">
                        <p>*Note: Remove this application and apply a fresh one if you want more precise adjustments</p>
                    </div>
                    <div class="footr float-right">
                        <button class="search_btn mt-1" onclick="post(this,'submit',null)" style="margin-right: 5px;">Update</button>
                        <button class="search_btn mt-1" onclick="post(this,'delete_all',null)" style="margin-right: 5px;">*Remove</button>
                        <button class="search_btn mt-1" onclick="closescreen()" style="margin-right: 10px;">Cancel</button>
                        <!--<a href="javascript:post(this,'submit',null);" class="search_btn mt-1">Submit</a>
                        <a href="javascript:post(this,'delete_all',null);" class="search_btn mt-1">Delete</a>
                        <a href="{{url('expense/expense_list') }}" class="search_btn mt-1">Cancel</a> -->
                    </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">
                <span class="modal-title modal_title w-100" id="myModalLabelreasonModal" style="font-weight: bold; margin-left: 0px; margin-top: -8px;">Breif Reason</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>
            <form action="" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="submit_type">
                <div class="modal-body modal_body" style="width: 500px !important">
                    <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">
                        <div class="input_div display_item_flex">
                            <div class="material-textfield margin_left_twentythree margin-top-two">
                                <input placeholder="Reason" type="text" name="reason" id="reason" style="width:460px;">
                                <label>Reason</label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-12">
                        <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" style="position: absolute; float: right;margin-left: 457px; margin-top: 1px;">
                                <input value="" type="file" class="file-input" name="attachment">
                            </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;">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- model end -->
@endsection
@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 type="text/javascript">
    var frm;
    window.onload = function() {
        frm = $('#frmexpense')[0];
    }

    var response_error = "";
    var response_message = "";
    if(response_message!= '' && response_error =='')
    {
        $('.success_message').show();
        $('.success_message_text').html(response_message);
        setInterval(function () {$('.success_message').hide()}, 3000);
    }
    else if(response_error != '' && response_message =='')
    {
        $('.error_message').show();
        $('.error_message_text').html(response_error);
        setInterval(function () {$('.error_message').hide()}, 3000);
    }

    $(document).ready(function(){
        Advance_amount();
        // setInterval(function() {
        //     $('.alert').css('display', 'none');
        // }, 3000);
        $(".adv_amount").each(function() {
                 $(this).keyup(function(){''
                    Advance_amount();
            });

        });
    });

    $('.dateselect').datepicker({
        format: 'dd-MM-yyyy',
    }).on('changeDate', function(e) {
        $('.datepicker').hide();
    });

    function closescreen() {
        location.href = "{{url('expense/expense_list') }}";
    }

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

    function post(sender, action, args) {
        var error = 0;
        if(action == 'submit' || action == 'delete'){
            $(".footer_txt").hide();
        }
        else if(action == 'delete_all'){
            $(".footer_txt").show();
        }
        switch (action) {
            case 'edit':
            case 'delete':
            case 'delete_all':
                frm.edit.value = args;
                $('.action_input').val(action);
                $('#reasonModal').modal('show');
                 error = 1;
                // if (!confirm("Are you sure you want to delete the expense?")) {
                //     error = 1;
                // } else {
                //     frm.edit.value = args;
                // }
                break;
            case 'remove_receipt':
                var remove_receipt = frm.remove_receipt.value;
                if(remove_receipt == ''){
                    remove_receipt = args;
                } else {
                    remove_receipt += ','+args;
                }
                frm.remove_receipt.value = remove_receipt;
                document.getElementById('receipt_' + args).style.display = 'none';
                var remove_link = document.getElementById('remove_' + args);
                remove_link.href = "javascript:post(this,'undo_remove'," + args + ");";
                remove_link.innerHTML = 'Undo';
                return;
            case 'undo_remove':
                var undo_receipt = frm.remove_receipt.value;
                undo_receipt = undo_receipt.split(",");
                var args_index = undo_receipt.indexOf(args.toString());
                undo_receipt.splice(args_index, 1);
                undo_receipt.toString();
                frm.remove_receipt.value = undo_receipt;
                document.getElementById('receipt_' + args).style.display = 'inline';
                var remove_link = document.getElementById('remove_' + args);
                remove_link.href = "javascript:post(this,'remove_receipt'," + args + ");";
                remove_link.innerHTML = 'Remove';
                return;
            case 'submit':
                $('#reasonModal').modal('show');
                return false;
                var formData = new FormData(document.getElementById('frmexpense'));
                $.ajax({
                    type: "POST",
                    url: "{{ url('/expense/cr_expense_edit?id=').request()->id }}",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response.status == 'success') {
                            $("#submit_msg").addClass("alert-success");
                            $("#submit_msg").removeClass("alert-danger");
                        } else {
                            $("#submit_msg").addClass("alert-danger");
                            $("#submit_msg").removeClass("alert-success");
                        }
                        $("#submit_msg").html(response.message);
                        $("#submit_msg").css('display','block');
                        location.reload();
                    }
                });
                return;
            // case 'addnew':
            //     error = 1;
            //     var expense_types = null;
            //     var expense_type_options = '';
            //     for (i = 0; i < expense_types.length; ++i) {
            //         expense_type_options += '<option label="'+expense_types[i]['type']+'" value="'+expense_types[i]['id']+'">'+expense_types[i]['type']+'</option>';
            //     }
            //     var addnewCount = parseInt($("input[name=addnew]").val()) + 1;
            //     var row_index = $("input[name=addnew]").val();
            //     if (addnewCount <= 10) {
            //         $('#expense_table').append('<tr><td><input type="date" name="expense['+row_index+'][exp_date]"  value="{{ date("d-m-Y") }}" placeholder="{{ date("d-m-Y") }}"/></td><td class="ltxt" ><select name="expense['+row_index+'][type_id]" class="form-field big2">'+expense_type_options+'</select></td><td class="ltxt" ><input type="text" name="expense['+row_index+'][descr]" value="" class="form-field"/></td><td><input type="text" name="expense['+row_index+'][amount]" value="" class="adv_amount onlynum"/></td><td><input class="file form-field" readonly><div class="file-btn" style="width: 21px; height: 21px; background-position: right center; display: inline-block; margin-bottom: -6px; overflow: hidden; cursor: pointer;"><input type="file" name="expense['+row_index+'][receipt]" size="5" class="form-field add_file" start="mouseover" style="position: relative; height: 21px; width: 200px; display: inline; margin-bottom: -6px; cursor: pointer; opacity: 0; margin-left: -179px;"></div></td><td><a href="javascript:post(this'+ ',\'' +'delete'+'\''+',\''+'new'+'\')"><img width="15" height="15" border="0" src="{{asset("images/delete.gif")}}" alt="Delete"></a></td></tr><input type="hidden" name="expense['+row_index+'][ed]" value="" /><input type="hidden" name="receipt_img[]" value="" />');
            //         $("input[name='addnew']").val(addnewCount);
            //     }
                break;
        }
        if(error == 0) {
            frm.action.value = action;
            frm.submit();
        }
    }
    $(document).on('click', '#submit_request', function (e) {
        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());
        frm.submit();
    });
    function Advance_amount() {
            sum = 0;
          $(".adv_amount").each(function() {
             val = $(this).val();
             if(!isNaN(val) && val.length!=0)
              {
                 sum += parseFloat(val);
              }
            balance = $("#adv_amt").val() - sum;
            if(balance > 0)
                $('#tar_adv_amt').html('(' + numberWithCommas(balance.toFixed(0)) + ')');
            else
                $('#tar_adv_amt').html(numberWithCommas(Math.abs(balance.toFixed(0))));
            $('#total_amount').html(numberWithCommas(sum.toFixed(0)));

         });
    }
    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    $(document).on("change", "input.add_file", function() {
        // Get the file name only (ignores the fakepath)
        var fileName = $(this).val().split('\\').pop();
        // Set the file name in the first input field of the parent div
        $(this).closest("div").parent("div").find('input').first().val(fileName);
    });

    $("input.file-input").change(function () {
        var fileName = $(this).val().split('\\').pop();
        $('#evidence').val(fileName);
    });

    $('#reason').on('input', function() {
        if($(this).val() != ''){
            $('#messageBox').css("display", "none");
        }
    });
    function getAttachment(id){
         $.ajax(
        {
            url: $('.base_url').val()+'api/expense/get_attachment',
            type: "GET",
            headers: {
                'Authorization':localStorage.getItem("laravel_token")
            },
            data:{id:id},
        })
        .done(function(data)
        {
            console.log({data}, " Response ", data.attachment_url)
            let attachmentUrl = typeof data.attachment_url === 'string'
                ? data.attachment_url   // If it's a string, use it directly
                : data.attachment_url.url;  // If it's an object, access the url property

            // Check if the URL exists before attempting to open it
            window.open(attachmentUrl, '_blank');
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
            alert('server not responding...');
        });
    }
</script>
@endsection