@extends('layouts.app')

@section('title', 'Payment Vouchers')

@section('style')
<link rel="stylesheet" href="{{ asset('admin/plugins/datatables-bs4/css/dataTables.bootstrap4.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 Vouchers</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 Vouchers</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"> รายการใบสำคัญจ่าย (Payment Voucher)</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <div class="col-sm-12 col-md-6">
                            <form action="{{ route('accounting-paymentvouchers') }}">
                                <div class="form-group">
                                    <label>Search:</label>
                                    <div class="input-group" data-target-input="nearest">
                                        <input type="hidden" name="page" value="1"/>
                                        <input type="search" name="keyword" class="form-control form-control-sm" placeholder="ป้อนเลขที่, เลขที่งาน, จ่ายให้ เพื่อค้นหา" value="{{ $keyword }}">
                                        <div class="input-group-append">
                                            <button type="submit" class="input-group-text"><i class="fas fa-search"></i></button>
                                        </div>
                                    </div>
                                    <!-- /.input group -->
                                </div>
                                <div class="row">
                                <div class="col-md-6">
                                <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_date)" type="text"
                                            placeholder="ค้นหาจากวันที่" class="form-control form-control-sm datepicker"
                                            data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy"
                                            autocomplete="off" data-mask="" im-insert="false">
                                         <div class="input-group-append">
                                            <button type="submit" class="input-group-text"><i class="fas fa-search"></i></button>
                                        </div>
                                    </div>
                                </div>
                                </div>
                                </div>
                            </form>
                    </div>
                    <div class="table-responsive col-sm-12">
                    <table id="dataTable" class="table table-bordered table-striped table-responsive nowrap"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th scope="col">&nbsp;</th>
                                <th class="text-center" 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>
                                <th scope="col">โดย</th>
                                <th scope="col">จำนวนเงิน (บาท)</th>
                                <th scope="col">อนุมัติครั้งที่ 1</th>
                                <th scope="col">อนุมัติครั้งที่ 2</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($data as $i=>$v)
                            <tr>
                                <td>
                                @if($v->status==0)
                                    <a href="/accounting/paymentvouchers/{{ $v->id }}/edit" class="btn btn-outline-info btn-circle mt-1 btn-outline edit" lang="en" title="Edit"><i class="fas fa-pencil-alt"></i></a>
                                    <a href="/accounting/paymentvouchers/{{ $v->id }}/delete" onClick="javascript:return confirm(\'Are you sure to delete ?\');" class="btn btn-outline-danger btn-circle mt-1 delete" lang="en" title="Delete"><i class="fas fa-trash"></i></a>
                                @else
                                    <a href="/accounting/paymentvouchers/{{ $v->id }}/detail" class="btn btn-outline-info btn-circle mt-1 btn-outline detail" lang="en" title="Detail"><i class="fas fa-list-alt"></i></a>
                    
                                    @if($v->status==4)
                                        <a class="btn btn-default btn-circle mt-1 btn-outline"><i class="fas fa-check text-success" title="Approved"></i></a>
                                        <a href="/accounting/paymentvouchers/{{ $v->id }}/print" class="btn btn-outline-info btn-circle mt-1 btn-outline"><i class="fas fa-print" title="Print"></i></a>
                                    @elseif($v->status==3)
                                        <a class="btn btn-default btn-circle mt-1 btn-outline"><i class="fas fa-ban text-danger" title="Reject"></i></a>
                                    @else
                                        @can('Approve Payment Voucher')
                                            <a href="/accounting/paymentvouchers/{{ $v->id }}/approve" class="btn btn-outline-info btn-circle mt-1 btn-outline approve" lang="en" title="Approve"><i class="fas fa-check"></i></a>
                                        @endcan

                                    @endif

                                @endif
                                </td>
                                @php
                                    $start = ($page - 1) * 10 + 1;
                                @endphp
                                <td class="text-center">{{ ($start + $i)  }}</td>
                                <td>{{ $v->voucher_date_thai }}</td>
                                <td>
                                    <a href="/accounting/paymentvouchers/{{ $v->id }}/detail">{{ $v->voucher_no }} 
                                    @if($v->status==0)
                                        <span class="right badge badge-default">แบบร่าง</span>
                                    @elseif($v->status==3)
                                        <span class="right badge badge-danger">ยกเลิก</span>
                                    @elseif($v->status==4)
                                        <span class="right badge badge-success">อนุมัติแล้ว</span>
                                    @endif
                                    </a>
                                </td>
                                <td>{{ $v->order_no }}</td>
                                <td>{{ $v->pay_for_name}}</td>
                                <td>
                                    <span class="right badge badge-info">{{ $v->payment_method_name }}</span>
                                </td>
                                <td>{{ number_format($v->payment_total, 2) }}</td>
                                <td>{{ $v->approved_name }}</td>
                                <td>{{ $v->approved_sec_name }}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer clearfix">
                {{ $data->links('pagination.voucher') }}
                </div>
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->
@endsection

@section('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-datepicker.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker-thai.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker.th.js') }}"></script>
<script>
$(document).ready(function() {
    $.fn.datepicker.defaults.format = "dd/mm/yyyy";
    $.fn.datepicker.defaults.language = "th-th";
    $('.datepicker').datepicker({
        "autoclose": true,
        "todayHighlight": true,
        "toggleActive": true
    });     
    $('#dataTable').DataTable({
        "paging": false,
        "bFilter": false,
        "bInfo": false,
        "bSort": false
    });
});
</script>
@stop