@extends('admin.layouts')
@section('title', 'View Product')
@section('header')


    <!-- Page CSS -->
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/formILY.css">

@endsection
@section('content')
    <div class="container-fluid page-wrapper">

        <div class="row">
            <div class="d-flex align-items-center">
                <h3 class="page-top-heading">View Product</h3>
            </div>
        </div>
        <div class="row d-flex justify-content-center mt-4">
            <div class="col-lg-12">
                <div class="card ILY-form-card">
                    <div class="card-header d-none">
                        <h5 class="card-title">View Product</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('update_product', $product->id) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            @method('POST') <!-- Correct method for update -->
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="d-flex justify-content-center">
                                        <div class="product-upload">
                                            <div class="product-edit">
                                                <input type="file" id="imageUpload" name="image"
                                                    accept=".png, .jpg, .jpeg" />
                                                <label for="imageUpload"></label>
                                            </div>
                                            <div class="product-preview">
                                                <div id="imagePreview"
                                                    style="background-image: url('{{ asset($product->image) }}');"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <!-- Category Select -->
                                <div class="col-lg-6">
                                    <div class="form-group mb-3">
                                        <label for="category_select" class="form-label">Select Category</label>
                                        <select class="form-select" name="category_id" id="category_id"
                                            aria-label="Category Select">
                                            <option value="">Select</option>
                                            @foreach ($categories as $category)
                                                @if ($category->category_type == 1)
                                                    <!-- Only show main categories -->
                                                    <option value="{{ $category->id }}"
                                                        {{ $category->id == $product->category_id ? 'selected' : '' }}>
                                                        {{ $category->category_name }}
                                                    </option>
                                                @endif
                                            @endforeach
                                        </select>
                                        @error('category_id')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>




                                <!-- Subcategory Select -->
                                <div class="col-lg-6">
                                    <div class="form-group mb-3">
                                        <label for="subcategory_select" class="form-label">Select Sub Category</label>
                                        <select id="subcategory_select" name="subcategory_id" class="form-select"
                                            aria-label="Sub Category Select">
                                            <option value="">Select</option>
                                            <!-- Subcategories will be dynamically loaded via JS -->
                                        </select>
                                        @error('subcategory_id')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Brand -->
                                <div class="col-lg-6">
                                    <div class="form-group mb-3">
                                        <label for="brand_name" class="form-label">Brand</label>
                                        <input type="text" name="brand" class="form-control" id="brand_name"
                                            placeholder="Enter Brand Name" value="{{ old('brand', $product->brand) }}">
                                        @error('brand')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Title -->
                                <div class="col-lg-6">
                                    <div class="form-group mb-3">
                                        <label for="product_title" class="form-label">Title</label>
                                        <input type="text" name="title" class="form-control" id="product_title"
                                            placeholder="Enter Product Title" value="{{ old('title', $product->title) }}">
                                        @error('title')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Description -->
                                <div class="col-lg-6">
                                    <div class="form-group mb-3">
                                        <label for="description" class="form-label">Description</label>
                                        <textarea name="description" class="form-control" id="description" rows="3" placeholder="Write Here">{{ old('description', $product->description) }}</textarea>
                                        @error('description')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Package -->
                                <div class="col-lg-6">
                                    <div class="form-group mb-3">
                                        <label for="package" class="form-label">Package</label>
                                        <input type="text" name="package" class="form-control" id="package"
                                            placeholder="Enter Package" value="{{ old('package', $product->package) }}">
                                        @error('package')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>




                                <!-- Variants Section -->
                                <div class="variant-row-container">
                                    @if (isset($product['variants']) && $product['variants']->isNotEmpty())
                                        @foreach ($product['variants'] as $variation)
                                            <div class="row variant-row" id="variant-row-{{ $loop->iteration }}">
                                                <div class="col-lg-12">
                                                    <p class="variant-heading"><i
                                                            class="fa-solid fa-arrow-down me-1"></i>Variant <span
                                                            class="ps-1 variant-count">{{ $loop->iteration }}</span></p>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group mb-3">
                                                        <label for="unit-{{ $loop->iteration }}"
                                                            class="form-label">Unit</label>
                                                        <input type="text" name="unit[]" class="form-control"
                                                            id="unit-{{ $loop->iteration }}"
                                                            placeholder="Enter Product Unit"
                                                            value="{{ $variation->unit }}">
                                                        @error('unit.*')
                                                            <small class="text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group mb-3">
                                                        <label for="discount-{{ $loop->iteration }}"
                                                            class="form-label">Discount</label>
                                                        <input type="text" name="discount[]" class="form-control"
                                                            id="discount-{{ $loop->iteration }}" placeholder="%"
                                                            value="{{ $variation->discount }}">
                                                        @error('discount.*')
                                                            <small class="text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group mb-3">
                                                        <label for="mrp-{{ $loop->iteration }}"
                                                            class="form-label">MRP</label>
                                                        <input type="text" name="mrp[]" class="form-control"
                                                            id="mrp-{{ $loop->iteration }}" placeholder="₹0.00"
                                                            value="{{ $variation->mrp }}">
                                                        @error('mrp.*')
                                                            <small class="text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group mb-3">
                                                        <label for="price-{{ $loop->iteration }}"
                                                            class="form-label">Price</label>
                                                        <input type="text" name="price[]" class="form-control"
                                                            id="price-{{ $loop->iteration }}" placeholder="₹0.00"
                                                            value="{{ $variation->price }}">
                                                        @error('price.*')
                                                            <small class="text-danger">{{ $message }}</small>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="row variant-row" id="variant-row-1">
                                            <div class="col-lg-12">
                                                <p class="variant-heading"><i
                                                        class="fa-solid fa-arrow-down me-1"></i>Variant <span
                                                        class="ps-1 variant-count">1</span></p>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group mb-3">
                                                    <label for="unit-1" class="form-label">Unit</label>
                                                    <input type="text" name="unit[]" class="form-control"
                                                        id="unit-1" placeholder="Enter Product Unit" value="">
                                                    @error('unit.*')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group mb-3">
                                                    <label for="discount-1" class="form-label">Discount</label>
                                                    <input type="text" name="discount[]" class="form-control"
                                                        id="discount-1" placeholder="%" value="">
                                                    @error('discount.*')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group mb-3">
                                                    <label for="mrp-1" class="form-label">MRP</label>
                                                    <input type="text" name="mrp[]" class="form-control"
                                                        id="mrp-1" placeholder="₹0.00" value="">
                                                    @error('mrp.*')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group mb-3">
                                                    <label for="price-1" class="form-label">Price</label>
                                                    <input type="text" name="price[]" class="form-control"
                                                        id="price-1" placeholder="₹0.00" value="">
                                                    @error('price.*')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                <!-- Add Variant Button -->
                                <div class="row mt-2">
                                    <div class="col-lg-12">
                                        <button type="button" class="btn add_variant-btn" id="add-variant-btn"><i
                                                class="fa-solid fa-plus me-2"></i>Add Variant</button>
                                    </div>
                                </div>
                                <!-- Specification Section -->
                                <div class="row mt-5">
                                    <div class="col-lg-12">
                                        <p class="specification-heading">Specification</p>
                                    </div>
                                    @if (isset($product['variants']) && $product['variants']->isNotEmpty())
                                        @foreach ($product['variants'] as $variation)
                                            <div class="col-lg-12">
                                                <div class="specification-container" id="specification-container">
                                                    <div class="row specification-row" id="specification-row">
                                                        <div class="col-lg-5 col-5">
                                                            <div class="form-group mb-3">
                                                                <label for="spec_title" class="form-label">Title</label>
                                                                <input type="text" name="spec_title[]"
                                                                    class="form-control" id="spec_title"
                                                                    placeholder="Enter Specification Title"
                                                                    value="{{ $variation->title }}">
                                                                @error('spec_title.*')
                                                                    <small class="text-danger">{{ $message }}</small>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-6">
                                                            <div class="form-group mb-3">
                                                                <label for="spec_description"
                                                                    class="form-label">Description</label>
                                                                <textarea name="spec_description[]" class="form-control" id="spec_description" rows="2"
                                                                    placeholder="Enter Description">{{ $variation->description }}</textarea>
                                                                @error('spec_description.*')
                                                                    <small class="text-danger">{{ $message }}</small>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-1 col-1 mb-3 d-flex align-items-center">
                                                            <button type="button"
                                                                class="btn btn-success rounded-pill add-spec"><i
                                                                    class="fa-solid fa-plus"></i></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                </div>
                            @else
                                <div class="col-lg-12">
                                    <div class="specification-container" id="specification-container">
                                        <div class="row specification-row" id="specification-row">
                                            <div class="col-lg-5 col-5">
                                                <div class="form-group mb-3">
                                                    <label for="spec_title" class="form-label">Title</label>
                                                    <input type="text" name="spec_title[]" class="form-control"
                                                        id="spec_title" placeholder="Enter Specification Title"
                                                        value="">
                                                    @error('spec_title.*')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-6">
                                                <div class="form-group mb-3">
                                                    <label for="spec_description" class="form-label">Description</label>
                                                    <textarea name="spec_description[]" class="form-control" id="spec_description" rows="2"
                                                        placeholder="Enter Description"></textarea>
                                                    @error('spec_description.*')
                                                        <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-lg-1 col-1 mb-3 d-flex align-items-center">
                                                <button type="button" class="btn btn-success rounded-pill add-spec"><i
                                                        class="fa-solid fa-plus"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                <!-- Submit Button -->
                                <div class="button-container mt-5">
                                    <button type="submit" class="btn btn-primary submit-btn w-100 py-3" id="update-btn">
                                        <i class="fa-solid fa-rotate me-2" id="update-icon"></i>Update
                                    </button>
                                </div>
                            </div>
                        </form>


                    </div>
                </div>
            </div>
        </div>
        <!-- Row Ends.. -->


    </div>
    <!-- end container fluid -->

    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- JS for Product Edit and View -->
    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
                    $('#imagePreview').hide();
                    $('#imagePreview').fadeIn(650);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#imageUpload").change(function() {
            readURL(this);
        });
    </script>
    <!-- JS for Product Edit and View Ends..-->


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

            // On page load, load subcategories if a category is already selected
            const selectedCategoryId = $('#category_id').val();
            const selectedSubcategoryId = '{{ $product->subcategory_id }}';
            if (selectedCategoryId) {
                loadSubcategories(selectedCategoryId, selectedSubcategoryId);
            }

            // When the category is changed, load the corresponding subcategories
            $('#category_id').on('change', function() {
                const categoryId = $(this).val();
                $('#subcategory_select').html(
                    '<option value="">Select</option>'); // Clear subcategory dropdown
                if (categoryId) {
                    loadSubcategories(categoryId);
                }
            });

            function loadSubcategories(categoryId, selectedSubcategoryId = null) {
                $.ajax({
                    url: '{{ route('getSubcategories') }}',
                    type: 'GET',
                    data: {
                        categoryId: categoryId
                    },
                    dataType: 'json',
                    success: function(data) {
                        $('#subcategory_select').html(
                            '<option value="">Select</option>'); // Clear existing options
                        $.each(data.subcategories, function(index, subcategory) {
                            let selected = subcategory.id == selectedSubcategoryId ?
                                'selected' : '';
                            $('#subcategory_select').append(
                                $('<option></option>').val(subcategory.id).text(subcategory
                                    .subcategory_name).attr('selected', selected)
                            );
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching subcategories:', error);
                        console.error('Response:', xhr.responseText);
                    }
                });
            }
        });
    </script>







    <!-- JS for Adding Variant -->
    <script>
        $(document).ready(function() {
            let variantCount = $('.variant-row').length; // Get the initial count
            $('#add-variant-btn').click(function() {
                variantCount++; // Increment the count
                let newVariantRow = $('.variant-row:last').clone(); // Clone the last variant row
                newVariantRow.attr('id', 'variant-row-' + variantCount); // Ensure unique IDs
                newVariantRow.find('.variant-count').text(variantCount); // Update the variant count

                // Update the IDs for each input field
                newVariantRow.find('input').each(function() {
                    const inputName = $(this).attr('name');
                    const newId = $(this).attr('id').split('-')[0] + '-' +
                    variantCount; // Update ID
                    $(this).attr('id', newId);
                    $(this).val(''); // Reset the input value
                });

                $('.variant-row-container').append(newVariantRow); // Append the new variant row
            });
        });
    </script>
    <!-- JS for Adding Variant Ends -->



    <!-- JS For Adding Specification -->
    <script>
        $(document).ready(function() {
            $(document).on('click', '.btn-success', function() {
                let newRow = $('#specification-row').last().clone();
                newRow.find('input[type="text"], textarea').val('');
                newRow.find('.btn-success')
                    .removeClass('btn-success')
                    .addClass('btn-danger')
                    .html('<i class="fa-solid fa-trash"></i>');
                $('#specification-container').append(newRow);
            });
            $(document).on('click', '.btn-danger', function() {
                $(this).closest('.specification-row').remove();
            });
        });
    </script>
    <!-- JS For Adding Specification -->


@endsection
@section('footer')



@endsection