@extends('layouts.admin-layout')
@section('title')
    Add Product
@endsection
@section('content')
    <style>
        .active {
            background-color: #007BFF !important;
            color: white !important;
        }
    </style>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card card-box-shadow mt-5">
                            <div class="card-header">
                                <h3 class="card-title">Add Product</h3>
                                <a href="{{ route('admin.product.index') }}">
                                    <button id="submit_btn"
                                            class="btn btn-primary custom_btn_sm_back custom_btn btn-sm float-right">
                                        <i class="fas fa-arrow-circle-left"></i>
                                        Back
                                    </button>
                                </a>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <form action="{{ route('admin.product.store') }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="Name">Product Name:</label>
                                                <input type="text" class="form-control form__field" name="product_name"
                                                       placeholder="Enter Product Name" required>
                                                <small class="text-danger">
                                                    @error('product_name') {{ $message }} @enderror
                                                </small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="category">Select Category:</label>
                                                <select id="category" class="form-control form__field"
                                                        name="category_name" required>
                                                    <option value="" selected disabled>Select Category</option>
                                                    @forelse($get_categories as $category)
                                                        <option
                                                            value="{{ $category->id }}">{{ $category->name }}</option>
                                                    @empty
                                                        <option>Category Not Found</option>
                                                    @endforelse
                                                </select>
                                                <small class="text-danger">
                                                    @error('category_name') {{ $message }} @enderror
                                                </small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="Name">Product Selling Price:</label>
                                                <input type="number" class="form-control form__field" name="price"
                                                       placeholder="Enter Price" required step="0.01" min="0">
                                                <small class="text-danger">
                                                    @error('price') {{ $message }} @enderror
                                                </small>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="Name">Product Actual Cost :</label>
                                                <input type="number" class="form-control form__field" name="actual_cost"
                                                       placeholder="Enter Actual Cost" required step="0.01" min="0">

                                            </div>
                                            <small class="text-danger">
                                                @error('actual_cost')
                                                {{ $message }}
                                                @enderror
                                            </small>
                                        </div>


                                        <div class="col-md-3 mt-4">
                                            <div class="form-group">
                                                <label for="Name">Product stock :</label>
                                                <input type="number" class="form-control form__field" name="stock"

                                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mt-4">
                                            <div class="form-group">
                                                <label for="image_alt">Image Alt Tag:</label>
                                                <input type="text" id="image_alt" class="form-control form__field" name="image_alt">
                                            </div>
                                        </div>


                                        <div class="col-md-6">
                                            <div class="col-md-6" style="display:flex; gap:20px;">
                                                <label for="Name">Product Best Sale :</label>
                                                <label for="Name">Product Exclusive :</label>
                                                <label for="Name">Product Essential :</label>
                                            </div>

                                            <div class="form-group"
                                                 style=" display:flex; gap:50px; background: #fff; font: inherit; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 10px 2px;outline: 0; border-radius: 20px; min-height: 50px;padding: 7px;">

                                                <input type="checkbox" data-toggle="toggle" data-on="Sale"
                                                       data-off="Off" data-onstyle="success"
                                                       data-offstyle="danger"
                                                       name="best_sale">

                                                <input type="checkbox" data-toggle="toggle" data-on="Exclusive"
                                                       data-off="Off" data-onstyle="success"
                                                       data-offstyle="danger"
                                                       name="arrival">

                                                <input type="checkbox" data-toggle="toggle" data-on="Essential"
                                                       data-off="Off" data-onstyle="success"
                                                       data-offstyle="danger"
                                                       name="essential">
                                            </div>

                                        </div>


                                        <div class="col-md-6 mt-6">
                                            <div class="form-group">
                                                <label for="Name">Product First Time Discount :</label>
                                                <input type="number" class="form-control form__field" name="first_time_discount"

                                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            </div>
                                            <small class="text-danger">
                                                @error('first_time_discount')
                                                {{ $message }}
                                                @enderror
                                            </small>
                                        </div>

                                        <div class="col-md-6 mt-6">
                                            <div class="form-group">
                                                <label for="Name">Product Repeat Order Discount :</label>
                                                <input type="number" class="form-control form__field" name="repeat_order_discount"

                                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            </div>
                                            <small class="text-danger">
                                                @error('repeat_order_discount')
                                                {{ $message }}
                                                @enderror
                                            </small>
                                        </div>





                                        <div class="form-group">
                                            <input type="checkbox" id="toggleSize" name="defult"/>
                                            <label for="toggleSize">Hide Size Dropdown</label>
                                        </div>


                                        <div class="col-md-12 mt-4">
                                            <div class="form-group">
                                                <label for="mainProductImageInput">Main Product Image:</label>
                                                <input type="file" class="form-control form__field visually-hidden"
                                                       name="product_image" id="mainProductImageInput" accept="image/*"
                                                       required>
                                                <label for="mainProductImageInput"
                                                       class="file-input-label form__field form-control">
                                                    <i class="fas fa-camera"></i> Choose file
                                                </label>
                                                <small class='text-danger'>
                                                    @error('product_image') {{ $message }} @enderror
                                                </small>
                                            </div>
                                            <img id="mainProductImagePreview"
                                                 src="{{ asset('front/images/images.png') }}" alt="Profile Preview"
                                                 style="width: 250px; height: 200px; margin-top: 10px;">
                                        </div>


                                        <div id="imageInputsWrapper" style="width: 100%;">
                                            <div class="row">
                                                <div class="col-md-6 mt-4">
                                                    <div class="form-group">
                                                        <label for="mainProductImageInput2">Product Size Hand Image:</label>
                                                        <input type="file"
                                                               class="form-control form__field visually-hidden"
                                                               name="product_size_hand_image"
                                                               id="mainProductImageInput2" accept="image/*"
                                                               required>
                                                        <label for="mainProductImageInput2"
                                                               class="file-input-label form__field form-control">
                                                            <i class="fas fa-camera"></i> Choose file
                                                        </label>
                                                    </div>
                                                    <img id="mainProductImagePreview2"
                                                         src="{{ asset('front/images/images.png') }}"
                                                         alt="Profile Preview"
                                                         style="width: 250px; height: 200px; margin-top: 10px;">
                                                </div>
                                                <div class="col-md-6 mt-4">
                                                    <div class="form-group">
                                                        <label for="mainProductImageInput3">Product Size Table
                                                            Image:</label>
                                                        <input type="file"
                                                               class="form-control form__field visually-hidden"
                                                               name="product_size_table_image"
                                                               id="mainProductImageInput3" accept="image/*"
                                                               required>
                                                        <label for="mainProductImageInput3"
                                                               class="file-input-label form__field form-control">
                                                            <i class="fas fa-camera"></i> Choose file
                                                        </label>
                                                    </div>
                                                    <img id="mainProductImagePreview3"
                                                         src="{{ asset('front/images/images.png') }}"
                                                         alt="Profile Preview"
                                                         style="width: 250px; height: 200px; margin-top: 10px;">
                                                </div>
                                            </div>
                                        </div>


                                        <div class="col-md-12 mt-5">
                                            <div class="form-group pt-4">
                                                <div class="card card-box-shadow">
                                                    <h5 class="card-header bg-dark text-white">
                                                        Image Gallery
                                                        <button type="button"
                                                                class="btn btn-sm btn-outline-light float-right addImage">
                                                            <i class="la la-fw la-plus"></i>Add More Image
                                                        </button>
                                                    </h5>
                                                    <div class="card-body">
                                                        <div class="row addedField ml-5">
                                                            <div class="card shadow" style="width:300px;margin-right:20px;margin-bottom:15px;">
                                                                <div class="image-upload">
                                                                    <div class="avatar-preview">
                                                                        <img
                                                                            src="{{ asset('front/images/images.png') }}"
                                                                            class="card-img-top profilePicPreview"
                                                                            id="productFirstGalleryImagePreview"
                                                                            style="height:200px;">
                                                                    </div>
                                                                    <div class="card-body">
                                                                        <div class="avatar-edit my-2">
                                                                            <label for="productFirstGalleryImageInput"
                                                                                   class="btn btn-success btn-lg w-100">@lang('Upload Image')</label>
                                                                        </div>
                                                                        <input type="file" class="profilePicUpload"
                                                                               name="product_gallery_images[]"
                                                                               id="productFirstGalleryImageInput"
                                                                               accept=".png, .jpg, .jpeg, .webp"
                                                                               style="display:none;">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-5">
                                            <div class="form-group pt-4">
                                                <div class="card card-box-shadow">
                                                    <h5 class="card-header bg-dark text-white">
                                                        Add Product Variation
                                                        <button type="button"
                                                                class="btn btn-sm btn-outline-light float-right addProductVariation">
                                                            <i class="la la-fw la-plus"></i>Add Product Variation
                                                        </button>
                                                    </h5>
                                                    <div class="card-body addProductVariationField">
                                                        <div class="row form-section">
                                                            <div class="col-md-2 mt-4">
                                                                <div class="form-group">
                                                                    <label>Select Size:</label>
                                                                    <select class="form-control form__field"
                                                                            name="size_id[]" required>
                                                                        <option selected>Select Size</option>
                                                                        @forelse($get_sizes as $size)
                                                                            <option
                                                                                value="{{ $size->id }}">{{ $size->size_name }}</option>
                                                                        @empty
                                                                            <option>Size Not Found</option>
                                                                        @endforelse
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2 mt-4">
                                                                <div class="form-group">
                                                                    <label>Select Color:</label>
                                                                    <select class="form-control form__field"
                                                                            name="color_id[]">
                                                                        <option value="0" selected>Select Color</option>
                                                                        @forelse($get_colors as $color)
                                                                            <option
                                                                                value="{{ $color->id }}">{{ $color->name }}</option>
                                                                        @empty
                                                                            <option>No Colors Available</option>
                                                                        @endforelse
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2 mt-4">
                                                                <div class="form-group">
                                                                    <label for="quantity[]">Quantity:</label>
                                                                    <input type="number" name="quantity[]"
                                                                           class="form-control form__field"
                                                                           placeholder="Enter Quantity" min="1">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-2 mt-4">
                                                                <div class="form-group">
                                                                    <label for="size_price[]">Size Price:</label>
                                                                    <input type="text" name="size_price[]" class="form-control form__field" placeholder="Enter Size Price"  >
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 mt-4">
                                                                <div class="form-group">
                                                                    <label for="variationImageInput">Variation
                                                                        Image:</label>
                                                                    <input type="file" name="variation_image[]"
                                                                           id="variationImageInput"
                                                                           class="form-control visually-hidden"
                                                                           required>
                                                                    <label for="variationImageInput"
                                                                           class="file-input-label form__field form-control">
                                                                        <i class="fas fa-camera"></i> Choose file
                                                                    </label>
                                                                </div>
                                                                <img id="variationImagePreview"
                                                                     src="{{ asset('front/images/images.png') }}"
                                                                     class="card-img-top"
                                                                     style="height:100px; width:200px;"/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="">Short Description</label>
                                            <textarea name="description" rows="4" placeholder="Description"
                                                      class="form-control form__field" id="editor"></textarea>
                                            <small class="text-danger">
                                                @error('description') {{ $message }} @enderror
                                            </small>
                                        </div>
                                        <div class="mx-auto mt-5">
                                            <div class="form-group">
                                                <button id="submit_btn" class="btn btn-primary custom_btn">
                                                    <i class="fa-solid fa-cloud-arrow-up"></i> Submit
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>

    <!-- /.content-wrapper -->
