@extends('layouts.app')

@section('title', 'New Payment Voucher')

@section('style')
<link rel="stylesheet" href="{{ asset('admin/plugins/daterangepicker/daterangepicker.css') }}">
<link rel="stylesheet" href="{{ asset('admin/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('admin/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css') }}">
<link rel="stylesheet"
    href="{{ asset('admin/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.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') }}">
<link rel="stylesheet" href="{{ asset('admin/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/datepicker.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>New Payment Voucher</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Accounting</a></li>
                    <li class="breadcrumb-item active">New Payment Voucher</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section id="el_content" class="content">
    <div class="container-fluid">
        <form action="{{ route('accounting-paymentvoucher-save') }}" method="POST">
            @csrf
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">ใบสำคัญจ่าย (Payment Voucher)</h3>
                    <div class="card-tools">
                    </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <div class="callout callout-warning">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                </div>
                                <!-- /.form-group -->
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                </div>
                                <!-- /.form-group -->
                            </div>
                            <!-- /.col -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>เลขที่ </label>
                                    <span class="form-control">AUTO</span>
                                </div>
                                <!-- /.form-group -->
                            </div>
                            <!-- /.col -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>วันที่ <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                        </div>
                                        <input name="voucher_date" value="{{ old('voucher_date') }}" type="text"
                                            placeholder="วันที่" class="form-control datepicker"
                                            data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy"
                                            autocomplete="off" data-mask="" im-insert="false" required>
                                    </div>
                                </div>
                                <!-- /.form-group -->
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>เลขที่งาน <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input data-bind="value:Order_Id" id="order_id" name="order_id"
                                        value="{{ old('order_id') }}" type="hidden" required>
                                    <span data-bind="text:Order_No" class="form-control"></span>
                                    <div class="input-group-append">
                                        <div class="input-group-text" data-bind="click: chooseOrder"><i
                                                class="fas fa-external-link-alt"></i></div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.form-group -->
                        </div>
                        <!-- /.col -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>จ่ายให้ <span class="text-danger">*</span></label>
                                <input name="pay_for_name" value="{{ Auth::user()->name }}" placeholder="จ่ายให้"
                                    type="text" class="form-control" style="width: 100%;" required>
                            </div>
                            <!-- /.form-group -->
                        </div>
                        <!-- /.col -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>วันที่สำรวจ</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                    </div>
                                    <span data-bind="text: Survey_Date" class="form-control"></span>
                                    <input type="hidden" data-bind="value: Survey_Date" name="survey_date" value="{{ old('survey_date') }}"/>
                                </div>
                            </div>
                            <!-- /.form-group -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                    <div style="display:none" data-bind="visible: Voucher_Count() > 0" class="callout callout-success">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>ประวัติการเบิกเงิน</label>
                                    <span data-bind="text:description" class="form-control"></span>
                                </div>
                                <!-- /.form-group -->
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>โดย <span class="text-danger">*</span></label>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="icheck-primary d-inline">
                                                <input data-bind="checked: UseBankAccount" type="radio"
                                                    id="checkboxDaySurvey" name="payment_method" value="CASH" required>
                                                <label for="checkboxDaySurvey">
                                                    เงินสด
                                                </label>
                                            </div>
                                        </div>
                                        <!-- /.form-group -->
                                    </div>
                                    <!-- /.col -->
                                </div>
                                <!-- /.row -->
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="icheck-primary d-inline">
                                                <input data-bind="checked: UseBankAccount" type="radio"
                                                    id="checkboxDaySuccess" name="payment_method" value="TRANSFER"
                                                    required>
                                                <label for="checkboxDaySuccess">
                                                    โอนเข้าบัญชี
                                                </label>
                                            </div>
                                        </div>
                                        <!-- /.form-group -->
                                    </div>
                                </div>
                                <!-- /.row -->
                                <div style="display:none" data-bind="visible: UseBankAccount()=='TRANSFER'" class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="inputAccNo" class="col-sm-4 col-form-label">หมายเลขบัญชี</label>
                                            <div class="col-sm-12">
                                                <input data-bind="enable: UseBankAccount()=='TRANSFER'" type="text"
                                                    class="form-control" id="inputAccNo" name="bank_account_no"
                                                    value="{{ old('bank_account_no') }}" placeholder="หมายเลขบัญชี">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.col -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="inputBank" class="col-sm-4 col-form-label">ธนาคาร</label>
                                            <div class="col-sm-12">
                                                <input data-bind="enable: UseBankAccount()=='TRANSFER'" type="text"
                                                    class="form-control" id="inputBank" name="bank_name"
                                                    value="{{ old('bank_name') }}" placeholder="ธนาคาร">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.col -->
                                </div>
                                <!-- /.row -->
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="icheck-primary d-inline">
                                                <input data-bind="checked: UseBankAccount" type="radio"
                                                    id="checkboxDayOther" name="payment_method" value="OTHER" required>
                                                <label for="checkboxDayOther">
                                                    อื่น ๆ
                                                </label>
                                            </div>
                                        </div>
                                        <!-- /.form-group -->
                                    </div>
                                    <!-- /.col -->
                                </div>
                                <!-- /.row -->
                                <div style="display:none" data-bind="visible: UseBankAccount()=='OTHER'" class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="col-sm-12">
                                                <input data-bind="enable: UseBankAccount()=='OTHER'" type="text"
                                                    class="form-control" id="inputOther" name="other_method"
                                                    value="{{ old('other_method') }}" placeholder=" อื่น ๆ (โปรดระบุ)">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.col -->
                                </div>
                                <!-- /.row -->
                            </div>
                            <!-- /.form-group -->
                        </div>
                    </div>
                    <!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>รายละเอียดรายการ <span class="text-danger">*</span></label>
                                <input data-bind="value: Published" type="hidden" name="publish" />
                                <div class="row">
                                    <div class="col-md-12">
                                        <table id="costs_table" class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th style="width:60px;">ลำดับ</th>
                                                    <th>รายการ</th>
                                                    <th style="width:160px;">จำนวนเงิน (บาท)</th>
                                                    <th style="width:40px;">&nbsp;</th>
                                                </tr>
                                            </thead>
                                            <tbody data-bind="template: { name: 'item-template', foreach: Items }">
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th colspan="4">
                                                        <button data-bind="click: Add"
                                                            class="btn btn-block btn-outline-info"> <i
                                                                class="fa fa-plus"></i> </button>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th class="text-right" colspan="2">รวมเป็นเงิน</th>
                                                    <th colspan="2">
                                                        <span data-bind="text: numeral(Total()).format('0,0.00')"
                                                            class="form-control"></span>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th class="text-right" colspan="2">ยอด 60%</th>
                                                    <th colspan="2"><span
                                                            data-bind="text: numeral(Total() * 0.6).format('0,0.00')"
                                                            class="form-control"></span></th>
                                                </tr>
                                                <tr>
                                                    <th class="text-right" colspan="2">ยอด 40%</th>
                                                    <th colspan="2"><span
                                                            data-bind="text: numeral(Total() * 0.4).format('0,0.00')"
                                                            class="form-control"></span></th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!-- /.form-group -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>หมายเหตุ</label>
                                <textarea id="remark" name="remark" cols="80" rows="4" class="form-control" placeholder="หมายเหตุ">{{ old('remark') }}</textarea>
                            </div>
                            <!-- /.form-group -->
                        </div>
                    </div>
                    <!-- /.row -->
                    <hr />
                    <div class="row">
                        <div class="col-md-12">
                            <div class="float-right">
                                <button data-bind="click: Publish" type="submit" class="btn btn-primary mt-1"><i
                                        class="fa fa-check" style="font-size: 38px;"></i>
                                    บันทึก
                                </button>
                                <button data-bind="click: saveDraft" type="submit" class="btn btn-default mt-1"><i
                                        class="far fa-clipboard" style="font-size: 38px;"></i>
                                    บันทึกร่าง </button>
                                <button type="reset" class="btn btn-warning mt-1"><i class="fas fa-eraser"
                                        style="font-size: 38px;"></i>
                                    ยกเลิก </button>
                            </div>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <p class="text-muted text-sm">หมายเหตุ <span class="text-danger">*</span> คือช่องที่ต้องป้อนข้อมูล
                        ไม่สามารถเว้นว่างได้</p>
                </div>
            </div>
            <!-- /.card -->
        </form>
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->

