@php
use App\Models\Permission;
@endphp
@extends('layouts.main')
@section('title')
<title id="pageTitle">ALL DATA | Data Miss Match PR</title>
@endsection

@section('headertitle')
<h1>Data Miss Match PR</h1>
@endsection

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('dashboard.home') }}">Home</a></li>
<li class="breadcrumb-item">Miss Match PR</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">Miss Match PR</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_detail 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_missMatch" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <!-- <th>ENTITY</th> -->
                            <th>ITEM CODE</th>
                            <th>MASTER DESCRIPTION</th>
                            <th>ADD BY</th>
                            <th>TOTAL MISS MATCH</th>
                            <th>ACTION</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>
<!-- /.row -->
@endsection

@section('jsbawah')
<script defer>
    document.addEventListener('DOMContentLoaded', (event) => {
        var tblUser = $("#tbl_missMatch").DataTable({
            "dom": 'Bfrtip',
            "paging": true,
            "pageLength": 20,
            "responsive": true,
            "lengthChange": true,
            "autoWidth": false,
            "deferRender": true,
            "processing": true,
            "ajax": {
                "url": '{{ route("pr.getnotmatchPR") }}',
                "type": "POST",
                "data": {
                    _token: "{{ csrf_token() }}"
                },
                "xhrFields": {
                    withCredentials: true
                }
            },
            "columns": [
                // {
                //     "data": "item_id"
                // },
                {
                    "data": "item_code"
                },
                {
                    "data": "msib_description"
                },
                {
                    "data": "add_by"
                },
                {
                    "data": "mismatch_count"
                },
                {
                    "data": null,
                    render: function(data, type, row) {
                        return '<a class="btn_detail btn btn-primary btn-sm" data-toggle="modal" data-target="#modal_container"><i class="fas fa-search-plus">&nbsp Detail</i></a>';
                    }
                }
            ],
            "order": [
                [4, "desc"]
            ],
            select: true,
            "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
        }).buttons().container().appendTo('#tbl_missMatch_wrapper .col-md-6:eq(0)');
    });
    $('#tbl_missMatch').on('click', '.btn_detail', function() {
        let row = $(this).closest('tr');
        let data = $("#tbl_missMatch").DataTable().row(row).data();
        let item_id = data.item_id;
        let created_by = data.created_by;
        let ou = data.ou;
        // alert(ou);
        detailMissMatch(item_id, created_by, ou);
    });

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

    $('#modal_container').on('hidden.bs.modal', function() {
        var pageTitle = document.getElementById("pageTitle");
        pageTitle.innerHTML = "All Data | Data Miss Match PR";
    });
</script>
@endsection