@extends('layouts/default')
@section('title')
  Add Expenses
@parent
@stop
@section('commonbuttons')
<a type="button" class="btn btn-primary commonButtons" href="{{ route('getContactDetailList',array('seller_id'=>$seller_id)) }}" style="margin-left:5px;">{{config('app.tabLables')['seller_contacts']}}</a>
<a type="button" class="btn btn-primary commonButtons" href="{{ route('contact\contactus',array('seller_id'=>$seller_id)) }}" style="margin-left:5px;">{{config('app.tabLables')['contact_us']}}</a>
@stop
@section('content')
@include('notifications')
<style type="text/css">
    .table{
        font-size: 14px;
    }
    .table>tbody>tr>td, .table>tbody>tr>th {
        border-top: 1px solid #c5bbbb !important;
    }
    .table>thead>tr>th {
        border-bottom: 1px solid #837373 !important;
    }
</style>   
<div class="expenses_main">
    @if(isset($mappedData) && !empty($mappedData))
    <form action="{{route('fees_summary',array('seller_id' => $seller_id))}}" method="post" name="frm_select_fees" id="frm_select_fees">
        <input type="hidden" name="_token" value="{{ csrf_token() }}" />
        <div class="row">
            <div class="col-sm-3 form-group">
                <label class="form-label">Bank Account</label><span class="text-red">*</span>
                <select class="form-control select2" name="bank_account" id="bank_account">
                    <option value="">Select ...</option>
                    @foreach($bankAccountData as $key => $value)
                        <option value="{{$key}}">{{$value}}</option>
                    @endforeach
                </select>
                <div id="bank_account_error" class="text-red"></div>
            </div>
            <div class="col-sm-3 form-group">
                <label class="form-label">Customer</label><span class="text-red">*</span>
                <select class="form-control select2" name="customer_id" id="customer_id">
                    <option value="">Select ...</option>
                    @foreach($customersData as $key => $value)
                        <option value="{{$key}}">{{$value}}</option>
                    @endforeach
                </select>
                <div id="customer_id_error" class="text-red"></div>
            </div>
            <div class="col-sm-3 form-group">
                <label class="form-label">Tax Type</label><span class="text-red">*</span>
                <select class="form-control select2" name="tax_type" id="tax_type">
                    <option value="">Select ...</option>                            
                    <option value="Inclusive">Inclusive</option>
                    <option value="Exclusive">Exclusive</option>
                </select>
                <div id="tax_type_error" class="text-red"></div>
            </div>
            <div class="col-sm-3">
                <label class="form-label">Reference Prefix</label>
                <input type="text" class="form-control" name="reference" id="reference">
            </div>            
        </div>
        <div class="row">
            <div class="col-sm-3 form-group">
                <input type="submit" value="Submit" name="submit" class="btn btn-success">
                <a href="{{route('expenses',array('seller_id' => $seller_id))}}" name="cancel" class="btn btn-danger">Cancel</a>
            </div>
        </div>
        <div class="row" style="border-bottom: 1px solid"></div>        
        <div class="row" style="margin-right: 10px; margin-top: 15px;">
            <div class="form-group pull-right">
                <label class="form-label">Default Expense Account For Fees: </label>
                <select class="form-control select2" name="default_expense_account" id="default_expense_account">
                    <option value="">Select ...</option>
                    @foreach($expenseAccountData as $key => $value)
                        <option value="{{$key}}">{{$value}}</option>
                    @endforeach
                </select>
                <button type="button" class="btn btn-primary" id="apply_all">Apply to all</button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <strong>NOTE:</strong> All amount should be in above selected bank currency. Only selected rows will be imported.
            </div>
            <div class="col-sm-12 form-group text-red" id="fees_select_error"></div>
            <div class="col-sm-12 form-group">                        
                <table class="table">
                  <thead>
                    <tr>
                      <th scope="col"><input type="checkbox" id="checkAll"/></th>
                      <th scope="col" width="15%">Date</th>
                      <th scope="col">Description</th>
                      <th scope="col">Amount</th>
                      <th scope="col" width="25%">Expense Account</th>
                    </tr>
                  </thead>
                  <tbody>
                        @foreach($mappedData as $key => $value)
                        <tr>
                            <th scope="row"><input type="checkbox" name="fees[{{$key}}]" value="{{json_encode($value)}}" rel="{{$key}}" class="select_fees" /></th>
                            <td>{{date('Y-m-d', strtotime($value['date']))}}</td>
                            <td>{{$value['description']}}</td>
                            <td>{{$value['amount']}}</td>
                            <td>
                                <select class="form-control select2 fees_expense_acc" name="expense_account[{{$key}}]" id="expense_account_{{$key}}">
                                    <option value="">Select ...</option>
                                    @foreach($expenseAccountData as $key => $value)
                                        <option value="{{$key}}">{{$value}}</option>
                                    @endforeach
                                </select>
                            </td>
                        </tr>
                        @endforeach
                  </tbody>
                </table>
            </div>
            <div class="col-sm-12 form-group">
                <div class="pull-right">
                    <input type="submit" value="Submit" name="submit" class="btn btn-success">                
                </div>
            </div>                                
        </div>
    </form>
    @endif
