@extends('components.layout.master')
@section('title', ' Product')
@section('module-icon', 'fab fa-product-hunt')
@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


<style>
    .tags-input {
        border: 1px solid #ccc;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
        border-radius: 4px;
        align-items: center;
    }

    .tag {
        background-color: #cd00ff;
        color: white;
        padding: 5px 10px;
        margin: 5px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
    }

    .remove-tag {
        margin-left: 5px;
        cursor: pointer;
        color: white;
    }

    input[type="text"] {
        border: none;
        outline: none;
        flex: 1;
        min-width: 120px;
        margin-left: 5px;
    }

    .product-type-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        /* Space between the tags */
    }

    .product-type-tag {
        background-color: #cd00ff;
        color: white;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 12px;
        display: inline-block;
        margin-bottom: 5px;
    }
</style>


@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 type="button" title="" id="addrecordBtn"
                                        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="ProductTable" class="table table-bordered dt-responsive nowrap"
                                style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Product Name</th>
                                        <th>Category</th>
                                        <th>Type</th>
                                        <th>Product Image</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @if ($prodcutList->isEmpty())
                                        <tr>
                                            <td colspan="6">No records found.</td>
                                        </tr>
                                    @else
                                        @foreach ($prodcutList as $product)
                                            {{-- @dd($product->category); --}}
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $product->name }}</td>
                                                <td>{{ $product->category->name ?? '' }}</td>
                                                <td>
                                                    @if ($product->productType->isNotEmpty())
                                                        <div class="product-type-tags">
                                                            @foreach ($product->productType as $type)
                                                                <span class="product-type-tag">{{ $type->type }}</span>
                                                            @endforeach
                                                        </div>
                                                    @else
                                                        -
                                                 @endif
                                                </td>
                                                <td>
                                                    @if (!empty($product->imageName))
                                                        <img src="{{ asset('images/products/' . $product->imageName) }}"
                                                            alt="{{ $product->name }}" width="100" height="100">
                                                    @else
                                                    @endif
                                                </td>
                                                <td>
                                                    @if ($product->status == 0)
                                                        <span class="badge bg-danger">Inactive</span>
                                                    @elseif ($product->status == 1)
                                                        <span class="badge bg-success">Active</span>
                                                    @endif
                                                </td>

                                                <td>
                                                    <button class="btn btn-purple btn-xs  editProduct "
                                                        data-id="{{ $product->id }}"><i class="fa fa-edit" aria-hidden="true"></i> Edit</button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>

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



            <!-- Start Add State Modal -->
            <div class="modal fade admin-query" id="addProductModal">
                <div class="modal-dialog modal-dialog-centered small-modal">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Add Product
                            </h4>
                            <button type="button" class="close dismissBtn" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <form id="addProductForm" enctype="multipart/form-data">

                                <div class="row mb-3">

                                    <div class="col-lg-12">
                                        <div class="primary_input" id="">
                                            <label class="primary_input_label" for="">Product Name<span
                                                    class="text-danger"> *</span></label>
                                            <input type="text" class="form-control" onkeypress="onlyAlphabets(event)" id="product_name" name="product_name"
                                                placeholder="Enter Product Name">
                                            <span class="text-danger error-message" id="product_name_error"></span>
                                        </div><br>
                                        <div class="primary_input" id="">
                                            <label class="primary_input_label" for="">Category<span
                                                    class="text-danger"> *</span></label>
                                            <select class="form-control" id="category_id" name="category_id">
                                                <option value="">Select Category</option>
                                                @foreach ($category as $categories)
                                                    <option value="{{ $categories->id }}">{{ $categories->name }}</option>
                                                @endforeach
                                            </select>
                                            <span class="text-danger error-message" id="category_id_error"></span>
                                        </div><br>
                                        <div class="primary_input" id="">
                                            <label class="primary_input_label" for="">Product Type<span
                                                    class="text-danger"> *</span></label>
                                            <div class="tags-input" id="productTypeInput">
                                                <input type="text" id="type" onkeypress="onlyAlphabets(event)" name="type"
                                                    placeholder="Add a product type and press Enter" />
                                            </div>
                                            <span class="text-danger error-message" id="type_error"></span>
                                        </div>
                                        <div class="primary_input mt-3" id="">
                                            <label class="primary_input_label" for="">Product Image<span
                                                    class="text-danger"> *</span></label>
                                            <input type="file" class="form-control" id="inputImage1"
                                                name="product_image">
                                            <span class="text-danger error-message" id="product_image_error"></span>

                                        </div>

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12 text-center">
                                        <button class="btn btn-success waves-effect waves-light" type="submit" id="">
                                            {!! BTN_SAVE !!}
                                        </button>
                                        <button class="btn btn-secondary btn-sm ml-2" type="reset" id="productReset">
                                            <span class="ti-reload"></span> Reset
                                        </button>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Add State Modal -->
            <!-- Start Edit State Modal -->
            <div class="modal fade admin-query" id="editProductModal">
                <div class="modal-dialog modal-dialog-centered small-modal">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Modify Product
                            </h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <form id="editProductForm" enctype="multipart/form-data">
                                <input type="hidden" id="id" name="product_id">
                                <div class="col-lg-12">
                                    <div class="add-visitor">
                                        <div class="row mb-3">
                                            <div class="col-lg-12">
                                                <div class="primary_input" id="">
                                                    <label class="primary_input_label" for="">Product Name<span
                                                            class="text-danger"> *</span></label>
                                                    <input type="text" onkeypress="onlyAlphabets(event)" class="form-control" id="edit_product_name"
                                                        name="product_name" placeholder="Enter Product Name">
                                                    <span class="text-danger error-message" id="edit_product_name_error"></span>
                                                </div><br>
                                                <div class="primary_input" id="">
                                                    <label class="primary_input_label" for="">Category<span
                                                            class="text-danger"> *</span></label>
                                                    <select class="form-control" id="edit_category_id"
                                                        name="category_id">
                                                        <option value="">Select Category</option>
                                                        @foreach ($category as $categories)
                                                            <option value="{{ $categories->id }}">{{ $categories->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <span class="text-danger error-message" id="edit_category_id_error"></span>
                                                </div><br>
                                                <div class="primary_input" id="">
                                                    <label class="primary_input_label" for="">Product Type<span
                                                            class="text-danger"> *</span></label>
                                                    <div class="tags-input" id="productTagsContainer">
                                                        <input type="text" id="type1" name="type" onkeypress="onlyAlphabets(event)"
                                                            placeholder="Add a product type and press Enter" />
                                                    </div>
                                                    <span class="text-danger error-message" id="type1_error"></span>
                                                </div>
                                                <div class="primary_input mt-3" id="">
                                                    <label class="primary_input_label" for="">Product Image<span
                                                            class="text-danger"> *</span></label>
                                                    <input type="file" class="form-control" id="inputImage2"
                                                        name="product_image">
                                                    <span class="text-danger error-message" id="edit_product_image_error"></span>
                                                </div><br>
                                                <div class="form-group">
                                                    <img id="existing_product_image" src="" alt="Product Image"
                                                        style="max-width: 100px;">
                                                </div>
                                                <div class="primary_input" id="">
                                                    <label class="primary_input_label" for="">Status</label>
                                                    <select class="form-control" id="edit_active_status" name="status">
                                                        <option value="1">Active</option>
                                                        <option value="0">Inactive</option>
                                                    </select>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="row mt-40">
                                            <div class="col-lg-12 text-center">
                                                <button class="btn btn-success btn-sm" type="submit" id="">
                                                    <i class="fa fa-plus" aria-hidden="true"></i> Update
                                                </button>
                                                <button class="btn btn-secondary btn-sm ml-2" type="reset" id="editReset">
                                                    <span class="ti-reload"></span> Reset
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
            <!-- End Edit State Modal -->
            <!-- Start Image 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-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="cropImage2">Crop</button>
                                            </div>
                                        </div>
                                    </div><!--end card-->
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
            <!-- End Edit State Modal -->
        </div><!-- container -->
        @include('components.footertext')
    </div>
@endsection


@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script>
        var reset = true;
        $(document).ready(function() {
            $('#cropImage1').on('click', function() {
                $('#image1').cropper('getCroppedCanvas', {
                    width: 100,
                    height: 100
                }).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));
                }, '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', {
                    width: 100,
                    height: 100
                }).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));
                }, 'image/png');
                reset = false;
                $('#imageModal2').modal('hide');
            });

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


            let tags = [];
            let tagsToRemove = [];

            $('#type').on('keypress', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    const tagValue = $(this).val().trim();

                    if (tagValue) {
                        const cleanedTag = tagValue.replace(/[^\w\s]/gi, '');

                        // Add tag to array
                        if (!tags.includes(cleanedTag)) {
                            tags.push(cleanedTag);
                            addTag(cleanedTag);
                        }
                        $(this).val('');
                    }
                }
            });

            function addTag(tag) {
                const tagHTML = `
                    <div class="tag">${tag}
                        <span class="remove-tag" title="Remove">×</span>
                    </div>
                `;
                $('#productTypeInput').append(tagHTML);
            }

            $(document).on('click', '.remove-tag', function() {
                const tagToRemove = $(this).data('tag');

                tags = tags.filter(tag => tag !== tagToRemove);

                $(this).parent('.tag').remove();
            });


            $('#addProductModal').on('hidden.bs.modal', function() {
                $('#productTypeInput .tag').remove(); // Remove all displayed tags
                tags = [];
                $('#type').val('');
                $('#product_name').val('');
                $('#category_id').val('');
                $('#inputImage1').val('');
                $('#product_name_error').text('');
                $('#category_id_error').text('');
                $('#product_image_error').text('');
                $('#type_error').text('');
            });

            $('#addrecordBtn').on('click', function() {
                $('#addProductModal').modal('show');
            });

            $('#addProductForm').on('submit', function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                tags.forEach((tag, index) => {
                    formData.append(`type[${index}]`, tag);
                });
                showLoader();
                $.ajax({
                    type: 'POST',
                    url: '{{ route('create-product') }}',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                    },
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function(response) {


                        if (response.success) {

                            $('#addProductModal').modal('hide');
                            toastr.success(response.message);
                            setTimeout(function() {
                                hideLoader();
                                location
                                    .reload();
                            }, 1000);
                        } else {
                            hideLoader();
                            $('#product_name_error').text('');
                            $('#category_id_error').text('');
                            $('#product_image_error').text('');
                            $('#type').text('');

                            // Show validation messages
                            if (response.errors.product_name) {
                                $('#product_name_error').text(response.errors.product_name[0]);
                            }
                            if (response.errors.category_id) {
                                $('#category_id_error').text(response.errors.category_id[0]);
                            }
                            if (response.errors.product_image) {
                                $('#product_image_error').text(response.errors.product_image[
                                    0]);
                            }
                            if (response.errors.type) {
                                $('#type_error').text(response.errors.type[0]);
                            }
                        }

                    },
                    error: function(xhr) {
                        hideLoader();
                        var errors = xhr.responseJSON.errors;
                        console.log(errors);

                        $('#product_name_error').text('');
                        $('#category_id_error').text('');
                        $('#product_image_error').text('');
                        $('#type').text('');

                        // Show validation messages
                        if (errors.product_name) {
                            $('#product_name_error').text(errors.product_name[0]);
                        }
                        if (errors.category_id) {
                            $('#category_id_error').text(errors.category_id[0]);
                        }
                        if (errors.product_image) {
                            $('#product_image_error').text(errors.product_image[0]);
                        }
                        if (response.errors.type) {
                            $('#type_error').text(response.errors.type[
                                0]);
                        }
                    }
                });
            });

            $('#ProductTable').DataTable({
                "language": {
                    "paginate": {
                        "previous": "<",
                        "next": ">"
                    }
                }
            });

            $(document).on('click', '.editProduct', function() {
                var id = $(this).data('id');
                $('#editProductModal').modal('show');

                $.ajax({
                    url: '{{ route('product-edit') }}',
                    type: 'GET',
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    success: function(data) {
                        $('#id').val(data.id);
                        $('#edit_product_name').val(data.name);
                        $('#edit_category_id').val(data.category_id);
                        $('#existing_product_image').attr('src', data.imageName);
                        $('#edit_active_status').val(data.status);

                        $('#productTagsContainer').empty();
                        tags = [];

                        $('#productTagsContainer').append(`
                            <input type="text" id="type1" name="type" onkeypress="onlyAlphabets(event)" placeholder="Add a product type and press Enter" />
                        `);

                        // Populate existing tags
                        if (data.product_types && data.product_types.length > 0) {
                            $.each(data.product_types, function(index, type) {
                                renderTag(type.type, type.id);
                                tags.push(type
                                    .type);
                            });
                        }
                    }
                });
            });

            $(document).on('keypress', '#type1', function(e) {
                if (e.which === 13) { // Enter key pressed
                    e.preventDefault();
                    const tagValue = $(this).val().trim();

                    if (tagValue) {
                        const cleanedTag = tagValue.replace(/[^\w\s]/gi, '');

                        if (!tags.includes(cleanedTag)) { // Avoid duplicates
                            const existingTagIndex = tags.indexOf(cleanedTag);
                            if (existingTagIndex !== -1) {
                                tags.splice(existingTagIndex, 1);
                            }

                            tags.push(cleanedTag);
                            renderTag(cleanedTag);
                            $(this).val('');
                        }
                    }
                }
            });

            function renderTag(tag, tag_id = null) {
                const tagHTML = `
                    <div class="tag" data-tag-id="${tag_id ? tag_id : ''}">${tag}
                        <span class="remove-tag" title="Remove">×</span>
                    </div>
                `;

                $('#productTagsContainer').append(tagHTML);
                $('.remove-tag').last().on('click', function() {
                    $(this).parent('.tag').remove();
                    tags = tags.filter(t => t !== tag);
                    console.log(tags);
                });
            }

            $('#editProductModal').on('hidden.bs.modal', function() {
                $('#productTagsContainer').empty();
                $('#edit_product_name_error').text('');
                $('#edit_category_id_error').text('');
                $('#type1_error').text('');
                $('#edit_product_image_error').text('');
                tags = []; // Clear tags on modal close
            });

            $('#editProductForm').on('submit', function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                formData.append('type1', JSON.stringify(tags)); // Send current tags
                console.log(tags);
                // return false;

                showLoader();
                $.ajax({
                    url: '{{ route('update-product') }}',
                    method: 'POST',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').attr('content')
                    },
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            $('#editProductModal').modal('hide');
                            toastr.success(response.message);
                            setTimeout(function() {
                                hideLoader();
                                location.reload(); // Reload to see changes
                            }, 1000);
                        } else {
                            hideLoader();
                            // Handle validation errors
                            $('#edit_product_name_error').text(response.errors.product_name ??
                                '');
                            $('#edit_category_id_error').text(response.errors.category_id ??
                                '');
                            $('#product_image_error').text(response.errors.product_image ?? '');
                            $('#type1_error').text(response.errors.type1 ?? '');
                        }
                    },
                    error: function(xhr) {
                        hideLoader();
                        let errors = xhr.responseJSON.errors;

                        $('#edit_product_name_error').text(errors.product_name ?? '');
                        $('#edit_category_id_error').text(errors.category_id ?? '');
                        $('#product_image_error').text(errors.product_image ?? '');
                        $('#type1_error').text(errors.type1 ?? '');
                    }
                });
            });

            $('#productReset').on('click', function() {
                $('#product_name_error').text('');
                $('#category_id_error').text('');
                $('#type_error').text('');
                $('#product_image_error').text('');

                $('#productTypeInput .tag').remove();
                $('#type').val('');
                tags = [];
            });

            $('#editReset').on('click', function() {
                // Clear error messages in the edit modal
                $('#edit_product_name_error').text('');
                $('#edit_category_id_error').text('');
                $('#type1_error').text('');
                $('#edit_product_image_error').text('');

                $('#productTagsContainer .tag').remove();
                $('#type1').val('');
                tags = [];
            });

            $(document).on('keyup','input', function() {
               $(this).siblings('.error-message').text('');
               $(this).parent().siblings('.error-message').text('');
               $(this).closest('.primary_input').find('.error-message').text('');
               console.log('hello'+$(this).closest('.primary_input').find('.error-message').html());
            });
            $(document).on('change','input', function() {
               $(this).siblings('.error-message').text('');
               $(this).closest('.primary_input').find('.error-message').text('');
            });
            $('select').on('change', function() {
               $(this).siblings('.error-message').text('');
            });
            // $('#type').on('change', function() {
            //    $(this).parent().siblings('.error-message').text('');
            // });
            // $('#type1').on('change', function() {
            //    $(this).parent().siblings('.error-message').text('');
            // });
           
        });
    </script>
@endpush