@extends('layouts.master')
@section('content')
    <div class="card" style="max-height: 89vh;overflow: auto;">
        <div class="card-body">
            <div class="sticky">
                <div class="row ">
                    <div class="col-6">
                        <h5 style="font-weight: bold;">วัสดุ</h5>
                    </div>
                    <div class="col-6 text-right">
                        <a href="{{ route('mat.add') }}" class="btn btn-success"><i class="fas fa-plus-square"></i>
                            เพิ่มข้อมูล</a>

                        <button type="button" class="btn btn-success" data-toggle="modal"
                            data-target="#exampleModalCenter">
                            <i class="fas fa-download"></i> Import Excel
                        </button>
                    </div>

                </div>
                <hr>
            </div>
            <div class="row">
                <div class="col">
                    <h6>ตัวเลือกการค้นหา</h6>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <select class="form-control" id="SelectMatGroup" style="width:100%;" name="SelectMatGroup"
                        @if (isset($isMultiple) && $isMultiple == true) multiple @endif @if (isset($isRequired) && $isRequired == true) required @endif
                        @if (isset($isReadOnly) && $isReadOnly == true) readonly @endif>
                        <option></option>
                        @foreach ($oMatGroup as $key => $item)
                            <option @if (isset($oldValue) && $oldValue == $item->$pk) selected @endif value="{{ $item->xvmgpcode }}">
                                {{ $item->xvmgpcode }} : {{ $item->xvmgpname }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col">
                    @component('Components.Material_Type',
                        ['isRequired' => true, 'oldValue' => isset($oldHD->xvmtycode) ? $oldHD->xvmtycode : ''])
                    @endcomponent
                </div>
                <div class="col">
                    <button class="btn" id='oubtsearch' onclick="search()">ค้นหา</button>
                    <button class="btn" id='oubtsearch' onclick="searchall()">ทั้งหมด</button>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-12 table-responsive ">
                    <table id="tb_mat" class="table table-striped mt-5">
                        <thead class="thead-light">
                            <tr>
                                <td class="text-left">ลำดับ</td>
                                <td class="text-left" style="width:10%;">เลขที่วัสดุ</td>
                                <td class="text-left" style="width:10%;">Item ID</td>
                                <td class="text-left" style="width:25%;">ชื่อวัสดุ</td>
                                <td class="text-left" style="width:10%;">กลุ่มวัสดุ</td>
                                <td class="text-left" style="width:10%;">ประเภทวัสดุ</td>
                                <td class="text-left" style="width:5%;">สถานะ</td>
                                <td class="text-center" style="width:10%;">ผู้แก้ไขล่าสุด</td>
                                <td class="text-center" style="width:10%;">เวลาแก้ไขล่าสุด</td>
                                <td class="text-center" style="width:5%;">แก้ไข</td>
                                <td class="text-center"style="width:5%;">ความเคลื่อนไหววัสดุ</td>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($HD as $key => $item)
                                <tr>
                                    <td class="text-left">{{ $key += 1 }}</td>
                                    <td class="text-left">{{ $item->xvmatcode }}</td>
                                    <td class="text-left">{{ $item->xvmatid }}</td>
                                    <td class="text-left">{{ $item->xvmatname }}</td>
                                    <td class="text-left">{{ $item->xvmgpname }}</td>
                                    <td class="text-left">{{ $item->xvmtyname }}</td>
                                    <td class="text-left">
                                        @switch(  $item->xbisactive)
                                            @case(1) ใช้งาน @break
                                            @default ไม่ใช้งาน
                                        @endswitch
                                    </td>
                                    <td class="text-left">{{ $item->XVWhoEdit }}</td>
                                    <td class="text-left">{{ $item->XTWhenEdit }}</td>
                                    <td class="text-center" id="edit">
                                        <a href="{{ route('mat.edit', $item->xvmatcode) }}" class="btn-sm btn-info"><i
                                                class="fas fa-edit fa-1x"></i></a>
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ route('stk.index', ['xvmatcode' => $item->xvmatcode]) }}"
                                            class="btn-sm btn-success" target="_blank"><i class="fas fa-store"></i></a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="msg" value="{{ session()->get('msg') }}">
    <div class="modal fade " id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Import Excell</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Upload</span>
                        </div>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="inputGroupFile01"
                                accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                onchange="loadImageFile()">
                            <label class="custom-file-label" for="inputGroupFile01" id="labelfile">Choose file</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="F_importExcell()">อัปโหลด</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
                </div>
            </div>
        </div>
    </div>
