@include('Admin.Includes.header')

<style>
    .group {
        min-height: 400px;
        height: 400px;
        overflow-y: auto;
    }

    .search_group {
        min-height: 200px;
        height: 200px;
        overflow-y: auto;
    }

    .search::placeholder {
        font-size: 18px;
        color: black;
    }

    .area-group {
        cursor: pointer;
    }
    .btn_show222{
        display: flex !important;
        flex-wrap: wrap;
    }
</style>

<div class="container-fluid">
    <!-- <h1>Area Group Management</h1> -->
    <!-- Breadcrumb Start -->
    <!--================================-->
    <div class="pageheader pl-2 pd-t-25 pd-b-35">
        <div class="d-flex justify-content-between">
            <div class="clearfix">
                <div class="pd-t-5 pd-b-5">
                    <h1 class="pd-0 mg-0 tx-20 tx-dark">{{ __('Products Area Groups') }}</h1>
                </div>
                <div class="breadcrumb pd-0 mg-0">
                    <a class="breadcrumb-item" href="{{ url('/') }}/admin"><i class="icon ion-ios-home-outline"></i>
                        Dashboard</a>
                    <a class="breadcrumb-item" href="#"><i class="icon ion-ios-home-outline"></i> Products</a>
                    <span class="breadcrumb-item active">Product Area Groups</span>
                </div>
            </div>
        </div>
    </div>
    <!--/ Breadcrumb End -->
    <div class="row m-2">
        <div class="col-md-4 border p-3">
            <input type="text" class="form-control search" placeholder="Search....." />
            <br />
            <div class="group mb-5">
                <div class="d-grid gap-2">
                    <small>Please Select an Item Below</small>
                    @foreach ($areaGroups->reverse() as $areaGroup)
                        <div class="bg-white area-group mb-1 border rounded" data-id="{{ $areaGroup->id }}"
                            data-title="{{ $areaGroup->title }}" data-sku="{{ $areaGroup->sku }}"
                            data-country="{{ $areaGroup->country }}">
                            <h5 class="text-black m-0 py-1 px-2">{{ $areaGroup->title }}</h5>
                        </div>
                    @endforeach
                </div>
            </div>
            @if (Session::has('permissions') && in_array('Area Group Add', Session::get('permissions')))
            <button class="btn btn-primary w-100" data-toggle="modal" data-target="#exampleModal">Add New Group</button>
            @endif
        </div>
        <div class="col-md-8 border border-left-0 p-2">
            <h3>Group Details</h3>
            <hr>
            <div class="row p-2 border m-2">
                <div class="col-md-6">

                    <div class="d-flex">
                        <h5>Title: <span class="group-title"></span> </h5>
                    </div>
                    <div class="d-flex">
                        <h5>SKU: <span class="group-sku"></span></h5>
                    </div>
                </div>
                <div class="col-md-6">
                    <h5 class="">No of Code: <span class="group-code-count"></span></h5>
                    <div class="btn_show btn_show222 btn-group">
                        @if (Session::has('permissions') && in_array('Area Group Edit', Session::get('permissions')))
                        <button type="button" class="btn badge btn-warning" data-toggle="modal"
                            data-target="#add_more11" onclick="populateEditForm()">Edit</button>
                        @endif
                        @if (Session::has('permissions') && in_array('Area Group Delete', Session::get('permissions')))
                        <button type="button" class="btn badge btn-danger btn-delete-group ">Delete</button>
                        @endif
                     
                        <button type="button" class="btn badge btn-secondary btn-view-code">View Code</button>
                         @if (Session::has('permissions') && in_array('Add More', Session::get('permissions')))
                        <button type="button" class="btn badge btn-primary" data-toggle="modal"
                            data-target="#add_more">Add More</button>
                            @endif
                   
                    </div>
                </div>
            </div>
            <div class="row p-2 border m-2">
                <div class="col-md-12">
                    <input type="text" class="form-control search_post" name="searchText"
                        placeholder="Search....." />
                    <div class="search_group mb-5 mt-4 px-2">
                        <table id="code-table" class="table table-hover  nowrap"
                            style="width: 100% !important; display: none;">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Title</th>
                                    <th>PostCode</th>
                                    <th width="180px">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="product_type_rows" id="code-table-body">
                                <tr class="product-row">
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>#</th>
                                    <th>Title</th>
                                    <th>PostCode</th>
                                    <th width="180px">Actions</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<!-- Modal  -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Area Group</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="alert alert-success d-none" role="alert"></div>
            <div class="modal-body">
                <form id="area-group-form" action="{{ route('area-groups.store') }}" method="POST"
                    enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-6">
                            <input class="form-control restrict-input-alphabets_space addTitle" id="title_group"
                                type="text" pattern="[A-Za-z_]+" name="title" placeholder="Title" required />
                        </div>
                        <div class="col-md-6">
                            <input class="form-control restrict-input-alphabets addSku" id="sku_group" type="text"
                                pattern="[A-Za-z_]+" name="sku" placeholder="Sku" required />
                        </div>
                    </div>
                    <select class="form-control mt-2 country" id="country_group" name="country">
                        <option>select country</option>
                        <option value="AF">Afghanistan</option>
                        <option value="AX">Aland Islands</option>
                        <option value="AL">Albania</option>
                        <option value="DZ">Algeria</option>
                        <option value="AS">American Samoa</option>
                        <option value="AD">Andorra</option>
                        <option value="AO">Angola</option>
                        <option value="AI">Anguilla</option>
                        <option value="AQ">Antarctica</option>
                        <option value="AG">Antigua and Barbuda</option>
                        <option value="AR">Argentina</option>
                        <option value="AM">Armenia</option>
                        <option value="AW">Aruba</option>
                        <option value="AU" selected>Australia</option>
                        <option value="AT">Austria</option>
                        <option value="AZ">Azerbaijan</option>
                        <option value="ZW">Zimbabwe</option>
                    </select>
                    <div class="mb-3 mt-3">
                        <label>Select Area Groups CSV<br><small>CSV must have title, postcode columns <i
                                    class="text-danger">Required</i></small></label>
                        <input class="form-control meta_csv" type="file" id="csv_group" name="meta_csv"
                            accept=".csv" />
                    </div>
                </form>
                <div class="response_section"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="add_area_form()">Save changes</button>
            </div>
        </div>
    </div>
