@include('admin.includes.header')
@include('admin.includes.sidebar')

{{-- form  --}}
<form id="myForm" enctype="multipart/form-data" method="POST">
    @csrf

<!--! [Start] Main Content !-->
    <!--! ================================================================ !-->
    <main class="nxl-container">
        <div class="nxl-content">
            <!-- [ page-header ] start -->
            <div class="page-header">
                <div class="page-header-left d-flex align-items-center">
                    <div class="page-header-title">
                        <h5 class="m-b-10">{{isset($data) ? 'Edit' : 'Add'  }} Products</h5>
                    </div>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('admin/dashboard')}}">Home</a></li>
                        <li class="breadcrumb-item">Create</li>
                    </ul>
                </div>
                <div class="page-header-right ms-auto">
                    <div class="page-header-right-items">
                        <div class="d-flex d-md-none">
                            <a href="javascript:void(0)" class="page-header-right-close-toggle">
                                <i class="feather-arrow-left me-2"></i>
                                <span>Back</span>
                            </a>
                        </div>
                        <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                            {{-- <a href="javascript:void(0);" class="btn btn-light-brand" data-bs-toggle="offcanvas" data-bs-target="#proposalSent">
                                <i class="feather-layers me-2"></i>
                                <span>Save & Send</span>
                            </a> --}}
                            <a href="javascript:void(0);" class="btn btn-dark successAlertMessage"  onclick="document.getElementById('myForm').requestSubmit();">
                                <i class="feather-save me-2"></i>
                                <span>Save</span>
                            </a>
                        </div>
                    </div>
                    <div class="d-md-none d-flex align-items-center">
                        <a href="javascript:void(0)" class="page-header-right-open-toggle">
                            <i class="feather-align-right fs-20"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- [ page-header ] end -->
