@extends('layouts.template')
@section('content')
<section class="planinng-trip-allowance"  id="accident-status">
<h1 class="heading">Task Expenses <a href="{{ url('task_assigner/dashboard') }}" title="back"><i class="fa fa-undo" aria-hidden="true"></i></a></h1>
  @if(Session::has('flash_message'))
    <div class="row-fluid">
        <div class="span12">
            <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('flash_message') }}</p>
        </div> 
    </div>   
  @endif
<div class="cargo-search">
    <div class="task_expenses" style="text-align: center;">
        <div class="table-heading">
            <select class="form-control" name="sub_task" required="" id="sub_task">
                <option value="">Select Task</option>
                @foreach ($tasklist as $key=>$staff)
                    <option value="{{$key}}">{{$staff}}</option>
                @endforeach
            </select>    
        </div>

        <div class="cargo-search-form">
            <div class="table-responsive"> 
                <table class="table table-striped table-bordered table-hover table-full-width dataTable my-table" id="expense-table">
                    <thead>
                        <tr>
                        <th style="display: none;">Id</th>
                        <th>Sub Task Id</th>
                        <th>Sub Task</th>
                        <th>Assignee </th>                
                        <th>Date </th>
                        <th>Deadline </th> 
                        <th>Currency </th>       
                        <th>Budget </th> 
                        <th>Adv. costs </th> 
                        <th>Act. costs </th>
                        <th>Change</th>
                        <th>Due</th>
                        <th>Details</th>                     
                        <th></th>
                        </tr>
                    </thead>
                    <tbody class="road_detail">
                        <tr>
                            <td colspan="13"><strong>Please select Task</strong></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div> 

        <div class="tools-control-table status-table">
                <div class="panel with-nav-tabs panel-default">
                    <div class="table-heading">
                        <h4 class="col-md-6 col-sm-6 col-xs-6">Add Expense Details</h4>
                    </div>
  
                    <div class="panel-body" style="margin-top: -35px;">
                        <div class="tab-content">

                            {!! Form::open(['method' => 'POST', 'url' => 'task_assigner/task_expenses/expensescreate', 'enctype'=>'multipart/form-data'])  !!}
                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <table class="table table-total">
                                        <thead>
                                            <tr>
                                                <th style="display: none;">Id</th>
                                                <th> Details </th>
                                                <th> Supplier </th>                
                                                <th> Invoice </th>
                                                <th> Date </th> 
                                                <th> Order ID </th>       
                                                <th> Pay Mode </th> 
                                                <th> Bank </th> 
                                                <th> Currency </th>
                                                <th> Amount </th>
                                                <th> Image </th>
                                                <th> Action </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="form-group">
                                                        <input type="hidden" class="form-control" name="sub_task_id" id="sub_task_id">
                                                        <input type="hidden" class="form-control" name="sub_advcosts" id="sub_advcosts">
                                                        <input type="hidden" class="form-control" name="sub_actcosts" id="sub_actcosts">
                                                        <input type="hidden" class="form-control" name="sub_assignee" id="sub_assignee">
                                                        <input type="text" class="form-control" name="expense_detail" required="">
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" name="supplier" id="supplier">
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" name="invoice_no" id="invoice_no">
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="form-group">
                                                        <input type="date" class="form-control sub_date" name="invoice_date" id="invoice_date">
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" name="order_id" id="order_id">
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="form-group">
                                                    <select class="form-control" name="payment_mode" required="">
                                                        <option value="">Select Payment Mode</option>
                                                        <option value="Cash">Cash</option>
                                                        <option value="Cheque">Cheque</option>
                                                    </select>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" name="bank" id="bank">
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="form-group">
                                                        <select name="currency" class="form-control " id="currency">
                                                            <option value=" "> Select Currency Type </option>
                                                            <option value="MZM"> MZM </option>  
                                                            <option value="USD"> USD </option> 
                                                            <option value="ZAR"> ZAR </option>                   
                                                        </select>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="form-group">
                                                        <input type="number" class="form-control" name="amount" id="amount">
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="form-group">
                                                        <input type="file" name="image" style="margin-left:-9px; margin-right:-87px; padding-top: 6px;">
                                                    </div>
                                                </td>

                                                <td>
                                                    <input type="submit" class="add-btn-allowance"
                                                    style="margin:0 !important;" value="ADD">
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <hr>
                            <div class="table-heading">
                                <h4 class="col-md-6 col-sm-3 col-xs-6">Expense Details</h4>
                            </div>

                            <div class="parts-modal-content clearfix" style="text-align:left;">           
                                <div class="col-md-4 col-sm-3 col-xs-12 form-group">
                                    Sub Task ID : <label for="subtaskid" style="color:black; padding-top: 10px;"></label> 
                                </div>
            
                                <div class="col-md-4 col-sm-3 col-xs-12 form-group">
                                    Adv. Cost : <label for="advcost" style="color:black; padding-top: 10px;"></label> 
                                </div>
            
                                <div class="col-md-4 col-sm-3 col-xs-12 form-group">
                                    Act Cost : <label for="actcost" style="color:black; padding-top: 10px;"></label> 
                                </div>
                            </div> 

                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover table-full-width dataTable my-table2" id="my-table2">
                                    <thead>
                                        <tr>
                                            <th style="display: none;">Id</th>
                                            <th> Assignee</th>
                                            <th> Details </th>
                                            <th> Supplier </th>                
                                            <th> Invoice </th>
                                            <th> Date </th> 
                                            <th> Order ID </th>       
                                            <th> Pay Mode </th> 
                                            <th> Bank </th> 
                                            <th> Currency </th>
                                            <th> Amount </th>
                                            <th> Doc </th>
                                        </tr>
                                    </thead>
                                    <tbody class="road_detail2">
    
                                    </tbody>
                                </table>
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>

    </div> 
   </div> 
  </section>
