@extends('buyer.adminlayout')
@section('title')
<title>Category</title>
@endsection
@section('frontend-content')
<!-- Main Content -->

<section class="container-fluid d-flex justify-content-center mt-3 p-3">
    <div class=" container mx-auto categories">
        <h3>Sub Category</h3>
        <br>
        <div class="col-12">

            <button type="button" class="btn btn-primary mb-3 float-end" data-bs-toggle="modal" data-bs-target="#categoryModal">
                Add Sub Category
            </button>
            <!-- Category Card -->
            <div class="category-item">

                <table id="example" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>SNO</th>
                            <th>Category Name</th>
                            <th>Sub Category </th>
                            <th>Date</th>
                            <th class="text-start">Count</th>
                            <th>Action</th>

                        </tr>
                    </thead>
                    <tbody>
                        @foreach($categorylist as $subCategory)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{$subCategory->category->category_name}}</td>
                            <td>{{$subCategory->sub_category_name}}</td>
                            <td></td>
                            <td class="text-center">
                                <span class="badge bg-secondary">
                                    {{ $subcategoryCounts[$subCategory->id] ?? 0 }}
                                </span>
                            </td>
                            <td class="text-center">
                                @php
                                $editid = $subCategory->id
                                @endphp
                                <a href="#" class="btn btn-warning btn-sm edit-btn" data-id="{{ $subCategory->id }}"
                                    data-name="{{ $subCategory->name }}">Edit</a>
                                <form action="{{ route('sub-category.destroy', $subCategory->id) }}" method="POST" style="display:none;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm delete-btn">Delete</button>
                                </form>
                            </td>
                        </tr>
                        @endforeach



                    </tbody>
                </table>

            </div>

            <!-- Product Card -->

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


<!-- Modal for Adding Category -->
<div class="modal fade" id="categoryModal" tabindex="-1" aria-labelledby="categoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="categoryForm" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="_method" id="formMethod" value="POST">
            <input type="hidden" name="subcategory_id" id="subcategory_id" value="">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="categoryModalLabel">Add Sub Category</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Form to Add Category -->
                    <div class="mb-3">
                        <label for="categoryName" class="form-label">Category Name</label>
                        <select class='form-control' name='category_id'>
                            <option value=''>Select Category</option>
                            @foreach($categories as $categorydata)
                            <option value='{{$categorydata->category_id}}'>{{$categorydata->category_name}}</option>

                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="categoryName" class="form-label">Sub Category Image</label>

                        <input type="file" class="form-control" name="sub_category_image" id="subcategoryimage">

                    </div>

                    <div class="mb-3">
                        <label for="categoryName" class="form-label">Sub Category Name</label>
                        <input type="text" class="form-control" name='sub_category_name' id="categoryName" required>
                    </div>

                    <div class="mb-3">
                        <label for="rfidPrefix" class="form-label">
                            RF-ID Prefix
                        </label>
                        <input type="text" class="form-control" name="rfid_prefix" id="rfidPrefixAdd"
                            maxlength="4" pattern="[A-Z]{1,4}" required>
                        <small class="text-muted">Max 4 letters. Combination of Category and Sub-Category.</small>
                    </div>



                    <button type="submit" class="btn btn-primary">Add Sub Category</button>
        </form>
    </div>
</div>


</div>
</div>





<div class="modal fade" id="editSubCategoryModal" tabindex="-1" aria-labelledby="editSubCategoryLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editSubCategoryLabel">Edit Sub-Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editSubCategoryForm" method="POST" enctype="multipart/form-data">

                @csrf
                @method('PUT')
                <div class="modal-body">

                    <div class="mb-3">
                        <label for="categoryName" class="form-label">Category Name</label>
                        <select class='form-control' name='category_id'>
                            <option value=''>Select Category</option>

                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="categoryName" class="form-label">Sub Category Image</label>

                        <input type="file" class="form-control" name="sub_category_image" id="subcategoryimage">
                        <img id="subcategoryImagePreview" src="#" alt="Sub Category Image"
                            style="max-width: 100px; margin-top: 10px; display: none;">
                    </div>

                    <div class="mb-3">
                        <label for="subCategoryName" class="form-label">Sub-Category Name</label>
                        <input type="text" class="form-control" id="subCategoryName" name="sub_category_name" required>
                    </div>

                    <div class="mb-3">
                        <label for="rfidPrefixEdit" class="form-label">
                            RF-ID Prefix
                        </label>
                        <input type="text" class="form-control" name="rfid_prefix" id="rfidPrefixEdit"
                            maxlength="4" pattern="[A-Z]{1,4}" required>
                        <small class="text-muted">Max 4 letters. Combination of Category and Sub-Category.</small>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Edit Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>


@endsection


