@extends('layouts.admin')
@section('header-content')
    <style>
        .image-height{
            border: solid;
            height: 140px;
        }
    </style>
@endsection
@section('content')
            <div class="container-detached">
                <div class="content-detached">
                    <!-- Tab content -->
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="profile">
                            <!-- Item Details -->
                            <div class="panel panel-flat">
                                <div class="panel-heading">
                                    <h6 class="panel-title">Expense Details</h6>
                                    <div class="heading-elements">
                                        <ul class="icons-list">
                                            <li><a data-action="collapse"></a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="panel-body">
                                    <form method="POST"
                                          action="{{ url('user-expense'.(empty($expense) ? '': '/' . $expense->id)) }}"
                                          enctype="multipart/form-data">
                                        {!! csrf_field() !!}
                                         <div class="row">
                                             <div class="col-md-4 col-sm-4">
                                                 <div class="form-group {{ $errors->has('user') ? ' has-error' : '' }}">
                                                     <label>Users</label>
                                                     <select class="select-search" name="user" id="user">
                                                         @foreach($users as $user)
                                                             <option value="{{$user->id}}" @if (old('user') == $user->id || isset($expense) && $expense->user_id==$user->id) selected="selected" @endif
                                                             >{{$user->firstname.' '.$user->lastname}}
                                                             </option>
                                                         @endforeach
                                                     </select>
                                                     @if ($errors->has('user'))
                                                         <span class="help-block"><strong>{{ $errors->first('user') }}</strong></span>
                                                     @endif
                                                 </div>
                                             </div>
                                             <div class="col-md-4 col-sm-4">
                                                 <div class="form-group {{ $errors->has('expense_type') ? ' has-error' : '' }}">
                                                     <label class="text-semibold">Expense Type</label>
                                                     <select class="select" name="expense_type" id="re_visit_type">
                                                         @foreach($types as $key=>$type)
                                                             <option value="{{$type->id}}" @if (old('expense_type') == $type->id || isset($expense) && isset($expense->expense_id) && $expense->expense_id==$type->id) selected="selected" @endif
                                                             >{{$type->name}}
                                                             </option>
                                                         @endforeach
                                                     </select>
                                                     @if ($errors->has('expense_type'))
                                                         <span class="help-block"><strong>{{ $errors->first('expense_type') }}</strong></span>
                                                     @endif
                                                 </div>
                                             </div>
                                             <div class="col-md-4 col-sm-4">
                                                 <div class="form-group {{ $errors->has('date') ? ' has-error' : '' }}">
                                                     <label>Date</label>
                                                     <input type="date" name="date" value="{{old('date', @$expense->date)}}"  class="form-control">
                                                     @if ($errors->has('date'))
                                                         <span class="help-block"><strong>{{ $errors->first('date') }}</strong></span>
                                                     @endif
                                                 </div>
                                             </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4 col-sm-4">
                                                <div class="form-group {{ $errors->has('amount') ? ' has-error' : '' }}">
                                                    <label>Amount</label>
                                                    <input type="number" name="amount" value="{{old('amount', @$expense->amount)}}"  class="form-control">
                                                    <input type="hidden" name="old_amount" value="{{@$payment->amount}}" >
                                                    @if ($errors->has('amount'))
                                                        <span class="help-block"><strong>{{ $errors->first('amount') }}</strong></span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row input_fields_wrap">
                                            <button type="button" class="btn bg-teal-400 btn-labeled btn-rounded add_field_button"><b><i class="icon-stack2"></i></b> Add More Payment Images</button>
                                            <br><br>
                                            @if(!empty($expense))
                                                @foreach($expense->Images->toarray() as $key2=>$value)
                                                    <div class="">
                                                        <input type="hidden" name="old_images_id[{{$key2}}]" value="{{$value['id']}}">
                                                        <div class="col-md-4 col-sm-4 " align="center">
                                                            @if(isset($value['image']) && !empty($value['image']))
                                                                <img src="{{$value['image']}}" class="image-height" style="height: 150px;!important;"   alt=""><br>
                                                                <a href="#" class="remove_field">Remove</a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                            @if(!isset($key2) || empty($key2))
                                                                                            @endif

                                            <input type="hidden" id="payment_image" value="{{$key2}}">
                                            <div id="new_item">
                                            </div>
                                        </div>
                                        <div class="text-right">
                                            @if(!empty($expense)) {!! method_field('PUT') !!} @endif
                                            {{ csrf_field() }}
                                            <button type="submit" class="btn btn-primary">
                                                @if(empty($expense)) Save @else Update
                                                @endif  <i class="icon-arrow-right14 position-right"></i></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!-- /Item Details -->


                        </div>
                    </div>
                    <!-- /tab content -->

                </div>
            </div>
            <!-- /detached content -->
@endsection

@section('footer-content')
    <!-- Theme JS files -->
    <script type="text/javascript" src="{{asset('assets/js/core/libraries/jasny_bootstrap.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/plugins/forms/selects/select2.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/plugins/ui/moment/moment.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/plugins/ui/fullcalendar/fullcalendar.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/pages/form_select2.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/plugins/visualization/echarts/echarts.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/pages/user_profile_tabbed.js')}}"></script>
    <!-- /theme JS files -->

    <script  type="text/javascript">
        $(document).ready(function() {
            $('#payment_type').trigger("change");
        });
        $(document).ready(function() {
            var max_fields      = 40; //maximum input boxes allowed
            var wrapper         = $(".input_fields_wrap"); //Fields wrapper
            var add_button      = $(".add_field_button"); //Add button ID
            var x = 1; //initlal text box count
            $(add_button).click(function(e){ //on add input button click
//                var package_item = $('#package_item').val()+1;
                $('#payment_image').val( function(i, oldval) {
                    return parseInt( oldval, 10) + 1;
                });
                e.preventDefault();
                if(x < max_fields){ //max input box allowed
                    var product_item = parseInt($('#payment_image').val());
                    x++; //text box increment
                    $(wrapper).append('<div ><div  class="col-md-4 col-sm-4" align="center"><div class="form-group"><input type="file" class="image-height" name="image' + product_item + '" class=""><a href="#" class="remove_field">Remove</a> </div></div> '); //add input box
                }
            });

            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent().parent('div').remove(); x--;
            })
        });
        $(document).on('change', '#payment_type', function() {
            var value=$("#payment_type").val();
            if(value=='Cash'){
                $(".cash_date").show();
                $(".cheque").hide();
                $(".promise_date").hide();
                $(".cheque_date").hide();
            }else if(value=='Promise') {
                $(".cash_date").hide();
                $(".cheque").hide();
                $(".promise_date").show();
                $(".cheque_date").hide();
            }else if(value=='Cheque') {
                $(".cash_date").hide();
                $(".cheque").show();
                $(".promise_date").hide();
                $(".cheque_date").show();
            }
        });
    </script>
@endsection