@endsection
<style>
    div.sticky {
        position: sticky;
        top: 0;
        background-color: #ffffff;
        padding-top: 8px;
        z-index: 100;
    }

    #tb_mat thead {
        font-weight: bold;
    }

    #tb_mat tbody {
        font-size: 14px;
    }

    #tb_mat tbody tr:hover {
        background-color: azure;
    }

    #tb_mat tbody td {
        height: 35px;
        vertical-align: middle;
        cursor: pointer;
    }

    #tb_mat_filter {
        margin-bottom: 1cm;
        margin-top: 0.3cm;
    }
</style>
<style>
    .select2-results__option[aria-selected=true] {
        display: none;
    }

    .select2-results__option--selected {
        display: none;
    }

    .select2-selection__choice {
        display: none;
    }

    /*Select2 ReadOnly Start*/
    select[readonly].select2-hidden-accessible+.select2-container {
        pointer-events: none;
        touch-action: none;
    }

    select[readonly].select2-hidden-accessible+.select2-container .select2-selection {
        background: #eee;
        box-shadow: none;
    }

    select[readonly].select2-hidden-accessible+.select2-container .select2-selection__arrow,
    select[readonly].select2-hidden-accessible+.select2-container .select2-selection__clear {
        display: none;
    }
</style>
<script src="{{ asset('js/jquery-3.5.1.min.js') }}"></script>
<script src="{{ asset('js/sweetalert.min.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/pages/po/pdf.js') }}"></script>
<link href="{{ asset('css/select2.min.css') }}" rel="stylesheet" />
<script src="{{ asset('js/select2.min.js') }}" defer></script>
<link rel="stylesheet" href="{{ asset('css/select2-bootstrap4.min.css') }}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
<script>
    // renderPdf();
    var dataexceall;
    $(document).ready(function() {



        if ($('input[name="msg"]').val() == 'success') {
            swal("บันทึกข้อมูลเรียบร้อย", "คลิก ตกลง", "success");
        }
        if ($('input[name="msg"]').val() == 'warning') {
            swal('มีรหัส Material นี้แล้ว', "กรุณาตั้งรหัส Material ใหม่", "warning")
        }
        if ($('input[name="msg"]').val() == 'error_duplicate') {
            swal('มีรหัส Unit นี้แล้ว', "กรุณาตั้งรหัส Unit ใหม่", "warning")
        }
        if ($('input[name="msg"]').val() == 'NoDataFound') {
            swal('กรุณาเลือกประเภท Unit ', "กรุณาเลือกประเภท Unit ของ Material", "warning")
        }
        if ($('input[name="msg"]').val() == 'NoDataFound_Factor') {
            swal('กรุณากรอกจำนวนสินค้าของประเภท Unit', "กรุณากรอกจำนวนสินค้าของประเภท Unit", "warning")
        }
        // New
        if ($('input[name="msg"]').val() == 'error_notfound') {
            swal('ไม่พบข้อมูล', "ไม่พบข้อมูลรายการแก้ไขที่เลือก", "warning")
        }

        $('#tb_mat').DataTable({
            "language": {
                "search": "ค้นหา"
            },
            'columnDefs': [{
                    "targets": 6, // your case first column
                    "className": "text-center",

                },
                {
                    "targets": 7,
                    "className": "text-center",
                }
            ]
        });
    })

    function loadImageFile() {
        var uploadImage = document.getElementById("inputGroupFile01");
        console.log(uploadImage.files.length);
        //check and retuns the length of uploded file.
        if (uploadImage.files.length === 0) {
            return;
        } else {
            document.getElementById("labelfile").innerHTML = uploadImage.files[0].name;

        }

        //Is Used for validate a valid file.

    }

    function setData(xvpdtcode, xvmatname) {
        $('#modal-form-material-mat input[name="xvpdtcode"]').val(xvpdtcode)
        $('#modal-form-material-mat .modal-title').text('เพิ่ม หน่วยนับ Material รหัส ' + xvpdtcode);
    }

    function F_importExcell() {




        const inputGroupFile01 = document.getElementById('inputGroupFile01');
        if (inputGroupFile01.files.length > 0) {


            var reader = new FileReader();
            reader.readAsArrayBuffer(inputGroupFile01.files[0]);
            reader.onload = function() {
                var data = new Uint8Array(reader.result);
                var work_book = XLSX.read(data, {
                    type: 'array'
                });
                var sheet_name = work_book.SheetNames;
                var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {
                    header: 0
                });

                let name = $("input[name=name]").val();
                let email = $("input[name=email]").val();
                let mobile_number = $("input[name=mobile_number]").val();
                let message = $("input[name=message]").val();
                let _token = $('meta[name="csrf-token"]').attr('content');
                var turl = "