@extends('layout.admin')
@section('content')
<div class="dashboard-main-body">
    <div class="row ">
        <div class="col-xxl-12">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                <a href="javascript:void(0)">
                    <h6 class="fw-semibold mb-0"><img src="{{ asset('public/admin_assets/images/keyboard_arrow_right.svg') }}"> Sub category
                        <!-- <span class=" fw-normal">(Big On Breakfast)</span> -->
                    </h6>
                </a>
                <div class="menu-grp-btn">
                    <a href="javascript:void(0)" id="edit-sequence-btn" class="btn btn-dark">Edit Sequence</a>
                    <a href="javascript:void(0)" id="save-sequence-btn" class="btn btn-success" style="display:none;">Save Sequence</a>
                    <a href="#add_subcategory_Modal" class="btn btn-primary" data-bs-toggle="modal"><img src="{{ asset('public/admin_assets/images/add-square.svg') }}">Add Sub Category</a>
                </div>
            </div>
        </div>
    </div>
    {{-- {{dd($data)}} --}}
    @if (session('success'))
    <script>
        toastr.success('{{ session("success") }}', 'Success');
    </script>
    @endif
    <div class="row mt-3" id="categories-drag">
        @if($code == 1)
        @foreach($data as $item)
        <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12 mb-32" id="categoryCard{{$item->sub_category_id}}">
            <div class="main_card">
                <div class="card_body">
                    <h6 class="card_title">{{ $item->sub_category_name }}  ({{ $item->category_name }}) </h6>

                    <div class="card-img my-3">
                        <img src="{{ $item->images[0]->name }}" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="card_footer">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                        <div class="form-switch  d-flex align-items-center gap-3 switch_Active">
                            <label class="form-check-label  dark_black" for="Active">Active</label>
                            <!-- <input class="form-check-input" type="checkbox" role="switch" id="Active" checked=""> -->
                            <input class="form-check-input" type="checkbox" role="switch" id="activeToggle{{$item->category_id}}"
                                @if($item->is_active == 1) checked @endif
                            onchange="ActiveInactiveSubCategory('{{$item->sub_category_id}}', this.checked ? 1 : 0)">
                        </div>
                        <div class="action-btn-grp">
                            <a href="#subcat_edit_Modal" data-bs-toggle="modal" data-id="{{ $item->sub_category_id }}" class="cateditBtn">
                                <img src="{{ asset('public/admin_assets/images/edit.svg') }}">
                            </a>
                            <a href="javascript:void(0)" onclick="DeleteSubCategory('{{$item->sub_category_id}}')"><img src="{{ asset('public/admin_assets/images/trash.svg') }}"></a>
                        </div>
                    </div>
                    <div class="pt-3">
                        <hr>
                    </div>
                    <p class="mt-3 Combos_date text-capitalize">Last Edited: {{ \Carbon\Carbon::parse($item->updated_at)->format('d M Y | h:i A') }}
                        <br>by {{ $item->updated_admin_name }}
                    </p>
                </div>
            </div>
        </div>
        @endforeach
        @else
        <p>NO DATA</p>
        @endif
    </div>
</div>
<!-- ===============================================Modal ==================================================-->
<div class="modal fade" id="add_subcategory_Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-custom">
        <div class="modal-content p-10 radius-15">
            <div class="modal-header border-0">
                <h5 class="modal-title text-xxl" id="exampleModalLabel">Add Sub Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addSubCategoryForm" action="{{ route('admin.subcategory.add') }}" method="POST" enctype="multipart/form-data" data-parsley-validate>
                    @csrf

                    <div class="add-form-box">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group mb-3">
                                    <label>Category</label>
                                    <select class="form-control custom-select" name="category_id" required data-parsley-required="true" data-parsley-error-message="Please select a category">
                                        <option value="">Select Category</option>
                                        @if($category_list->code == 1)
                                        @foreach($category_list->data as $category)
                                        @if($category->is_active == 1)
                                        <option value="{{ $category->category_id }}">{{ $category->name }}</option>
                                        @endif
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group mb-3">
                                    <label>Sub Category name</label>
                                    <input type="text" name="subcategory_name" class="form-control" placeholder="Enter Subcategory name" required data-parsley-required-message="Subcategory name is required">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group mb-5">
                                    <label>Upload Images</label>
                                    <div class="doc-upload">
                                        <label class="document-label">
                                            <input type="file" name="images[]" id="image-upload" required multiple data-parsley-required-message="Image is required" onchange="previewImages('add')">
                                            <img src="{{ asset('public/admin_assets/images/upload.svg') }}">
                                        </label>
                                    </div>
                                    <div id="image-preview-add"></div>
                                </div>
                            </div>
                            <div class="col-xxl-12">
                                <div class="form-group text-center">
                                    <button type="submit" class="btn btn-primary text-dark hover-text-white btn-width">Add</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
