@extends('components.layout.master')
@section('title', 'Product Categories')
@section('module-icon', 'fas fa-sitemap')
@section('breadcrumb')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Master Configuration</a></li>
        <li class="breadcrumb-item active">@yield('title')</li>
    </ol>
@endsection
@section('content')
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <div class="row">
                                <div class="col-lg-12">
                                    <button id="addCategoryModal" type="button"
                                        class="btn btn-success waves-effect waves-light float-right"><i class="fa fa-plus" aria-hidden="true"></i> Add New</button>
                                </div>
                            </div>
                            <br>

                            <table id="categoryTable" class="table table-bordered dt-responsive nowrap"
                                style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr>
                                        <th>Product Categories</th>
                                        <th>Product Category Image</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($categories as $index => $t)
                                        <tr>
                                            <td>{{ $t->name }}</td>
                                            <td>
                                                @if (!empty($t->imageName))
                                                    <img src="{{ asset('images/product_category/' . $t->imageName )}}"
                                                        alt="{{ $t->name }}" width="100" height="100">
                                                @else
                                                @endif
                                            </td>
                                            <td>
                                                @if ($t->status == 1)
                                                    <span class=" badge-success custom-span"
                                                        style="padding: 5px;border-radius: 5px;">Active</span>
                                                @else
                                                    <span class=" badge-danger custom-span"
                                                        style="padding: 5px;border-radius: 5px;">Inactive</span>
                                                @endif
                                            </td>
                                            <td>
                                                <button class="btn btn-purple btn-xs editCategory"
                                                    data-id="{{ $t->id }}"><i class="fa fa-edit" aria-hidden="true"></i> Edit</button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div> <!-- end col -->
            </div> <!-- end row -->



            <!-- Start Add State Modal -->
            <div class="modal fade admin-query" id="categoryModal">
                <div class="modal-dialog modal-dialog-centered small-modal">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Add product Category
                            </h4>
                            <button type="button" class="close dismissBtn" data-dismiss="modal">&times;</button>
                        </div>
                        <form action="" id="createForm" enctype="multipart/form-data">
                            <div class="modal-body">
                                <div class="row mb-3">

                                    <div class="col-lg-12">
                                        <div class="primary_input" id="stateDiv">
                                            <label class="primary_input_label" for="">Product Category Name<span
                                                    class="text-danger"> *</span></label>
                                            <input class="form-control" type="text" name="name" id="name"
                                            onkeypress="onlyAlphabets(event)" autocomplete="off">
                                            <span class="text-danger error-message" id="name_error"></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="primary_input mt-3" id="stateDiv">
                                            <label class="primary_input_label" for="">Product Category Image<span
                                                    class="text-danger"> *</span></label>
                                            <input class="form-control" type="file" name="productCategory_image"
                                                id="inputImage1" autocomplete="off">
                                            <span class="text-danger error-message" id="productCategory_image_error"></span>
                                        </div>
                                        <div class="docs-preview clearfix mt-3" style="display: none;">
                                            <div class="img-preview preview-lg"></div>
                                        </div>
                                    </div>

                                </div>
                                <div class="row mt-40">
                                    <div class="col-lg-12 text-center">

                                        <button id="createButton" type="submit"
                                            class="btn btn-success waves-effect waves-light">{!! BTN_SAVE !!}</button>
                                        <button class="btn btn-secondary waves-effect waves-light" type="reset"
                                            id="addStateResetBtn">
                                            <span class="ti-reload"></span> Reset
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- End Add State Modal -->
            <!-- Start Edit State Modal -->
            @if (isset($categories))
                <div class="modal fade admin-query" id="editCategories">
                    <div class="modal-dialog modal-dialog-centered small-modal">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Modify Product Category
                                </h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <form action="" id="updateForm" enctype="multipart/form-data">
                                <input type="hidden" name="id" id="id">
                                <div class="modal-body">
                                    <div class="row mb-3">
                                        <div class="col-lg-12">
                                            <div class="primary_input" id="stateDiv">
                                                <label class="primary_input_label" for="">Product Category Name<span
                                                        class="text-danger"> *</span></label>
                                                <input class="form-control" type="text" name="name" id="name1"
                                                onkeypress="onlyAlphabets(event)" autocomplete="off">
                                                <span class="text-danger error-message" id="name1_error"></span>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="primary_input mt-3" id="stateDiv">
                                                <label class="primary_input_label" for="">Product Category
                                                    Image<span class="text-danger"> *</span></label>
                                                <input class="form-control" type="file" name="productCategory_image"
                                                    id="inputImage2" autocomplete="off">
                                                <span class="text-danger error-message" id="productCategory_image1_error"></span>
                                            </div>
                                            <div class="form-group mt-3">
                                                <img id="existing_productCategory_image" src=""
                                                    alt="Product Category Image" style="max-width: 100px;">
                                            </div>
                                            <div class="docs-preview1 clearfix" style="display: none;">
                                                <div class="img-preview1 preview-lg"></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group" id="statusdropdown">
                                                <label class="primary_input_label" for="">active<span
                                                        class="text-danger">
                                                        *</span></label>
                                                <select name="status" class="form-control" id="active_status">

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-40">
                                        <div class="col-lg-12 text-center">

                                            <button id="createButton" type="submit"
                                                class="btn btn-success btn-sm"><i class="fa fa-plus" aria-hidden="true"></i> Update</button>
                                            <button class="btn btn-secondary waves-effect waves-light" type="reset"
                                                id="addStateResetBtnEdit">
                                                <span class="ti-reload"></span> Reset
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @endif
            <!-- End Edit State Modal -->
            <div class="modal fade bs-example-modal-lg" id="imageModal1">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Crop Image
                            </h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <form id="productImageForm" enctype="multipart/form-data">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="img-container mb-0">
                                                    <img id="image1" src="" style="width:100%;"
                                                        alt="Picture">
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <h3>Preview:</h3>
                                                <div class="docs-preview clearfix">
                                                    <div class="img-preview preview-lg"></div>
                                                    <div class="img-preview preview-md"></div>
                                                    <div class="img-preview preview-sm"></div>
                                                    <div class="img-preview preview-xs"></div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 text-center">
                                                <button type="button" class="btn btn-primary"
                                                    id="cropImage1">Crop</button>
                                            </div>
                                        </div>
                                    </div><!--end card-->
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
            <div class="modal fade bs-example-modal-lg" id="imageModal2">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Crop Image
                            </h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <form id="productImageForm" enctype="multipart/form-data">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="img-container mb-0">
                                                    <img id="image2" src="" style="width:100%;"
                                                        alt="Picture">
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <h3>Preview:</h3>
                                                <div class="docs-preview1 clearfix">
                                                    <div class="img-preview preview-lg"></div>
                                                    <div class="img-preview preview-md"></div>
                                                    <div class="img-preview preview-sm"></div>
                                                    <div class="img-preview preview-xs"></div>
                                                </div>
                                            </div>
                                            <div class="col-lg-12 text-center">
                                                <button type="button" class="btn btn-primary"
                                                    id="cropImage2">Crop</button>
                                            </div>
                                        </div>
                                    </div><!--end card-->
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div><!-- container -->
        @include('components.footertext')
    </div>