@endsection
@section('script')
    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
    <script>
        ClassicEditor
            .create(document.querySelector('#editor'), {
                placeholder: 'Hello Admin',
                toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote'],
                height: 100
            })
            .catch(error => {
                console.error(error);
            });
    </script>
    <script>
        $('#summernote1').summernote({
            placeholder: 'Hello Admin',
            tabsize: 2,
            height: 100
        });
    </script>
    <script>
        function showImagePreview(input, previewId) {
            const preview = document.getElementById(previewId);

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };

                reader.readAsDataURL(input.files[0]);
            }
        }


        document.addEventListener('change', function (event) {
            if (event.target && event.target.name === 'variation_image[]') {
                const inputId = event.target.id;
                const previewId = `variationImagePreview${inputId.replace('variationImageInput', '')}`;
                showImagePreview(event.target, previewId);
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Form submission handler
            document.querySelector('form').addEventListener('submit', function (event) {
                let valid = true;

                // Check if any of the size_id[] fields are empty
                document.querySelectorAll('select[name="size_id[]"]').forEach(function (select) {
                    if (select.value === 'Select Size' || select.value === '') {
                        valid = false;
                        select.style.borderColor = 'red'; // Highlight invalid field
                    } else {
                        select.style.borderColor = ''; // Reset border color
                    }
                });

                // If invalid, prevent form submission
                if (!valid) {
                    event.preventDefault();
                    alert('Please select a size for all variations.');
                }
            });
        });

        function showImagePreview(input, previewId) {
            const preview = document.getElementById(previewId);

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

        const mainProductImageInput = document.getElementById('mainProductImageInput');
        mainProductImageInput.addEventListener('change', function () {
            showImagePreview(this, 'mainProductImagePreview');
        });


        const mainProductImageInput2 = document.getElementById('mainProductImageInput2');
        mainProductImageInput2.addEventListener('change', function () {
            showImagePreview(this, 'mainProductImagePreview2');
        });

        const mainProductImageInput3 = document.getElementById('mainProductImageInput3');
        mainProductImageInput3.addEventListener('change', function () {
            showImagePreview(this, 'mainProductImagePreview3');
        });

        const productFirstGalleryImageInput = document.getElementById('productFirstGalleryImageInput');
        productFirstGalleryImageInput.addEventListener('change', function () {
            showImagePreview(this, 'productFirstGalleryImagePreview');
        });

        $('.addImage').on('click', function () {
            var randomId = Math.floor(Math.random() * 10000);


         var html = `
    <div class="image-data">
        <div class="card shadow" style="width:300px;margin-right:20px;margin-bottom:15px;">
            <div class="image-upload">
                <div class="avatar-preview">
                    <img src="{{ asset('front/images/images.png') }}" class="card-img-top profilePicPreview" id="galleryImagePreview-${randomId}" style="height:200px;">
                </div>
                <div class="card-body">
                    <div class="avatar-edit my-2">
                        <label for="galleryImageInput-${randomId}" class="btn btn-success btn-lg w-100">@lang('Upload Image')</label>
                        <button class="btn btn-danger btn-lg removeBtn w-100" type="button">
                            @lang('Remove Image')
                        </button>
                    </div>
                    <input type="file" class="profilePicUpload" name="product_gallery_images[]" id="galleryImageInput-${randomId}" accept=".png, .jpg, .jpeg, .webp" style="display:none;">
                </div>
            </div>
        </div>
    </div>`;

    $('.addedField').append(html);

            //NEW FILE UPLOAD WORK

                $(`#galleryImageInput-${randomId}`).on('change', function () {
        const input = this;
        const preview = document.getElementById(`galleryImagePreview-${randomId}`);
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
            };
            reader.readAsDataURL(input.files[0]);
        }
    });

            $(document).on('click', '.removeBtn', function () {
                $(this).closest('div.image-data').remove();
            });

        });


        $('.addProductVariation').on('click', function () {
            var randomId = Math.floor(Math.random() * 10000);
            var newFormSection = `
   <div class="row product-variation-data mb-4 mt-4" id="formSection${randomId}">
   <div class="col-md-12">
   <button type='button' class=" custom_btn_sm_back custom_btn btn-sm float-right productVariationRemoveBtn">
   <i class="fas fa-trash-alt"></i>
   Remove
   </button>
   </div>
   <div class="col-md-2 mt-4">
   <div class="form-group">
    <label>Select Size:</label>
    <select class="form-control form__field"
       name="size_id[]">
       <option value="" selected disabled>Select Size</option>
       @forelse($get_sizes as $size)
            <option value="{{ $size->id ?: '' }}">
          {{ $size->size_name ?: '' }}
            </option>
@empty
            <option>Size Not Found</option>
@endforelse
            </select>
         </div>
        </div>
        <div class="col-md-2 mt-4">
         <div class="form-group">
            <label>Select Color:</label>
            <select class="form-control form__field" name="color_id[]">
               <option selected>Select Color</option>
@forelse($get_colors as $color)
            <option value="{{ $color->id }}">{{ $color->name }}</option>
       @empty
            <option>No Colors Available</option>
@endforelse
            </select>
         </div>
        </div>
        <div class="col-md-2 mt-4">
         <div class="form-group">
            <label for="quantity[]">Quantity:</label>
            <input type="number" name="quantity[]" class="form-control form__field" placeholder="Enter Quantity" min="0" required>
         </div>
        </div>
        <div class="col-md-2 mt-4">
         <div class="form-group">
            <label for="size_price[]">Size Price:</label>
            <input type="text" name="size_price[]" class="form-control form__field" placeholder="Enter Size Price" required>
         </div>
        </div>
        <div class="col-md-4 mt-4">
         <div class="form-group">
            <label for="variationImageInput${randomId}">Variation Image:</label>
    <input type="file" name="variation_image[]" id="variationImageInput${randomId}"
       class="form-control visually-hidden" required>
    <label for="variationImageInput${randomId}" class="file-input-label form__field form-control">
    <i class="fas fa-camera"></i> Choose file
    </label>
   </div>
   <img id="variationImagePreview${randomId}" src="{{ asset('front/images/images.png') }}"
    class="card-img-top" style="height:100px; width:200px;" />
   </div>
   </div>
   `;
            $('.addProductVariationField').append(newFormSection);
            $(document).on('click', '.productVariationRemoveBtn', function () {
                $(this).closest('div.product-variation-data').remove();
            });
        });


    </script>
  <script>
    $(document).ready(function () {
        // Hide image inputs initially
        $('#imageInputsWrapper').hide();
        $('#mainProductImageInput2, #mainProductImageInput3').prop('required', false);

        $('#category').on('change', function () {
            var selectedText = $('#category option:selected').text().trim();

            if (selectedText === 'Rings') {
                $('#imageInputsWrapper').slideDown();
                $('#mainProductImageInput2, #mainProductImageInput3').prop('required', true);
            } else {
                $('#imageInputsWrapper').slideUp();
                $('#mainProductImageInput2, #mainProductImageInput3').prop('required', false);
            }
        });
    });
</script>
@endsection