@extends('layouts.main') 
@section('title', 'Add Product')
@section('content')
    <div class="container-fluid">
    	<div class="page-header">
			@if ($errors->any())
			<div class="alert alert-danger">
			  <ul>
				  @foreach ($errors->all() as $error)
					<li>{{ $error }}</li>
				  @endforeach
			  </ul>
			</div><br />
			@endif
			@if(session()->get('success'))
			<div class="alert alert-success">
			  {{ session()->get('success') }}  
			</div><br />
		  @endif	            
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-headphones bg-blue"></i>
                        <div class="d-inline">
                            <h5>Add Attribute</h5>

                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="/dashboard"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#">Add Product</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card ">
                    <div class="card-body">
                            <form action="{{ route('attributes.update') }}" method="POST"   enctype="multipart/form-data" >
                                @csrf
                                @method('PATCH')
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="d-block">Attribute Name</label>
                                            <input type="text" name="name" class="form-control" placeholder="Enter Attribute Name">
                                        </div>
                                        <div class="form-group">
                                            <label class="d-block">Attribute Code</label>
                                            <input type="text" name="code" class="form-control" placeholder="Enter Attribute code">
                                        </div>
                                        <div class="form-group">
                                            <label class="d-block">Attribute Type</label>
                                            <select class="form-control select2"  id="attributetype" name="type"  required>
                                                <option selected="selected" value="">Attribute Type</option>
                                                <option value="text">Text</option>
                                                <option value="dropdown">Dropdown</option>     
                                            </select>	                       
                                        </div>												
                                        <div class="form-group">
                                            <label class="d-block">Attribute Scope</label>
                                            <select class="form-control select2"  id="scope" name="scope"  required>
                                                <option selected="selected" value="">Select Scope</option>
                                                <option value="global">Global</option>
                                                <option value="category">Category</option>     
                                            </select>	                       
                                        </div>
                                        
                                        <div class="form-group resources">
                                            <label class="d-block">Select Category </label>
                                            <select class="form-control select2 ">
                                                <option selected="selected" value="" data-select2-id="3">Select Category</option>
                                                @foreach ($category as $item)
                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <input class="btn btn-primary" type="submit" name="Save" value="Save">
                                        </div>
                                    </form>

                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group customoption">
                                        <label class="d-block">Add option</label>
                                        <button id="addNewOption"> Add Option </button>          
                                        <div class="form-group" id="availableOptions" >
                                            <label class="d-block">Attribute Name</label>
                                            <input type="text" name="name" class="form-control" placeholder="Enter Attribute Name">
                                        </div>

                                    </div>                                            

                                </div> <!--  col-sm-6 -->
                    </div>
                </form>
                            </div>

                     
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection