@extends('layouts.app')

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

@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> Payment Voucher Detail</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"> Payment Voucher Detail</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section id="el_content" class="content">
    <div class="container-fluid">
        <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>
                                <input name="voucher_no" value="{{ $voucher->voucher_no  }}" placeholder="เลขที่"
                                    type="text" class="form-control" style="width: 100%;" autocomplete="off" 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>
                                    <input name="voucher_date" value="@display_thai_date($voucher->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>เลขที่งาน </label>
                            <input id="order_no" name="order_no" value="{{ $voucher->order_no }}" type="text"
                                class="form-control" placeholder="เลขที่งาน" autocomplete="off" required>
                        </div>
                        <!-- /.form-group -->
                    </div>
                    <!-- /.col -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>จ่ายให้ </label>
                            <input name="pay_for_name" value="{{ $voucher->pay_for_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>
                                <input name="survey_date" value="@display_thai_date($voucher->survey_date)" type="text"
                                    class="form-control datepicker" placeholder="วันที่สำรวจ"
                                    data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy"
                                    autocomplete="off" data-mask="" im-insert="false">
                            </div>
                        </div>
                        <!-- /.form-group -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
                <b>ที่ตั้งทรัพย์สิน:</b>
                <address>
                    ตำบล/แขวง <b>{{ $voucher->thumbol_name }}<b/> อำเภอ/เขต <b>{{ $voucher->district_name }}</b>
                    จังหวัด <b>{{ $voucher->province_name }}</b>
                </address>
                <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>โดย </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="{{ $voucher->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="{{ $voucher->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="{{ $voucher->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>รายละเอียดรายการ </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>
                                            </tr>
                                        </thead>
                                        <tbody data-bind="template: { name: 'item-template', foreach: Items }">
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th class="text-right" colspan="2">รวมเป็นเงิน</th>
                                                <th class="text-right"
                                                    data-bind="text: numeral(Total()).format('0,0.00')"></th>
                                            </tr>
                                            <tr>
                                                <th class="text-right" colspan="2">ยอด 60%</th>
                                                <th class="text-right" colspan="2"><span
                                                        data-bind="text: numeral(Total() * 0.6).format('0,0.00')"></span>
                                                </th>
                                            </tr>
                                            <tr>
                                                <th class="text-right" colspan="2">ยอด 40%</th>
                                                <th class="text-right" colspan="2"><span
                                                        data-bind="text: numeral(Total() * 0.4).format('0,0.00')"></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="หมายเหตุ">{{ $voucher->remark }}</textarea>
                        </div>
                        <!-- /.form-group -->
                    </div>
                </div>
                <!-- /.row -->
                @if($voucher->status > 2)
                <div class="callout @if($voucher->status==4) callout-success @else callout-danger @endif">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label>เหตุผลอนุมัติ</label>
                                        <span class="form-control">{{ $voucher->approved_comment }}</span>
                                    </div>
                                    <!-- /.form-group -->
                                </div>
                            </div>
                            <!-- /.row -->
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label>อนุมัติโดย</label>
                                        <span class="form-control">{{ $voucher->approved_name }}</span>
                                    </div>
                                    <!-- /.form-group -->
                                </div>
                            </div>
                            <!-- /.row -->

                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label>เหตุผลอนุมัติ</label>
                                        <span class="form-control">{{ $voucher->approved_sec_comment }}</span>
                                    </div>
                                    <!-- /.form-group -->
                                </div>
                            </div>
                            <!-- /.row -->
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label>อนุมัติโดย</label>
                                        <span class="form-control">{{ $voucher->approved_sec_name }}</span>
                                    </div>
                                    <!-- /.form-group -->
                                </div>
                            </div>
                            <!-- /.row -->
                        </div>
                    </div>
                </div>
                @endif
            </div>
            <!-- /.card-body -->
            <div class="card-footer">
                <p><span class="text-muted text-sm">Created at</span> @display_thai_datetime($voucher->created_at) </p>
                <p><span class="text-muted text-sm">Updated at</span> @display_thai_datetime($voucher->updated_at)</p>
                <div class="row no-print">
                    <div class="col-12">
                        <button data-bind="click: print_preview" type="button" class="btn btn-default float-right">
                            <i class="fas fa-print"></i>
                            Print
                        </button>
                        <!--button type="button" class="btn btn-primary float-right" style="margin-right: 5px;">
                                <i class="fas fa-download"></i> Generate PDF
                            </button-->
                    </div>
                </div>
            </div>
        </div>
        <!-- /.card -->
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
<div class="modal" id="modal-print">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">ตัวอย่างก่อนพิมพ์</h4>
            </div>
            <div class="modal-body">
                <iframe id="print_preview" name="print_preview"
                    src="{{ route('accounting-paymentvoucher-preview', [$voucher->id]) }}" width="100%" height="450px;"
                    frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button
                    onClick="javascript: window.frames['print_preview'].focus();window.frames['print_preview'].print();"
                    type="button" class="btn btn-success btn-outline waves-effect" data-dismiss="modal"><i
                        class="fa fa-print"></i> Print</button>
                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal" lang="en">Close</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>
var voucher = @json($voucher);
var voucher_items = @json($voucher_items);
</script>
<script src="{{ asset('js/apps/payment_voucher/detail.js?v=2') }}"></script>
<script id="item-template" type="text/html">
<tr>
    <td class="text-center"><span data-bind="text: $index()+1"></span>.</td>
    <td data-bind="text: name"></td>
    <td class="text-right" data-bind="text: numeral(price()).format('0,0.00')"></td>
</tr>
</script>
@stop