@php
use App\Models\Permission;
@endphp
@extends('layouts.main')
@section('title')
<title id="pageTitle">PIM | Data Monitoring Purchase Request</title>
@endsection

@section('headertitle')
<h1>Data Monitoring Purchase Request</h1>
@endsection

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('dashboard.home') }}">Home</a></li>
<li class="breadcrumb-item">Monitoring Purchase Request</li>
<li class="breadcrumb-item active">Monitoring</li>
@endsection

{{-- @section('cssatas')
    <style>
        img .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }
    </style>
@endsection --}}

@section('content')
<!-- /.row -->
<div class="row">
    <!-- /.col -->
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Monitoring Purchase Request</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <div id="showinfo"></div>
                @if (session('message'))
                <div class="alert alert-success">
                    {{ session('message') }}
                </div>
                @endif
                <div class="row mb-0">
                    <div class="col-md-3" style="margin-bottom: 23px;">
                        <!-- <a class="btn_changepassword btn btn-primary btn-sm" data-toggle="modal" data-target="#modal_container"><i class="fas fa-user-edit">&nbsp Edit</i></a> -->
                        <button type="submit" class="btn btn-primary btn-sm" id="btn_filter_monitoring" data-toggle="modal" data-target="#modal_container"><i class="fas fa-filter"> Filter</i></button>
                    </div>
                </div>
                <!-- Modal -->
                <div class="modal fade" id="modal_container" tabindex="-1" role="dialog" aria-labelledby="modal_containerlabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
                        <div class="modal-content" id="modal_content">
                            <div class="overlay">
                                <i class="fas fa-2x fa-sync fa-spin"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <h1 id="judul_ou" style="text-align: center;">All Data</h1>
                <!-- <input type="datetime-local" id="datetime" name="datetime"> -->
                <table id="tbl_request" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <!-- <th>ENTITY</th> -->
                            <th>NO PR</th>
                            <th>PRDATE</th>
                            <th>APPROVED AT</th>
                            <th>ORGANIZATION NAME</th>
                            <th>CATEGORY</th>
                            <th>DESCRIPTION</th>
                            <th>NEEDED AT</th>
                            <th>ITEM CODE</th>
                            <th>QUANTITY</th>
                            <th>BUYER</th>
                            <th>REQUEST BY</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>
<!-- /.row -->
@endsection

@section('jsbawah')
<script defer>
    document.addEventListener('DOMContentLoaded', (event) => {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var lastDay = new Date(year, month, 0).getDate();
        datetime_approved_f = year + '-' + String(month).padStart(2, '0') + '-' + '01';
        datetime_approved_t = year + '-' + String(month).padStart(2, '0') + '-' + String(lastDay).padStart(2, '0');
        console.log(datetime_approved_t);
        var tblUser = $("#tbl_request").DataTable({
            "dom": 'Bfrtip',
            "paging": true,
            "pageLength": 20,
            "responsive": true,
            "lengthChange": true,
            "autoWidth": false,
            "deferRender": true,
            "processing": true,
            "ajax": {
                "url": '{{ route("pr.getmonitoring") }}',
                "type": "POST",
                "data": {
                    _token: "{{ csrf_token() }}",
                    p_APPROVED_DATE_F: datetime_approved_f,
                    p_APPROVED_DATE_T: datetime_approved_t,

                },
                "xhrFields": {
                    withCredentials: true
                }
            },
            "columns": [
                // {
                //     "data": "entity",
                //     render: function(data, type, row) {
                //         if (row.entity === 'PT. PIM PHARMACEUTICALS') {
                //             return '<img src="{{ asset('assets/dist/img/pimXLOGO.png') }}" alt="PIM Logo" style="width: 50px; height: 50px;">';
                //         }
                //     }
                // },
                {
                    "data": "prno"
                }, {
                    "data": "prdate"
                }, {
                    "data": "tgl_approve"
                }, {
                    "data": "organization_name"
                }, {
                    "data": "cat_meaning"
                }, {
                    "data": "item_description"
                }, {
                    "data": "need_by_date"
                }, {
                    "data": "item_code"
                }, {
                    "data": "quantity"
                }
                // , {
                //     "data": "note_to_receiver"
                // }
                , {
                    "data": "buyer_name"
                    // render: function(data, type, row) {
                    //     if (row.entity === 'PT. PIM PHARMACEUTICALS') {
                    //         return row.buyer_name + ' (' + row.buyer_id + ')';
                    //     }
                    // }
                }, {
                    "data": "requester"
                }
            ],
            select: true,
            "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
        }).buttons().container().appendTo('#tbl_request_wrapper .col-md-6:eq(0)');


    });
    const btnFilterMonitoring = document.querySelector('#btn_filter_monitoring');
    btnFilterMonitoring.addEventListener('click', filtermonitoring);

    function filtermonitoring() {
        $.ajax({
            type: 'POST',
            url: '{{ route("pr.filtermonitoring") }}',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function(data) {
                $("#modal_content").html(data.msg);
            },
            error: function(data, textStatus, errorThrown) {
                console.log(data);
            }
        });
    };

    function actionGetFilter() {
        let ou = $("#ou").val();
        let cbo_ApproveDate = $("#cbo_ApproveDate").val();
        let data_buyer = $("#data_buyer").val();

        let datetime_approved_f = $("#datetime_approved_f").val();
        let datetime_approved_t = $("#datetime_approved_t").val();
        if (datetime_approved_f > datetime_approved_t) {
            alert('Data yang dipilih INVALID!');
        } else {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var lastDay = new Date(year, month, 0).getDate(); // 0th day of the next month is the last day of the current month
            var day = '01';
            if (cbo_ApproveDate === 'bulan_ini') {
                // alert('bulan ini ni bos');
                datetime_approved_t = year + '-' + String(month).padStart(2, '0') + '-' + String(lastDay).padStart(2, '0');
                datetime_approved_f = year + '-' + String(month).padStart(2, '0') + '-' + day;
            }
            let ouText = $("#ou option:selected").text();
            // var judul2 = document.getElementById("judul_ou2");
            // judul2.innerHTML = ouText;

            var pageTitle = document.getElementById("pageTitle");
            pageTitle.innerHTML = ouText + " | Data Monitoring Purchase Request";
            var judul = document.getElementById("judul_ou");
            judul.innerHTML = ouText;
            if (ou == 'semua') {
                ou = null;
            }
            if (data_buyer == 'semua') {
                data_buyer = null;
            }
            $("#tbl_request").DataTable().context[0].ajax.data._token = "{{ csrf_token() }}";
            $("#tbl_request").DataTable().context[0].ajax.data.ou = ou;
            $("#tbl_request").DataTable().context[0].ajax.data.data_buyer = data_buyer;
            $("#tbl_request").DataTable().context[0].ajax.data.datetime_approved_t = datetime_approved_t;
            $("#tbl_request").DataTable().context[0].ajax.data.datetime_approved_f = datetime_approved_f;
            $("#tbl_request").DataTable().clear().draw();
            $("#tbl_request").DataTable().ajax.url('{{ route("pr.getfiltermonitoring") }}').load();
            // 
        }
    };
</script>
@endsection