@extends("osadmin.adminmainlayout")

@section("content")
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="mt-4">Add Vendor</h1>  
    </div>
    <hr/>
</div>

<div class="container text-center">

    @if (Session::has("success"))
    <div class="alert alert-success">
        {{Session::get("success")}}
    </div>
    @elseif (Session::has("error"))
    <div class="alert alert-danger">
        {{Session::get("error")}}
    </div>
    @endif

    <div class="row justify-content-center">
      <div class="col-md-8">
        <form method="POST" action="{{route('save.wendor')}}" enctype="multipart/form-data">
            @csrf

            <div class="row">
                <div class="col-md-6 py-3">
                    <label style="display: block; text-align: left;">Company Name<spam class="text-danger">*</spam></label>
                    <input type="text" name="cname" value="{{ old('cname') }}" class="form-control" />
                    @error("cname")
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-md-6 py-3">
                    <label style="display: block; text-align: left;">Vendor Name<spam class="text-danger">*</spam></label>
                    <input type="text" name="wname" value="{{ old('wname') }}" class="form-control" />
                    @error("wname")
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 py-3">
                    <label style="display: block; text-align: left;">Email<spam class="text-danger">*</spam></label>
                    <input type="text" name="email" value="{{ old('email') }}" class="form-control" />
                    @error("email")
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-md-6 py-3">
                    <label style="display: block; text-align: left;">Mobile<spam class="text-danger">*</spam></label>
                    <input type="text" name="mobile" value="{{ old('mobile') }}" class="form-control" />
                    @error("mobile")
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 py-3">
                    <label style="display: block; text-align: left;">GST<spam class="text-danger">*</spam></label>
                    <input type="text" name="gst" value="{{ old('gst') }}" class="form-control" />
                    @error("gst")
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-md-6 py-3">
                    <label style="display: block; text-align: left;">Licence<spam class="text-danger">*</spam></label>
                    <input type="text" name="licence" value="{{ old('licence') }}" class="form-control" />
                    @error("licence")
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>

             <div id="product-fields">
                @foreach(old('product', ['']) as $index => $product)
                    <div class="row product-row">
                        <div class="col-md-6 py-3">
                            <label style="display: block; text-align: left;">Product {{ $loop->iteration }} </label>
                            <input type="text" name="product[]" value="{{ old('product.' . $index) }}" class="form-control" />
                            @error("product.$index")
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-3 py-3">
                            <label style="display: block; text-align: left;">Size<span class="text-danger">*</span></label>
                            <input type="text" name="size[]" value="{{ old('size.' . $index) }}" class="form-control" />
                            @error("size.$index")
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-3 py-3">
                            <label style="display: block; text-align: left;">Cost<span class="text-danger">*</span></label>
                            <input type="text" name="quality[]" value="{{ old('quality.' . $index) }}" class="form-control" />
                            @error("quality.$index")
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
            
                        <div class="col-md-6 py-3">
                            <label style="display: block; text-align: left;">Upload Image</label>
                            <input type="file" name="avatar[]" class="form-control" />
                            @error("avatar.$index")
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
            
                        <div class="col-md-5 py-3">
                            
                        </div>
            
                        <div class="col-md-1 py-3 d-flex align-items-end">
                            <button type="button" class="btn btn-primary" onclick="addProductField()">+</button>
                            <button type="button" class="btn btn-danger" onclick="removeProductField(this)">-</button>
                        </div>
                    </div>
                @endforeach
            </div> 
            
            
            <div class="row">
                <div class="col-md-3 py-3">
                    <label style="display: block; text-align: left;">Address1<spam class="text-danger">*</spam></label>
                    <input type="text" name="address1" value="{{ old('address1') }}" class="form-control" />
                    @error("address1")
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-md-3 py-3">
                    <label style="display: block; text-align: left;">Address2<spam class="text-danger">*</spam></label>
                    <input type="text" name="address2" value="{{ old('address2') }}" class="form-control" />
                    @error("address2")
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-md-3 py-3">
                    <label style="display: block; text-align: left;">Country<spam class="text-danger">*</spam></label>
                    <input type="text" name="country" value="{{ old('country') }}" class="form-control" />
                    @error("country")
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-md-3 py-3">
                    <label style="display: block; text-align: left;">Postal Code<spam class="text-danger">*</spam></label>
                    <input type="text" name="pcode" value="{{ old('pcode') }}" class="form-control" />
                    @error("pcode")
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            
            

            <div class="row">
                <div class="col-md-12 py-3 text-center">
                    <input type="submit" name="submit" value="Add Vendor" class="btn btn-primary" />
                </div>
            </div>

        </form>
      </div>
    </div>

  </div>

</main>
</body>

<script>
function addProductField() {
    // Get the container of product fields
    var productFieldsContainer = document.getElementById('product-fields');
    
    // Check if the number of product rows is less than 5
    var currentRowCount = productFieldsContainer.querySelectorAll('.product-row').length;
    if (currentRowCount < 5) {
        // Clone the last product row
        var lastProductRow = productFieldsContainer.querySelector('.product-row:last-child');
        var newProductRow = lastProductRow.cloneNode(true);
        
        // Reset the input values in the cloned row
        var inputs = newProductRow.querySelectorAll('input');
        inputs.forEach(input => input.value = '');
        
        // Append the new row to the product fields container
        productFieldsContainer.appendChild(newProductRow);
        
        // Update product labels
        updateProductLabels();
        
        // Manage "+" and "-" buttons visibility
        updateButtonsVisibility();
    } else {
        alert('You can only add up to 5 products.');
    }
}

function removeProductField(button) {
    var productFieldsContainer = document.getElementById('product-fields');
    if (productFieldsContainer.querySelectorAll('.product-row').length > 1) {
        button.closest('.product-row').remove();
        updateProductLabels(); // Update product labels after removing a row
        updateButtonsVisibility();
    }
}

function updateButtonsVisibility() {
    var productRows = document.querySelectorAll('.product-row');
    productRows.forEach((row, index) => {
        var addButton = row.querySelector('.btn-primary');
        var removeButton = row.querySelector('.btn-danger');
        addButton.style.display = (index === productRows.length - 1) ? 'inline-block' : 'none';
        removeButton.style.display = (productRows.length > 1) ? 'inline-block' : 'none';
    });
}

function updateProductLabels() {
    var productRows = document.querySelectorAll('.product-row');
    productRows.forEach((row, index) => {
        var label = row.querySelector('label');
        label.textContent = 'Product ' + (index + 1) + ' *';
    });
}

// Initial call to set the correct button visibility and labels
updateButtonsVisibility();
updateProductLabels();

</script>

@endsection