am making a multi-step-form in livewire and my tags-input, file uploads, and tabs are not working as they were supposed to, at the time I separated them in into the multi-step-form all these mentioned above collapsed.
livewire/fruits.blade.php
<form>
@csrf
@if ($currentTab == 1)
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating">Name of your shop here</label>
<input type="text" wire:model="title" class="form-control @error('title') is-invalid @enderror" placeholder="EX: create me a logo" >
@error('title')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating">Describe Your order here</label>{{ $description }}
<textarea rows="4" cols="80" wire:model="description" class="form-control @error('description') is-invalid @enderror" placeholder="I am Looking for..." required></textarea>
@error('description')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
</div>
@endif
@if ($currentTab == 2)
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="file-loading">
<input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="bmd-label-floating">Add your favourite?</label>
<div class="bootstrap-tagsinput info-badge">
<input type="text" value="Watermellon,Bananas, apples,pinaple" class="form-control tagsinput" data-role="tagsinput" data-color="info" wire:model="tags" placeholder="Enter Your Fruits Below">
</div>
</div>
</div>
</div>
@endif
@if ($currentTab == 3)
<div class="row">
<div class="col-md-6 pr-1">
<div class="form-group">
<label class="bmd-label-floating">Choose a Category:</label>
<select id="category" wire:model="category" class="form-control @error('category') is-invalid @enderror">
<option value="select">Select Category</option>
@foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
@endforeach
</select>
@error('category')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="col-md-6 pl-1">
<div class="form-group">
<label class="bmd-label-floating">Choose a Sub-Category:</label>
<div class="content">
<div>
@if(!is_null($subcategories))
<select wire:model="selectedSubcategory" class="form-control @error('selectedSubcategory') is-invalid @enderror">
<option value="">Select Sub-Category</option>
@foreach($subcategories as $subcategory)
<option value="{{ $subcategory->id }}">{{ $subcategory->name }}</option>
@endforeach
</select>
@error('selectedSubcategory')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
@endif
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<label>Select Time or Days you want it delivered to you?</label>
<select class="nav-select form-control">
<option href="#home">24 Hours</option>
<option href="#3days">3 Days</option>
<option href="#7days">7 Days</option>
</select>
</div>
<div class="col-lg-6">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="card ">
<div class="card-header card-header-rose card-header-text">
<div class="card-icon">
<i class="fa fa-clock-o"></i>
</div>
<h4 class="card-title">Time Picker</h4>
</div>
<div class="card-body ">
<div class="form-group">
<input type="text" class="form-control timepicker" value="10/05/2016">
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="3days" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
</div>
</div>
</div>
@endif
@if ($currentTab == 4)
<div class="row">
<ul class="nav nav-pills nav-pills-icons offset-sm-1" role="tablist">
<li class="nav-item col-md-5">
<a class="nav-link card" href="#dashboard-1" role="tab" data-toggle="tab">
<div class="card-content-wrapper">
<div class="card-body">
<img
src="https://image.freepik.com/free-vector/group-friends-giving-high-five_23-2148363170.jpg"
alt=""
/>
<b><h4>Pay this order</h4></b>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</div>
</a>
</li>
<li class="nav-item col-md-5">
<a class="nav-link card" href="#schedule-1" role="tab" data-toggle="tab">
<div class="card-content-wrapper">
<div class="card-body">
<img
src="https://image.freepik.com/free-vector/people-putting-puzzle-pieces-together_52683-28610.jpg"
alt=""
/>
<h4>choose an order.</h4>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="">
<div class="tab-content tab-space">
<div class="tab-pane" id="dashboard-1">
<div class="row">
<div id="price">
<div class="input-group" >
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">mail</i>
</span>
</div>
<input id="price" type="number" class="form-control @error('price') is-invalid @enderror" name="price" placeholder="{{ __('Price...') }}" value="{{ old('price') }}" required autocomplete="price">
@error('email')
<span class="invalid-feedback" role="alert" style="margin-left: 70px; margin-bottom: -10px">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
</div>
</div>
<div class="tab-pane" id="schedule-1">
<div class="row">
<div class="col-lg-6">
<label>what would like to order?</label>
<div class="form-group">
<select name="" class="form-control">
<option value="">bananas</option>
<option value="">apples</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h4>Upgrade your options</h4>
<div class="table-responsive">
<table id="myTable" class="table">
<tbody>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Sign contract for "What are conference organizers afraid of?"</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Flooded: One year later, assessing what was lost and what was
</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Create 4 Invisible User Experiences you Never Knew About</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-link btn-sm">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
<i class="material-icons">close</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
@endif
<div class="mt-3">
@if ($currentTab == 1)
<button type="button" wire:click="increaseStep()" class="btn btn-info btn-raised float-right">Next</button>
@endif
@if ($currentTab == 2)
<button type="button" wire:click="decreaseStep()" class="btn btn-outline-info float-left">Back</button>
<button type="button" wire:click="increaseStep()" class="btn btn-info btn-raised float-right">Next</button>
@endif
@if ($currentTab == 3)
<button type="button" wire:click="decreaseStep()" class="btn btn-outline-info float-left">Back</button>
<button type="button" wire:click="increaseStep()" class="btn btn-info btn-raised float-right">Next</button>
@endif
@if ($currentTab == 4)
<button type="button" wire:click="decreaseStep()" class="btn btn-outline-info float-left">Back</button>
<button type="submit" class="btn btn-info btn-raised">Submit</button>
@endif
</div>
</form>
fruits.blade.php
@extends('layouts.fruits')
@section('title')
@endsection
@section('styles')
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/radio-card.css">
<link href="../assets/css/material-kit.css?v=2.0.6" rel="stylesheet" />
@endsection
@section('content')
<!-- Post a Job -->
<div class="fruits_form">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="card">
<div class="card-header card-header-info text-center"><h4>online fruits ordering</h4></div>
<div class="card-body">
<livewire:fruits/>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Post a Job -->
@endsection
@section('scripts')
<script>
document.addEventListener('livewire:load', function () {
$("#file-1").fileinput({
theme: 'fa',
uploadUrl: '#',
allowedFileExtensions: ['jpg', 'png', 'gif', 'mp4'],
overwriteInitial: false,
maxFileSize:2000,
maxFilesNum: 10,
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
})
</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/themes/fa/theme.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<script>
document.addEventListener('livewire:load', function () {
$('select.nav-select').on('change',function(){
var selected_id=$(this).find('option:selected').attr('href');
$('.tab-content .tab-pane').removeClass('show active');
$(selected_id).addClass('show active');
});
})
</script>
@endsection
livewire.Fruit.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Fruits;
use App\Models\Category;
use App\Models\Subcategory;
use Illuminate\Support\Facades\Auth;
class Fruit extends Component
{
public $title;
public $description;
public $tags;
public $category = '';
public $selectedSubcategory = null;
public $subcategories = null;
public $totalTabs = 4;
public $currentTab = 1;
public function mount()
{
$this->currentTab = 1;
}
public function render()
{
return view('livewire.fruits', [
'categories' => Category::all(),
]);
}
public function updatedcategory($category)
{
$this->subcategories = Subcategory::where('cat_id', $category)->get();
}
public function increaseStep ()
{
$this->currentTab++;
if ($this->currentTab > $this->totalTabs) {
$this->currentTab = $this->totalTabs;
}
}
public function decreaseStep ()
{
$this->currentTab--;
if ($this->currentTab < 1) {
$this->currentTab = 1;
}
}
public function fruitdelivery ()
{
}
}
somebody, please help me
@drehimself Am sorry to call you like this because I really need help, I made this from one of your courses on youtube and here on laracast. please review my question it's like the fifth time I posted a question like this one and got no response.
Please or to participate in this conversation.