@extends('layouts.app')

@section('title', '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>Summary Report</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item active">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> รายงานสรุป บริษัท ที่ปรึกษา เฟิร์สสตาร์
                        จำกัด</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>
                                    <input data-bind="value:owner" id="owner" name="owner" class="form-control" type="text" value="" placeholder="ชื่อผู้ว่าจ้าง" />
                                </div>
                                <!-- /.form-group -->
                            </div>
                            <!-- /.col -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>ผู้รับงาน</label>
                                    <input data-bind="value:worker" id="worker" name="worker" class="form-control" type="text" value="" placeholder="ชื่อผู้รับงาน" />
                                </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 class="col-md-4">
                                            <div class="form-group">
                                                <div class="icheck-primary d-inline">
                                                    <input data-bind="checked:payment_status" type="radio" id="checkboxPayDayOther" name="payment_status"
                                                        value="9">
                                                    <label for="checkboxPayDayOther">
                                                        อื่น ๆ
                                                    </label>
                                                    <input style="display:none" data-bind="visible: payment_status()==9, value:payment_status_other" class="form-control" type="text" name="payment_status_other"
                                                        placeholder="อื่น ๆ โปรดระบุ" value="" />
                                                </div>
                                            </div>
                                            <!-- /.form-group -->
                                        </div>
                                        <!-- /.col -->
                                    </div>
                                </div>
                                <!-- /.form-group -->
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                        <div class="form-group">
                            <label>งานที่ยังไม่ได้ส่ง</label>
                            <div class="col-md-6">
                                <div class="icheck-primary d-inline">
                                    <input data-bind="checked:open_job_status" type="checkbox" id="checkboxOpenJob" name="open_job_status" value="1">
                                    <label for="checkboxOpenJob">
                                        ไม่ได้ ปิด job // ไม่มีผู้รับงาน
                                    </label>
                                </div>
                            </div>
                        </div>
                        <!-- /.form-group -->
                        <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_report.js?v=3.2') }}"></script>
@stop