</div>
<!-- Area Group Update -->
<div class="modal fade" id="add_more11" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Area Group Update</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="alert alert-success d-none" role="alert"></div>
            <div class="modal-body">
                <form id="edit_area_group_form" action="" method="PUT">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <input type="hidden" id="edit_area_id" name="area_group" value="">
                        <div class="col-md-6">
                            <input class="form-control restrict-input-alphabets_space edit_addTitle"
                                id="edit_title_group" type="text" pattern="[A-Za-z_]+" name="title"
                                placeholder="Title" required>
                        </div>
                        <div class="col-md-6">
                            <input class="form-control restrict-input-alphabets edit_addSku" id="edit_sku_group"
                                type="text" pattern="[A-Za-z_]+" name="sku" placeholder="Sku" required>
                        </div>
                    </div>
                    <select class="form-select form-control mt-2" aria-label="Default select example"
                        id="edit_country_group" name="country">
                        <option selected disabled>Select country</option>
                        <option value="AF">Afghanistan</option>
                        <option value="AX">Aland Islands</option>
                        <option value="AL">Albania</option>
                        <option value="DZ">Algeria</option>
                        <option value="AS">American Samoa</option>
                        <option value="AD">Andorra</option>
                        <option value="AO">Angola</option>
                        <option value="AI">Anguilla</option>
                        <option value="AQ">Antarctica</option>
                        <option value="AG">Antigua and Barbuda</option>
                        <option value="AR">Argentina</option>
                        <option value="AM">Armenia</option>
                        <option value="AW">Aruba</option>
                        <option value="AU">Australia</option>
                        <option value="AT">Austria</option>
                        <option value="AZ">Azerbaijan</option>
                        <option value="ZW">Zimbabwe</option>
                    </select>
                </form>
                <div class="response_section"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="editAreaGroup()">Update</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="add_more" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add More Area Group</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="alert alert-success d-none" role="alert"></div>
            <div class="modal-body">
                <form id="area-group-form" action="" method="POST" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="csv_group_file">Choose CSV File:</label>
                                <input class="form-control-file" type="file" id="csv_group_file" name="meta_csv"
                                    accept=".csv">
                            </div>
                        </div>
                    </div>
                </form>
                <div class="response_section"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="add_more_area_group_form()">Save
                    changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit -->