@endsection
@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

    <script>
        $(document).ready(function() {

            $('#categoryTable').DataTable({
                "language": {
                    "paginate": {
                        "previous": "<",
                        "next": ">"
                    }
                }
            });
            var reset = true;
            $('#cropImage1').on('click', function() {

            $('#image1').cropper('getCroppedCanvas').toBlob(function(blob) {
                const file = new File([blob], 'cropped_image.png', {
                    type: 'image/png'
                });
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                const inputImage1 = document.getElementById('inputImage1');
                inputImage1.files = dataTransfer.files;

                // Optional: Display the cropped image
                $('#inputImage1').attr('src', URL.createObjectURL(file));
                // $('.docs-preview').css('display', 'block');
            }, 'image/png');

            reset = false;
            $('#imageModal1').modal('hide');
            });
            $('#imageModal1').on('hidden.bs.modal', function() {

            if (reset) {
                $('#inputImage1').files = null;
                $('#inputImage1').val('');
               
            }
            });
            $('#imageModal2').on('hidden.bs.modal', function() {
            if (reset) {
                $('#inputImage2').files = null;
                $('#inputImage2').val('');
            }
            });
            $('#inputImage1').on('change', function() {
            if (!imageError1) {
                $('#imageModal1').modal('show');
            } else {
                toastr.error('Please choose an image file.');
            }
            });

            $('#cropImage2').on('click', function() {
            $('#image2').cropper('getCroppedCanvas').toBlob(function(blob) {
                const file = new File([blob], 'cropped_image.png', {
                    type: 'image/png'
                });
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                const inputImage2 = document.getElementById('inputImage2');
                inputImage2.files = dataTransfer.files;

                // Optional: Display the cropped image
                $('#inputImage2').attr('src', URL.createObjectURL(file));
                // $('.docs-preview1').css('display', 'block');
                // $('#existing_productCategory_image').css('display', 'none');
            }, 'image/png');
            reset = false;
            $('#imageModal2').modal('hide');
            });

            $('#inputImage2').on('change', function() {
                if (!imageError2) {
                    $('#imageModal2').modal('show');
                } else {
                    toastr.error('Please choose an image file.');
                }
            });

            $('#categoryModal').on('hidden.bs.modal', function() {
                tags = [];
                $('#name').val('');
                $('#inputImage1').val('');
                // Hide the image preview
                // $('.docs-preview').css('display', 'none');
                $('#name_error').text('');
                $('#productCategory_image_error').text('');
               
            });
            $('#editCategories').on('hidden.bs.modal', function() {
                tags = [];
                $('#name').val('');
                $('#inputImage2').val('');
                // Hide the image preview
                // $('.docs-preview').css('display', 'none');
                $('#name1_error').text('');
                $('#productCategory_image1_error').text('');
               
            });

            $('#addCategoryModal').on('click', function() {
                $('#categoryModal').modal('show');
            });

            $('#createForm').on('submit', function(e) {
                e.preventDefault();
                showLoader();
                var formData = new FormData(this);
                // console.log(url + '/store-configuration-libraries');

                $.ajax({
                    url: '{{ route('product-categories-store') }}',
                    type: 'post',
                    data: formData,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                    },
                    contentType: false, // Important for FormData
                    processData: false,
                    success: function(response) {


                        if (response.success) {

                            toastr.success("Product Category Created successfully!",
                                "Success", {
                                    timeOut: 1000,
                                    onHidden: function() {
                                        hideLoader();
                                        window.location.reload();
                                    }
                                });
                        } else {
                            hideLoader();
                            $.each(response.errors, function(key, value) {
                                $('#' + key + '_error').text(value);
                            });


                        }
                    },
                    error: function(xhr) {
                        hideLoader();
                        if (xhr.status === 422) {
                            // Clear previous error messages
                            $(".text-danger").text("");

                            var errors = xhr.responseJSON.errors;

                            // Display errors
                            $.each(errors, function(key, value) {
                                if (key === 'general') {
                                    // General error message (if any)
                                    alert(value);
                                } else {
                                    // Display errors for specific fields
                                    $("#" + key + "_error").text(value[0]);
                                }
                            });
                        } else {
                            hideLoader();
                            // Handle other errors
                            console.log(xhr.responseText);
                        }
                    }
                });
            });

            $('#categoryTable').on('click','.editCategory', function() {
                $('#editCategories').modal('show');
                var id = $(this).data('id');

                $.ajax({
                    type: 'GET',
                    data: {
                        id: id
                    },
                    url: '{{ route('edit-categories-units') }}',
                    dataType: 'json',
                    success: function(response) {
                        var categories = response.categories;
                        console.log(categories);

                        $('#name1').val(categories.name);
                        $('#id').val(categories.id);
                        $('#existing_productCategory_image').attr('src', response.imageName);
                        $("#active_status").find('option').remove();

                        $('#active_status').append(`
                                    <option value="1" ${categories.status == 1 ? 'selected' : ''}>Yes</option>
                                    <option value="0" ${categories.status == 0 ? 'selected' : ''}>No</option>
                                `);
                    },
                    error: function(error) {
                        console.error('Error:', error);
                    }
                });
            });

            $('#updateForm').on('submit', function(event) {
                event.preventDefault(); // Prevent the default form submission

                let id = $(this).data('id');
                showLoader();
                // alert(routeId);

                // let formData = $('#updateForm').serialize();
                var formData = new FormData(this);


                $.ajax({
                    url: '{{ route('update-categories-units') }}',
                    type: 'post',
                    data: formData,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                    },
                    contentType: false, // Important for FormData
                    processData: false,
                    success: function(response) {
                        if (response.success) {
                            toastr.success("Product Category Updated successfully!",
                                "Success", {
                                    timeOut: 1000,
                                    onHidden: function() {
                                        hideLoader();
                                        window.location.reload();
                                    }
                                });

                        } else {
                            hideLoader();
                            $.each(response.errors, function(key, value) {
                                $('#' + key + '1_error').text(value);
                            });
                        }
                    },
                    error: function(xhr) {
                        hideLoader();

                        if (xhr.status === 422) {
                            hideLoader();

                            // Clear previous error messages
                            $(".text-danger").text("");

                            var errors = xhr.responseJSON.errors;

                            // Display errors
                            $.each(errors, function(key, value) {
                                if (key === 'general') {
                                    // General error message (if any)
                                    alert(value);
                                } else {
                                    // Display errors for specific fields
                                    $("#" + key + "1_error").text(value[0]);
                                }
                            });
                        } else {
                            hideLoader();

                            // Handle other errors
                            console.log(xhr.responseText);
                        }
                    }
                });
            });

            $('#addStateResetBtn').on('click', function() {
                // Clear the text input
                $('#name').val('');
                // Clear the image input
                $('#inputImage1').val('');
                // Hide the image preview
                // $('.docs-preview').css('display', 'none');
                // Clear any error messages
                $('#name_error').text('');
                $('#productCategory_image_error').text('');
            });

            $('#addStateResetBtnEdit').on('click', function() {
                // Clear the text input
                $('#name1').val('');
                // Clear the image input
                $('#inputImage2').val('');
                // Hide the image preview
                // $('.docs-preview').css('display', 'none');
                // Clear any error messages
                $('#name1_error').text('');
                $('#productCategory_image1_error').text('');
            });

            $('input').on('keyup', function() {
               $(this).siblings('.error-message').text('');
            });

            $('input').on('change', function() {
               $(this).siblings('.error-message').text('');
            });
        });
    </script>
@endpush