@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;
    $Material = DB::table('tmstmmaterial')
        ->orderBy('xvmatcode', 'asc')
        ->get()
        ->toArray();
    $Materialgroup = DB::table('TMstMMatGroup')
        ->orderBy('xvmgpcode', 'asc')
        ->get()
        ->toArray();
        $tmstmsupplier = DB::table('tmstmsupplier')
        ->orderBy('XVSplCode', 'asc')
        ->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">วัสดุ</h6>
                                    <input type="checkbox" class="mr-2" id="AllMat" onclick="AllMat()" 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="SelectMaterialStart" name="SelectMaterial"
                                            style="max-width: 480px;min-width: 480px;">
                                            <option></option>
                                            @foreach ($Material as $key => $item)
                                                <option value="{{ $item->xvmatcode }}"> {{ $item->xvmatcode }} : {{ $item->xvmatname }}</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="SelectMaterialEnd" name="SelectMaterial"
                                            style="max-width: 480px;min-width: 480px;">
                                            <option></option>
                                            @foreach ($Material as $key => $item)
                                                <option value="{{ $item->xvmatcode }}"> {{ $item->xvmatcode }} : {{ $item->xvmatname }}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                </div>

                            </div>
                            <div class="row mt-4">
                                <div class="col-12">
                                    <h6 style="font-weight: bold">กลุ่มวัสดุ</h6>
                                    <input type="checkbox" class="mr-2" id="AllMatGroup" onclick="AllMatGroup()"
                                        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="SelectMaterialGroupStart" name="SelectMaterial"
                                            style="max-width: 480px;min-width: 480px;">
                                            <option></option>
                                            @foreach ($Materialgroup as $key => $item)
                                                <option value="{{ $item->xvmgpcode }}"> {{ $item->xvmgpcode }} : {{ $item->xvmgpname }}</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="SelectMaterialGroupEnd" name="SelectMaterial"
                                            style="max-width: 480px;min-width: 480px;">
                                            <option></option>
                                            @foreach ($Materialgroup as $key => $item)
                                                <option value="{{ $item->xvmgpcode }}"> {{ $item->xvmgpcode }} : {{ $item->xvmgpname }}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                </div>

                            </div>

                        </div>
                        <div class="row mt-4">
                            <div class="col-12">
                                <h6 style="font-weight: bold">ผู้จำหน่าย</h6>
                                <input type="checkbox" class="mr-2" id="AllSPL" onclick="AllSPL()"
                                    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="SelectSPLStart" name="SelectSPLStart"
                                        style="max-width: 480px;min-width: 480px;">
                                        <option></option>
                                        @foreach ($tmstmsupplier as $key => $item)
                                            <option value="{{ $item->XVSplCode }}"> {{ $item->XVSplCode }} : {{ $item->XVSplName }}</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="SelectSPLEnd" name="SelectSPLEnd"
                                        style="max-width: 480px;min-width: 480px;">
                                        <option></option>
                                        @foreach ($tmstmsupplier as $key => $item)
                                            <option value="{{ $item->XVSplCode }}"> {{ $item->XVSplCode }} : {{ $item->XVSplName }}</option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>



                    </div>

                        <div class="row mt-2">
                            <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 style="" id="a"> {{-- --}}
                            <table id="example"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="MatStart">
    <input type="hidden" id="MatEnd">

    <input type="hidden" id="MatGroupStart">
    <input type="hidden" id="MatGroupEnd">

    <input type="hidden" id="SPLStart">
    <input type="hidden" id="SPLEnd">
    </div>
    <script src="{{ asset('js/pages/excel/table2excel.min.js') }}"></script>
    <script src="//unpkg.com/xlsx/dist/xlsx.full.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            AllMat();
            AllDate();
            AllMatGroup();
            AllSPL();
            const MatStart = $('#SelectMaterialStart').select2({
                placeholder: "กรุณาเลือกวัสดุ",
                theme: 'bootstrap4',
            });
            const MatEnd = $('#SelectMaterialEnd').select2({
                placeholder: "กรุณาเลือกวัสดุ",
                theme: 'bootstrap4',
            });

            const MatGroupStart = $('#SelectMaterialGroupStart').select2({
                placeholder: "กรุณาเลือกกลุ่มวัสดุ",
                theme: 'bootstrap4',
            });

            const MatGroupEnd = $('#SelectMaterialGroupEnd').select2({
                placeholder: "กรุณาเลือกกลุ่มวัสดุ",
                theme: 'bootstrap4',
            });

            const SPLStart = $('#SelectSPLStart').select2({
                placeholder: "กรุณาเลือกกลุ่มผู้จำหน่าย",
                theme: 'bootstrap4',
            });

            const SPLEnd = $('#SelectSPLEnd').select2({
                placeholder: "กรุณาเลือกกลุ่มผู้จำหน่าย",
                theme: 'bootstrap4',
            });

            SPLStart.on('select2:select', function(e) {
                var {
                    id,
                    text
                } = (e.params.data);
                $("#SPLStart").val(text.trim());
            });

            SPLEnd.on('select2:select', function(e) {
                var {
                    id,
                    text
                } = (e.params.data);
                $("#SPLEnd").val(text.trim());
            });

            MatStart.on('select2:select', function(e) {
                var {
                    id,
                    text
                } = (e.params.data);
                $("#MatStart").val(text.trim());
            });
            MatEnd.on('select2:select', function(e) {
                var {
                    id,
                    text
                } = (e.params.data);
                $("#MatEnd").val(text.trim());
            });
            MatGroupStart.on('select2:select', function(e) {
                var {
                    id,
                    text
                } = (e.params.data);
                $("#MatGroupStart").val(text.trim());
            });
            MatGroupEnd.on('select2:select', function(e) {
                var {
                    id,
                    text
                } = (e.params.data);
                $("#MatGroupEnd").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, 'sample.xlsx');
            return false;
        }

        function AllMat() {
            var checkBox = document.getElementById("AllMat");
            if (checkBox.checked == true) {
                document.getElementById('SelectMaterialStart').disabled = true;
                document.getElementById('SelectMaterialEnd').disabled = true;
            } else {
                document.getElementById('SelectMaterialStart').disabled = false;
                document.getElementById('SelectMaterialEnd').disabled = false;
            }
        }

        function AllMatGroup() {
            var checkBox = document.getElementById("AllMatGroup");
            if (checkBox.checked == true) {
                document.getElementById('SelectMaterialGroupStart').disabled = true;
                document.getElementById('SelectMaterialGroupEnd').disabled = true;
            } else {
                document.getElementById('SelectMaterialGroupStart').disabled = false;
                document.getElementById('SelectMaterialGroupEnd').disabled = false;
            }
        }

        function AllSPL() {
            var checkBox = document.getElementById("AllSPL");
            if (checkBox.checked == true) {
                document.getElementById('SelectSPLStart').disabled = true;
                document.getElementById('SelectSPLEnd').disabled = true;
            } else {
                document.getElementById('SelectSPLStart').disabled = false;
                document.getElementById('SelectSPLEnd').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 getTextStockCardByCode(code) {
            switch (code) {
                case '0':
                    return "ยอดยกมา";
                    break;
                case '1':
                    return "รับเข้า";
                    break;
                case '2':
                    return "เบิกออก";
                    break;
                case '3':
                    return "ขาย";
                    break;
                case '4':
                    return "คืน";
                case '5':
                    return "ปรับปรุง ( เพิ่ม )";
                    break;
                case '6':
                    return "ปรับปรุง ( ลบ )";
                    break;
                default:
                    return " ";
                    break;
            }
        }

        function calculateStockByCode(code, tempQty, qtystk) {
            switch (code) {
                case '1':
                case '5':
                    return tempQty + parseFloat(qtystk)
                case '2':
                case '6':
                    return tempQty - parseFloat(qtystk)
                case '0':
                    return qtystk
                default:
                    return tempQty;
            }
        }

        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 MatStart = document.getElementById('SelectMaterialStart').value;
            const MatEnd = document.getElementById('SelectMaterialEnd').value;

            const MatGroupStart = document.getElementById('SelectMaterialGroupStart').value;
            const MatGroupEnd = document.getElementById('SelectMaterialGroupEnd').value;

            const SPLStart = document.getElementById('SelectSPLStart').value;
            const SPLEnd = document.getElementById('SelectSPLEnd').value;

            const isAllTime = document.getElementById('AllDate').checked;
            const isAllMat = document.getElementById('AllMat').checked;
            const isAllMatGroup = document.getElementById('AllMatGroup').checked;
            const isAllSPL = document.getElementById('AllSPL').checked;
            //ShowValue
            const XVMatStart = document.getElementById('MatStart').value;
            const XVMatEnd = document.getElementById('MatEnd').value;

            const XVSPLStart = document.getElementById('SPLStart').value;
            const XVSPLEnd = document.getElementById('SPLEnd').value;

            const XVMatGroupStart = document.getElementById('MatGroupStart').value;
            const XVMatGroupEnd = document.getElementById('MatGroupEnd').value;

            //End Show Value
            let JsonFilter = {
                DateStart,
                DateEnd,
                MatStart: XVMatStart,
                MatEnd: XVMatEnd,
                MatGroupStart: XVMatGroupStart,
                MatGroupEnd: XVMatGroupEnd,
                isAllTime,
                isAllMat,
                isAllMatGroup,
                SPLStart: XVSPLStart,
                SPLEnd: XVSPLEnd,
                isAllSPL
            }

            $.ajax({
                url: '{{ route('report.308.data') }}',
                type: "POST",
                data: {
                    _token: _token,
                    DateStart,
                    DateEnd,
                    MatStart,
                    MatEnd,
                    MatGroupStart,
                    MatGroupEnd,
                    isAllTime,
                    isAllMat,
                    isAllMatGroup,
                    SPLStart,
                    SPLEnd,
                    isAllSPL
                },
                success: function(result) {
                    console.log(result);
                    renderPdf(result, JsonFilter);
                }
            });
        }

        function datareportexcel() {
            var dataSet = [];
            let _token = $('meta[name="csrf-token"]').attr('content');
            var DateStart = document.getElementById('DateStart').value;
            var DateEnd = document.getElementById('DateEnd').value;
            var MatStart = document.getElementById('SelectMaterialStart').value;
            var MatEnd = document.getElementById('SelectMaterialEnd').value;

            var MatGroupStart = document.getElementById('SelectMaterialGroupStart').value;
            var MatGroupEnd = document.getElementById('SelectMaterialGroupEnd').value;

            var SPLStart = document.getElementById('SelectSPLStart').value;
            var SPLEnd = document.getElementById('SelectSPLEnd').value;

            var isAllTime = document.getElementById('AllDate').checked;
            var isAllMat = document.getElementById('AllMat').checked;
            var isAllMatGroup = document.getElementById('AllMatGroup').checked;
            var isAllSPL = document.getElementById('AllSPL').checked;
            //ShowValue
            var XVMatStart = document.getElementById('MatStart').value;
            var XVMatEnd = document.getElementById('MatEnd').value;

            var XVSPLStart = document.getElementById('SPLStart').value;
            var XVSPLEnd = document.getElementById('SPLEnd').value;

            var XVMatGroupStart = document.getElementById('MatGroupStart').value;
            var XVMatGroupEnd = document.getElementById('MatGroupEnd').value;

            //End Show Value
            let JsonFilter = {
                DateStart,
                DateEnd,
                MatStart: XVMatStart,
                MatEnd: XVMatEnd,
                isAllTime,
                isAllMat,
                isAllMatGroup,
            }
            $.ajax({
                url: '{{ route('report.308.dataexcel') }}',
                type: "POST",
                data: {
                    _token: _token,
                    DateStart,
                    DateEnd,
                    MatStart,
                    MatEnd,
                    isAllTime,
                    isAllMat,
                    isAllMatGroup,
                    MatGroupStart,
                    MatGroupEnd,
                    SPLStart,
                    SPLEnd,
                    isAllSPL
                },
                success: function(result) {
                    console.log(result);
                    var dataSet = [];
                    for (let index = 0; index < result.length; index++) {
                        var tempQty = 0;

                                var row = [
                                    result[index].xvmatcode,
                                    result[index].xvmatname,
                                    result[index].R,
                                    result[index].U,
                                    result[index].B,
                                ];
                                dataSet.push(row);
                            }
                    console.log(dataSet);
                    $('table tbody').remove()
                    $('#example').DataTable({
                        "destroy": true,
                        paging: false,
                        "data": dataSet,
                        "columns": [{
                                "title": "Mat No.",
                            },
                            {
                                "title": "Discription",
                            },
                            {
                                "title": "รับเข้า",
                            },
                            {
                                "title": "เบิกจ่าย",
                            },
                            {
                                "title": "คงเหลือ",
                            },
                        ]
                    });

                    if (isAllTime) {

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

                        matstart = "ทั้งหมด";
                        matend = "ทั้งหมด";
                    } else {
                        matstart = MatStart;
                        matend = MatEnd;
                    }
                      if (isAllSPL) {

                        SPLStart = "ทั้งหมด";
                        SPLEnd = "ทั้งหมด";
                    }

                    var htmltb = document.getElementById('example').innerHTML;

                    document.getElementById('example').innerHTML =
                        "<thead>" +
                        "<tr><th  colspan='6' class='text-center' style='text-align:center;'>304 รายงานความเคลื่อนไหวของวัสดุ </th></tr>" +
                        "<tr><th  colspan='6' class='text-center'>จากวันที่ " + start + " ถึงวันที่ " + end +
                        "</th></tr> " +
                        "<tr><th  colspan='6' class='text-center'>จากวัสดุ" + matstart + " ถึง " + matend +
                        "</th></tr>" +
                        "<tr><th  colspan='6' class='text-center'>จากผู้จำหน่าย" + SPLStart + " ถึง " + SPLEnd +
                        "</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/R308.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>