<!-- Edit Area Group -->
<div class="modal fade" id="edit_area_group_Modal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Area Group Update</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="alert alert-success d-none" role="alert"></div>
            <div class="modal-body">
                <form id="edit_area_group_form" action="" method="PUT">
                    @csrf @method('PUT')
                    <div class="row">
                        <input type="hidden" id="edit_area_id" name="area_group" value="" />
                        <div class="col-md-6">
                            <input class="form-control restrict-input-alphabets_space edit_addTitle"
                                id="edit_title_group" type="text" pattern="[A-Za-z_]+" name="title"
                                placeholder="Title" required />
                        </div>
                        <div class="col-md-6">
                            <input class="form-control restrict-input-alphabets edit_addSku" id="edit_sku_group"
                                type="text" pattern="[A-Za-z_]+" name="sku" placeholder="Sku" required />
                        </div>
                    </div>
                    <select class="form-select mt-2" aria-label="Default select example" id="edit_country_group"
                        name="country">
                        <option>select country</option>
                        <option value="AF">Afghanistan</option>
                        <option value="AX">Aland Islands</option>
                        <option value="AL">Albania</option>
                        <option value="DZ">Algeria</option>
                        <option value="AS">American Samoa</option>
                        <option value="AD">Andorra</option>
                        <option value="AO">Angola</option>
                        <option value="AI">Anguilla</option>
                        <option value="AQ">Antarctica</option>
                        <option value="AG">Antigua and Barbuda</option>
                        <option value="AR">Argentina</option>
                        <option value="AM">Armenia</option>
                        <option value="AW">Aruba</option>
                        <option value="AU" selected>Australia</option>
                        <option value="AT">Austria</option>
                        <option value="AZ">Azerbaijan</option>
                        <option value="ZW">Zimbabwe</option>
                    </select>
                </form>
                <div class="response_section"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="editAreaGroup()">Update</button>
            </div>
        </div>
    </div>
</div>

@include('Admin.Includes.scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"
    integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    $(".addTitle").on("input", function() {
        var title = $(this).val();
        var sku = title.replace(/\s+/g, "-").toLowerCase();
        $(".addSku").val(sku);
    });

    $(".edit_addTitle").on("input", function() {
        var title = $(this).val();
        var sku = title.replace(/\s+/g, "-").toLowerCase();
        $(".edit_addSku").val(sku);
    });

    function add_area_form() {
        var formData = new FormData();
        formData.append("country", $("#country_group").val());
        formData.append("meta_csv", $("#csv_group").prop("files")[0]);
        formData.append("sku", $("#sku_group").val()); // Add this line to include the 'sku' field
        formData.append("title", $("#title_group").val());
        formData.append("_token", $('meta[name="csrf-token"]').attr("content"));

        $.ajax({
            url: '{{ route('area-groups.store') }}',
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                var groupTitle = $("#title_group").val(); // Get the group title from the input field
                $("#groupTitle").text(groupTitle); // Set the group title in the <h3> element

                // Show a Bootstrap success alert
                $(".alert-success")
                    .text("Your Area Group Saved Successfully")
                    .removeClass("d-none");

                // Reload the page to reflect the updated data
                location.reload();
            },
        });
    }

    function add_more_area_group_form() {
        var formData = new FormData();
        formData.append("meta_csv", $("#csv_group_file").prop("files")[0]);
        formData.append("id", $(".area-group.selected").attr("data-id"));
        formData.append("_token", $('meta[name="csrf-token"]').attr("content"));

        $.ajax({
            url: '{{ route('add-more-group-area') }}',
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                // Show a Bootstrap success alert
                $(".alert-success")
                    .text("PostCode Saved Successfully")
                    .removeClass("d-none")
                    .alert();
                // Reload the page to reflect the updated data
                location.reload();
                // Add the newly added postcode to the UI without reloading the page
                var tableBody = $(".product_type_rows");
                var newPostcode = response.postcode;
                var row = "<tr>" +
                    "<td>" + newPostcode.title + "</td>" +
                    "<td>" + newPostcode.postcode + "</td>" +
                    "<td>" +
                    "<form action='' method='POST'>" +
                    "<button type='button' class='btn btn-warning mt-2 btn-sm btn-edit-group' data-id='" + newPostcode.id + "'>Edit</button> " +
                    "<button type='button' class='btn btn-danger mt-2 btn-sm btn-delete-group' data-id='" + newPostcode.id + "'>Delete</button>" +
                    "</form>" +
                    "</td>" +
                    "</tr>";

                tableBody.append(row);

                // Clear the file input field
                $("#csv_group_file").val("");
            },
        });
    }