<div class="modal fade" id="subcat_edit_Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-custom">
        <div class="modal-content p-10 radius-15">
            <div class="modal-header border-0">
                <h5 class="modal-title text-xxl" id="exampleModalLabel">Edit Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="sub_category_id" value="">
                <div class="add-form-box">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group mb-3">
                                <label>Category</label>
                                <select name="category_id" class="form-control custom-select">
                                    <!-- Dynamic categories -->
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group mb-3">
                                <label>Sub Category name</label>
                                <input type="text" name="sub_category_name" class="form-control" value="">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group mb-5">
                                <label>Upload Image (Optional)</label>
                                <div class="doc-upload">
                                    <label class="document-label h-auto p-10 justify-content-start">
                                        <input type="file" name="images[]" id="image-upload-edit" multiple onchange="previewImages('edit')">
                                        <img src="{{ asset('public/admin_assets/images/upload.svg') }}">
                                    </label>
                                </div>
                                <div class="row mt-11" id="image_preview"> <!-- existed images --> </div>
                                <div id="image-preview-edit"><!-- new selected images --></div>
                            </div>
                        </div>
                        <input type="hidden" name="existing_images" id="existing_images" value="">
                        <div class="col-xxl-12">
                            <div class="form-group text-center">
                                <button type="button" class="btn btn-primary text-dark hover-text-white btn-width" id="submit_category">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')

<!-- Script for delete category -->
<script>
    function DeleteSubCategory(category_id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "Are you sure you want to delete this Subcategory?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes',
            cancelButtonText: "No",
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('admin.subcategory.delete') }}",
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        category_id: category_id,
                    },
                    success: function(response) {
                        $('#categoryCard' + category_id).remove();
                    },
                    error: function(xhr, status, error) {
                        location.reload();
                    }
                });
            }
        });
    }
</script>

<!-- Script for preview image on add time -->
<script>
    function previewImages(type) {
        let previewContainer;
        if (type === 'add') {
            previewContainer = document.getElementById('image-preview-add');
        } else if (type === 'edit') {
            previewContainer = document.getElementById('image-preview-edit');
        }
        console.log(previewContainer, "previewContainer");
        previewContainer.innerHTML = '';

        let files;
        if (type === 'add') {
            files = document.getElementById('image-upload').files;
        } else if (type === 'edit') {
            files = document.getElementById('image-upload-edit').files;
        }
        if (files) {
            Array.from(files).forEach(file => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.width = '150px';
                    img.style.height = '100px';
                    img.style.marginRight = '10px';
                    img.style.marginBottom = '10px';
                    previewContainer.appendChild(img);
                };
                reader.readAsDataURL(file);
            });
        }
    }
</script>

<!-- Script for status change of category -->
<script>
    function ActiveInactiveSubCategory(sub_category_id, status) {
        Swal.fire({
            title: 'Are you sure?',
            text: "Are you sure you want to change availibility of this Subcategory?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes',
            cancelButtonText: "No",
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('admin.subcategory.active_inactive') }}",
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        sub_category_id: sub_category_id,
                        status: status,
                    },
                    success: function(response) {
                        console.log(response, "r");
                        if (response.status === 'success') {
                            toastr.success(response.message, 'Success');
                        } else {
                            toastr.error(response.message, 'Error');
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error('An unexpected error occurred.', 'Error');
                        // location.reload();
                    }
                });
            }
        });
    }
</script>