</div>
@stop
@section('moar_scripts')  
<script src="{{ asset('assets/js/bootbox.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap-table.css') }}"> 
<script type="text/javascript">
    $(document).ready(function(){
        $("#checkAll").change(function () {
            if ( $("#checkAll").prop( "checked" )){
                $(".select_fees").each(function() {
                    acc = $("#expense_account_"+$(this).attr('rel')+" :selected").val();                
                    if(acc != ''){
                        $(this).prop('checked', true);
                    }
                });
            } else {
                $("input:checkbox").prop('checked', this.checked);
            }
        });
    });
    $(document).on('click','.select_fees',function(e){
        rel = $(this).attr('rel');        
        accSelected = $("#expense_account_"+rel+" :selected").val();            
        if(accSelected == ''){                    
            bootbox.alert({
                size: "small",
                title: "",
                message: "Please select expense account for fee.",
                callback: function(){}
            });
            $(this).prop('checked', false); 
        }
        //$(this).prop('checked', true); 
    });
                
    $(document).on('click','#apply_all',function(e){
        selectedVal = $("#default_expense_account option:selected").val();
        
        if(selectedVal != ''){            
            $('.fees_expense_acc').each(function() {                
                var currentElement = $(this);
                currentElement.select2("val",selectedVal);
            });

            //$(".fees_expense_acc").val(selectedVal);
            //$(".fees_expense_acc").select2("val",selectedVal);
            
            //$(".fees_expense_acc option[value='"+$("#default_expense_account option:selected").val()+"']").attr('selected','selected');
        } else {
            bootbox.alert({
                size: "small",
                title: "",
                message: "Please select default expense account for fees.",
                callback: function(){}
            });
        }
    });

    /*$(document).on('change','#default_expense_account',function(e){

        selectedVal = $(this).val();
        
        if(selectedVal != ''){
            //$(".fees_expense_acc").val(selectedVal);
            $(".fees_expense_acc").select2("val",selectedVal);

            $(".fees_expense_acc").each(function(){
                $(this).val(selectedVal);                
            });
        }
    });*/

    $(document).on('submit','#frm_select_fees',function(e){

        errCount = 0;
        if($("#bank_account :selected").val() == ''){
            $("#bank_account_error").html('Please select bank account.');
            errCount++;
        } else {
            $("#bank_account_error").html('');
        }

        if($("#customer_id :selected").val() == ''){
            $("#customer_id_error").html('Please select customer.');
            errCount++;
        } else {
            $("#customer_id_error").html('');
        }

        if($("#tax_type :selected").val() == ''){
            $("#tax_type_error").html('Please select tax type.');
            errCount++;
        } else {
            $("#tax_type_error").html('');
        }

        if ($('input:checkbox').filter(':checked').length < 1){
            errCount++;
            $("#fees_select_error").html('Please select atleast one fee to sync.');
        } else {
            $("#fees_select_error").html('');
        }

        if(errCount > 0){
            e.preventDefault();
        }
    });
</script>
@stop