</script>

<script>
    function populateEditForm() {
        var areaGroup = getSelectedAreaGroup();

        $("#edit_title_group").val(areaGroup.title);
        $("#edit_area_id").val(areaGroup.edite);
        $("#edit_sku_group").val(areaGroup.sku);
        $("#edit_country_group").val(areaGroup.country);
        console.log(areaGroup);

    }

    function getSelectedAreaGroup() {
        var selectedAreaGroup = $(".area-group.selected");
        var id = selectedAreaGroup.data("id");
        var title = selectedAreaGroup.data("title");
        var sku = selectedAreaGroup.data("sku");
        var country = selectedAreaGroup.data("country");

        var areaGroup = {
            id: id,
            title: title,
            sku: sku,
            country: country,
        };
        return areaGroup;
    }
</script>

<script>
    $(".edit_addTitle").on("input", function() {
        var title = $(this).val();
        var sku = title.replace(/\s+/g, "-").toLowerCase();
        $(".edit_addSku").val(sku);
    });

    var editid = "";
    $(".area-group").on("click", function() {

        var areaGroupId = $(".area-group.selected").data("id");
        $("#code-table-body").empty();

        var title = $(this).data("title");
        var sku = $(this).data("sku");

        // Update the area group details
        $(".group-title").text(title);
        $(".group-sku").text(sku);
        $(".group-editid").text(editid);
        $("#edit_area_id").text($(".area-group").attr("data-id"));

        // Show the area group details
        $(".area-group-details").show();
    });

    function editAreaGroup() {
        var form = $("#edit_area_group_form");
        var formData = new FormData(form[0]);

        // Get the area group ID from the hidden input field
        var areaGroupId = $(".area-group.selected").attr("data-id");

        // Set the area group ID in the formData
        formData.set("area_group", areaGroupId);

        $.ajax({
            url: "{{ url('/admin/area-groups') }}/" + areaGroupId,
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                // Update the preview HTML with the updated data
                $(".group-title").text(response.title);
                $(".group-sku").text(response.sku);

                // Display a success message
                $(".alert-success")
                    .text("Data updated successfully!")
                    .removeClass("d-none")
                    .alert();

                // Reload the page to reflect the updated data
                location.reload();
            },
            error: function(xhr, status, error) {
                // Display an error message or perform any error handling
                console.log(error);
            },
        });
    }
</script>