<script>
    $(document).ready(function() {
        $('.cateditBtn').on('click', function() {
            var categoryId = $(this).data('id');
            var url = '{{ route("admin.subcategory.edit", ":categoryId") }}';
            url = url.replace(':categoryId', categoryId);

            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    sub_category_id: categoryId,
                },
                success: function(response) {
                    console.log(response, "response");
                    var category = response.data;

                    $('#subcat_edit_Modal input[name="sub_category_id"]').val(category.sub_category_id);
                    $('#subcat_edit_Modal input[name="sub_category_name"]').val(category.sub_category_name);

                    var categoryDropdown = $('#subcat_edit_Modal select[name="category_id"]');
                    categoryDropdown.empty();
                    categoryDropdown.append('<option value="">Select Category</option>');
                    if (response.categories.length > 0) {
                        response.categories.forEach(function(cat) {
                            var selected = (cat.category_id == category.category_id) ? 'selected' : '';
                            categoryDropdown.append(`<option value="${cat.category_id}" ${selected}>${cat.name}</option>`);
                        });
                    } else {
                        categoryDropdown.append('<option value="">No categories available</option>');
                    }

                    var images = category.images;
                    var imageHtml = '';
                    if (images.length > 0) {
                        images.forEach(function(image) {
                            imageHtml += `<div class="col-md-3 position-relative">
                            <img src="${image.name}" alt="Category" class="preview_img">
                            <a href="javascript:void(0)" onclick="hideImage(this); return false;" ><img src="{{ asset('public/admin_assets/images/close-circle.svg') }}" alt="close-circle" class="close-circle"></a>
                        </div>`;
                        });
                    } else {
                        imageHtml = '<p>No images available</p>';
                    }

                    var existingImages = category.images.map(function(image) {
                        return image.name;
                    }).join(',');
                    $('#subcat_edit_Modal input[name="existing_images"]').val(existingImages);
                    $('#subcat_edit_Modal .row.mt-11').html(imageHtml);
                    $('#subcat_edit_Modal').modal('show');
                },
                error: function(xhr, status, error) {
                    console.log('Error:', error);
                }
            });
        });
    });

    function hideImage(element) {
        var imageWrapper = element.closest('.col-md-3');
        if (imageWrapper) {
            imageWrapper.style.display = 'none';
        }
        var remainingImages = [];
        document.querySelectorAll('.col-md-3 .preview_img').forEach(function(img) {
            if (img.closest('.col-md-3').style.display !== 'none') {
                remainingImages.push(img.src);
            }
        });
        $('#subcat_edit_Modal input[name="existing_images"]').val(remainingImages.join(','));
    }


    $('#submit_category').on('click', function() {
        var subCategoryId = $('#subcat_edit_Modal input[name="sub_category_id"]').val();
        var categoryId = $('#subcat_edit_Modal select[name="category_id"]').val();
        var subCategoryName = $('#subcat_edit_Modal input[name="sub_category_name"]').val();

        var formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('sub_category_id', subCategoryId);
        formData.append('category_id', categoryId);
        formData.append('sub_category_name', subCategoryName);
        var existingImages = $('#existing_images').val();
        if (existingImages) {
            formData.append('existing_images', existingImages);
        }
        var files = $('#image-upload-edit')[0].files;
        for (var i = 0; i < files.length; i++) {
            formData.append('images[]', files[i]);
        }
        $.ajax({
            url: '{{ route("admin.subcategory.update") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                console.log(response, "Updated category data");
                $('#subcat_edit_Modal').modal('hide');

                location.reload();
            },
            error: function(xhr, status, error) {
                console.log('Error:', error);
            }
        });
    });
</script>
<!-- Drag Category -->
<script>
    $(document).ready(function() {
        $("#categories-drag").sortable({
            disabled: true
        });

        $('#edit-sequence-btn').on('click', function() {
            $("#categories-drag").sortable('enable');
            $('#edit-sequence-btn').hide();
            $('#save-sequence-btn').show();
        });

        $('#save-sequence-btn').on('click', function() {
            var cat_ids = $('#categories-drag div').map(function(i, el) {
                return el.id ? el.id : null;
            }).get().filter(Boolean);

            $.ajax({
                url: "{{ route('admin.subcategory.change_sequence') }}",
                type: 'POST',
                data: {
                    id: cat_ids,
                    "_token": "{{ csrf_token() }}"
                },
                dataType: 'json',
                success: function(response) {
                    if (response.status == 'success') {
                        toastr.success('Sequence updated successfully', 'Success');
                        $("#categories-drag").sortable('disable');
                        $('#save-sequence-btn').hide();
                        $('#edit-sequence-btn').show();
                    }
                },
                error: function() {
                    toastr.error('Problem in changing order. Please try again.', 'Error');
                }
            });
        });
    });
</script>
@endsection