<div class="modal" id="modal-orders">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">เลือกงาน</h4>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                <table id="dataTable" class="table table-bordered table-striped nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th class="text-center" scope="col">#</th>
                            <th scope="col">เลขที่งาน</th>
                            <th scope="col"><i class="far fa-calendar-alt"></i> วันที่รับงาน</th>
                            <th scope="col">ชื่อ ลูกค้า</th>
                            <th scope="col">ผู้ว่าจ้าง</th>
                            <th scope="col">เลือก</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">
                    <i class="fas fa-ban" style="font-size: 38px;"></i> ยกเลิก
                </button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
@endsection

@section('script')
<script src="{{ asset('admin/plugins/select2/js/select2.full.min.js') }}"></script>
<script src="{{ asset('admin/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js') }}"></script>
<script src="{{ asset('admin/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('admin/plugins/inputmask/min/jquery.inputmask.bundle.min.js') }}"></script>
<script src="{{ asset('admin/plugins/daterangepicker/daterangepicker.js') }}"></script>
<script src="{{ asset('admin/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js') }}"></script>
<script src="{{ asset('admin/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}"></script>
<script src="{{ asset('admin/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.5.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="{{ asset('js/bootstrap-datepicker.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker-thai.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker.th.js') }}"></script>
<script src="{{ asset('admin/plugins/datatables/jquery.dataTables.js') }}"></script>
<script src="{{ asset('admin/plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
<script src="{{ asset('js/bootstrap-autocomplete.min.js') }}"></script>
<script src="{{ asset('js/apps/payment_voucher/add.js?v=1.1.0') }}"></script>
<script id="item-template" type="text/html">
<tr>
    <td class="text-center">
        <input data-bind="value: id" type="hidden" name="costs[]" value="" />
        <span data-bind="text: $index()+1"></span>.</td>
    <td><input data-bind="value: name" type="text" name="descriptions[]" class="form-control descriptionAutoComplete"
            autocomplete="off" required></td>
    <td><input data-bind="value: price" type="number" step="0.01" name="amounts[]" class="form-control" required></td>
    <td><button data-bind="click: $root.Remove" class="btn btn-default"><i class="fa fa-trash"></i></button></td>
