@include('admin.layout.header')

<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatables.min.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/modules/select2/dist/css/select2.min.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.0.4/venobox.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<!-- Main Content -->
{{-- product Modal --}}
<div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ProductMode">Add Product</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {!! Form::open([
                    'url' => '#',
                    'name' => 'productForm',
                    'id' => 'productForm',
                    'enctype' => 'multipart/form-data',
                ]) !!}
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                            <input type="hidden" name="product_id" id="product_id">
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="product_name">Product Name</label>
                                    <input type="text" class="form-control" name="product_name" id="product_name">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="product_code">Product Code</label>
                                    <input type="text" class="form-control" name="product_code" id="product_code">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="product_sku">Product SKU</label>
                                    <input type="text" class="form-control" name="product_sku" id="product_sku">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="product_mrp">Product MRP</label>
                                    <input type="text" class="form-control" name="product_mrp" id="product_mrp">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="product_ptr">Product PTR</label>
                                    <input type="text" class="form-control" name="product_ptr" id="product_ptr">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="product_pts">Product PTS</label>
                                    <input type="text" class="form-control" name="product_pts" id="product_pts">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="product_car">Product CAR</label>
                                    <input type="text" class="form-control" name="product_car" id="product_car">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="product_shr">Product SHR</label>
                                    <input type="text" class="form-control" name="product_shr" id="product_shr">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="product_shp">Product SHP</label>
                                    <input type="text" class="form-control" name="product_shp" id="product_shp">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="product_min_quality">Product Min Quality</label>
                                    <input type="text" class="form-control" name="product_min_quality"
                                        id="product_min_quality">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="product_discount">Product Discount</label>
                                    <input type="text" class="form-control" name="product_discount"
                                        id="product_discount">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="product_net_rate">Product Net Rate</label>
                                    <input type="text" class="form-control" name="product_net_rate"
                                        id="product_net_rate">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="product_image">Product Images</label>
                                <div class="mb-3">
                                    <img src="" id="productImage" alt="Product Image" class="w-100 d-none img-fluid">
                                </div>
                                <div class="input-group">
                                    <input type="file" id="product_image" name="product_image" class="border-1"
                                        accept="image/*">
                                </div>
                                <label id="product_image-error" class="error" for="product_image"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="productFormSubmit">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="modal fade" id="viewProduct" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">View Product Record</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="row user_details_view_odd">
                    <div class="col-lg-4 col-4 col-md-4">
                        Product Code
                    </div>
                    <div class="col-lg-8 col-8 col-md-8 text-capitalize" id="productCode">

                    </div>
                </div>
                <div class="row user_details_view_odd">
                    <div class="col-lg-4 col-4 col-md-4">
                        Name
                    </div>
                    <div class="col-lg-8 col-8 col-md-8 text-capitalize" id="productName">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        SKU
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="productSku">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        MRP
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="productMrp">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        PTR
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="productPtr">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        PTS
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="productPts">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        CAR
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="productCar">

                    </div>
                </div>

                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        SHR
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="productShr">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        SHP
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="productShp">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Min Quality
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="productMinQuality">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Discount
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="productDiscount">
                        -
                    </div>
                </div>

                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Net Rate
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="productNetRate">

                    </div>
                </div>

                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Status
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="productStatus">

                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="main-content">
    <section class="section">
        <div class="section-header pr-0">
            <div class="row w-100">
                <div class="col-lg-3 col-md-6 my-auto">
                    <h1>View Product</h1>
                </div>
            </div>
        </div>

        <div class="row mb-5">
            <div class="col-lg-12">
                <div class="card">
                    <div class="text-right pt-2 ">
                        <div class="btn btn-warning mr-2" data-toggle="modal" data-target="#productModal"><i
                                class="fas fa-plus mr-2" style="font-size: 14px!important;"></i>Add Product</div>
                    </div>
                    <div class="card-body">
                        <div class="">
                            <table class="w-100 table table-striped table-hover datatable text-center" id="datatable"
                                name="datatable">
                                <thead class="w-100">
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>Action</th>
                                        <th>Product Image</th>
                                        <th>Name</th>
                                        <th>SKU</th>
                                        <th>MRP</th>
                                        <th>PTR</th>
                                        <th>PTS</th>
                                        <th>Discount</th>
                                        <th>Net Rate</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@include('admin.layout.footer')

<script src="{{ asset('assets/modules/select2/dist/js/select2.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.0.4/venobox.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/js/additional-methods.min.js') }}"></script>
<script src="{{ asset('assets/notify.js') }}"></script>
<!-- JS Libraies -->
<script src="{{ asset('assets/modules/sweetalert/sweetalert.min.js') }}"></script>

