@extends('layout.admin.master')

@section('meta-title', 'LEREVE - Create Boxes')
@section('body-class', 'menu-position-side menu-side-left full-screen with-content-panel')

@section('breadcrumbs')
  <li class="breadcrumb-item">
    <a href="{{route(session('role').'.popup.list')}}">Boxes</a>
  </li>
  <li class="breadcrumb-item">
    <span>Boxes</span>
  </li>
@endsection

@push('asset-top')
    
@endpush

@section('content')
  <div class="element-wrapper">
    <h6 class="element-header">
      Custom Product 
   
    </h6>
    <div class="element-box">
      <form method="post" enctype="multipart/form-data" action="{{route(session('role').'.update_product', $customProduct->id)}}">
        @csrf
        <h5 class="form-header">
          Edit
        </h5>
        <div class="form-desc">
          <!-- Discharge best employed your phase each the of shine. Be met even reason consider logbook redesigns. Never a turned interfaces among asking -->
        </div>
        <div class="form-group">
            <label for="">Heading</label>
            <input class="form-control" name="heading" placeholder="Page Heading" required="required" type="text" value="{{$customProduct->heading}}">
            @error('heading')
                <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
            @enderror
          </div>
        <div class="form-group">
          <label for="">Sub Heading</label>
          <input class="form-control" name="subheading" placeholder="Page Heading" required="required" type="text" value="{{$customProduct->subheading}}">
          @error('subheading')
              <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
          @enderror
        </div>      

        <!-- Media -->
        <fieldset class="form-group">
          <legend><span>Media</span></legend>
          <div class="form-group">
            <label for=""> Banner</label>
            <input class="form-control" name="banner" type="file">
            @error('banner')
              <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
            @enderror
          </div>  
          <img width="200" src="{{$customProduct->image}}" alt="{{$customProduct->heading}}">        
        </fieldset>

        

        <div class="form-group">
            <label for="">Description</label>
            <textarea class="form-control" name="description" required="required">{{$customProduct->description}}</textarea>
            @error('description')
                <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
            @enderror
        </div>  
        
        <div class="row">
            @foreach($productsJson['product'] as $index => $productId)
                <div class="col-4 products_section">
                    <div class="form-group">
                        <label for="">Products</label>
                        <select class="form-control select_changes_function" name="products[]" required="required">
                            <option value="">Select Products</option>
                            @foreach($product as $prod)
                                <option value="{{ $prod->id }}" {{ $prod->id == $productId ? 'selected' : '' }}>
                                    {{ $prod->name_en }}
                                </option>
                            @endforeach
                        </select>
                        @error('products')
                            <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                        @enderror
                    </div>  
                    <div class="form-group">
                        <label for="">Price Per KG</label>
                        <input 
                            class="form-control" 
                            name="price[]" 
                            placeholder="Enter Price Per KG" 
                            required="required" 
                            type="text" 
                            value="{{ $productsJson['price'][$index] ?? '' }}">
                        @error('price')
                            <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                        @enderror
                    </div>  
                </div>
            @endforeach
        </div>
        
        <div class="col-12">
            <br>
            <br>
            <button id="add_more" class="btn btn-primary">add more</button>
            <br>
            <br>
         
        </div>

        <div class="form-check">
          <label for="active" class="form-check-label"> 
            <input class="form-check-input" name="active" id="active" type="checkbox" value="1" checked> Active
          </label>
        </div>
        <div class="form-buttons-w">
          <button class="btn btn-primary" type="submit"> Submit</button>
        </div>
      </form>
    </div>
  </div>
@endsection

<script>
 document.addEventListener('DOMContentLoaded', function() {
    function attachChangeEvent(selectElement) {
        selectElement.addEventListener('change', function() {
            console.log("Product selection changed");
        });
    }

    function attachRemoveEvent(removeButton) {
        removeButton.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Remove the parent products_section
            var parentSection = this.closest('.products_section');
            parentSection.remove();
        });
    }

    // Attach the change event to all existing .select_changes_function elements
    document.querySelectorAll('.select_changes_function').forEach(function(selectElement) {
        attachChangeEvent(selectElement);
    });

    // Add event listener to the "Add More" button
    document.getElementById('add_more').addEventListener('click', function(e) {
        e.preventDefault();  // Prevent form submission

        // Get the first .products_section element to clone
        var productSection = document.querySelector('.products_section');
        
        // Clone the .products_section
        var clonedSection = productSection.cloneNode(true);

        // Clear the values of the input fields in the cloned section
        clonedSection.querySelectorAll('input').forEach(function(input) {
            input.value = '';
        });

        clonedSection.querySelectorAll('select').forEach(function(select) {
            select.selectedIndex = 0;  // Reset the dropdown
        });

        // Create the remove button
        var removeButton = document.createElement('button');
        removeButton.textContent = 'Remove';
        removeButton.classList.add('btn', 'btn-danger', 'remove_section');
        
        // Append the remove button to the cloned section
        clonedSection.appendChild(removeButton);

        // Insert the cloned section after the last .products_section
        productSection.parentNode.appendChild(clonedSection);

        // Attach change event listener to the new select element in the cloned section
        attachChangeEvent(clonedSection.querySelector('.select_changes_function'));

        // Attach the remove event listener to the remove button
        attachRemoveEvent(removeButton);
    });

    // Add a remove button to all new sections except the first one
    var allSections = document.querySelectorAll('.products_section');
    allSections.forEach(function(section, index) {
        if (index > 0) {  // Skip the first section
            var removeButton = document.createElement('button');
            removeButton.textContent = 'Remove';
            removeButton.classList.add('btn', 'btn-danger', 'remove_section');
            section.appendChild(removeButton);
            attachRemoveEvent(removeButton);
        }
    });
});


</script>