@extends('layouts.jform')
@section('content')
    <?php
    Fun::lang();
    $total = 0;
    $symbol = $payment->currency->symbol;
    ?>
    <label for="">
        {{__('administrator.invoice_number')}} : {{$payment->invoice}}
    </label>
    <label for="">
        {{__('administrator.tailor')}} : {{$payment->tailor->name}}
    </label>

    {!! Form::open(['route' => ['clear-tailor-ar',$payment->id],'files'=>true,'class'=>'jform']) !!}
    <i>&nbsp;</i>

    <hr>
    <h3><u>{{__('administrator.material')}} {{__('administrator.due')}}</u></h3>
    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>#</th>
            <th>{{__('administrator.invoice_number')}}</th>
            <th>{{__('administrator.date')}}</th>
            <th>{{__('administrator.material')}}</th>
            <th>{{__('administrator.account_receivable')}}</th>
            <th><span class="button_success fa fa-plus btn_add_material"></span></th>
        </tr>
        </thead>
        <tbody class="material_body">

        </tbody>
        <tfoot>
        <tr>
            <th colspan="4" class="text-right">{{__('administrator.total')}}</th>
            <th class="total_tailor_ar">0</th>
            <th></th>
        </tr>
        </tfoot>
    </table>

    <hr>
    <h3><u>{{__('administrator.tailor_due')}}</u></h3>
    <table class="table table-striped table-bordered table_tailor_due">
        <thead>
        <tr>
            <th>#</th>
            <th>{{__('administrator.date')}}</th>
            <th>{{__('administrator.amount')}}</th>
            <th>{{__('administrator.note')}}</th>
            <th>{{__('administrator.clear')}}</th>
        </tr>
        </thead>
        <tbody>
        @foreach($tailor_due as $key=>$row)
            <?php
            $total += $row->paid_amount;
            $curr = findCurrency($row->currency_id);
            $curr = $curr->symbol??'';
            ?>
            <tr>
                <td>{{$key+1}}</td>
                <td>{{date('d-m-Y',strtotime($row->payment_date))}}</td>
                <td>{{$curr}}{{$row->paid_amount}}</td>
                <td>{{$row->note}}</td>
                <td><input name="tailor_due_invoice[]" type="checkbox" class="clear_due" value="{{$row->id}}"
                           data-amount="{{$row->paid_amount}}" data-symbol="{{$curr}}"></td>
            </tr>
        @endforeach
        </tbody>
        <tfoot>
        <tr>
            <th colspan="2" class="text-right">{{__('administrator.total')}}</th>
            <th class="total_tailor_due">0</th>
            <th></th>
        </tr>
        </tfoot>
    </table>
    <div class="form-group ">
        <label class="col-sm-4 col-form-label text-right ">{{__('administrator.account_receivable')}} (៛)</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="account_receivable_riel" value="" readonly>
        </div>
    </div>
    <div class="form-group ">
        <label class="col-sm-4 col-form-label text-right ">{{__('administrator.account_receivable')}} ($)</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="account_receivable_usd" value="" readonly>
        </div>
    </div>
    <div class="form-group ">
        <label class="col-sm-4 col-form-label text-right required">{{__('administrator.date')}}</label>
        <div class="col-sm-6">
            {!! Form::date('date',date('Y-m-d'), ['class' => 'form-control']) !!}
        </div>
    </div>
    <div class="form-group ">
        <label class="col-sm-4 col-form-label text-right ">{{__('administrator.note')}}</label>
        <div class="col-sm-6">
            {!! Form::textarea('note',null, ['class' => 'form-control no-resize','rows'=>'5','maxlength'=>'150']) !!}
        </div>
    </div>
    <input type="submit" class="hidden">
    {!! Form::close() !!}
@endsection

@section('jq')
    <script>
        var inc = 1;
        var material_body = $('.material_body');
        $(document).ready(function () {
            add_material();
            $('.clear_due').on('click', function () {
                tailor_due();
            });
            $('.btn_add_material').on('click', function () {
                add_material();
            });
            material_body.on('click', '.button_remove', function () {
                $(this).closest('tr').remove();
            });
            material_body.on('click', '.button_show', function () {
                $.get($(this).data('href'), function (data) {
                    jalert('', data.view, '900px');
                });
            });
            material_body.on('change', '.invoice_id', function () {
                let this_ = $(this);
                let row = this_.closest('tr');
                let invoice_number = this_.val();
                $.ajax({
                    url: '{{route('clear-tailor-ar',$payment->id)}}',
                    dataType: 'json',
                    method: 'get',
                    data: {
                        getInvoice: 1, invoice_number,
                    },
                    success: function (data) {
                        // console.log(data);

                        row.find('td:nth-child(3)').text(data.date);
                        row.find('td:nth-child(4)').html(data.html);
                        row.find('td:nth-child(5)').html(`
                        <span class="tailor_ar" data-symbol="${data.symbol}" data-ar="${data.account_receivable}">${data.symbol + data.account_receivable}</span>
                        `);
                        row.find('td:nth-child(6)').html(`
                        <span class="button_info fa fa-eye button_show" data-href="${data.url})"></span>
                        <span class="button_danger fa fa-trash button_remove"></span>
                        `);
                        tailor_due();
                    },
                    error(xhr) {
                        alertErrorFormController(xhr);
                        row.find('td:nth-child(3)').text('');
                        row.find('td:nth-child(4)').html('');
                        row.find('td:nth-child(5)').html('');
                        row.find('td:nth-child(6)').html(`<span class="button_danger fa fa-trash button_remove"></span>`);
                        tailor_due();
                    }
                });
            });
        });

        function add_material() {
            let $html = `
            <tr>
                <td>${inc}</td>
                <td>{!! Form::select('material_due_invoice[]',$material_due,null, ['placeholder'=>__('administrator.please_select'),'class' => 'form-control select2 invoice_id']) !!}</td>
                <td ></td>
                <td></td>
                <td></td>
                <td class="text-center">
                <span class="button_danger fa fa-trash button_remove"></span>
                </td>
            </tr>
            `;
            material_body.append($html);
            inc++;
        }

        function tailor_due() {
            let total_kh = 0;
            let total_usd = 0;
            let total_ar_kh = 0;
            let total_ar_usd = 0;
            $('.clear_due').each(function (ii, vv) {
                let check = $(this).prop('checked');
                if (check) {
                    let symbol = $(this).data('symbol');
                    let amount = $(this).data('amount');
                    amount = amount ? parseFloat(amount) : 0;
                    if (symbol ==='$') {
                        total_usd += amount;
                    }else{
                        total_kh += amount;
                    }
                }
            });
            $('.material_body .tailor_ar').each(function (ii, vv) {
                let amount = $(this).data('ar');
                let symbol = $(this).data('symbol');
                amount = amount ? parseFloat(amount) : 0;
                if (symbol ==='$'){
                    total_ar_usd += amount;
                }else{
                    total_ar_kh += amount;
                }
            });
            $('.total_tailor_due').html('៛'+total_kh+'<br>$'+total_usd);
            $('.total_tailor_ar').html('៛'+total_ar_kh+'<br>$'+total_ar_usd);
            $('input[name=account_receivable_usd]').val(total_usd+total_ar_usd);
            $('input[name=account_receivable_riel]').val(+total_ar_kh+total_kh);
        }
    </script>

@endsection