@push('custom-scripts')
<script>
    $(document).ready(function() {



        $("#categoryForm").submit(function(e) {
            e.preventDefault(); // Prevent normal form submission

            var formData = new FormData(this); // Create FormData object\
            formData.append("rfid_prefix", $("#rfidPrefixAdd").val());
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: "{{ route('sub-category.store') }}", // Replace with your route
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,


                success: function(response) {
                    toastr.success("Subcategory added successfully!");
                    $("#categoryForm")[0].reset(); // Reset form
                    $("#categoryModal").modal("hide");
                    location.reload();
                    // Hide modal (if needed)
                    // Optionally, refresh the category list
                },
                error: function(xhr) {
                    alert("Something went wrong! Please try again.");
                    console.log(xhr.responseText); // Debugging
                }
            });
        });

        $("#rfidPrefixAdd, #rfidPrefixEdit").on("input", function() {
            $(this).val($(this).val().toUpperCase().replace(/[^A-Z]/g, "").slice(0, 4));
        });

        $("#editCategoryForm").submit(function(e) {
            e.preventDefault(); // Prevent normal form submission
            alert('hhhh');
            var formData = new FormData(this); // Create FormData object
            formData.append("rfid_prefix", $("#rfidPrefixEdit").val());
            // Check if you're in edit mode by looking for a hidden input with the subcategory ID
            var subCategoryId = $("#editCategoryForm input[name='subcategory_id']").val();
            var url = subCategoryId ?
                `/sub-category/${subCategoryId}/update` // Update URL
                :
                "{{ route('sub-category.store') }}"; // Create URL

            var method = subCategoryId ? "POST" : "POST"; // Use POST with @method('PUT') for updates

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: url,
                type: method,
                data: formData,
                contentType: false,
                processData: false,

                success: function(response) {
                    toastr.success(subCategoryId ? "Subcategory updated successfully!" : "Subcategory added successfully!");
                    $("#editCategoryForm")[0].reset(); // Reset form
                    $("#categoryModal-edit").modal("hide");
                    location.reload(); // Optionally, refresh the page
                },
                error: function(xhr) {
                    alert("Something went wrong! Please try again.");
                    console.log(xhr.responseText); // Debugging
                }
            });
        });

    });
</script>

<script>
    $(document).ready(function() {
        var subCategoryId;

        // Open modal and fetch data
        $('.edit-btn').on('click', function() {
            subCategoryId = $(this).data('id');

            // Fetch sub-category data via AJAX
            $.ajax({
                url: '/sub-category/' + subCategoryId + '/edit',
                type: 'GET',
                success: function(data) {
                    // Populate the form with the fetched data

                    $('#subCategoryName').val(data.subCategory.sub_category_name);
                    $('#rfidPrefixEdit').val(data.subCategory.rfid_prefix);
                    var categorySelect = $('select[name="category_id"]');
                    categorySelect.empty(); // Clear existing options
                    categorySelect.append('<option value="">Select Category</option>');
                    data.categories.forEach(function(category) {
                        categorySelect.append(
                            `<option value="${category.category_id}" ${category.category_id == data.subCategory.category_id ? 'selected' : ''}>${category.category_name}</option>`
                        );
                    });

                    // Show the sub-category image if it exists
                    if (data.subCategory.sub_category_image) {
                        console.log(data.subCategory.sub_category_image);





                        $('#subcategoryImagePreview').attr('src', '/storage/' + data.subCategory.sub_category_image).show();


                    } else {

                        $('#subcategoryImagePreview').hide();
                    }
                    // Show the modal
                    $('#editSubCategoryModal').modal('show');
                },
                error: function(xhr, status, error) {
                    alert('An error occurred while fetching data: ' + xhr.responseText);
                }
            });
        });

        // Handle form submission via AJAX
        $('#editSubCategoryForm').on('submit', function(e) {
            e.preventDefault(); // Prevent default form submission

            let formData = new FormData(this);
            formData.append('_method', 'PUT'); // Simulate PUT request if Laravel expects it
            formData.append("rfid_prefix", $("#rfidPrefixEdit").val());
            $.ajax({
                url: '/buyersubcategoryupdate/' + subCategoryId,
                type: 'POST', // Use POST instead of PUT for FormData
                data: formData,
                processData: false, // Required for FormData
                contentType: false, // Required for FormData
                success: function(response) {
                    alert('Sub-Category updated successfully!');
                    $('#editSubCategoryModal').modal('hide');
                    // Optionally refresh the table or page content
                },
                error: function(xhr, status, error) {
                    alert('An error occurred: ' + xhr.responseText);
                }
            });
        });

    });

    function fetchSubCategoryData(subCategoryId) {
        $.ajax({
            url: `/buyersubcategoryedit/${subCategoryId}`,
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                var subCategory = response.subCategory;
                var categories = response.categories;

                // Populate the form fields
                $('#subcategory_id').val(subCategory.id);

                $('#categoryName').val(subCategory.sub_category_name);
                if (subCategory.sub_category_image) {
                    $('#subcategoryImagePreview')
                        .attr('src', subCategory.sub_category_image_url) // Set correct path
                        .show(); // Show the image
                } else {
                    $('#subcategoryImagePreview').hide(); // Hide if no image
                }
                $("select[name='category_id']").empty();

                // Populate the category dropdown
                categories.forEach(function(category) {
                    var selected = subCategory.category_id == category.id ? 'selected' : '';
                    $("select[name='category_id']").append(
                        `<option value="${category.id}" ${selected}>${category.category_name}</option>`
                    );
                });
                $('#categoryForm').attr('id', 'editCategoryForm');
                $('#formMethod').val('PUT'); // Change the method to PUT for updating
                $('#formSubmitButton').text('Update Sub Category'); // Update the button text
            },
            error: function(error) {
                console.error('Error fetching sub-category data:', error);
            }
        });
    }

    $(document).ready(function() {
        $('.delete-btn').click(function(e) {
            e.preventDefault();
            var form = $(this).closest('form');

            if (confirm("Are you sure you want to delete this subcategory?")) {
                form.submit();
            }
        });


    });
</script>
@endpush