@extends('layouts.master')
@section('content')
<header class="page-header page-header-left-inline-breadcrumb">

    <h2 class="font-weight-bold text-6">price </h2>

    <div class="right-wrapper text-end">

        <ol class="breadcrumbs">

            <li>

                <a href="javascript:void(0);">

                    <span>Home</span>

                </a>

            </li>

            <li><span>price </span></li>

        </ol>

    </div>

</header>
<div class="row">

    <div class="col">



        <div class="card card-modern">

            <div class="card-body">

                <div class="datatables-header-footer-wrapper">

                    <div class="datatable-header">

                        <div class="row align-items-center mb-3">

                            <div class="col-12 col-lg-3 col-12 col-lg-3 ms-0">

                                <input type="hidden" id="token" value="{{ csrf_token() }}">

                                <div class="mx-lg-auto">

                                    <span id="totalProduct">Total Record: {{ $total_product }} </span>

                                </div>

                            </div>
                            <div class="row align-items-center mb-3">
                                <!-- Per Page Size -->
                                <div class="col-12 col-md-4 col-lg-3 mb-2 mb-md-0">
                                    <label for="page">Per Page Size</label>
                                    <div class="input-group">
                                        <select name="page" id="page" class="form-control">
                                            <option value="25" selected>25</option>
                                            <option value="50">50</option>
                                            <option value="75">75</option>
                                            <option value="100">100</option>
                                            <option value="200">200</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- <div class="col-12 col-md-3 mb-2 mb-md-0" style="margin-top: 22px;">
                                    <div class="mx-auto">
                                        <div class="input-group">
                                            <select name="status" id="status" class="form-control">
                                                <option value="">Select type</option>
                                                <option value="1">Match</option>
                                                <option value="0">Not Match</option>
                                            </select>
                                        </div>
                                    </div>
                                </div> -->
                                <!-- Start Date -->
                                <div class="col-12 col-md-4 col-lg-3 mb-2 mb-md-0" style="margin-left: -7px;margin-top: 15px;">
                                    <input type="text" id="min" name="min" class="form-control" placeholder="Start Date">
                                </div>
                                <!-- End Date -->
                                <div class="col-12 col-md-4 col-lg-3 mb-2 mb-md-0" style="margin-left: -8px;margin-top: 11px;">
                                    <input type="text" id="max" name="max" class="form-control" placeholder="End Date">
                                </div>
                            </div>

                            <div class="col-12 col-lg-auto ms-auto ps-lg-1">
                                <div class="search search-style-1 search-style-1-lg mx-lg-auto">
                                    <div class="input-group">

                                        <input type="text" class="search-term form-control" name="search-term" id="search-term" placeholder="Search Customprice">

                                        <button class="btn btn-default" type="button" id="searchBtn"><i class="bx bx-search"></i></button>
                                        <button class="btn btn-default d-none" type="button" id="clearBtn"><i class="bx bx-x"></i></button>

                                    </div>

                                </div>

                            </div>



                            <table class="table table-ecommerce-simple table-striped mb-0" id="datatable-list" style="min-width: 750px;">

                                <thead>

                                    <tr>

                                        <!--<th width="5%">Sr.No.</th>-->
                                        <th width="10%">Email</th>
                                        <th width="10%">Netsuite prodct id</th>
                                        <th width="10%">magento product id</th>
                                        <th width="10%">customer magento id</th>
                                        <th width="10%">customer id</th>
                                        <th width="10%">price level</th>
                                        <th width="10%">Customer Specific Rate</th>
                                        <th width="10%"> Group price level</th>
                                        <th width="10%">group price</th>
                                        <th width="10%">Retail price</th>
                                        <th width="10%">Last Update</th>
                                        <th width="10%">netsuit update at</th>
                                        <th width="10%">testprice</th>
                                    </tr>

                                </thead>

                                <tbody>

                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>



            </div>

        </div>

        <div id="datatable-loader" class="datatable-loader">

            <div class="loader"></div>

        </div>

        <style>



        </style>
        @endsection



        @section('additional-scripts')

        <script>
            $(document).ready(function() {
                var searchValue = '';

                var $listTable;
                let minDate, maxDate;
                /*

                * DataTable List

                */
                minDate = new DateTime('#min', {
                    format: 'yyyy-MM-DD'
                });
                maxDate = new DateTime('#max', {
                    format: 'yyyy-MM-DD'
                });
                $listTable = $('#datatable-list').DataTable({

                    dom: '<"row justify-content-between"<"col-auto"><"col-auto">><"table-responsive"t>ip',

                    processing: true,

                    responsive: true,

                    serverSide: true,

                    pageLength: 25,

                    ajax: {

                        url: base_url + "/mapping/customprice/getlist",

                        type: "POST",
                        data: function(d) {
                            d._token = "{{ csrf_token() }}",
                                d.netsuite_updated_min = $("#min").val();
                            d.status = $("#status").val();
                            d.netsuite_updated_max = $("#max").val();
                        },
                    },
                    columns: [{
                            data: "email",
                            searchable: false,
                            orderable: true
                        },
                        {
                            data: "netsuite_product_id",
                            searchable: false,
                            orderable: true
                        },
                        {
                            data: "product_magento_id",
                            searchable: false,
                            orderable: true
                        },
                        {
                            data: "customer_magento_id",
                            searchable: false,
                            orderable: true
                        },
                        {
                            data: "customer_internalId",
                            searchable: false,
                            orderable: true
                        },

                        {
                            data: "price_level",
                            searchable: false,
                            orderable: true

                        },
                        {
                            data: "rate",
                            searchable: false,
                            orderable: true
                        },
                        {
                            data: "group_price_level",
                            searchable: false,
                            orderable: true

                        },
                        {
                            data: "group_price",
                            searchable: false,
                            orderable: true
                        },
                        {
                            data: "retail_price",
                            searchable: false,
                            orderable: true
                        },
                        {
    data: "updated_at",
    searchable: false,
    orderable: true,
    render: function(data, type, row) {
        if (type === 'display' || type === 'filter') {
            if (!data) {
                return '---'; // Handle null or empty dates
            }
            var date = new Date(data);
            if (isNaN(date.getTime())) {
                return '---'; // Handle invalid dates
            } else {
                // Manually format date as dd-mm-yyyy
                var day = String(date.getDate()).padStart(2, '0');
                var month = String(date.getMonth() + 1).padStart(2, '0'); // Month is zero-based
                var year = date.getFullYear();
                return `${day} - ${month} - ${year}`; // Add spaces around hyphens
            }
        }
        return data; // Return raw value for sorting and other operations
    }
},

{
    data: "netsuite_update_at",
    searchable: false,
    orderable: true,
    render: function(data, type, row) {
        if (type === 'display' || type === 'filter') {
            if (!data) {
                return '---'; // Handle null or empty dates
            }
            var date = new Date(data);
            if (isNaN(date.getTime())) {
                return '---'; // Handle invalid dates
            } else {
                // Manually format the date as dd - mm - yyyy
                var day = String(date.getDate()).padStart(2, '0');
                var month = String(date.getMonth() + 1).padStart(2, '0'); // Month is zero-based
                var year = date.getFullYear();
                return `${day} - ${month} - ${year}`;
            }
        }
        return data; // Return raw value for sorting and other operations
    }
},
                        {
                            data: "testprice",
                            searchable: false,
                            orderable: true
                        },
                    ],
                    order: [
                        [12, 'desc']
                    ],



                    "fnCreatedRow": function(nRow, aData, iDataIndex) {

                        $(nRow).attr('id', aData['id']);

                    },

                    language: {

                        paginate: {

                            previous: '<i class="fas fa-chevron-left"></i>',

                            next: '<i class="fas fa-chevron-right"></i>'

                        }

                    }

                });



                // Display loader when DataTable is processing

                $listTable.on('preXhr', function() {

                    $('#datatable-loader').show();

                });

                $(document).on('change', "#status", function() {
                    // $listTable.draw();
                    $listTable.ajax.reload(function(json) {
                        $("#totalProduct").text("Total price: " + json.recordsTotal);
                    });
                })

                // Hide loader when DataTable has finished processing

                $listTable.on('xhr', function() {

                    $('#datatable-loader').hide();

                });



                $(document).on("keyup", "#search-term", function(e) {

                    if (e.which == 13) {
                        $("#searchBtn").trigger("click");

                    }

                });

                $(document).on('change', '#min', function() {
                    // $listTable.draw();
                    $listTable.ajax.reload(function(json) {
                        $("#totalProduct").text("Total price: " + json.recordsTotal);
                    });
                });
                $(document).on('change', '#max', function() {
                    // $listTable.draw();
                    $listTable.ajax.reload(function(json) {
                        $("#totalProduct").text("Total price: " + json.recordsTotal);
                    });
                });

                $(document).on("click", "#searchBtn", function() {
                    searchValue = $(this).closest('.search').find('#search-term').val();
                    $listTable.search(searchValue);
                    $listTable.ajax.reload(function(json) {
                        $("#totalProduct").text("Total price: " + json.recordsTotal);
                    });
                    $("#clearBtn").removeClass('d-none');
                });

                $(document).on("click", "#clearBtn", function() {
                    $("#search-term").val('');
                    searchValue = '';
                    $listTable.search('').draw();
                    $("#clearBtn").addClass('d-none');
                    $listTable.ajax.reload(function(json) {
                        $("#totalProduct").text("Total price: " + json.recordsTotal);
                    });

                });






                // Add this code after initializing $listTable

                $(document).on('change', '#page', function() {

                    var selectedPageLength = $(this).val();

                    $listTable.page.len(selectedPageLength).draw();

                });

            }); 
                document.getElementById("refresh").addEventListener("click", function() {
                    window.location.href = '/form';
                });
        </script>

        @endsection