@extends('admin.layout.master')
@section('title','VOUCHER MANAGEMENT')
@section('custom_style')
<style>
    input[type=text],
    input[type=file],
    input[type=date],
    input[type=number] {
        height: 30px !important;
    }
    button[type=button] {
        height: 30px !important;
    }
    .select2-container .select2-selection--single{
        height: 30px !important;
    }
    .padding_apply{
        padding-left: 1px;
    }
    .table thead th {
        border: 1px solid black !important;
        text-align: center;
        vertical-align: middle;
        }
    .card-body{
        padding:.25rem !important;
    }
    .table th,
    .table td {
        padding: 0px 5px;
        color: black;
    }

    .table th {
        background: var(--tableHeader);
        padding: 5px !important;
        color: white !important;
    }
    .table_button{
        background-color: var(--tableHeader_font);
        color: var(--tableHeader);
    }
    .button_active{
        background-color: var(--tableHeader);
        color: var(--tableHeader_font);
    }
    .active_type{
        background-color: var(--tableHeader);
        color: var(--tableHeader_font);
    }
    @media screen and (max-width: 350px) {
        .note_column {
            display: none;
        }
    }
</style>
@endsection
@section ('content')
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <h4 class="card-title text-center">{{strtoupper(str_replace('_',' ',$voucher_type['name']))}}
            </h4>            
        </div>
        {{-- @include('accounts.voucher.install_form',['button_type'=>'button']) --}}
        
        {{-- <fieldset style="border: 1px groove #663399 !important;padding: 0 1.4em 1.4em 1.4em !important; margin: 0 0 2em 0 !important;-webkit-box-shadow:  0px 0px 0px 0px #000;box-shadow:  0px 0px 0px 0px #000;">
            <legend style="width:inherit;padding:0 10px;border-bottom:none;  font-size: 18px">{{strtoupper(str_replace('_',' ',$voucher_type['name']))}}</legend> --}}
            {{-- <form action="{{route('voucher.store',['voucher_type'=>$voucher_type['type']])}}" method="post"> --}}
                @csrf
                {{-- <div class="card-box"> --}}
                    <div class="card-body">
                        @php
                        // $cash_bank_type=(($voucher_type['type']==1)||($voucher_type['type']==3))?1:2;
                        // $payment=(($voucher_type['type']==1)||($voucher_type['type']==2))?1:0;
                        // $optionHtml='<option value="'.getInitDataWithKeyWord('cash')->group_code.'" data-id="'.getInitDataWithKeyWord('cash')->ledger_id.'" data-name="'.getInitDataWithKeyWord('cash')->title.'">'.getInitDataWithKeyWord('cash')->group_code.'</option><option value="'.getInitDataWithKeyWord('bank')->group_code.'" data-id="'.getInitDataWithKeyWord('bank')->ledger_id.'" data-name="'.getInitDataWithKeyWord('bank')->title.'">'.getInitDataWithKeyWord('bank')->group_code.'</option>';
                        @endphp
                        @include('accounts.voucher.voucher_header')

                        <div class="row">
                            <div class="col-md-12" style="padding-bottom: 0px;">
                                <div class="btn-group btn-group-justified">
                                    <a href="#" id="voucher_type_text" class="btn-sm active_type">{{__('obs.payment')}}</a>
                                </div>
                                <div class="btn-group btn-group-justified">
                                    <a href="#" onclick="loadLedger(1)" id="ledger_type1" class="btn-sm table_button">{{__('obs.expense')}}</a>
                                    <a href="#" onclick="loadLedger(2)" id="ledger_type2" class="btn-sm table_button">{{__('obs.income')}}</a>
                                    <a href="#" onclick="loadLedger(3)" id="ledger_type3" class="btn-sm table_button">{{__('obs.asset')}}</a>
                                    <a href="#" onclick="loadLedger(4)" id="ledger_type4" class="btn-sm table_button">{{__('obs.liability')}}</a>
                                    <a href="#" onclick="loadLedger(5)" id="ledger_type5" class="btn-sm table_button">{{__('obs.all')}}</a>
                                    <input type="hidden" id="voucher_type" value="{{$voucher?$voucher->type:1}}">
                                    <input type="hidden" id="transaction_type" value="{{$voucher?($voucher->transaction_type-200):1}}">
                                    <input type="hidden" id="voucher_id" value="{{$voucher?$voucher->id:0}}">
                                </div>
                            </div>
                            <div class="col-md-12 table-responsive-sm" style="padding-bottom: 0px;">
                                <div class="pro_trans_table">
                                    <table class="table table-bordered">
                                        <thead style="border:solid 2px black">
                                            <tr>
                                                <th rowspan="2" class="text-nowrap text-center" style="width: 3%;padding: 0">{{__('obs.sl')}}
                                                </th>
                                                <th rowspan="2" class="text-nowrap text-center" style="width: 30%;padding: 0">{{__('obs.ledger_title')}}
                                                </th>
                                                <th rowspan="2" class="padding_apply note_column text-nowrap text-center" style="width: 15%;padding: 0">{{__('obs.note')}}</th>
                                                <th colspan="3" class="text-nowrap text-center padding_apply" style="width: 30%;padding: 0">{{__('obs.amount')}}</th>
                                            </tr>
                                            <tr>
                                                <th class="text-nowrap text-center padding_apply" style="padding: 0">
                                                    <select name="ledger_id" id="ledger_id" class="form-control item select_2" onchange="setVoucherTypeUpdate()" style="width: 90%" required>
                                                        @forelse ($cashBanks as $cashBank)
                                                            <option @if($againt_id==$cashBank->account_id) selected @endif value="{{$cashBank->account_id}}"
                                                                data-id="{{$cashBank->id}}" data-type="{{$cashBank->type}}"
                                                                class="cash-bank-option-{{$cashBank->type}}">
                                                                {{ $cashBank->name_eng }}</option>
                                                        @empty
                                                        @endforelse
                                                    </select>
                                                </th>
                                                {{-- <th class="text-nowrap text-center padding_apply" style="padding: 0">BANK</th>
                                                <th class="text-nowrap text-center padding_apply" style="padding: 0">OPENNING</th> --}}
                                            </tr>
                                        </thead>
                                        <tbody class="item_tbody" style="border:solid 2px black" id="voucher_body">
                            
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th colspan="2" class="text-right">{{__('obs.total')}} :</th>
                                                <th class="padding_apply note_column text-nowrap text-center" style="width: 15%;padding: 0"></th>
                                                <th>   
                                                    <div class="input-group">
                                                        <input type="text" id="total_amount"  class="form-control total_amount" readonly />
                                                    </div>
                                                </th>
                                            </tr>
                                        </tfoot>
                                    </table>
                            </div>

                        </div>
                        <div class="col-md-12 text-center">
                            <div class="input-group">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="status" id="status"
                                        value="1">
                                    <label class="form-check-label" for="status">{{__('obs.pending')}}</label>
                                </div>
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-primary btn-sm" onclick="setSubmitableData()">
                                        {{__('obs.submit')}}
                                    </button>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </form>
                {{-- </div> --}}
            {{-- </fieldset> --}}

    </div>
        {{-- </div>
    </div>
</div>
</div>
</div> --}}

