@extends('layouts.main_without_top_button')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('vendors.index')}}">Vendors</a> <span class="divider">/</span></li>
        <li><a href="{{route('vendors.show')}}">{{$client->name}} Profile</a> <span class="divider">/</span></li>
        <li class="active">Credit Notes</li>
    </ul>
@stop
@section('contentinner')
    <style>
        table tbody td .number {
            text-align: right;
        }

        table tbody td .number {
            text-align: right;
        }

        td.details-control {
            background: url('{{ URL::asset('img/details_open.png') }}') no-repeat center center;
            cursor: pointer;
        }

        tr.details td.details-control {
            background: url('{{ URL::asset('img/details_close.png') }}') no-repeat center center;
        }
    </style>
    <div class="tabbable">
        @include('clients.includes.client_summary')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="msghead" style="margin-bottom: 12px;margin-top: -20px" id="msg_head">
                    @if(\Illuminate\Support\Facades\Auth::user()->can('GENERATE CREDIT NOTE'))
                    <ul class="msghead_menu">

                        <li class="right btn-group">
                            <div class="btn-group">
                                <button class="btn" onclick="modelShow('credit_note_modal')">
                                    CREATE CREDIT NOTE
                                </button>
                            </div><!--btn-group-->
                        </li>


                        <li class="right btn-group">
                            <div class="btn-group">
                                <a class="btn" href="{{route('credit-notes.invoice-losses.create',$client->id)}}">
                                    LOSS CREDIT NOTE
                                </a>
                            </div><!--btn-group-->
                        </li>
                    </ul>
                    @endif
                    <span class="clearall"></span>
                </div><!--msghead-->
                <br>
                <table class="table table-bordered table-condensed" id="journal-vouchers-list-1">
                    <thead>
                    <tr>
                        <th class="head0 nosort" style="width: 20px"><input type="checkbox" class="checkall"/></th>
                        <th class="head0" style="width: 20px">MORE</th>
                        <th class="head0" style="width: 80px">CREDIT NO..</th>
                        <th class="head1" style="width: 90px">Date</th>
                        {{--<th class="head0">Reference</th>--}}
                        {{--<th class="head0">Cr A/c</th>--}}
                        <th class="head0">Dr A/c</th>
                        <th class="head0">Currency</th>
                        <th class="head0">Exchange Rate</th>
                        <th class="head0">Amount</th>
                        <th class="head1">Remarks</th>
                        <th class="head0">Action</th>
                    </tr>
                    </thead>
                </table>
            </div><!--tab-pane-->
        </div><!--tabcontent-->
    </div><!--tabbable-->

    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" class="modal hide fade in modal-1" id="credit_note_modal">

        <div class="modal-header" style="background: #50A6C6">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4> <span class="vendors_name"></span></h4>
        </div>
        {!! Form::open(array('class' => 'stdform','id'=>'grn_payment_form','route'=>'credit-notes.store')) !!}
        <div class="modal-body">
            <div class="row-fluid" style="margin-top: 4px">
                <div class="span6">
                    <label class="span4">Date</label>

                    <div class="field span8">
                        <input type="text" name="date" class="span12 make_payment_date" required/>
                    </div>
                </div>
                <div class="span6">
                    <label class="span4">Credit Account</label>

                    <div class="field span8">
                        <select name="" data-placeholder="Credited Account" required
                                id="credited_account" class="searchable_select" style="width: 100%" disabled>
                            @foreach($credit_account_groups as $credit_account_group)
                                <optgroup label="{{$credit_account_group->name}}">
                                    @foreach($credit_account_group->accounts as $account)
                                        <option class="account-select"
                                                value="{{$account->id}}"
                                                @if($client->accountable->account_id == $account->id)selected @endif> {{$account->name}} </option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                        <input type="hidden" name="cr_account_id" value="{{$client->accountable->account_id}}"
                               required/>
                    </div>
                </div>
            </div>
            <div class="row-fluid" style="margin-top: 4px">
                <div class="span6">
                    <label class="span4">Amount</label>

                    <div class="field span8">
                        <input type="text" name="amount" class="span12 number total_amount" id="total_amount" required/>
                    </div>
                </div>
                <div class="span6">
                    <label class="span4">Currency</label>

                    <div class="field span8">
                        <select name="currency" class="searchable_select" style="width: 100%">
                            <option value="TSH">TSH</option>
                            <option value="USD">USD</option>
                        </select>
                    </div>
                </div>

            </div>
            <div class="row-fluid" style="margin-top: 4px">
                <div class="span6">
                    <label class="span4">Exchange Rate</label>

                    <div class="field span8">
                        <input type="text" name="exchange_rate" class="span12" required/>
                    </div>
                </div>
                <div class="span6">
                    <label class="span4">Debit Account</label>

                    <div class="field span8">
                        <select name="dr_account_id" data-placeholder="Debit Account" required
                                id="debited_account" class="searchable_select" style="width: 100%">
                            <option></option>
                            @foreach($debit_account_groups as $debit_account_group)
                                <optgroup label="{{$debit_account_group->name}}"
                                          data-value="{{$debit_account_group->id}}">
                                    @foreach($debit_account_group->accounts as $account)
                                        <option value="{{$account->id}}">{{$account->name}}</option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <div id="append_credit_note_agaist"></div>
                </div>
            </div>
            <div class="row-fluid" style="margin-top: 2px">
                <div class="span12">
                    <label class="span2">Narration</label>

                    <div class="field span10">
                        <textarea cols="80" rows="1" class="span12" name="descriptions"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-success" name="update_vendor" id="update_vendor" type="submit">MAKE PAYMENT</button>
        </div>
        {!! Form::close() !!}
    </div>

    <script>
        getMoreNoteDetails();
        jQuery('.make_payment_date').datepicker();

        jQuery('#debited_account').on('change', function () {
            getMoreNoteDetails();
        });

        function getMoreNoteDetails(){
            var account_id = jQuery('#debited_account').val();
            var document_id = 0;
            jQuery.ajax({
                url: '{{route('credit-notes.get-more-details')}}',
                type: 'get',
                data: {
                    account_id: account_id,
                    document_id: document_id
                },
                success: function (html) {
                    jQuery('#append_credit_note_agaist').empty().append(html);
                    jQuery('.invoice_to_credited').select2();
                }
            });
        }
        function creditNoteInvoice() {
            var dr_account_id = jQuery('#debited_account_edit').val();
            var credit_note_id = jQuery('#credit_note_id_edit').val();
            jQuery.ajax({
                url: '{{route('credit-notes.invoice.edit')}}',
                type: 'get',
                data: {
                    dr_account_id: dr_account_id,
                    credit_note_id: credit_note_id
                },
                success: function (html) {
                    jQuery('#append_credit_note_agaist_edit').empty().append(html);
                    jQuery('.invoice_to_credited').select2();
                }
            });
        }
        jQuery('#grn_payment_form').on('submit', function (e) {
            e.preventDefault();
            jQuery.ajax({
                url: '{{route('credit-notes.store')}}',
                type: 'post',
                data: jQuery(this).serialize(),
                success: function (html) {
                    if (html == 'DONE') {
                        notify('Credit Note Created Successful!');
                        jQuery('#credit_note_modal').modal('toggle');
                        jQuery('#journal-vouchers-list-1').dataTable().fnFilter(this.value);
                    } else {
                        alert("Fail to Create Credit Note.");
                    }
                }
            });
        });

        jQuery('#credit_note_edit_form').on('submit', function (e) {
            e.preventDefault();
            jQuery.ajax({
                url: '{{route('clients.credit-notes.update')}}',
                type: 'post',
                data: jQuery(this).serialize(),
                success: function (html) {
                    if (html == 'DONE') {
                        notify('CREDIT NOTE UPDATED SUCCESSFUL!');
                        jQuery('#credit_note_edit_modal').modal('toggle');
                        jQuery('#journal-vouchers-list-1').dataTable().fnFilter(this.value);
                    } else {
                        alert("FAIL TO UPDATE CREDIT NOTE.");
                    }
                }
            });
        });

        var oTable = jQuery('#journal-vouchers-list-1').DataTable({
            "oLanguage": {
                "sLoadingRecords": "Please wait - loading Credit Note...",
                "sZeroRecords": "No Credit Note to Display.",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: '{{route('credit-notes.data-table',array('vendor_id'=>$client->accountable->account_id))}}',
                data: function (d) {
//                d.route_id = jQuery('#name').val();
                },
                error: function (xhr, textStatus, error) {
                    if (textStatus === 'timeout') {
                        alert('Timeout error. The server took too long to send back the data.\nPlease try again.');
                    }
                    oTable.fnProcessingIndicator(false);
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "aoColumnDefs": [{
                "aTargets": [7],
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    jQuery(nTd).css('text-align', 'right');
                    if ((sData == 0.00)) {
                        jQuery(nTd).addClass('highlight-red')
                    }
                }
            }],
            "columns": [
                {data: 'checkbox'},
                {
                    "class": "details-control",
                    "orderable": false,
                    "data": null,
                    "defaultContent": ""
                },
                {"class": "link", data: 'id_number'},
                {"class": "link", data: 'date'},
//                {"class": "link", data: 'reference'},
//                {"class": "link number", data: 'credit_account'},
                {"class": "link number", data: 'debit_account'},
                {"class": "link number", data: 'currency'},
                {"class": "link number", data: 'exchange_rate'},
                {"class": "link", data: 'amount'},
                {"class": "link number", data: 'remarks'},
                {data: 'action'}
            ],
            "bStateSave": true
        });


        function editRecordByURL(url) {
            jQuery.ajax({
                url: url,
                type: "GET",
                dataType: "html",
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    jQuery('#edit_form').empty().append(data);
                    jQuery('#edit_model').appendTo("body").modal('toggle');
                    $('select').select2();
                    jQuery('.make_payment_date').datepicker();
                    creditNoteInvoice();
                    jQuery('#debited_account_edit').on('change', function () {
                        var account_id = jQuery(this).val();
                        var document_id = 0;
                        jQuery.ajax({
                            url: '{{route('credit-notes.get-more-details')}}',
                            type: 'get',
                            data: {
                                account_id: account_id,
                                document_id: document_id
                            },
                            success: function (html) {
                                jQuery('#append_credit_note_edit_against').empty().append(html);
                                jQuery('.invoice_to_credited').select2();
                                creditNoteInvoice();
                            }
                        });
                    });
                    jQuery('#edit_route_form').on('submit', function (e) {
                        e.preventDefault();
                        var form = $(this);
                        var formAction = form.attr('action');
                        var formMethod = 'PUT';
                        var formData = form.serialize();

                        jQuery.ajax({
                            url: formAction,
                            type: formMethod,
                            data: formData,
                            beforeSend: function () {
                                startSpinner();
                            },
                            success: function (data) {
                                console.log(data);

                                if (data.state === 'Done') {
                                    jQuery.jGrowl(data.msg);
                                    resetFormAndClose(form);
                                    $('#journal-vouchers-list-1').dataTable().fnFilter(this.value);
                                } else if (data.state === 'Fail') {
                                    jQuery.jGrowl(data.msg);
                                }
                            },
                            complete: function () {
                                stopSpinner()
                            },
                            error: function (data) {
                                console.log('Error: ');
                                console.log(data);
                            }
                        });

                    });

                },
                complete: function () {
                    stopSpinner()
                },
                error: function (data) {
                    console.log('Error: ');
                    console.log(data);
                }
            });
        }

    </script>
@stop