<!-- [ Main Content ] start -->
            <div class="main-content">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card stretch stretch-full">
                                <div class="card-body">
                                    @include('admin.components.msg')
                                    <div class="mb-4">
                                        <label class="form-label">Title <span class="text-danger">*</span></label>
                                        <input type="text" value="{{ $data->name ?? ''}}" required name="title" class="form-control" placeholder="Title">
                                        @error('title')
                                            <div class=" my-1 p-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">Description <span class="text-danger">*</span></label>
                                        <textarea name="description" class="form-control summernote" placeholder="Description">{{ $data->description ?? '' }}</textarea>
                                        
                                        @error('description')
                                            <div class="my-1 p-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                    {{-- <div class="mb-4">
                                        <label class="form-label">Price <span class="text-danger">*</span></label>
                                        <input type="number" value="{{ $data->price ?? '' }}" required name="price" id="priceInput" class="form-control" placeholder="Price">
                                        
                                        <!-- Display formatted number -->
                                        <div id="formattedPrice" class="mt-2 text-muted"></div>
                                    
                                        <!-- Display amount in words -->
                                        <div id="amountInWords" class="mt-2 text-primary fw-bold"></div>
                                    
                                        @error('price')
                                            <div class="my-1 p-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div> --}}
                                    
                                    
                                    <div class="mb-4">
                                        <label class="form-label">Image <span class="text-danger">*</span></label>
                                        {{-- @include('admin.components.file-upload',['folder'=> 'products']) --}}
                                        @include('admin.components.file-multi-upload',['folder'=> 'products'])
                                        {{-- <input id="imageInput" type="file" hidden name="image" class="form-control" placeholder="image"> --}}
                                        @error('images')
                                            <div class="my-1 p-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                        {{-- <label class="form-label">Discount </label>
                                        <select class="form-select" data-select2-selector="default">
                                            <option value="">No Discount</option>
                                            <option value="">Before Tax</option>
                                            <option value="">After Tax</option>
                                        </select> --}}
                                    </div>
                                    <div class="row variantDiv align-items-center">
                                        <div class="d-flex col-12 gap-4 mb-4 align-items-center">
                                            <label class="form-label">Variants</label>
                                            <a class="btn btn-dark text-white p-1 px-2"  id="addVariant"> Add Variants <i class="feather-plus"></i></a>
                                        </div>
                                        @if(isset($data->variants))
                                        @foreach($data->variants as $key=>$v)
                                            <div class="mb-4 col-2" data-id="{{ $v->id.$key }}">
                                                <label class="form-label">Dimension x<span class="text-danger">*</span></label>
                                                <input type="text" value="{{ $v->dimensionx}}" required name="dimensionx[]" class="form-control" placeholder="Dimension">
                                                @error('dimensionx')
                                                <div class="p-1 my-1 alert alert-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-4 col-2" data-id="{{ $v->id.$key }}">
                                                <label class="form-label">Dimension y<span class="text-danger">*</span></label>
                                                <input type="text"  value="{{ $v->dimensiony}}" required name="dimensiony[]" class="form-control" placeholder="Dimension">
                                                @error('dimensiony')
                                                <div class="p-1 my-1 alert alert-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-4 col-2" data-id="{{ $v->id.$key }}">
                                                <label class="form-label">Height <span class="text-danger">*</span></label>
                                                <input type="text"  value="{{ $v->height}}" required name="height[]" class="form-control" placeholder="Height">
                                                @error('height')
                                                <div class="p-1 my-1 alert alert-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-4 col-2" data-id="{{ $v->id.$key }}">
                                                <label class="form-label">Discount Percentage<span class="text-danger">*</span></label>
                                                <input type="text"  value="{{ $v->discount}}" required name="discount[]" class="form-control" placeholder="Discount">
                                                @error('discount')
                                                    <div class=" my-1 p-1 alert alert-danger">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                            <div class="mb-4 col-2" data-id="{{ $v->id.$key }}">
                                                <label class="form-label">Price <span class="text-danger">*</span></label>
                                                <input type="text"  value="{{ $v->price}}" required name="variantPrice[]" class="form-control" placeholder="Price">
                                                @error('variantPrice')
                                                    <div class=" my-1 p-1 alert alert-danger">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                            <div class="col-2">
                                                <button type="button" data-id="{{ $v->id.$key }}" class="btn btn-danger remove-variant">Remove</button>
                                            </div>
                                        @endforeach
                                        @else
                                            <div class="mb-4 col-2">
                                                <label class="form-label">Dimension x<span class="text-danger">*</span></label>
                                                <input type="text" value="0" required name="dimensionx[]" class="form-control" placeholder="Dimension">
                                                @error('dimensionx')
                                                <div class="p-1 my-1 alert alert-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-4 col-2">
                                                <label class="form-label">Dimension y<span class="text-danger">*</span></label>
                                                <input type="text"  value="0" required name="dimensiony[]" class="form-control" placeholder="Dimension">
                                                @error('dimensiony')
                                                <div class="p-1 my-1 alert alert-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-4 col-2">
                                                <label class="form-label">Height <span class="text-danger">*</span></label>
                                                <input type="text"  value="0" required name="height[]" class="form-control" placeholder="Height">
                                                @error('height')
                                                <div class="p-1 my-1 alert alert-danger">
                                                    {{ $message }}
                                                </div>
                                                @enderror
                                            </div>
                                            <div class="mb-4 col-2">
                                                <label class="form-label">Discount Percentage<span class="text-danger">*</span></label>
                                                <input type="text"  value="0" required name="discount[]" class="form-control" placeholder="Discount">
                                                @error('discount')
                                                    <div class=" my-1 p-1 alert alert-danger">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                            <div class="mb-4 col-2">
                                                <label class="form-label">Price <span class="text-danger">*</span></label>
                                                <input type="text"  value="0" required name="variantPrice[]" class="form-control" placeholder="Price">
                                                @error('variantPrice')
                                                    <div class=" my-1 p-1 alert alert-danger">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                            <div class="col-2">
                                                {{-- <button type="button" data-id="0" class="btn btn-danger remove-variant">Remove</button> --}}
                                            </div>
                                        @endif
                                    </div>
                                    {{-- <div class="mb-4 row">
                                        <label class="form-label col-12">Size <span class="text-muted">( Optional )</span></label>
                                        @php
                                        $selected_sizes = isset($data->size) ? explode(',', $data->size) : [];
                                        @endphp
                                        @forelse ($categories as $cat)
                                        <div class="col-3">
                                            <label class="form-label text-muted">{{ $cat->name }}</label>
                                            @forelse ($cat->sizes as $s)
                                            <div class="form-check">
                                                <input {{ in_array($s->id, $selected_sizes) ? 'checked' : '' }}
                                                 class="form-check-input" name="size[]" type="checkbox" value="{{ $s->id }}" id="flexCheckDefault">
                                                <label class="form-check-label" for="">
                                                    {{ $s->size }}
                                                </label>
                                            </div>
                                            @empty
                                            <br>
                                            <label class=" text-muted fst-italic">Not Available</label>
                                            @endforelse
                                        </div>
                                        @empty
                                        @endforelse
                                    </div>
                                    <div class="mb-4 row">
                                        <label class="form-label col-12">Dimensions <span class="text-muted">( Optional )</span></label>
                                        @php
                                        $selected_dimensions = isset($data->dimension) ? explode(',', $data->dimension) : [];
                                        @endphp
                                        @forelse ($categories as $cat)
                                        <div class="col-3">
                                            <label class="form-label text-muted">{{ $cat->name }}</label>
                                            @forelse ($cat->dimensions as $d)
                                            <div class="form-check">
                                                <input {{ in_array($d->id, $selected_dimensions) ? 'checked' : '' }} 
                                                class="form-check-input" name="dimension[]" type="checkbox" value="{{ $d->id }}" id="flexCheckDefault">
                                                <label class="form-check-label" for="">
                                                    @php
                                                    $d_arr= explode(',', $d->dimension);
                                                    @endphp
                                                    {{ $d_arr[0].'"'.'x'.$d_arr[1].'"' }}
                                                </label>
                                            </div>
                                            @empty
                                            <br>
                                            <label class=" text-muted fst-italic">Not Available</label>
                                            @endforelse
                                        </div>    
                                        @empty
                                        @endforelse
                                    </div>
                                    <div class="mb-4 row">
                                        <label class="form-label col-12">Height <span class="text-muted">( Optional )</span></label>
                                        @php
                                        $selected_heights = isset($data->height) ? explode(',', $data->height) : [];
                                        @endphp
                                        @forelse ($categories as $cat)
                                        <div class="col-3">
                                            <label class="form-label text-muted">{{ $cat->name }}</label>
                                            @forelse ($cat->heights as $h)
                                            <div class="form-check">
                                                <input {{ in_array($h->id, $selected_heights) ? 'checked' : '' }} 
                                                class="form-check-input" name="height[]" type="checkbox" value="{{ $h->id }}" id="flexCheckDefault">
                                                <label class="form-check-label" for="">
                                                {{ $h->height }}"    
                                                </label>
                                            </div>
                                            @empty
                                            <br>
                                            <label class=" text-muted fst-italic">Not Available</label>
                                            @endforelse
                                        </div>    
                                        @empty
                                        @endforelse
                                    </div> --}}
                                    <div class="mb-4">
                                        <label class="form-label">Order <span class="text-muted">( Optional )</span></label>
                                        <input type="number" value="" name="order" class="form-control" placeholder="Order ( Higher = more priority )">
                                        {{-- <select class="form-control" data-select2-selector="icon">
                                            <option value="lead" data-icon="feather-at-sign">Lead</option>
                                            <option value="coustomer" data-icon="feather-users">Coustomer</option>
                                        </select> --}}
                                    </div>
                                        {{-- <label class="form-label">Visibility:</label>
                                        <select class="form-select form-control" data-select2-selector="visibility">
                                            <option value="public" data-icon="feather-globe">Public</option>
                                            <option value="private" data-icon="feather-lock">Private</option>
                                            <option value="private" data-icon="feather-user">Personal</option>
                                            <option value="customs" data-icon="feather-settings">Customs</option>
                                        </select> --}}
                                    {{-- </div> --}}
                                    {{-- <div class="row">
                                        <div class="col-lg-6 mb-4">
                                            <label class="form-label">Start <span class="text-danger">*</span></label>
                                            <input class="form-control" id="startDate" placeholder="Pick start date ">
                                        </div>
                                        <div class="col-lg-6 mb-4">
                                            <label class="form-label">Due <span class="text-danger">*</span></label>
                                            <input class="form-control" id="dueDate" placeholder="Pick due date">
                                        </div>
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">Tags:</label>
                                        <select class="form-select form-control" data-select2-selector="tag" multiple>
                                            <option value="primary" data-bg="bg-primary">Team</option>
                                            <option value="teal" data-bg="bg-teal">Primary</option>
                                            <option value="success" data-bg="bg-success">Updates</option>
                                            <option value="warning" data-bg="bg-warning">Personal</option>
                                            <option value="danger" data-bg="bg-danger">Promotions</option>
                                            <option value="indigo" data-bg="bg-indigo">Customs</option>
                                        </select>
                                    </div>
                                    <div class="mb-0">
                                        <label class="form-label">Assignee:</label>
                                        <select class="form-select form-control" data-select2-selector="user" multiple>
                                            <option value="alex@outlook.com" data-user="1">alex@outlook.com</option>
                                            <option value="john.deo@outlook.com" data-user="2">john.deo@outlook.com</option>
                                            <option value="green.cutte@outlook.com" data-user="3">green.cutte@outlook.com</option>
                                            <option value="nancy.elliot@outlook.com" data-user="4">nancy.elliot@outlook.com</option>
                                            <option value="mar.audrey@gmail.com" data-user="5">mar.audrey@gmail.com</option>
                                            <option value="erna.serpa@outlook.com" data-user="6">erna.serpa@outlook.com</option>
                                            <option value="green.cutte@outlook.com" data-user="7">green.cutte@outlook.com</option>
                                            <option value="nancy.elliot@outlook.com" data-user="8">nancy.elliot@outlook.com</option>
                                            <option value="mar.audrey@gmail.com" data-user="9">mar.audrey@gmail.com</option>
                                            <option value="erna.serpa@outlook.com" data-user="10">erna.serpa@outlook.com</option>
                                            <option value="mar.audrey@gmail.com" data-user="11">mar.audrey@gmail.com</option>
                                            <option value="erna.serpa@outlook.com" data-user="12">erna.serpa@outlook.com</option>
                                        </select>
                                    </div> --}}
                                </div>
                                 
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ Main Content ] end -->