<script type="text/javascript">

    $(document).ready(function() {

});

// Sub Task Section
$("#sub_task").change(function (e) {
    var id = this.value;
    $.ajax({
    url: "{{URL::to('task_assigner/task_expenses/getsubtask')}}",
    type: 'POST',
    dataType: 'json',
    data: {'id': id, '_token': '{{csrf_token()}}'},
    success: function (subtaskdata) {
    if (subtaskdata.data != '') {
    $('.road_detail').html('');
    $.each(subtaskdata.data, function (index, value) {
    $('.road_detail').append('<tr id="road_details'+value.id+'"><td><span data-id='+value.id+' data-type="road_details"></span>' + value.sub_task_id + '</td><td>' + value.sub_task_name + '</td><td>' + value.name + '</td><td>' + convert_to_ddmmyy(value.sub_date) + '</td><td>' + convert_to_ddmmyy(value.sub_deadline) + '</td><td>' + value.sub_currency + '</td><td>' + value.sub_budget + '</td><td>' + value.sub_advcosts + '</td><td>' + value.sub_actcosts + '</td><td>' + value.change + '</td><td>' + value.due + '</td><td><button class="details_tab btn btn-warning" data-id="' + value.sub_task_id + '" data-assignee="' + value.name + '" data-advcost="' + value.sub_advcosts + '" data-actcost="' + value.sub_actcosts + '"><i class="fa fa-eye"></i></button></td></tr>');
    });

    $('#expense-table').Tabledit({
        url: "{{URL::to('taskassigner/task_expenses/update')}}",
        restoreButton: false,
        deleteButton: false,
        columns: {
            identifier: [0, 'id'],
            editable: [[9, 'change'], [10, 'due']],
            attributes: [
                [9, '{"type": "number"'], [10, '{"type": "number"']
            ]
        },
        onSuccess: function () {
            setTimeout(function () {
                location.reload();
            }, 1000);
        },
    });

    } else {
    $('.road_detail').html('');
    $('.road_detail').append('<tr><td colspan="13">No Data Found</td></tr>');
    }
    }
});
});
</script>

<script type="text/javascript">
$(document).on('click',".details_tab",function (e) {
$(".status-table").hide();
$(".status-table").show("slow").addClass("slideInLeft");

$(this).closest("tr").siblings().removeClass("diffColor");
$(this).closest("tr").siblings().removeClass("diffColor1");
$(this).parents("tr").toggleClass(".diffColor", this.clicked);
var stid = $(this).data('id');
var stassignee = $(this).data('assignee');
var stadvcost = $(this).data('advcost');
var stactcost = $(this).data('actcost');
$("#sub_task_id").val(stid);
$("#sub_assignee").val(stassignee);
$("#sub_advcosts").val(stadvcost);
$("#sub_actcosts").val(stactcost);
$("label[for='subtaskid']").html(stid);
$("label[for='advcost']").html(stadvcost);
$("label[for='actcost']").html(stactcost);

$.ajax({
    url: "{{URL::to('task_assigner/task_expenses/getexpensedata')}}",
    type: 'POST',
    dataType: 'json',
    data: {'id': stid, '_token': '{{csrf_token()}}'},
    success: function (expensedata) {
    if (expensedata.data != '') {
    $('.road_detail2').html('');
    
    $.each(expensedata.data, function (index, value) {

        let apStr='';
        if( value.image){
            apStr='<td><a class="preview" target="_blank" href="/expense_documents/' + value.image + '"><span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-file-o fa-stack-1x fa-inverse"></i></span>' + value.image + '</a></td>';
        }else{
             apStr='<td>No Document</td>';
        }  

    $('.road_detail2').append('<tr id="road_details2'+value.id+'"><td><span data-id='+value.id+' data-type="road_details"></span>' + value.sub_assignee + '</td><td>' + value.expense_detail + '</td><td>' + value.supplier + '</td><td>' + value.invoice_no + '</td><td>' + convert_to_ddmmyy(value.invoice_date) + '</td><td>' + value.order_id + '</td><td>' + value.payment_mode + '</td><td>' + value.bank + '</td><td>' + value.currency + '</td><td>' + value.amount + '</td>'+apStr+'</tr>');
    
    });
    } else {
    $('.road_detail2').html('');
    $('.road_detail2').append('<tr><td colspan="12">No Data Found</td></tr>');
    }
    }
});
});
</script>

<script type="text/javascript">
function toggleIcon(e) {
$(e.target)
.prev('.panel-heading')
.find(".more-less")
.toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);
</script> 
<script type="text/javascript">
  $('.close_tab').click(function(){
  var id = $(this).data('id');
});
</script>
<!--date picker-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style type="text/css">
  .kmsum {
}
</style>
@endsection