</tr>
</script>
<script>
var config = {
    url: '/api/orders-data-active?user_id={{ Auth::User()->id }}&limit=1&survey_date=1',
    columns: [{
            data: 'id',
            name: 'id',
            bSortable: false
        },
        {
            data: null,
            bSortable: false,
            render: function(e) {
                return e.order_no;
            }
        },
        {
            data: 'order_date_thai',
            name: 'order_date_thai'
        },
        {
            data: 'customer_name',
            name: 'customer_name'
        },
        {
            data: 'owner_name',
            name: 'owner_name'
        },
        {
            data: null,
            bSortable: false,
            render: function(e) {
                if (e.voucher_count < 1) {
                    return '<a onClick="javascript: modelVm.choose(this)" href="javascript: void(0)" data-id="' +
                        e.id + '" data-order_no="' + e.order_no + '" data-voucher_count="' + e.voucher_count +
                        '" data-survey_date="' + e.survey_date_thai + '" class="btn btn-outline-info btn-circle mt-1 btn-outline" lang="en" title="Select"><i class="fas fa-check"></i></a>';
                } else {
                    return '<span class="right badge badge-danger">เต็มจำนวน</span>';
                }
            }
        }
    ]
};
$('.descriptionAutoComplete').autoComplete({
    resolverSettings: {
        url: '/api/orders-cost_descriptions'
    }
});
</script>
<script src="{{ asset('js/datatable.base.js') }}"></script>
@stop