@php
use App\Models\Permission;
@endphp
@extends('layouts.main')
@section('title')
<title id="pageTitle">PURCHASE REGISTER REPORT</title>
@endsection

@section('headertitle')
<h1>Record Pembelian</h1>
@endsection

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

@section('cssatas')
<style>
    #tbl_CrossTabPembelian {
        width: 100%;
        /* border-collapse: collapse; */
    }

    #tbl_CrossTabPembelian th,
    #tbl_CrossTabPembelian td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
        vertical-align: top;
    }

    #tbl_CrossTabPembelian td.highlight {
        background-color: #7CFC00;
        font-size: 10px;
        /* Warna kuning */
    }

    #tbl_CrossTabPembelian th {
        text-align: center;
    }

    .date-column {
        width: 5%;
        /* Menetapkan lebar kolom tanggal */
        text-align: center;
        /* Mengatur teks menjadi tengah */
        font-size: 12px;
        /* Sesuaikan ukuran font */
    }

    .table-responsive {
        overflow-x: auto;
        max-width: 100%;
    }

    .table th,
    .table td {
        padding: 0.5rem;
        border-top: 1px solid #dee2e6;
    }
</style>
@endsection

@section('content')
<!-- /.row -->
<div class="row">
    <!-- /.col -->
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Record Pembelian</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> -->
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <select class="form-control select2bs4" id="cbo_RecordPembelian" style="width: 100%;">
                                <option value="bulan_ini">Per-Bulan Ini</option>
                                <option value="berdasarkan_tanggal">Tanggal</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <button type="submit" class="btn btn-primary" id="btn_recordPembelian">Submit</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group cbo-berdasarkan-periode-awal" id="cbo_berdasarkan_tanggal_awal">
                            <div class="input-group">
                                <input type="date" class="form-control float-right" id="dtp_tanggal_f">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1 text-center d-flex align-items-center justify-content-center">
                        <span id="to">To</span>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group cbo-berdasarkan-periode-akhir" id="cbo_berdasarkan_tanggal_akhir">
                            <div class="input-group">
                                <input type="date" class="form-control float-right" id="dtp_tanggal_t">
                            </div>
                        </div>
                    </div>
                </div>

                <h2 id="periode_crossTab" style="text-align: center;"></h2>
                <div class="table-responsive">
                    <table id="tbl_CrossTabPembelian" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Type</th>
                                <th>Desc</th>
                                @for ($i = 1; $i <= 12; $i++) <th scope="col" class="date-column">{{ $i }}</th>
                                    @endfor
                            </tr>
                        </thead>
                    </table>
                </div>

                <h2 id="periode_pembelian" style="text-align: center;"></h2>
                <table id="tbl_RecordPembelian" class="table table-bordered table-striped">
                    <thead>
                    </thead>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>
<!-- /.row -->

<h1 hidden id="bulanini">{{$today}}</h1>
<h1 hidden id="1bulan_terakhir">{{$lastMonthFirstDay}}</h1>
<h1 hidden id="12bulan_terakhir">{{$bulan12berjalan1day}}</h1>
@endsection

