@extends('layouts.app')

@section('title', 'Approve 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>Approve 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">Approve Payment Voucher</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section id="el_content" class="content">
    <div class="container-fluid">
        @if($voucher->approved_by == 0)
        <form action="{{ route('accounting-paymentvoucher-approve') }}" method="POST">
            @else
            <form action="{{ route('accounting-paymentvoucher-sec-approve') }}" method="POST">
                @endif
                @csrf
                <input type="hidden" name="id" value="{{ $voucher->id }}" />
                <input type="hidden" name="page" value="{{ $page }}" />
                <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>เลขที่ <span class="text-danger">*</span></label>
                                        <input id="voucher_no" name="voucher_no" value="{{ $voucher->voucher_no }}"
                                            type="hidden" required>
                                        <span class="form-control">{{ $voucher->voucher_no }}</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="@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>เลขที่งาน <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input id="order_id" name="order_id" value="{{ $voucher->order_id }}"
                                            type="hidden" required>
                                        <span id="order_no" class="form-control">{{ $voucher->order_no }}</span>
                                    </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="{{ $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 -->
                        <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="{{ $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 -->
                                    <b>ที่ตั้งทรัพย์สิน:</b>
                <address>
                    {{ $voucher->asset_address }}<br/>
                    ตำบล/แขวง <b>{{ $voucher->thumbol_name }}</b> อำเภอ/เขต <b>{{ $voucher->district_name }}</b>
                    จังหวัด <b>{{ $voucher->province_name }}</b>
                </address>
                                    <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>รายละเอียดรายการ <span class="text-danger">*</span></label>
                                    <input data-bind="value: Approved" type="hidden" name="approved" />
                                    <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>ค่าบริการรวม Vat (ถ้ามี)</label>
                                    <span class="form-control">{{ number_format($voucher->total_cost, 2) }}</span>
                                </div>
                                <!-- /.form-group -->
                            </div>
                        </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->approved_by == auth()->user()->id)
                        <div class="callout callout-success">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>เหตุผลอนุมัติ (ถ้ามี)</label>
                                        <textarea name="approved_comment" cols="80" rows="4"
                                            class="form-control">{{ $voucher->approved_comment }}</textarea>
                                    </div>
                                    <!-- /.form-group -->
                                </div>
                            </div>
                            <!-- /.row -->
                            <hr />
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="float-right">
                                        <button type="button" class="btn btn-success mt-1"><i class="fa fa-check"
                                                style="font-size: 38px;"></i>
                                            คุณอนุมัติแล้ว (1/2)
                                        </button>
                                    </div>
                                </div>
                                <!-- /.col -->
                            </div>
                            <!-- /.row -->
                        </div>
                        @else
                        <div class="callout callout-danger">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>เหตุผลอนุมัติ (ถ้ามี)</label>
                                        <textarea name="approved_comment" value="{{ old('approved_comment') }}"
                                            cols="80" rows="4" class="form-control"></textarea>
                                    </div>
                                    <!-- /.form-group -->
                                </div>
                            </div>
                            <!-- /.row -->
                        </div>
                        <hr />
                        <div class="row">
                            <div class="col-md-12">
                                <div class="float-right">
                                    <button data-bind="click:Approve" type="submit" class="btn btn-success mt-1"><i
                                            class="fa fa-check" 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 -->
                        @endif
                    </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 -->
@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);
</script>
<script src="{{ asset('js/apps/payment_voucher/approve.js?v=2.0') }}"></script>
<script id="item-template" type="text/html">
<tr data-bind="visible: is_deleted()!=true">
    <td class="text-center">
        <input data-bind="value: id" type="hidden" name="indexes[]" value="" />
        <input data-bind="value: is_deleted" type="hidden" name="is_deleteds[]" 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>
@stop