{{-- @include('accounts.voucher.modal_accounts_ledger')
@include('accounts.voucher.modal_head_accounts_code')
@include('accounts.voucher.modal_previous_voucher') --}}
{{-- @include('accounts.voucher.madal_cost_center') --}}

@endsection
@section('script')
<!-- page script -->
@include('accounts.voucher.bind_js')

<script type="text/javascript">
$(function(){
    $('.select_fixed').select2();
});
    const default_code_data=@json($default_code_data);
    const ledgers=@json($ledgers);
    let submitableData=[];
    let voucher_id=0;
    let journals=@json($voucher?$voucher->journals->toArray():[]);
       $('.select_2').select2();
       $(()=> {
            voucher_id=Number($('#voucher_id').val());
            if(voucher_id){
                let transaction_type=Number($('#transaction_type').val());
                $('#ledger_type'+transaction_type).toggleClass('button_active');
                getHtmlWith(transaction_type);
            }
       });
        const loadLedger=(n)=>{
            if(Number($('#voucher_id').val())){
                Swal.fire('Sorry You Can\'t Change Type!', '', 'danger');
            }else{
                $('#transaction_type').val(n);
                $('.button_active').removeClass('button_active');
                $('#ledger_type'+n).toggleClass('button_active');
                if($('#ledger_type'+n).hasClass('button_active')){
                    bindingDataObject=[];
                    if(n<3){
                        setVoucherType(n==2?3:1);
                        getHtmlWith(n);
                    }else{
                        Swal.fire({  
                            title: 'SELECT TYPE',  
                            showDenyButton: true,  showCancelButton: false,  
                            confirmButtonText: `Payment`,  
                            denyButtonText: `Receive`,
                        }).then((result) => {    
                                if (result.isConfirmed) {    
                                    setVoucherType(1);
                                } else if (result.isDenied) {
                                    setVoucherType(3);
                                }
                                getHtmlWith(n);
                        });
                    }
                }
            }
        }

        const getHtmlWith=(n)=>{
            loopData=ledgers[n];
            for (let i = 0; i < loopData.length; i++) {
                let data = loopData[i];
                let obj={};
                let ledger_id=Number($('#ledger_id').val());
                let voucher_type=Number($('#voucher_type').val());
                if(data.id!=ledger_id){
                    if($('#voucher_id').val()==0){
                        obj = {id: data.id,ledger_id:data.id,ledger_name:data.name,type:(voucher_type<3?0:1),note:'',amount:0};
                    }else{
                        let journalData=journals.find(t=>t.ledger_id==data.id);
                        journalData=((typeof journalData)!= 'undefined')?journalData:null;
                        console.log(journalData?journalData.amount:0);
                        obj = {id: data.id,ledger_id:data.id,ledger_name:data.name,type:(voucher_type<3?0:1),note:(journalData?journalData.note:''),amount:(journalData?journalData.amount:0)};
                    }
                    bindingDataObject.push(obj);
                }
            }
            
            getHtmlFromObject();
        }
        const getHtmlFromObject=()=>{
            loopData=bindingDataObject;
            let html=``;
            for (let i = 0; i < loopData.length; i++) {
                const data = loopData[i];
                html+=`<tr>`;
                    html+=`<td style="width: 3%;padding: 0" class="text-center">${(i+1)}</td>`;
                    html+=`<td style="width: 30%;padding: 0" class="padding_apply">
                                ${data.ledger_name}
                                <input type="hidden" value="${data.id}" data-id="${data.id}" data-bind="id" data-update="id" class="form-control" />
                            </td>`;
                    html+=`<td class="padding_apply note_column">
                                <div class="input-group">
                                    <input type="text" value="" data-id="${data.id}" data-bind="note" data-update="note" class="form-control" />
                                </div>
                            </td>`;
                    html+=`<td class="padding_apply">
                                <div class="input-group">
                                    <input type="number" min=".01" step=".01" value="${data.amount}" onkeyup="getSum()" data-id="${data.id}" data-bind="amount" data-update="amount" class="form-control amount" />
                                </div>
                            </td>`;
                html+=`</tr>`;
            }
            // console.log(html);
            $('#voucher_body').html(html);
            detectBindableElements();
            getSum();
        }
        const getSum=()=>{
            var sum=0;
            $('.amount').each(function(){
                sum += parseFloat(this.value);
            });
            $('#total_amount').val(parseFloat(sum).toFixed(2));
        }
        const setSubmitableData=()=>{
            Swal.fire({
                icon: 'success',
                title: 'Confirmation',
                html: 'Are You Sure?',
                showConfirmButton: true,
                position: 'center',
                timer: null,
            }).then(() => {
                let total_amount=Number($('#total_amount').val());
                let ledger_id=Number($('#ledger_id').val());
                let voucher_type=Number($('#voucher_type').val());
                if(ledger_id>0){
                    let obj = {id: 0,ledger_id:ledger_id,ledger_name:'',type:(voucher_type<3?1:0),note:'',amount:total_amount}
                    submitableData= bindingDataObject.filter(t =>t.amount>0);
                    submitableData.push(obj);
                    console.log('before submit',submitableData);
                    saveVoucher();
                }else{
                    Swal.fire('Please Select Cash Bank!', '', 'danger');
                }
            });
        }
        const setVoucherType=(p)=>{
            // let types=['','cash_payment_voucher','bank_payment_voucher','cash_receive_voucher','bank_receive_voucher','journal Voucher'];
            // p=1=>payment||2=>receive;
            let types=['','Payment','Payment','Receive','Receive','Journal'];
            $('#voucher_type_text').text(types[p]); 
            $('#voucher_type').val(p);  
        }
        const setVoucherTypeUpdate=(p)=>{
            let cashBankType=$( "#ledger_id option:selected").data('type');
            let vt=Number($('#voucher_type').val());
            setVoucherType(vt==1?cashBankType:(cashBankType==2?4:3));
        }
        const saveVoucher=()=>{
            let link="{{route('voucher.voucher_posting_store')}}";
            let c=$('#cost_center_for_all').val();
            let int_data_param={
                date:$('#voucher_date').val(),
                cost_center_id:c,
                type:$('#voucher_type').val(),
                transaction_type:$('#transaction_type').val(),
                voucher_id:$('#voucher_id').val(),
                reff:$('#reff').val(),
                voucher_notes:$('#voucher_notes').val(),
                transaction_amount:$('#total_amount').val(),
                journals:submitableData
            }

            const setReportHtml = data => {
                console.log(data);
                // Swal.fire({
                //     icon: 'success',
                //     title: 'Data Stored',
                //     html: 'Print?',
                //     showConfirmButton: false,
                //     position: 'center',
                //     timer: null,
                // }).then(() => {
                    location.href=data;
                // });
            }
            ajaxCall(link,'POST',int_data_param, setReportHtml);
        }
</script>

@stop