@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">
      Boxes 
    </h6>
    <div class="element-box">
      <form method="post" enctype="multipart/form-data" action="{{route(session('role').'.store_product_create')}}">
        @csrf
        <h5 class="form-header">
          Create
        </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">
            @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">
          @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>          
        </fieldset>

        <div class="form-group">
            <label for="">Description</label>
            <textarea class="form-control" name="description" required="required"></textarea>
            @error('description')
                <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
            @enderror
        </div>  
        
        
        <div class="row">
            <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 $product)
                        <option value="{{$product->id}}">{{$product->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">
                    @error('price')
                        <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                    @enderror
                </div>  
            </div> 
            
           
        </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>