{{-- indian num to string  --}}
<script>
document.addEventListener("DOMContentLoaded", function() {
    const priceInput = document.getElementById("priceInput");
    const formattedPrice = document.getElementById("formattedPrice");
    const amountInWords = document.getElementById("amountInWords");

    priceInput.addEventListener("keydown", function(event) {
        if (event.key === "e" || event.key === "E" || event.key === "-" || event.key === "+") {
            event.preventDefault(); // Stop the input
        }
    });

    priceInput.addEventListener("input", function() {
        let value = priceInput.value;

        if (value) {
            let num = parseInt(value, 10);
            // formattedPrice.textContent = "₹ " + num.toLocaleString("en-IN"); // Indian number format
            // amountInWords.textContent = convertToIndianWords(num) + " Rupees"; // Convert to words
            formattedPrice.textContent = convertToIndianWords(num) + " Rupees"; // Convert to words
        } else {
            formattedPrice.textContent = "";
            amountInWords.textContent = "";
        }
    });

    function convertToIndianWords(num) {
        if (num === 0) return "Zero";

        let units = ["", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"];
        let teens = ["Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen"];
        let tens = ["", "", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"];
        let thousands = ["", "Thousand", "Lakh", "Crore"];

        let words = [];
        let numStr = num.toString();
        let numLength = numStr.length;

        let crore = Math.floor(num / 10000000);
        num %= 10000000;

        let lakh = Math.floor(num / 100000);
        num %= 100000;

        let thousand = Math.floor(num / 1000);
        num %= 1000;

        let hundred = Math.floor(num / 100);
        num %= 100;

        let ten = Math.floor(num / 10);
        let one = num % 10;

        if (crore > 0) words.push(convertToIndianWords(crore) + " Crore");
        if (lakh > 0) words.push(convertToIndianWords(lakh) + " Lakh");
        if (thousand > 0) words.push(convertToIndianWords(thousand) + " Thousand");
        if (hundred > 0) words.push(units[hundred] + " Hundred");

        if (ten === 1) {
            words.push(teens[one]); // Handles numbers 10-19 correctly
        } else {
            if (ten > 1) words.push(tens[ten]); // Handles 20, 30, 40, etc.
            if (one > 0) words.push(units[one]); // Handles single digits after 20, 30, etc.
        }

        return words.join(" ");
    }
});


</script>

            @include('admin.includes.footer')
<script>
$(document).on("change", "select[name='category_id']", function() {
        let category_id = $(this).val();
        if (category_id) {
            $.ajax({
                url: "{{ url('admin/getSizebyCategory') }}",
                type: "GET",
                data: {
                    category_id: category_id
                },
                success: function(data) {
                    console.log(data);
                    $(".size").empty();
                    $(".dimension").empty();
                    $(".height").empty();
                    $.each(data.sizes, function(key, value) {
                        $(".size").append('<option value="' + value.id + '">' + value.size + '</option>');
                    });

                    $.ajax({
                        url: "{{url('admin/getHeightbyCategory')}}",
                        type: "GET",
                        data: {
                            category_id: category_id
                        },
                        success: function(data) {
                            console.log(data);
                            $(".height").empty();
                            $.each(data.heights, function(key, value) {
                                $(".height").append('<option value="' + value.id + '">' + value.height+'"' + '</option>');
                            });
                        }
                    })

                    $('.size').trigger("change");
                }
            });
            
        }
    })

$(document).on('change', '.size', function() {
        var size= $(this).val();
        var dataId= $(this).attr('data-id');
        $.ajax({
            url: "{{ url('admin/getDimenionsbySize') }}",
            type: "GET",
            data: {
                size_id: size,
                dataId: dataId,
            },
            success: function(data) {
                console.log(data);
                $(".dimension[data-id=" + dataId + "]").empty();
                $.each(data.dimensions, function(key, value) {
                    $(".dimension[data-id=" + dataId + "]").append('<option value="' + value.id + '">' + value.dimension + '</option>');
                });
            },
            error: function(data) {
                console.log(data);
            }
        });
    })
 var count=1;
    $('#addVariant').on('click', function() {
        if(count<30){
            count++;
        }else{
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'You can add only 30 variants at once',
            });
            return false;
        }
        var data_id= crypto.randomUUID();
        var html = `
                    <div class="mb-4 col-2" data-id="${data_id}">
                        <label class="form-label">Dimension x<span class="text-danger">*</span></label>
                        <input type="text" value="0" required name="dimensionx[]" class="form-control" placeholder="Dimension">
                        @error('dimensionx')
                        <div class="p-1 my-1 alert alert-danger">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="mb-4 col-2" data-id="${data_id}">
                        <label class="form-label">Dimension y<span class="text-danger">*</span></label>
                        <input type="text" value="0" required name="dimensiony[]" class="form-control" placeholder="Dimension">
                        @error('dimensiony')
                        <div class="p-1 my-1 alert alert-danger">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="mb-4 col-2" data-id="${data_id}">
                        <label class="form-label">Height <span class="text-danger">*</span></label>
                        <input type="text" value="0" required name="height[]" class="form-control" placeholder="Height">
                        @error('height')
                        <div class="p-1 my-1 alert alert-danger">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="mb-4 col-2" data-id="${data_id}">
                        <label class="form-label">Discount Percentage<span class="text-danger">*</span></label>
                        <input type="text" value="0" required name="discount[]" class="form-control" placeholder="Discount">
                        @error('discount')
                            <div class=" my-1 p-1 alert alert-danger">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    <div class="mb-4 col-2" data-id="${data_id}">
                        <label class="form-label">Price <span class="text-danger">*</span></label>
                        <input type="text" value="0" required name="variantPrice[]" class="form-control" placeholder="Price">
                        @error('variantPrice')
                            <div class=" my-1 p-1 alert alert-danger">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    <div class="col-2">
                        <button data-id="${data_id}" type="button" class="btn btn-danger remove-variant">Remove</button>
                    </div>
                    `;
        $('.variantDiv').append(html);
        $('.variantDiv .select2').select2();
        
        var category_id= $('select[name="category_id"]').val();
        if(category_id){
            $.ajax({
                url: "{{ url('admin/getSizebyCategory') }}",
                type: "GET",
                data: {
                    category_id: category_id
                },
                success: function(data) {
                    console.log(data);
                    $('.size[data-id="'+data_id+'"]').empty();
                    $('.dimension[data-id="'+data_id+'"]').empty();
                    $('.height[data-id="'+data_id+'"]').empty();
                    $.each(data.sizes, function(key, value) {
                        $('.size[data-id="'+data_id+'"]').append('<option value="' + value.id + '">' + value.size + '</option>');
                    });
                    $('.size[data-id="'+data_id+'"]').trigger("change");
                }
            });
            $.ajax({
                url: "{{url('admin/getHeightbyCategory')}}",
                type: "GET",
                data: {
                    category_id: category_id
                },
                success: function(data) {
                    console.log(data);
                    $('.height[data-id="'+data_id+'"]').empty();
                    $.each(data.heights, function(key, value) {
                        $('.height[data-id="'+data_id+'"]').append('<option value="' + value.id + '">' + value.height+'"' + '</option>');
                    });
                }
            })
            
        }

    });
    $(document).ready(function() {
        $('.summernote').summernote({
                height: 200,
                toolbar: [
                    ['style', ['style']], // Includes Heading, Blockquote, etc.
                    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                    ['fontsize', ['fontsize']], // Font size options
                    ['fontname', ['fontname']], // Font family options
                    ['color', ['color']], // Text color
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']], // Line height
                    ['insert', ['link', 'picture', 'video']], // You can remove picture/video if not needed
                    ['view', ['codeview', 'help']]
                ],
                fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Merriweather', 'Times New Roman', 'Verdana'],
                fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '48', '64', '72']
            });

    });

$(document).on('click','.remove-variant', function(e) {
    var data_id = $(this).attr('data-id');
    $('div[data-id="'+data_id+'"]').remove();
    $('button[data-id="'+data_id+'"]').remove();
});

</script>