@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" />

{{-- potentialProductModal Modal --}}

<div class="modal fade" id="potentialProductModal" 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="potentialProductModalStatus">Add Product</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open([
                'url' => '#',
                'name' => 'potentialProductForm',
                'id' => 'potentialProductForm',
                'enctype' => 'multipart/form-data',
            ]) !!}
            <div class="modal-body">
                <div class="row">
                    <input type="hidden" name="potential_product_list_id" id="potential_product_list_id">
                    <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <label for="potential_product_name">Potential Title</label>
                                        <input type="text" id="potential_product_name" class="form-control" name="potential_product_name" placeholder="Enter Product Name">
                                    </div>
                                </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="FormSubmit">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!-- modal -->

<div class="main-content">
    <section class="section">
        <div class="section-header">
            <div class="row w-100">
                <div class="col-lg-3 col-md-6 my-auto">
                    <h1>View Potential Product</h1>
                </div>
                <div class="col-lg-auto col-md-6 ml-auto my-2 my-lg-0 my-md-0">
                    <div class="btn btn-warning mr-2 my-2 my-md-2 my-lg-0" data-toggle="modal"
                        data-target="#potentialProductModal"><i class="fas fa-plus mr-2"
                            style="font-size: 14px!important;"></i>Add Product</div>
                </div>
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="">
                            <table class="w-100 table table-striped table-hover datatable text-center" id="datatable">
                                <thead class="w-100">
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>Potential Product Name</th>
                                        <th>Action</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%',

        });

    });
    new VenoBox({
        selector: '.my-image-links',
        numeration: true,
        infinigall: true,
        share: true,
        spinner: 'rotating-plane'
    });
    $("#rejected_message").click(function() {
        swal('Quarter Stop', 'You clicked the button!', 'error');
    });
</script>


<script type="text/javascript">
    $(function() {

        var start = moment().subtract(29, 'days');
        var end = moment();

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }

        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                    'month').endOf('month')]
            }
        }, cb);

        cb(start, end);

    });
</script>


<script>
    function editPotentialProductSet(id, potential_product_name) {
        $("#potential_product_list_id").val(id);
        $("#potential_product_name").val(potential_product_name);
    }
    $(document).ready(function() {
        $('#potentialProductModal').on('hidden.bs.modal', function() {
            // Reset form fields
            $(this).find('form')[0].reset();

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

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

            // Reset other elements if needed
            $("#potentialProductModalStatus").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
        });

        $('#potentialProductForm').validate({
            ignore: ".ignore",
            rules: {
                potential_product_name: {
                    required: true,
                },
            },
            messages: {},
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $("#potentialProductFormSubmit").attr('disabled', true);
                var formData = new FormData($("#potentialProductForm")[0]);

                $.ajax({
                    url: '{{ route('upsertPotentialProduct') }}',
                    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) {
                            $('#potentialProductModal').modal('hide');
                            $.notify(response.msg, "success");
                            $('#datatable').DataTable().ajax.reload();
                        } else if (response.status == 0) {
                            $.notify(response.error, "error");
                        }
                        $("#potentialProductFormSubmit").attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        console.error('An error occurred:', error);
                        $("#potentialProductFormSubmit").attr('disabled', false);
                    }
                });
            }
        });

        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false,
                    orderable: false,
                },
                {
                    data: 'potential_product_name',
                    name: 'potential_product_name'
                },
                {
                    data: 'action',
                    name: 'action',
                    searchable: false,
                    orderable: false,
                }
            ];
            var columnDefs = [{
                "width": "150",
                "targets": [2]
            }];
            getdatatable("{{ route('potentialProductPaginate') }}", columns, columnDefs);
        });

        function getdatatable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#datatable')) {
                $('#datatable').DataTable().destroy();
            }
            $('#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: '.my-video-links',
                //     });
                // }
            });
        }
    });
</script>