@extends('layouts.dashboard')

@section('title', 'Manage Set Up')

@section('myJS')
	<script src="{{url('/')}}/js/admin/setup.js"></script>
@endsection

@section('content')

<div class="padding-top40"></div>

<div class="bs-example">

<!-- main part-->
<div class="container-fluid">
    @include('dashboard.MasterSetup.Header')
    <div class="row" style="margin: 0px; padding-top: 15px;">
        <div class="col-md-2 manage-text">
            <input type="text" id="inputAttributeName" class="form-control" placeholder="Attribute">
        </div>
        <div class="col-md-2">
            <button type="button" id="btnAddAttribute" class="btn btn-default btn-xs btnAddAttributeModel" data-toggle="modal" data-target="#attributeModel" title="Add Attribute"  style="font-size:14px !important;">Add Attribute</button>
        </div>
        <div class="col-md-8"></div>
    </div>
    <div id="div_attribute_table" class="row table-catalog" style="margin: 0px;">
        <table data-page-length='50'  id="attributeTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th scope="col" class="set2 text-center">Attribute ID</th>
                    <th scope="col" class="set1 text-center">Attribute Name</th>
                    <th scope="col" class="set1 text-center">Data Type</th>
                    <th scope="col" class="set2 text-center">Unit</th>
                    <th scope="col" class="set2 text-center">Product Search</th>
                    <th scope="col" class="set2 text-center">Preferred</th>
                    <th scope="col" class="set2 text-center">Catalog</th>
                    <th scope="col" class="set2 text-center">Virtual</th>
                    <th scope="col" class="set2 text-center">Instance</th>
                    <th scope="col" class="set2 text-center">Multi-Language</th>
                    <th scope="col" class="set2 text-center">Text Area</th>
                    <th scope="col" class="set2 text-center">HTML</th>
                    <!-- <th scope="col" class="set2 text-center">Composite Attribute</th> -->
                    <th scope="col" class="set5 text-center">Operations</th>
                </tr>
            </thead>
            <tbody>
                @foreach($attributeList as $attribute)
                    <tr id="att_{{$attribute->AttributeID}}">
                        <td class="set-col2">
                            {{$attribute->AttributeID}}
                            @if($attribute->isVirtualAttribute == "1" && $attribute->isCatalogAttribute != "1")
                                <div class="grayBg" style="display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Virtual attribute"></div>
                            @elseif($attribute->isCatalogAttribute == "1")
                                @if($attribute->isVirtualAttribute == "1")
                                    <div class="cyanBg" style="display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Virtual Catalog attribute"></div>
                                @else
                                    <div class="tealBg" style="display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Catalog attribute"></div>
                                @endif
                            @elseif($attribute->InstanceAttribute == "1")
                                <div class="blueBg" style="display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Instance attribute"></div>
                            @else
                                <div style="background-color: none transparent; display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;"></div>
                            @endif
                        </td>
                        <td class="set-col1 attributeName">
                            {{$attribute->AttributeName}}
                        </td>
                        <td class="set-col2">
                            @if($attribute->datatype == 'longtext')
                                Long Description
                            @elseif($attribute->datatype == 'varchar(255)')
                                Text
                            @elseif($attribute->datatype == 'int(10)')
                                Number
                            @elseif($attribute->datatype == 'decimal(10,2)')
                                Decimal
                            @elseif($attribute->datatype == 'enum')
                                Enum
                            @elseif($attribute->datatype == 'set')
                                Set
                            @else
                                Long Description
                            @endif
                        </td>
                        <td class="set-col2 unitDescription">
                            {{$attribute->UnitDescription}}
                        </td>
                        <td class="set-col2 productSearch">
                            <div class="checkbox set-checkbox">
                                <label>
                                    <input type="checkbox" name="" disabled value="" {{$attribute->ProductSearch == 1 ? 'checked' : ''}} >
                                </label>
                            </div>
                        </td>
                        <td class="set-col2 preferredAttribute">
                            <div class="checkbox set-checkbox">
                                <label>
                                    <input type="checkbox" name="" disabled value="" {{$attribute->PreferredAttribute == 1 ? 'checked' : ''}} >
                                </label>
                            </div>
                        </td>
                        <td class="set-col2">
                            <div class="checkbox set-checkbox">
                                <label>
                                    <input type="checkbox" name="" disabled value="" {{$attribute->isCatalogAttribute == 1 ? 'checked' : ''}} >
                                </label>
                            </div>
                        </td>
                        <td class="set-col2">
                            <div class="checkbox set-checkbox">
                                <label>
                                    <input type="checkbox" name="" disabled value="" {{$attribute->isVirtualAttribute == 1 ? 'checked' : ''}} >
                                </label>
                            </div>
                        </td>
                        <td class="set-col2">
                            <div class="checkbox set-checkbox">
                                <label>
                                    <input type="checkbox" name="" disabled value="" {{$attribute->InstanceAttribute == 1 ? 'checked' : ''}} >
                                </label>
                            </div>
                        </td>
                        <td class="set-col2">
                            <div class="checkbox set-checkbox">
                                <label>
                                    <input type="checkbox" name="" disabled value="" {{$attribute->AllowMultiLanguage == 1 ? 'checked' : ''}} >
                                </label>
                            </div>
                        </td>
                        <td class="set-col2">
                            <div class="checkbox set-checkbox">
                                <label>
                                    <input type="checkbox" name="" disabled value="" {{$attribute->isTextArea == 1 ? 'checked' : ''}} >
                                </label>
                            </div>
                        </td>
                        <td class="set-col2">
                            <div class="checkbox set-checkbox">
                                <label>
                                    <input type="checkbox" name="" disabled value="" {{$attribute->AllowHTML == 1 ? 'checked' : ''}} >
                                </label>
                            </div>
                        </td>
                        <td class="set-col5">
                            <div class="bt-seperation">
                                <button type="button" class="btn btn-primary btn-xs edit_button"
                                data-toggle="modal" data-target="#attributeModel"
                                data-mymodallabel="Edit Attribute"
                                data-attributename="{{$attribute->AttributeName}}"
                                data-unit="{{$attribute->UnitID}}"
                                data-canedit="{{$attribute->CanEdit}}"
                                data-productsearch="{{$attribute->ProductSearch}}"
                                data-preferredAttribute="{{$attribute->PreferredAttribute}}"
                                data-virtualAttribute="{{$attribute->isVirtualAttribute}}"
                                data-iscatalogattribute="{{$attribute->isCatalogAttribute}}"
                                data-attributePrefix="{{$attribute->AttributePrefix}}"
                                data-attributesuffix="{{$attribute->AttributeSuffix}}"
                                data-attributeconcattext="{{$attribute->AttributeConcatText}}"
                                data-AttributeCleansingText="{{$attribute->AttributeCleansingText}}"
                                data-AllowMultiLanguage="{{$attribute->AllowMultiLanguage}}"
                                data-istextarea="{{$attribute->isTextArea}}"
                                data-instanceattribute="{{$attribute->InstanceAttribute}}"
                                data-allowhtml="{{$attribute->AllowHTML}}"
                                data-iscompositeattribute="{{$attribute->isCompositeAttribute}}"
                                data-compositeattributeid="{{$attribute->compositeAttributeID}}"
                                data-outputasimage="{{$attribute->OutputAsImage}}"
                                data-imagesizeid="{{$attribute->ImageSizeID}}"
                                data-attributeid="{{$attribute->AttributeID}}"
                                data-datatype="{{$attribute->datatype}}"
                                data-setvalues="{{$attribute->setValues}}"
                                >Edit</button> |

                                <button type="button" class="btn btn-primary btn-xs delete_button"
                                data-toggle="modal" data-target="#deleteModal"
                                data-tabname="Attribute"
                                data-id="{{$attribute->AttributeID}}">
                                Delete</button>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="attributeModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog setup-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add / Edit Attribute</h4>
            </div>
            <form id="postAttribute">
            @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-4"> <div class="padd-name">Attribute Name:</div> </div>
                        <div class="col-md-8"><input class="form-control attributeTextBox attributeName" name="attributeName" placeholder="Attribute Name" id="attributeName" pattern=".*[^ ].*"  oninvalid="setCustomValidity('Plz enter attribute name ')" oninput="try{setCustomValidity('')}catch(e){}" required>
                        <input class="form-control AttributeID" type="hidden" name="AttributeID" id="AttributeID"></div>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-4"> <div class="padd-name"> Unit :</div></div>
                      <div class="col-md-8">
                        <select name="unitID" class="unit" id="unit" >
                        	@foreach($unitList as $unit)
                        		<option value="{{$unit->UnitID}}">{{$unit->UnitDescription}}</option>
                        	@endforeach
                        </select>
                      </div>
                        </div>
                    </div>
                    <div class="form-group">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Preferred Attribute :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<select name="preferredAttribute" id="preferredAttribute" class="myAttribute">
                    				<option value="No">No</option>
                    				<option value="Yes">Yes</option>
                    			</select>
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Product Search :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="checkbox" name="ProductSearch" id="ProductSearch" class="ProductSearch">
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Output As Image :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="checkbox" name="OutputAsImage" id="OutputAsImage" class="OutputAsImage">
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group OutputAsImageDiv" style="display: none;" >
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Image Size ID :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<select name="ImageSizeID" id="ImageSizeID" class="myAttribute">
                    				<option value="0">Choose An Option</option>
                    				@foreach($ImageSizes as $imageSize)
                                        <option value="{{$imageSize->ImageSizeID}}">{{$imageSize->ImageSizeID}}</option>
                                    @endforeach
                    			</select>
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Multi Language :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="checkbox" name="AllowMultiLanguage" id="AllowMultiLanguage" class="AllowMultiLanguagetxt AllowMultiLanguage">
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group nonMLFields">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Data Type :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<select name="datatype" id="datatype" class="myAttribute">
                    				<option value="varchar(255)">Text</option>
                    				<option value="int(10)">Number</option>
                    				<option value="decimal(10,2)">Decimal</option>
                    				<option value="longtext">Long Description</option>
                    				<option value="enum">Enum</option>
                    				<option value="set">Set</option>
                    			</select>
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group setenumFields" style="display:none;">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Set/Enum Values :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<textarea class="form-control attributeTextBox setValues" name="setValues" placeholder="Set/Enum Values" id="setValues"></textarea>
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group nonMLFields">
                    	<div class="row">
	                		<div class="col-md-4">
	                			<div class="padd-name">
	                				Attribute Prefix :
	                			</div>
	                		</div>
	                		<div class="col-md-8">
	                			<input class="form-control attributeTextBox attributePrefix" name="attributePrefix" placeholder="Attribute Prefix" id="attributePrefix">
	                		</div>
	                		<br />
	                		<br />
	                		<div class="col-md-4">
	                			<div class="padd-name">
	                				Attribute Suffix :
	                			</div>
	                		</div>
	                		<div class="col-md-8">
	                			<input class="form-control attributeTextBox attributeSuffix" name="attributeSuffix" placeholder="Attribute Suffix" id="attributeSuffix">
	                		</div>
	                		<br />
	                		<br />
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Cleanup Options :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<textarea class="form-control attributeTextBox attributeCleansingText" name="attributeCleansingText" placeholder="Cleanup Text" id="attributeCleansingText"></textarea>
                    		</div>
	                	</div>
                    </div>
                    <div class="form-group nonMLFields">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Instance Attribute :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="checkbox" name="instanceAttribute" id="instanceAttribute" class="instanceattributetxt instanceAttribute">
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group nonMLFields">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Catalog Attribute :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="checkbox" name="isCatalogAttribute" id="isCatalogAttribute" class="isCatalogAttribute">
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group nonMLFields">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Virtual Attribute :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="checkbox" name="virtualAttribute" id="virtualAttribute" class="virtualAttributetxt virtualAttribute">
                    		</div>
                    	</div>
                    	<div class="row virtualFields" style="display: none;">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Virtual Attribute Setup :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
								<textarea class="form-control attributeTextBox attributeConcatText" name="attributeConcatText" placeholder="Attribute Statement" id="attributeConcatText"></textarea>
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group nonMLFields nonVirtualFields">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Text Area :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="checkbox" name="isTextArea" id="isTextArea" class="isTextAreatxt isTextArea">
                    		</div>
                    	</div>
                    </div>
                    <div class="form-group nonMLFields nonVirtualFields">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Allow HTML :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="checkbox" name="allowHTML" id="allowHTML" class="allowhtmltxt allowHTML">
                    		</div>
                    	</div>
                    </div>
                    <!-- <div class="form-group">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Composite Attribute :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<input type="checkbox" name="compositeAttribute" id="compositeAttribute" class="compositeAttributetxt compositeAttribute">
                    		</div>
                    	</div>
                    </div> -->
                    <div class="form-group chooseAttributes" style="display:none;">
                    	<div class="row">
                    		<div class="col-md-4">
                    			<div class="padd-name">
                    				Choose Attributes :
                    			</div>
                    		</div>
                    		<div class="col-md-8">
                    			<select name="compAttrList[]" class="myAttribute compAttribute" multiple="multiple">
                    				@foreach($attributeList as $attribute)
										<option value="{{$attribute->AttributeID}}">{{$attribute->AttributeName}}</option>
									@endforeach
                    			</select>
                    		</div>
                    	</div>
                    </div>
					<div class="form-group">
                    	<div class="row">
                    		<div id="error" class="col-md-12 text-danger">

                    		</div>
                    	</div>
                    </div>
                </div>
                <div class="modal-footer setup-footer">
                    <button type="submit" class="btn btn-primary btn_update_properties">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Delete</h4>
            </div>
            <form id="deleteRow">
            @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <input class="form-control id" type="hidden" name="id" id="id">
                        <input class="form-control id" type="hidden" name="tabName" id="tabName">
                        Do you want to delete ?
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary btn_update_properties ">Yes</button>
                    <button type="button" class="btn btn-default cancel" data-dismiss="modal">No</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection