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

@section('content')
@include('users.partials.sidebar')

    <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">
                                    <input type="hidden" name="type" value="{{$type}}">
                                </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}}">
                                                        {{$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')))
                                                <input class="form-control" style="display: none;" id="{{str_replace(' ', '_', strtolower($category->category_name))}}_code" type="text" placeholder="Enter color code and name" autocomplete="off" name="{{str_replace(' ', '_', strtolower($category->category_name))}}_code">
                                            @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">
                                            Submit
                                        </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')