<!-- Page Specific JS File -->
<script src="{{ asset('assets/js/page/modules-sweetalert.js') }}"></script>
{{-- <script>
    $(document).ready(function() {
        $('.select2').select2({
            width: '100%',

        });
    });

    $("#approved_message").click(function() {
        swal('POB Approved', 'You clicked the button!', 'success');
    });
    $("#rejected_message").click(function() {
        swal('Suspend this Product', 'You clicked the button!', 'error');
    });

    document.querySelectorAll('.badge_danger_costome').forEach(function(element) {
        element.addEventListener('click', function() {
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: "Deleted!",
                        text: "Your file has been deleted.",
                        icon: "success"
                    });
                    // Add the code to delete the file or perform the desired action here
                }
            });
        });
    });
</script> --}}

{{-- <script>
    function validate(event) {
        if (event.target.checked) {
            Swal.fire({
                title: 'Are you sure?',
                text: "You want to activate your status?",
                icon: 'warning',
                showDenyButton: true,
                confirmButtonColor: '#3085d6',
                denyButtonColor: '#d33',
                denyButtonText: 'No',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.checked = true;
                } else {
                    event.target.checked = false;
                }
            });
        }
    }
</script> --}}

<script>
    function editProductSet(product_id, product_code, product_name, product_sku, product_mrp, product_ptr, product_pts,
        product_car, product_shr, product_shp, product_min_quality, product_discount, product_net_rate, product_image) {
        $("#ProductMode").text("Edit Product");

        $("#product_id").val(product_id);
        $("#product_code").val(product_code);
        $("#product_name").val(product_name);
        $("#product_sku").val(product_sku);
        $("#product_mrp").val(product_mrp);
        $("#product_ptr").val(product_ptr);
        $("#product_pts").val(product_pts);
        $("#product_car").val(product_car);
        $("#product_shr").val(product_shr);
        $("#product_shp").val(product_shp);
        $("#product_min_quality").val(product_min_quality);
        $("#product_discount").val(product_discount);
        $("#product_net_rate").val(product_net_rate);

        let imageElement = $('#productImage'); // jQuery way to select the element
        let newImageUrl = '{{ asset('storage/product_image/') }}' + '/' + product_image; // Construct the new image URL

        // Set the src attribute and show the image
        imageElement.attr('src', newImageUrl).removeClass('d-none'); // This will set the source and show the image if it was hidden
    }

    function listProductSet(product_code, product_name, product_sku, product_mrp, product_ptr, product_pts, product_car,
        product_shr, product_shp, product_min_quality, product_discount, product_net_rate, Status) {
        $("#productCode").text(product_code);
        $("#productName").text(product_name);
        $("#productSku").text(product_sku);
        $("#productMrp").text(product_mrp);
        $("#productPtr").text(product_ptr);
        $("#productPts").text(product_pts);
        $("#productCar").text(product_car);
        $("#productShr").text(product_shr);
        $("#productShp").text(product_shp);
        $("#productMinQuality").text(product_min_quality);
        $("#productDiscount").text(product_discount);
        $("#productNetRate").text(product_net_rate);
        // Check userStatus and set the appropriate text
        if (Status === 'Y') {
            $("#productStatus").text('Active');
        } else {
            $("#productStatus").text('Deactive');
        }
    }

    var productDataTable;

    function productStatusChange(productId, status) {
        // Initialize the swalConfig object with common properties
        let swalConfig = {
            title: "Are you sure?",
            showCloseButton: true,
            focusConfirm: false,
            cancelButtonText: `No`,
        };

        // Add conditional properties based on the status
        if (status == 'D') {
            swalConfig.icon = 'warning';
            swalConfig.confirmButtonText= `Yes, Delete it!`;
            swalConfig.showDenyButton = true;
            swalConfig.html = `You won't be able to revert this!`;
        } else {
            swalConfig.icon = 'info';
            swalConfig.confirmButtonText= `Yes`;
            swalConfig.showCancelButton = true;
            swalConfig.html = `You want to change product status`;
        }
        // Show Swal alert with the configured object
        Swal.fire(swalConfig).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('updateProductStatus') }}",
                    type: 'POST',
                    data: {
                        'product_id': productId,
                        'product_status': status,
                        '_token': "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            if(status=='D'){
                                Swal.fire({
                                    title: "Deleted!",
                                    text: "Product has been deleted.",
                                    icon: "success"
                                });
                                $.notify('Product deleted successfully!', "success");
                            }else{
                                $.notify(response.msg, "success");
                            }
                            // $('#datatable').DataTable().ajax.reload();
                            productDataTable.draw();
                        } else {
                            $.notify(response.msg, "error");
                        }
                    },
                    error: function(jqXHR) {
                        $.notify(jqXHR.responseJSON.msg, "error");
                    }
                });
            } else {
                $.notify("The status remains unchanged.", "info");
                if(status!='D'){
                    // setTimeout(function() {
                    //     window.location.reload();
                    // }, 1000);
                    productDataTable.draw();
                }
            }
        });
    }
    $(document).ready(function() {
        $('#productModal').on('hidden.bs.modal', function() {
            // Reset form fields
            $(this).find('form')[0].reset();

            // Reset hidden input specifically
            $('#product_id').val('');

            // Reset select boxes to their default value (usually the first option)
            $(this).find('select').val('').trigger('change');

            // Reset other elements if needed
            $("#ProductMode").text("Add Product"); // Reset the modal title

            // Clear validation error messages and reset the form's validation state
            var form = $(this).find('form');
            form.validate().resetForm(); // Clears error messages
            form.find('.is-invalid').removeClass('is-invalid'); // Remove error class from input fields
        });

        $.validator.addMethod("notOnlySpaces", function(value, element) {
            return $.trim(value).length > 0;
        }, "This field cannot contain only spaces.");

        $('#productForm').validate({
            ignore: ".ignore",
            rules: {
                product_name: {
                    required: true,
                    minlength: 1,
                    maxlength: 200,
                    notOnlySpaces: true,
                },
                product_code: {
                    required: true,
                    minlength: 1,
                    maxlength: 50,
                    notOnlySpaces: true,
                },
                product_sku: {
                    required: true,
                    minlength: 1,
                    maxlength: 200,
                    notOnlySpaces: true,
                },
                product_mrp: {
                    required: true,
                    number: true,
                    minlength: 1,
                    maxlength: 25,
                    notOnlySpaces: true,
                },
                product_ptr: {
                    required: true,
                    number: true,
                    minlength: 1,
                    maxlength: 25,
                    notOnlySpaces: true,
                },
                product_pts: {
                    required: true,
                    minlength: 1,
                    maxlength: 25,
                    notOnlySpaces: true,
                    number: true
                },
                product_car: {
                    required: true,
                    minlength: 1,
                    maxlength: 25,
                    notOnlySpaces: true,
                    number: true
                },
                product_shr: {
                    required: true,
                    minlength: 1,
                    maxlength: 25,
                    notOnlySpaces: true,
                    number: true
                },
                product_shp: {
                    required: true,
                    minlength: 1,
                    maxlength: 25,
                    notOnlySpaces: true,
                    number: true
                },
                product_min_quality: {
                    required: true,
                    minlength: 1,
                    maxlength: 10,
                    notOnlySpaces: true,
                    number: true
                },
                product_discount: {
                    required: true,
                    minlength: 1,
                    maxlength: 25,
                    notOnlySpaces: true,
                    number: true
                },
                product_net_rate: {
                    required: true,
                    minlength: 1,
                    maxlength: 25,
                    notOnlySpaces: true,
                    number: true
                },
                product_image: {
                    required: function() {
                        // Check if product_id is empty (for add mode)
                        return $('#product_id').val() === "";
                    },
                }
            },
            messages: {
                product_image: "Product image is required",
            },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $("#productFormSubmit").attr('disabled', true);
                var formData = new FormData($("#productForm")[0]);

                $.ajax({
                    url: '{{ route('upsertProduct') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $('#productModal').modal('hide');
                            $.notify(response.message, "success");
                        } else if (response.status == 0) {
                            $.notify(response.message, "warn");
                        }
                        productDataTable.draw();
                        $("#productFormSubmit").attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        // console.error('An error occurred:', error);
                        $.notify(error, "error");
                        $("#productFormSubmit").attr('disabled', false);
                    }
                });
            }
        });

        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false,
                    orderable: false,
                },
                {
                    data: 'action',
                    name: 'action',
                    searchable: false,
                    orderable: false
                },
                {
                    data: 'product_image',
                    name: 'product_image',
                    searchable: false,
                    orderable: false
                },
                {
                    data: 'product_name',
                    name: 'product_name',
                    // orderable: true,
                },
                {
                    data: 'product_sku',
                    name: 'product_sku'
                },
                {
                    data: 'product_mrp',
                    name: 'product_mrp'
                },
                {
                    data: 'product_ptr',
                    name: 'product_ptr'
                },
                {
                    data: 'product_pts',
                    name: 'product_pts'
                },
                {
                    data: 'product_discount',
                    name: 'product_discount'
                },
                {
                    data: 'product_net_rate',
                    name: 'product_net_rate'
                },
                {
                    data: 'product_status',
                    name: 'product_status',
                    searchable: false,
                    orderable: false
                }
            ];
            var columnDefs = [];
            getDataTable("{{ route('manageProductPaginate') }}", columns, columnDefs);
        });

        function getDataTable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#datatable')) {
                $('#datatable').DataTable().destroy();
            }
            productDataTable = $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                "bDestroy": true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                    }
                },
                drawCallback: function(settings) {
                    // Reinitialize Venobox
                    new VenoBox({
                        selector: '.product_image',
                        numeration: true,
                        infinigall: true,
                        share: true,
                        spinner: 'rotating-plane'
                    });
                }
            });
        }
    });
</script>