<script>
    $(document).ready(function() {
        $(".search").on("input", function() {
            var searchText = $(this).val().toLowerCase();
            $(".area-group").each(function() {
                var title = $(this).data("title").toLowerCase();
                if (title.includes(searchText)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    });


    $(document).ready(function() {
        $(".btn_show").hide();
        $(".area-group").on("click", function() {

            var title = $(this).data("title");
            var sku = $(this).data("sku");

            // Update the area group details
            $(".group-title").text(title);
            $(".group-sku").text(sku);

            // Show the area group details
            $(".area-group-details").show();

            // Show the buttons
            $(".btn_show").show();
        });
    });

    $(document).ready(function() {
        $(".area-group").on("click", function() {
            $(".area-group").removeClass("selected");
            $(this).addClass("selected");

            var groupId = $(this).data("id");
            var groupTitle = $(this).data("title");

            $(".group-title").text(groupTitle);
        });
        $(".btn-delete-group").on("click", function() {
            var areaGroup = $(".area-group.selected");

            if (areaGroup.length === 0) {
                // No group selected
                return;
            }

            var groupId = areaGroup.data("id");
            var groupTitle = areaGroup.data("title");

            // Show a confirmation alert
            if (confirm("Are you sure?\nYou are about to delete the group: " + groupTitle)) {
                // Perform the delete operation using AJAX
                $.ajax({
                    url: "/admin/area-groups/" + groupId,
                    method: "DELETE",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    success: function(response) {
                        // Hide the area group details
                        $(".area-group-details").hide();

                        // Show a success message
                        $(".alert-success")
                            .text("Group deleted successfully!")
                            .removeClass("d-none")
                            .alert();

                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        // Show an error message
                        $(".alert-danger")
                            .text("Failed to delete group! Error: " + error)
                            .removeClass("d-none")
                            .alert();
                    },
                });
            }
        });

    });
    /////view the No Of Codes////
    function viewCode() {
        var areaGroupId = $(".area-group.selected").data("id");

        $.ajax({
            url: "/admin/area-groups/" + areaGroupId + "/codes/count",
            type: "GET",
            success: function(response) {
                $(".group-code-count").text(response.count);
            },
            error: function(xhr, status, error) {
                // Handle the error if needed
                console.log(error);
            },
        });
    }

    $(".area-group").on("click", function() {
        var areaGroupId = $(this).data("id");
        var title = $(this).data("title");
        var sku = $(this).data("sku");

        // Update the area group details
        $(".group-title").text(title);
        $(".group-sku").text(sku);

        // Make an AJAX request to fetch the count of codes
        $.ajax({
            url: "/admin/area-groups/" + areaGroupId + "/codes/count",
            type: "GET",
            success: function(response) {
                $(".group-code-count").text(response.count);
            },
            error: function(xhr, status, error) {
                // Handle the error if needed
                console.log(error);
            },
        });

        // Show the area group details
        $(".area-group-details").show();
    });

    /////view code////
    // $(document).ready(function () {
    //     $(".btn-view-code").on("click", function () {
    //         $("#code-table").toggle();
    //     });
    // });



    /////view code show details///
    // Update the code to handle the "View Code" button click event
    $(document).ready(function() {
        $(".btn-view-code").on("click", function() {
            var areaGroupId = $(".area-group.selected").data("id");
            $("#code-table-body").empty(); // Clear existing rows
            // Make an AJAX request to fetch the data
            $.ajax({
                url: "/admin/area-groups/" + areaGroupId + "/codes",
                type: "GET",
                success: function(response) {
                    if (response.data.length > 0) {
                        // Iterate through the data and create table rows
                        $.each(response.data, function(index, item) {
                            var row =
                                "<tr>" +
                                "<td class='numbering-td'>" + (index + 1) +
                                "</td>" +
                                "<td class='title-td'>" +
                                item.title +
                                "</td>" +
                                "<td class='postcode-td'>" +
                                item.postcode +
                                "</td>" +
                                "<td>" +
                                '<form action="" method="POST">' +
                                '<div class="btn-group btn-group-sm">' +
                                @if (Session::has('permissions') && in_array('Post Code Edit', Session::get('permissions')))
                                '<button type="button" class="btn btn-warning mt-2 btn-sm btn-edit-group" data-id="' + item.id +'">Edit</button> ' +
                               @endif
                                @if (Session::has('permissions') && in_array('Post Code Delete', Session::get('permissions')))
                                '<button type="button" class="btn btn-danger mt-2 btn-delete-group btn-sm" data-id="' +item.id +'">Delete</button>' +
                                @endif
                                '</div>' +
                                "</form>" +
                                "</td>" +
                                "</tr>";
                            $(".product_type_rows").append(row);
                        });

                        // Add click event listener to delete buttons
                        $(".btn-delete-group").on("click", function() {
                            var deleteButton = $(this);
                            var id = deleteButton.data("id");
                            var groupTitle = deleteButton.closest("tr").find(
                                ".title-td")
                        .text(); // Get the group title from the table row

                            if (confirm(
                                    "Are you sure?\nYou are about to delete the group: " +
                                    groupTitle)) {
                                // Get the CSRF token from the meta tag
                                var csrfToken = $('meta[name="csrf-token"]').attr(
                                    "content");

                                // Send AJAX request to delete the row
                                $.ajax({
                                    url: "/admin/area-groups/" +
                                        areaGroupId + "/codes/" + id,
                                    type: "DELETE",
                                    headers: {
                                        "X-CSRF-TOKEN": csrfToken, // Include the CSRF token in the request headers
                                    },
                                    success: function(response) {
                                        // Remove the corresponding row from the table
                                        deleteButton.closest("tr")
                                            .remove();

                                        // Update the code count
                                        var codeCount = parseInt($(
                                                ".group-code-count")
                                            .text());
                                        $(".group-code-count").text(
                                            codeCount - 1);

                                        // Show success message with Bootstrap alert
                                        $(".alert-success")
                                            .text(
                                                "The group has been deleted."
                                                )
                                            .removeClass("d-none")
                                            .alert();
                                    },
                                    error: function(xhr, status, error) {
                                        // Show error message with Bootstrap alert
                                        $(".alert-danger")
                                            .text(
                                                "Error: Failed to delete the group."
                                                )
                                            .removeClass("d-none")
                                            .alert();

                                        // Handle the error if needed
                                        console.log(error);
                                    },
                                });
                            }
                        });
                        // Add click event listener to edit buttons

                        var csrfToken = $('meta[name="csrf-token"]').attr('content');

                        $('.btn-edit-group').on('click', function() {
                            var editButton = $(this);
                            var id = editButton.data('id');
                            var titleTd = editButton.closest('tr').find(
                            '.title-td');
                            var postcodeTd = editButton.closest('tr').find(
                                '.postcode-td');

                            // Create input fields with the current title and postcode values
                            var titleInput = $("<input>").attr("type", "text").val(
                                titleTd.text());
                            var postcodeInput = $("<input>").attr("type", "text")
                                .val(postcodeTd.text());

                            // Replace the text with the input fields
                            titleTd.html(titleInput);
                            postcodeTd.html(postcodeInput);

                            // Focus on the title input field
                            titleInput.focus();

                            // Update button text to "Save"
                            editButton.text("Save");

                            // Toggle edit and save functionality
                            editButton.on("click", function() {
                                var saveButton = $(this);
                                var updatedTitle = titleInput.val();
                                var updatedPostcode = postcodeInput.val();

                                // Make an AJAX request to update the title and postcode
                                $.ajax({
                                    url: "/admin/area-groups/" +
                                        areaGroupId + "/codes/" +
                                        id,
                                    type: "PUT",
                                    headers: {
                                        "X-CSRF-TOKEN": csrfToken, // Include the CSRF token in the request headers
                                    },
                                    data: {
                                        title: updatedTitle,
                                        postcode: updatedPostcode,
                                    },
                                    success: function(response) {
                                        // Replace the input fields with the updated title and postcode
                                        titleTd.text(
                                            updatedTitle);
                                        postcodeTd.text(
                                            updatedPostcode);

                                        // Update button text back to "Edit"
                                        saveButton.text("Edit");
                                    },
                                    error: function(xhr, status,
                                        error) {
                                        // Handle the error if needed
                                        console.log(error);
                                    },
                                });
                            });
                        });

                    } else {
                        // No data found
                        var emptyRow =
                            '<tr><td colspan="3" class="text-center">No codes found</td></tr>';
                        $(".product_type_rows").append(emptyRow);
                    }

                    // Show the table
                    $("#code-table").show();
                },
                error: function(xhr, status, error) {
                    // Handle the error if needed
                    console.log(error);
                },
            });
        });
    });

    // Add an event listener to the search input for filtering table rows
$(".search_post").on("keyup", function() {
    var searchText = $(this).val().toLowerCase();
    
    // Iterate through table rows and hide those that do not match the search
    $("#code-table-body tr").each(function() {
        var row = $(this);
        var title = row.find(".title-td").text().toLowerCase();
        var postcode = row.find(".postcode-td").text().toLowerCase();
        
        if (title.includes(searchText) || postcode.includes(searchText)) {
            row.show();
        } else {
            row.hide();
        }
    });
});
</script>