laravelEcomm/resources/views/Dashboard/products.blade.php

<x-adminheader />

<!-- partial -->
<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12 grid-margin">
                <div class="row">
                    <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                        <h3 class="font-weight-bold">Welcome Aamir</h3>
                        <h6 class="font-weight-normal mb-0">All systems are running smoothly! You have
                            <span class="text-primary">3 unread alerts!</span>
                        </h6>
                    </div>
                    <div class="col-12 col-xl-4">
                        <div class="justify-content-end d-flex">
                            <div class="dropdown flex-md-grow-1 flex-xl-grow-0">
                                <button class="btn btn-sm btn-light bg-white dropdown-toggle" type="button"
                                    id="dropdownMenuDate2" data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="true">
                                    <i class="mdi mdi-calendar"></i> Today (10 Jan 2021)
                                </button>
                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuDate2">
                                    <a class="dropdown-item" href="#">January - March</a>
                                    <a class="dropdown-item" href="#">March - June</a>
                                    <a class="dropdown-item" href="#">June - August</a>
                                    <a class="dropdown-item" href="#">August - November</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="row">
            <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <!-- Button to Open the Modal -->
                        <button type="button" class="btn btn-primary float-right" data-toggle="modal"
                            data-target="#myModal">
                            Add New
                        </button>
                        <!-- The Modal -->
                        <div class="modal" id="myModal">
                            <div class="modal-dialog">
                                <div class="modal-content">

                                    <!-- Modal Header -->
                                    <div class="modal-header">
                                        <h4 class="modal-title"> Add New Product</h4>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>

                                    <!-- Modal body -->
                                    <div class="modal-body">
                                        <form class="needs-validation" action="{{ route('addNewProduct') }}"
                                            method="POST" enctype="multipart/form-data" novalidate>
                                            @csrf
                                            <div class="form-group">
                                                <label for="name">Name</label>
                                                <input type="text" class="form-control" id="name" name="name"
                                                    required>
                                                <div class="invalid-feedback">Please enter your name.</div>
                                                @error('name')
                                                    <div class="alert alert-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="form-group">
                                                <label for="file">Picture</label>
                                                <input type="file" class="form-control" id="file" name="file"
                                                    required>
                                                <div class="invalid-feedback">Please upload a picture.</div>
                                                @error('file')
                                                    <div class="alert alert-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="form-group">
                                                <label for="description">Description</label>
                                                <textarea class="form-control" id="description" name="description" required></textarea>
                                                <div class="invalid-feedback">Please enter a description.</div>
                                                @error('description')
                                                    <div class="alert alert-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="form-group">
                                                <label for="price">Price</label>
                                                <input type="number" class="form-control" id="price" name="price"
                                                    required>
                                                <div class="invalid-feedback">Please enter the price.</div>
                                                @error('price')
                                                    <div class="alert alert-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="form-group">
                                                <label for="quantity">Quantity</label>
                                                <input type="number" class="form-control" id="quantity"
                                                    name="quantity" required>
                                                <div class="invalid-feedback">Please enter the quantity.</div>
                                                @error('quantity')
                                                    <div class="alert alert-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="form-group">
                                                <label for="category">Category</label>
                                                <select class="form-control" id="category" name="category" required>
                                                    <option value="">Select Category</option>
                                                    <option value="accessories">Accessories</option>
                                                    <option value="clothing">Clothing</option>
                                                    <option value="shoes">Shoes</option>
                                                </select>
                                                <div class="invalid-feedback">Please select a category.</div>
                                                @error('category')
                                                    <div class="alert alert-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="form-group">
                                                <label for="type">Type</label>
                                                <select class="form-control" id="type" name="type" required>
                                                    <option value="">Select Type</option>
                                                    <option value="best-sellers">Best Sellers</option>
                                                    <option value="new-arrivals">New Arrivals</option>
                                                    <option value="sale">Sale</option>
                                                </select>
                                                <div class="invalid-feedback">Please select a type.</div>
                                                @error('type')
                                                    <div class="alert alert-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                        </form>


                                    </div>

                                    <!-- Modal footer -->
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger"
                                            data-dismiss="modal">Close</button>
                                    </div>

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

                        <p class="card-title mb-0">Top Products</p>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered" id="product-table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Picture</th>
                                        {{-- <th>Description</th> --}}
                                        <th>Price</th>
                                        <th>Quantity</th>
                                        <th>Category</th>
                                        <th>Type</th>
                                        <th>Actions</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $i = 0;
                                    @endphp
                                    @foreach ($products as $item)
                                        @php
                                            $i++;
                                        @endphp
                                        <tr>
                                            <td>{{ $item->id }}</td>
                                            <td>{{ $item->name }}</td>
                                            <td><img src="{{ URL::asset('uploads/products/' . $item->picture) }}"
                                                    alt="" width="100px"></td>
                                            {{-- <td>{{ $item->description }}</td> --}}
                                            <td>Nrs.{{ $item->price }}</td>
                                            <td>{{ $item->quantity }}</td>
                                            <td>{{ $item->category }}</td>
                                            <td>{{ $item->type }}</td>
                                            <td>
                                                {{-- update --}}
                                                <!-- Button to Open the Modal -->
                                                <button type="button" class="btn btn-success" data-toggle="modal"
                                                    data-target="#updateModal{{ $i }}">
                                                    Edit
                                                </button>
                                                <!-- The Modal -->
                                                <div class="modal" id="updateModal{{ $i }}">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">

                                                            <!-- Modal Header -->
                                                            <div class="modal-header">
                                                                <h4 class="modal-title"> Edit Product</h4>
                                                                <button type="button" class="close"
                                                                    data-dismiss="modal">&times;</button>
                                                            </div>

                                                            <!-- Modal body -->
                                                            <div class="modal-body">
                                                                <form class="needs-validation"
                                                                    action="{{ route('updateProduct') }}"
                                                                    method="POST" enctype="multipart/form-data"
                                                                    novalidate>
                                                                    @csrf
                                                                    <div class="form-group">
                                                                        <label for="name">Name</label>
                                                                        <input type="text"
                                                                            value="{{ $item->name }}"
                                                                            class="form-control" id="name"
                                                                            name="name" required>
                                                                        <div class="invalid-feedback">Please enter your
                                                                            name.</div>
                                                                        @error('name')
                                                                            <div class="alert alert-danger">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="file">Picture</label>
                                                                        <input type="file"
                                                                            value="{{ $item->picture }}"
                                                                            class="form-control" id="file"
                                                                            name="file" required>
                                                                        <div class="invalid-feedback">Please upload a
                                                                            picture.</div>
                                                                        @error('file')
                                                                            <div class="alert alert-danger">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="description">Description</label>
                                                                        <textarea class="form-control" value="{{ $item->description }}" id="description" name="description" required>{{ $item->description }}</textarea>
                                                                        <div class="invalid-feedback">Please enter
                                                                            description.</div>
                                                                        @error('description')
                                                                            <div class="alert alert-danger">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="price">Price</label>
                                                                        <input type="number" class="form-control"
                                                                            value="{{ $item->price }}"
                                                                            id="price" name="price" required>
                                                                        <div class="invalid-feedback">Please enter the
                                                                            price.</div>
                                                                        @error('price')
                                                                            <div class="alert alert-danger">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="quantity">Quantity</label>
                                                                        <input type="number" class="form-control"
                                                                            value="{{ $item->quantity }}"
                                                                            id="quantity" name="quantity" required>
                                                                        <div class="invalid-feedback">Please enter the
                                                                            quantity.</div>
                                                                        @error('quantity')
                                                                            <div class="alert alert-danger">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="category">Category</label>
                                                                        <select class="form-control" id="category"
                                                                            name="category" required>
                                                                            <option value=" {{ $item->category }}">
                                                                                {{ $item->category }}
                                                                            </option>
                                                                            <option value="accessories">Accessories
                                                                            </option>
                                                                            <option value="clothing">Clothing</option>
                                                                            <option value="shoes">Shoes</option>
                                                                        </select>
                                                                        <div class="invalid-feedback">Please select a
                                                                            category.</div>
                                                                        @error('category')
                                                                            <div class="alert alert-danger">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                    <div class="form-group">
                                                                        <label for="type">Type</label>
                                                                        <select class="form-control" id="type"
                                                                            name="type" required>
                                                                            <option value=" {{ $item->type }}">
                                                                                {{ $item->type }}</option>
                                                                            <option value="best-sellers">Best Sellers
                                                                            </option>
                                                                            <option value="new-arrivals">New Arrivals
                                                                            </option>
                                                                            <option value="sale">Sale</option>
                                                                        </select>
                                                                        <div class="invalid-feedback">Please select a
                                                                            type.</div>
                                                                        @error('type')
                                                                            <div class="alert alert-danger">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                    <input type="hidden" name="id"
                                                                        id="id" value="{{ $item->id }}">
                                                                    <button type="submit"
                                                                        class="btn btn-success">Save Changes</button>
                                                                </form>
                                                            </div>
                                                            <!-- Modal footer -->
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-danger"
                                                                    data-dismiss="modal">Close</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <a href="{{ route('deleteProduct', $item->id) }}"
                                                    class="btn btn-danger">Delete</a>
                                            </td>
                                    @endforeach

                                    </tr>

                                </tbody>
                            </table>
                            {{-- <div class="d-flex justify-content-center mt-3">
                                {{ $products->links() }}
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <!-- content-wrapper ends -->

    <x-adminfooter />