@extends('layouts.app')

@section('title', 'PV Summary Report')

@section('style')
<link rel="stylesheet" href="{{ asset('admin/plugins/datatables-bs4/css/dataTables.bootstrap4.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>PV Summary Report</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item active">PV Summary Report</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"><i class="nav-icon fa fa-print"></i> รายงานสรุปใบสำคัญจ่าย (Payment Voucher
                        Summary)</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <form action="" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>ปี</label>
                                    <select data-bind="value: year" id="order_year" name="order_year"
                                        class="form-control">
                                        @if(date('Y')>2020)
                                        <option value="{{ date('Y') - 1 }}">
                                            {{ date('Y') < 2500 ? (date('Y') + 542) : (date('Y') - 1) }}</option>
                                        @endif
                                        <option selected="selected" value="{{ date('Y') }}">
                                            {{ date('Y') < 2500 ? date('Y') + 543 : date('Y') }}</option>
                                    </select>
                                </div>
                                <!-- /.form-group -->
                            </div>
                            <!-- /.col -->
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>เดือน</label>
                                    <select data-bind="value: month" id="order_month" name="order_month"
                                        class="form-control">
                                        <option value="1">มกราคม</option>
                                        <option value="2">กุมภาพันธ์</option>
                                        <option value="3">มีนาคม</option>
                                        <option value="4">เมษายน</option>
                                        <option value="5">พฤษภาคม</option>
                                        <option value="6">มิถุนายน</option>
                                        <option value="7">กรกฎาคม</option>
                                        <option value="8">สิงหาคม</option>
                                        <option value="9">กันยายน</option>
                                        <option value="10">ตุลาคม</option>
                                        <option value="11">พฤศจิกายน</option>
                                        <option value="12">ธันวาคม</option>
                                    </select>
                                </div>
                                <!-- /.form-group -->
                            </div>
                            <!-- /.col -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>จ่ายให้</label>
                                    <select id="user_id" name="user_id" class="form-control" required>
                                        @foreach(App\User::orderBy('name', 'asc')->get() as $user)
                                            <option value="{{ $user->id }}"> {{ $user->name }} </option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- /.form-group -->
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>สถานะการอนุมัติ</label>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <div class="icheck-primary d-inline">
                                                    <input data-bind="checked:payment_status" type="radio"
                                                        id="checkboxReceived" name="payment_status" value="1">
                                                    <label for="checkboxReceived">
                                                        อนุมัติแล้ว
                                                    </label>
                                                </div>
                                            </div>
                                            <!-- /.form-group -->
                                        </div>
                                        <!-- /.col -->
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <div class="icheck-primary d-inline">
                                                    <input data-bind="checked:payment_status" type="radio"
                                                        id="checkboxNotReceived" name="payment_status" value="0">
                                                    <label for="checkboxNotReceived">
                                                        ยังไม่อนุมัติ
                                                    </label>
                                                </div>
                                            </div>
                                            <!-- /.form-group -->
                                        </div>
                                        <!-- /.col -->
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <div class="icheck-primary d-inline">
                                                    <input data-bind="checked:payment_status" type="radio"
                                                        id="checkboxAll" name="payment_status" value="all">
                                                    <label for="checkboxAll">
                                                        ทั้งหมด
                                                    </label>
                                                </div>
                                            </div>
                                            <!-- /.form-group -->
                                        </div>
                                        <!-- /.col -->
                                    </div>
                                </div>
                                <!-- /.form-group -->
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                        <hr />
                        <div class="row">
                            <div class="col-md-12">
                                <div class="float-right">
                                    <button data-bind="click:print_preview" type="button"
                                        class="btn btn-primary mt-1"><i class="fa fa-print"
                                            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 -->
                    </form>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</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 data-bind="attr:{ 'src':url }" src="" id="print_preview" name="print_preview" width="100%"
                    height="450px;" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success btn-outline waves-effect" onclick="exportTableToExcel()"><i
                        class="far fa-file-excel"></i> Export Excel</button>
                <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="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.5.0.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="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="{{ asset('js/apps/summary_pv_report.js') }}"></script>
@stop