@extends('layouts.master')
@section('header')
    <link href="{{ asset('css/gijgo.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/select2.min.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('css/select2-bootstrap4.min.css') }}">

@endsection
@php
use Illuminate\Support\Facades\DB;
$OR = DB::table('tdoctorhd');
 $OR = $OR->orderBy('XVOrhDocNo','asc')
 ->leftjoin('tmstmcustomer', 'tdoctorhd.XVCstCode', 'tmstmcustomer.XVCstCode')
 ->select('tdoctorhd.XVOrhDocNo','tmstmcustomer.XVCstName')
 ->get()
 ->toArray();

@endphp
@section('content')

    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <div class="card">
        <div class="card-body">
            <div class="row ">
                <div class="col-6">
                    <h5 style="font-weight: bold;">รายงานการเบิกวัสดุแยกตามใบสั่งผลิต</h5>
                </div>
                <div class="col-6 text-right">
                    <a href="{{route('report.dashboard.index')}}" class="btn btn-danger ">ย้อนกลับ</a>
                </div>
            </div>
            <hr>
            <div class="card-body">
                <div class="row mt-1 ">
                    <div class="card " style="max-width: 650px;min-width: 650px;margin: auto;
                        padding: 10px;">
                        <div class="col-12 text-center mt-2">
                            <h6 style="font-weight: bold ">เงื่อนไขในการเลือก</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12 ">
                                    <h6 style="font-weight: bold">วันที่</h6>
                                    <input type="checkbox" class="mr-2" id="AllDate" onclick="AllDate()" checked>ทั้งหมด
                                    <div class="row mt-3">
                                        <p style="max-width: 100px;min-width: 100px;" class="ml-3 pr-2 text-right">
                                            ตั้งแต่วันที่</p>
                                        <input class="form-control" type="date" value="" name="DateStart" id="DateStart"
                                            style="max-width: 180px;min-width: 180px;">
                                        <p style="max-width: 100px;min-width: 100px;" class="ml-3  pr-2 text-right">
                                            ถึงวันที่</p>
                                        <input class="form-control" type="date" value="" name="DateEnd" id="DateEnd"
                                            style="max-width: 180px;min-width: 180px;">
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-12">
                                    <h6 style="font-weight: bold">ใบ OR</h6>
                                    <input type="checkbox" class="mr-2" id="AllOrder" onclick="AllOrder()" checked>ทั้งหมด
                                    <div class="row mt-2">
                                        <p style="max-width: 100px;min-width: 100px;" class="ml-3  pr-2 text-right">จาก</p>

                                        <select class="form-control " id="SelectORStart" name="SelectOR"
                                        style="max-width: 480px;min-width: 480px;">
                                     <option></option>
                                     @foreach ($OR as $key => $item)
                                         <option value="{{$item->XVOrhDocNo}}"> {{$item->XVOrhDocNo}} : {{$item->XVCstName}}</option>
                                     @endforeach
                                 </select>
                                    </div>
                                    <div class="row mt-2">
                                        <p style="max-width: 100px;min-width: 100px;" class="ml-3  pr-2 text-right">ถึง</p>
                                        <select class="form-control " id="SelectOREnd" name="SelectOR"
                                        style="max-width: 480px;min-width: 480px;"
                                        >
                                     <option></option>
                                     @foreach ($OR as $key => $item)
                                     <option value="{{$item->XVOrhDocNo}}"> {{$item->XVOrhDocNo}} : {{$item->XVCstName}}</option>
                                     @endforeach
                                 </select>

                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row mt-1">

                            <div class="col-8 text-right">
                                <button class="btn btn-info bottom " style="vertical-align: bottom;" onclick="datareport()">
                                    export pdf</button>
                                <button class="btn btn-success bottom " style="vertical-align: bottom;" onclick="datareportexcel()">export
                                    excel</button>
                            </div>
                        </div>
                        <div  id="a">
                            <table id="example" ></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <input type="hidden" id="OrderStart">
    <input type="hidden" id="OrderEnd">
    <script src="//unpkg.com/xlsx/dist/xlsx.full.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            AllDate();
            AllOrder();

            const OrderStart =$('#SelectORStart').select2({
                placeholder: "กรุณาเลือกใบ OR",
                theme: 'bootstrap4',
            });
            const OrderEnd =$('#SelectOREnd').select2({
                placeholder: "กรุณาเลือกใบ OR",
                theme: 'bootstrap4',
            });
            OrderStart.on('select2:select', function (e) {
                var {id, text} = (e.params.data);
                $("#OrderStart").val(text.trim());
            });
            OrderEnd.on('select2:select', function (e) {
                var {id, text} = (e.params.data);
                $("#OrderEnd").val(text.trim());
            });
            Date.prototype.toDateInputValue = (function() {
                var local = new Date(this);
                local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
                return local.toJSON().slice(0, 10);
            });

            document.getElementById('DateStart').value = new Date().toDateInputValue();
            document.getElementById('DateEnd').value = new Date().toDateInputValue();

        })
    </script>

    <script>
         function excel()
        {
            var wb = XLSX.utils.table_to_book(document.getElementById('example'));
      XLSX.writeFile(wb, '305 รายงานการเบิกวัสดุแยกตามใบสั่งผลิต'+convertDateToLocale(new Date().toDateInputValue())+'.xlsx');
      return false;
        }
          function AllOrder() {
            var checkBox = document.getElementById("AllOrder");
            if (checkBox.checked == true) {
                document.getElementById('SelectORStart').disabled = true;
                document.getElementById('SelectOREnd').disabled = true;
            } else {
                document.getElementById('SelectORStart').disabled = false;
                document.getElementById('SelectOREnd').disabled = false;
            }
        }

        function AllDate() {
            var checkBox = document.getElementById("AllDate");
            if (checkBox.checked == true) {
                document.getElementById('DateStart').disabled = true;
                document.getElementById('DateEnd').disabled = true;
            } else {
                document.getElementById('DateStart').disabled = false;
                document.getElementById('DateEnd').disabled = false;
            }
        }


          function datareport() {
              var dataSet = [];
              let _token = $('meta[name="csrf-token"]').attr('content');
              const DateStart = document.getElementById('DateStart').value;
              const DateEnd = document.getElementById('DateEnd').value;
              const OrderStart = document.getElementById('SelectORStart').value;
              const OrderEnd = document.getElementById('SelectOREnd').value;
              const isAllTime = document.getElementById('AllDate').checked;
              const isAllOrder = document.getElementById('AllOrder').checked;
              //ShowValue
              const XVOrderStart = document.getElementById('OrderStart').value;
              const XVOrderEnd = document.getElementById('OrderEnd').value;

              //End Show Value
              let JsonFilter = {
                  DateStart,
                  DateEnd,
                  OrderStart: XVOrderStart,
                  OrderEnd: XVOrderEnd,
                  isAllTime,
                  isAllOrder,
              }
              $.ajax({
                  url: '{{ route('report.305.data') }}',
                  type: "POST",
                  data: {
                      _token: _token,
                      DateStart,
                      DateEnd,
                      OrderStart,
                      OrderEnd,
                      isAllTime,
                      isAllOrder,
                  },
                  success: function (result) {
                      console.log(result);
                      renderPdf(result, JsonFilter);
                  }
              });
          }
          function datareportexcel() {
              var dataSet = [];
              let _token = $('meta[name="csrf-token"]').attr('content');
              const DateStart = document.getElementById('DateStart').value;
              const DateEnd = document.getElementById('DateEnd').value;
              const OrderStart = document.getElementById('SelectORStart').value;
              const OrderEnd = document.getElementById('SelectOREnd').value;
              const isAllTime = document.getElementById('AllDate').checked;
              const isAllOrder = document.getElementById('AllOrder').checked;
              //ShowValue
              const XVOrderStart = document.getElementById('OrderStart').value;
              const XVOrderEnd = document.getElementById('OrderEnd').value;

              //End Show Value
              let JsonFilter = {
                  DateStart,
                  DateEnd,
                  OrderStart: XVOrderStart,
                  OrderEnd: XVOrderEnd,
                  isAllTime,
                  isAllOrder,
              }
              $.ajax({
                url: '{{ route('report.305.data') }}',
                  type: "POST",
                  data: {
                      _token: _token,
                      DateStart,
                      DateEnd,
                      OrderStart,
                      OrderEnd,
                      isAllTime,
                      isAllOrder,
                  },
                  success: function (result) {
                    console.log(result);
                    var dataSet = [];
                    var i = 0;
                    for (let index = 0; index < result.length; index++) {
                        for (let index2 = 0; index2 < result[index].OrderHD.length; index2++) {
                            for (let index3= 0; index3 < result[index].OrderHD[index2].OrderDT.length; index3++) {
                                var row = [
                            result[index].XVOrhDocNo,
                            result[index].OrderHD[index2].XDGihDocDate,
                            result[index].OrderHD[index2].XVGihDocNo,
                            result[index].OrderHD[index2].OrderDT[index3].xvmatcode,
                            result[index].OrderHD[index2].OrderDT[index3].xvmatname,
                            result[index].OrderHD[index2].OrderDT[index3].XVGidUnitName+'/'+result[index].OrderHD[index2].OrderDT[index3].XIGidFactor,
                            result[index].OrderHD[index2].OrderDT[index3].XIGidQtyOr,
                            result[index].OrderHD[index2].OrderDT[index3].XIGidQty,
                            ];
                            dataSet.push(row);
                            }
                     
                     
                        }
                       
                    }
                    $('table tbody').remove()

                    $('#example').DataTable({
                        "destroy": true,
                        paging: false,
                        "data": dataSet,
                        "columns": [

                            {
                                "title": "เลขที่ใบสั่งผลิต",

                            },
                            {
                                "title": "วันที่",

                            },
                            {   "title": "เลขที่ใบเบิกวัสดุ",

                            },
                            {   "title": "รหัสวัสดุ",

                            },
                            {   "title": "ชื่อวัสดุ",

},
                            {   "title": "หน่วย",

                            },
                             {   "title": "แนะนำ",

                            },
                            {   "title": "เบิก",

                            },

                        ]
                    });

                    if(isAllTime)
                    {

                        start = "ทั้งหมด";
                         end= "ทั้งหมด";
                    }
                    else
                    {
                        start = convertDateToLocale(DateStart);
                        end= convertDateToLocale(DateEnd);
                    }
                    if(isAllOrder)
                    {

                       orderstart = "ทั้งหมด";
                        orderend= "ทั้งหมด";
                    }
                    else
                    {
                       orderstart = OrderStart;
                       orderend= OrderEnd;
                    }

                    var htmltb = document.getElementById('example').innerHTML;
                    console.log(htmltb)
                    console.log(document.getElementsByTagName('thead')[0].innerHTML)
                    console.log(document.getElementsByTagName('tbody')[0].innerHTML)
                    document.getElementById('example').innerHTML =
                    "<thead>"+
                    "<tr><th  colspan='6' class='text-center' style='text-align:center;'>305 รายงานการเบิกวัสดุแยกตามใบสั่งผลิต </th></tr>"+
                    "<tr><th  colspan='6' class='text-center'>จากวันที่ "+start+" ถึงวันที่ "+end+ "</th></tr> "+
                    "<tr><th  colspan='6' class='text-center'>จากใบสั่งผลิตเลขที่"+orderstart+" ถึง "+orderend+"</th></tr>"+
                    document.getElementsByTagName('thead')[0].innerHTML+
                    "</thead>"+
                    document.getElementsByTagName('tbody')[0].innerHTML
                    ;
                     excel();
                    $('table tbody').remove()
                    document.getElementById('a').innerHTML =" <table id='example' ></table>"

                  }
              });
          }

    </script>
@endsection
<script src="{{ asset('js/pages/report/R305.js') }}"></script>
<script src="{{ asset('js/jquery-3.5.1.min.js') }}"></script>
<script src="{{ asset('js/gijgo.min.js') }}" defer type="text/javascript"></script>
<script src="{{ asset('js/select2.min.js') }}" defer></script>
<script src="{{ asset('js/sweetalert.min.js') }}"></script>
<script src="{{ asset('js/pdfmake.js') }}"></script>