@section('jsbawah')
<script defer>
    // var Bulan1Terakhir = $("#1bulan_terakhir").text();
    // var Bulan12Terakhir = $("#12bulan_terakhir").text();
    // var BulanSekarang = $("#bulanini").text();

    document.addEventListener('DOMContentLoaded', (event) => {

        let bulan12terakhir = new Date();
        bulan12terakhir.setMonth(bulan12terakhir.getMonth() - 11);
        bulan12terakhir.setDate(1);
        bulan12terakhir.setHours(0, 0, 0, 0);

        let bulan1terakhir = new Date();
        bulan1terakhir.setMonth(bulan1terakhir.getMonth() - 1);
        bulan1terakhir.setDate(1);
        bulan1terakhir.setHours(0, 0, 0, 0);

        let bulanSekarang = new Date();
        bulanSekarang.setHours(0, 0, 0, 0);

        let format12bulan = formatDateOnly(bulan12terakhir);
        let format1bulan = formatDateOnly(bulan1terakhir);
        let formatSekarang = formatDateOnly(bulanSekarang);

        let Bulan12Terakhir = formatDate(bulan12terakhir);
        let Bulan1Terakhir = formatDate(bulan1terakhir);
        let BulanSekarang = formatDate(bulanSekarang);

        let periode_crossTab = document.getElementById("periode_crossTab");
        periode_crossTab.innerHTML = format12bulan + " - " + formatSekarang;

        let periode_pembelian = document.getElementById("periode_pembelian");
        periode_pembelian.innerHTML = format1bulan + " - " + formatSekarang;

        $('.select2bs4').select2({
            theme: 'bootstrap4'
        });

        $("div#cbo_berdasarkan_tanggal_awal").hide();
        $("div#cbo_berdasarkan_tanggal_akhir").hide();
        $("#to").hide();
        let tblCrossTabPembelian = $("#tbl_CrossTabPembelian").DataTable({
            "dom": 'Bfrtip',
            "paging": true,
            "pageLength": 20,
            "responsive": false,
            "lengthChange": true,
            "autoWidth": false,
            "deferRender": true,
            "processing": true,
            "ajax": {
                "url": '{{ route("pembelian.GetCrossTabPembelian") }}',
                "type": "POST",
                "data": {
                    _token: "{{ csrf_token() }}",
                    RECEIPT_DATE_F: Bulan12Terakhir,
                    RECEIPT_DATE_T: BulanSekarang,
                    BULAN12_TERAKHIR_UNTUK_DATE: Bulan12Terakhir
                },
                "dataSrc": function(json) {
                    // Update column titles dynamically
                    json.bulan_tahun.forEach(function(bulan, index) {
                        $("#tbl_CrossTabPembelian thead th").eq(index + 2).text(bulan); // Assuming first two columns are static
                    });
                    return json.data;
                },
                "xhrFields": {
                    withCredentials: true
                }
            },
            "columns": [{
                    "data": "itm_type_singkat",
                    "title": "Type"
                },
                {
                    "data": "item_type",
                    "title": "Desc"
                },
                {
                    "data": "m01_total",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Month 1" // Placeholder title
                },
                {
                    "data": "m02_total",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Month 2"
                },
                {
                    "data": "m03_total",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Month 3"
                },
                {
                    "data": "m04_total",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Month 4"
                },
                {
                    "data": "m05_total",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Month 5"
                },
                {
                    "data": "m06_total",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Month 6"
                },
                {
                    "data": "m07_total",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Month 7"
                },
                {
                    "data": "m08_total",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Month 8"
                },
                {
                    "data": "m09_total",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Month 9"
                },
                {
                    "data": "m10_total",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Month 10"
                },
                {
                    "data": "m11_total",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Month 11"
                },
                {
                    "data": "m12_total",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Month 12"
                },
            ],
            select: true,
            "buttons": ["copy", "csv", {
                extend: "excel",
                text: "Excel",
                action: function(e, dt, button, config) {
                    // Your custom onClick function here

                    pageTitle.innerHTML = "PURCHASE REGISTER REPORT";
                    console.log("Excel button clicked!");
                    $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, button, config);
                }
            }, "pdf", "print", "colvis"]
        }).buttons().container().appendTo('#tbl_RecordPembelian_wrapper .col-md-6:eq(0)');


        let tblRecordPembelian = $("#tbl_RecordPembelian").DataTable({
            "dom": 'Bfrtip',
            "paging": true,
            "pageLength": 20,
            "responsive": true,
            "lengthChange": true,
            "autoWidth": false,
            "deferRender": true,
            "processing": true,
            "ajax": {
                "url": '{{ route("pembelian.GetRecordPembelian") }}',
                "type": "POST",
                "data": {
                    _token: "{{ csrf_token() }}",
                    RECEIPT_DATE_F: Bulan1Terakhir,
                    RECEIPT_DATE_T: BulanSekarang
                },
                "xhrFields": {
                    withCredentials: true
                }
            },
            "columns": [{
                    "data": "itm_type_singkat",
                    "title": "Type"
                },
                {
                    "data": "receipt_date",
                    "title": "Date"
                },
                {
                    "data": "vendor_name",
                    "title": "Supplier"
                },
                {
                    "data": "item_code",
                    "title": "Item Code"
                },
                {
                    "data": "item_description",
                    "title": "Description"
                },
                {
                    "data": "qty_nett",
                    "render": $.fn.DataTable.render.number(',', '.', 0, ''),
                    "title": "Qty"
                },
                {
                    "data": "uom_code",
                    "title": "UOM"
                },
                {
                    "data": "po_unit_price",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "Unit Price"
                },
                {
                    "data": "dpp",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "DPP"
                },
                {
                    "data": "ppn",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "PPN"
                },
                {
                    "data": "pph",
                    "render": $.fn.DataTable.render.number(',', '.', 2, ''),
                    "title": "PPH"
                },
                {
                    "data": "total",
                    "render": function(data, type, row) {
                        if (type === 'display') {
                            return 'Rp ' + $.fn.DataTable.render.number(',', '.', 2, '').display(data);
                        }
                        return data;
                    },
                    "title": "Total"
                },
                {
                    "data": "receipt_num",
                    "title": "Rcpt / MO Number"
                },
                {
                    "data": "po_num",
                    "title": "PO / Invoice Number"
                }
            ],
            select: true,
            "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
        }).buttons().container().appendTo('#tbl_RecordPembelian_wrapper .col-md-6:eq(0)');

    });

    //FILTER
    const btnFilterRecordPembelian = document.querySelector('#btn_recordPembelian');
    btnFilterRecordPembelian.addEventListener('click', refreshRecordPembelian);
    const cboRecordPembelian = document.querySelector('#cbo_RecordPembelian');
    cboRecordPembelian.onchange = function() {
        if (cboRecordPembelian.value === "berdasarkan_tanggal") {
            $("div.cbo_Filter_Record_Pembelian").hide();
            $(".cbo-berdasarkan-periode-awal").show();
            $(".cbo-berdasarkan-periode-akhir").show();
            $("#to").show();
        } else {
            $(".cbo-berdasarkan-periode-awal").hide();
            $(".cbo-berdasarkan-periode-akhir").hide();
            $("#to").hide();
        }
    };

    function refreshRecordPembelian() {
        let filterRecordPembelian = cboRecordPembelian.value
        let bulansekarang;
        let bulan12;
        let bulan1;
        if (filterRecordPembelian === "bulan_ini") {
            let bulan12terakhir = new Date();
            bulan12terakhir.setMonth(bulan12terakhir.getMonth() - 11);
            bulan12terakhir.setDate(1);
            bulan12terakhir.setHours(0, 0, 0, 0);

            let bulan1terakhir = new Date();
            bulan1terakhir.setMonth(bulan1terakhir.getMonth() - 1);
            bulan1terakhir.setDate(1);
            bulan1terakhir.setHours(0, 0, 0, 0);

            let bulan = new Date();
            bulan.setHours(0, 0, 0, 0);

            // Set formatted dates to global variables
            bulan12 = formatDate(bulan12terakhir);
            bulan1 = formatDate(bulan1terakhir);
            bulansekarang = formatDate(bulan);
        } else if (filterRecordPembelian === "berdasarkan_tanggal") {
            let dtp_tanggal_f_value = document.querySelector('#dtp_tanggal_f').value;
            let dtp_tanggal_t_value = document.querySelector('#dtp_tanggal_t').value;
            if (dtp_tanggal_t_value == '') {
                alert("Harap Isi Tanggal Tujuan")
            } else {
                if (dtp_tanggal_f_value > dtp_tanggal_t_value) {
                    alert("Tanggal Awal Tidak Boleh Lebih Besar Dari Tanggal Tujuan")
                } else {
                    if (dtp_tanggal_f_value == '') {
                        // Variables for 11 and 1 month ago
                        let bulan12terakhir = new Date();
                        bulan12terakhir.setMonth(bulan12terakhir.getMonth() - 11);
                        bulan12terakhir.setDate(1);
                        bulan12terakhir.setHours(0, 0, 0, 0);
                        let bulan1terakhir = new Date();
                        bulan1terakhir.setMonth(bulan1terakhir.getMonth() - 1);
                        bulan1terakhir.setDate(1);
                        bulan1terakhir.setHours(0, 0, 0, 0);
                        bulan12 = formatDate(bulan12terakhir);
                        bulan1 = formatDate(bulan1terakhir);
                    } else if (dtp_tanggal_f_value != '') {
                        let dtp_tanggal_f = new Date(dtp_tanggal_f_value);
                        dtp_tanggal_f.setHours(0, 0, 0, 0);
                        bulan12 = formatDate(dtp_tanggal_f);
                        bulan1 = formatDate(dtp_tanggal_f);
                        // alert('bulan12: ' + bulan12);
                        // alert('bulan1: ' + bulan1);
                    }
                    let dtp_tanggal_t = new Date(dtp_tanggal_t_value);
                    dtp_tanggal_t.setHours(0, 0, 0, 0);

                    let bulan12terakhirUntukDate = new Date(dtp_tanggal_t_value);
                    bulan12terakhirUntukDate.setMonth(bulan12terakhirUntukDate.getMonth() - 11);
                    bulan12terakhirUntukDate.setDate(1);
                    bulan12terakhirUntukDate.setHours(0, 0, 0, 0);

                    BULAN12_TERAKHIR_UNTUK_DATE = formatDate(bulan12terakhirUntukDate)
                    bulansekarang = formatDate(dtp_tanggal_t);
                    // alert('bulansekarang: ' + bulansekarang);
                }
            }
        }
        // alert('11 Months Ago: ' + (bulan12 || 'N/A'));
        // alert('1 Month Ago: ' + (bulan1 || 'N/A'));
        // alert('BULAN SEKARANG: ' + (bulansekarang || 'N/A'));
        $("#tbl_CrossTabPembelian").DataTable().context[0].ajax.data._token = "{{ csrf_token() }}";
        $("#tbl_CrossTabPembelian").DataTable().context[0].ajax.data.RECEIPT_DATE_F = bulan12;
        $("#tbl_CrossTabPembelian").DataTable().context[0].ajax.data.RECEIPT_DATE_T = bulansekarang;
        $("#tbl_CrossTabPembelian").DataTable().context[0].ajax.data.BULAN12_TERAKHIR_UNTUK_DATE = BULAN12_TERAKHIR_UNTUK_DATE;
        $("#tbl_CrossTabPembelian").DataTable().clear().draw();

        $("#tbl_CrossTabPembelian").DataTable().ajax.url("{{ route('pembelian.GetCrossTabPembelian') }}").load();
        $("#tbl_RecordPembelian").DataTable().context[0].ajax.data._token = "{{ csrf_token() }}";
        $("#tbl_RecordPembelian").DataTable().context[0].ajax.data.RECEIPT_DATE_F = bulan1;
        $("#tbl_RecordPembelian").DataTable().context[0].ajax.data.RECEIPT_DATE_T = bulansekarang;
        $("#tbl_RecordPembelian").DataTable().clear().draw();
        $("#tbl_RecordPembelian").DataTable().ajax.url("{{ route('pembelian.GetRecordPembelian') }}").load();


        const format12bulan = formatDateOnly(new Date(bulan12));
        const format1bulan = formatDateOnly(new Date(bulan1));
        const formatSekarang = formatDateOnly(new Date(bulansekarang));

        const periode_crossTab = document.getElementById("periode_crossTab");
        periode_crossTab.innerHTML = format12bulan + " - " + formatSekarang;

        const periode_pembelian = document.getElementById("periode_pembelian");
        periode_pembelian.innerHTML = format1bulan + " - " + formatSekarang;

    }

    function formatDate(date) {
        let year = date.getFullYear();
        let month = String(date.getMonth() + 1).padStart(2, '0'); // Adding 1 to month since it's zero-based
        let day = String(date.getDate()).padStart(2, '0');
        let hours = String(date.getHours()).padStart(2, '0');
        let minutes = String(date.getMinutes()).padStart(2, '0');
        let seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
    }

    function formatDateOnly(date) { // digunakan untuk memfilter tanggal agar hanya tanggal saja
        let year = date.getFullYear();
        let month = String(date.getMonth() + 1).padStart(2, '0'); // Menambahkan 1 ke bulan karena berbasis nol
        let day = String(date.getDate()).padStart(2, '0');
        return `${year}/${month}/${day}`;
    }
</script>
@endsection