@extends('layouts.app')

@section('title', 'Voucher Account Codes')

@section('style')
<link rel="stylesheet" href="{{ asset('admin/plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
<link rel="stylesheet" href="{{ asset('admin/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('admin/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
@endsection

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Voucher Account Codes</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Settings</a></li>
                    <li class="breadcrumb-item active">Voucher Account Codes</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section id="el_content" class="content">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <form action="{{ route('voucher_account_code-save') }}" method="POST">
                    @csrf
                    <div class="card-header">
                        <h3 class="card-title">ใบสำคัญจ่ายเฉพาะฝ่ายบัญชี</h3>
                        <div class="card-tools">
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table class="table table-bordered table-striped table-responsive nowrap" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th>รหัสบัญชี</th>
                                    <th>รายการ</th>
                                    <th>&nbsp;</th>
                                </tr>
                            </thead>
                            <tbody data-bind="template: { name:'item-template', foreach:Items }"></tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="4">
                                        <button data-bind="click: Add" class="btn btn-block btn-outline-info"> <i
                                                class="fa fa-plus"></i> </button>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="float-left">
                                    <button type="submit" class="btn btn-primary mt-1"><i class="fa fa-check"
                                            style="font-size: 38px;"></i>
                                        บันทึก
                                    </button>
                                </div>
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>
            </div>
            <!-- /.card -->
            </form>
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->
@endsection

@section('script')
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.5.0.js"></script>
<script>
var account_codes = @json($account_codes);
</script>
<script src="{{ asset('js/apps/voucher_account_code.js') }}"></script>
<script id="item-template" type="text/html">
<tr data-bind="visible: Delete()==false">
    <td class="text-center"><span data-bind="text: $index()+1"></span>.</td>
    <td>
        <input data-bind="value: id" type="hidden" name="ids[]" value=""/>
        <input data-bind="value: Delete" type="hidden" name="deletes[]" value=""/>
        <input data-bind="value: selectedAccountCodeId" type="hidden" name="account_codes[]" value=""/>
        <select class="form-control" data-bind="visible: Update, options: AccountCodes,
                            optionsText: 'account_code',
                            value: selectedAccountCode,
                            optionsCaption: '--- เลือก ---'"></select>
        <span data-bind="visible: Update()==false, text: code"></span>
    </td>
    <td data-bind="text: name"></td>
    <td>
        <button data-bind="visible:id()>0 && Update()==false, click: Edit" class="btn btn-default"><i class="fa fa-pen"></i></button>
        <button data-bind="click: $root.Remove" class="btn btn-default"><i class="fa fa-trash"></i></button>
    </td>
</tr>
</script>
@stop