@extends('users.layout.app')
<style type="text/css">
   input::-webkit-input-placeholder {
        color: #555 !important;
    }
</style>
@section('content')

    <div id="content" class="vheight" style="position: inherit">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">Room Finishes</div>
                    <div class="panel-body">
                        <form class="form-horizontal" method="POST" action="{{url('room/'.$room_id)}}" novalidate>
                            {{ csrf_field() }}
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="name" class="col-md-4 control-label">Room Name <span class="required">*</span></label>

                                    <div class="col-md-12">
                                        <input type="hidden" name="type" value="1">
                                        <input type="hidden" name="is_edit" value="1">
                                    </div>
                                </div>
                            </div>
                            @foreach($allCategory as $category)
                                <div class="col-md-4 col-sm-6">
                                    <div class="form-group">
                                        <label for="category" class="col-md-12 control-label">{{$category->category_name}}</label>
                                        <div class="col-md-12">
                                            <select id="{{str_replace(' ', '_', strtolower($category->category_name))}}" class="tags-field form-control select_sub_category" name="{{$category->category_name}}">
                                                <option value = "">Please Select </option>
                                                @foreach($category->subCategory as $subcategory)

                                                    <option value="{{$subcategory->childCategory->category_name}}"
                                                    @if(!empty($room_finishes[str_replace(' ', '_', $category->category_name)]) && $room_finishes[str_replace(' ', '_', $category->category_name)] == $subcategory->childCategory->category_name)
                                                    selected = "selected"
                                                        @endif
                                                    >
                                                        {{$subcategory->childCategory->category_name}}
                                                    </option>


                                                @endforeach
                                            </select>
                                            @if(in_array($category->category_name,array('Base Cabinet Counter Top Color','Base Cabinet Color','Upper Cabinet Color','Pantry Cabinet with Microwave Color')))
                                            @if(!empty($room_finishes[str_replace(' ', '_', $category->category_name)]))
                                                <input placeholder="Enter color code and name" autocomplete="off" class="form-control" id="{{str_replace(' ', '_', strtolower($category->category_name))}}_code" type="text" name="{{str_replace(' ', '_',    strtolower($category->category_name))}}_code" value="{{$room_finishes[str_replace(' ', '_', strtolower($category->category_name)).'_code']}}">
                                            @else
                                                <input placeholder="Enter color code and name" autocomplete="off" class="form-control" style="display: none; " id="{{str_replace(' ', '_', strtolower($category->category_name))}}_code" type="text"  name="{{str_replace(' ', '_',    strtolower($category->category_name))}}_code" value="{{$room_finishes[str_replace(' ', '_', strtolower($category->category_name)).'_code']}}">
                                            
                                            @endif
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            <input type="hidden" name="project_id" value="{{$project_id}}">
                            <div class="col-md-12 clearfix">
                                <div class="form-group  ">
                                    <div class="col-md-6 ">
                                        <a href="{{url('projects/show/'.$project_id )}}" class="btn btn-bg btn-green">
                                            <span><i class="fa fa-arrow-left fa-btn fa-back"></i> {{trans('table.back')}}</span>
                                        </a>

                                        <button type="submit" class="btn btn-green">
                                            Save And Continue
                                        </button>
                                    </div>
                                </div>
                            </div>

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

@endsection('content')

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

    $(function () {

        $('.select_sub_category').on('change',function(e){
            var elm_id = $(this).attr('id');
            var sel_val = $('#'+elm_id).val();
            if(sel_val.length > 1){
                $('#'+elm_id+'_code').show();
            }else{
                // $('#'+elm_id+'_code').val('0');
                $('#'+elm_id+'_code').hide();
            }
        });

    });

</script>
@endsection('scripts')