@extends('layouts.app.master')
@section('title', 'Product Models')

@section('content')

    <div class="container">
        <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                    <div class="col-sm-6">
						<h2>Manage <b>Product Models</b></h2>
					</div>
					<div class="col-sm-6">
						<a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"><i class="material-icons">&#xE147;</i> <span>Add New Model</span></a>
					</div>
                </div>
            </div>
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
						<th>
							<span class="custom-checkbox">
								<input type="checkbox" id="selectAll">
								<label for="selectAll"></label>
							</span>
						</th>
                        <th>Id</th>
                        <th>Category Name</th>
                        <th>Product Model</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($model as $item)

                    <tr>
					    <td>
							<span class="custom-checkbox">
								<input type="checkbox" id="checkbox1" name="options[]" value="1">
								<label for="checkbox1"></label>
							</span>
						</td>
                        <td>{{$item->id }}</td>
                        <td>{{$item->category_name}}</td>
                        <td>{{$item->product_model}}</td>
					
                        <td>
                            <a href="{{ route('product.model.edit', ['id' => $item->id]) }}" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
							<form action="{{ route('delete.model', ['id' => $item->id]) }}" method="post" style="display: inline;">
                                @csrf
                                @method('delete')
                                <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this product model?')">Delete</button>
                            </form>   
						</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
			<div class="clearfix">
                <div class="hint-text">Showing <b>5</b> out of <b>25</b> entries</div>
                <ul class="pagination">
                    <li class="page-item disabled"><a href="#">Previous</a></li>
                    <li class="page-item"><a href="#" class="page-link">1</a></li>
                    <li class="page-item"><a href="#" class="page-link">2</a></li>
                    <li class="page-item active"><a href="#" class="page-link">3</a></li>
                    <li class="page-item"><a href="#" class="page-link">4</a></li>
                    <li class="page-item"><a href="#" class="page-link">5</a></li>
                    <li class="page-item"><a href="#" class="page-link">Next</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Add Modal HTML -->
	<div id="addEmployeeModal" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<form action="{{route('product.save')}}" method="post">
                    @csrf
					<div class="modal-header">						
						<h4 class="modal-title">Add Product Model</h4>
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					</div>
					<div class="modal-body">					
                        <div class="form-group">
                            <label for="category">Category Name</label>
                            <select name="category_id" id="category" class="category" required>
                                <option disable selected>--select category--</option>
                                @foreach($categories as $item)
                                    <option value="{{ $item->id }}">{{ $item->name}}
                                    </option>
                                @endforeach
                            </select> 
                        </div>
                        <div class="form-group">
                            <label>Product Model</label>
							<input type="text" class="form-control" name="product_model" required>
                        </div>
						
					<div class="modal-footer">
						<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
						<input type="submit" class="btn btn-success" value="Add">
					</div>
				</form>
			</div>
		</div>
	</div>
@endsection