@extends('users.layout.app')
@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 Defaults</div>
                <div class="panel-body">
                    <form class="form-horizontal" method="POST" action="{{url('room/'.$room_id)}}" novalidate>
                    <input type="hidden" id="room_id" name="type" value="{{$room_id}}">
                        {{ csrf_field() }}
                        @if(session()->has('message.level'))
                            <div id="product_code_alert" class="alert alert-{{ session('message.level') }}"> 
                            {!! session('message.content') !!}
                            </div>
                        @endif
                            <div class="col-md-6">
                                <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 id="room_name" type="text" class="form-control" name="room_name" value="{{$room_name}}" required autofocus>
                                       <input type="hidden" name="type" value="0">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name" class="col-md-4 control-label">PRODUCT CODE
                                    <span id="product_code_exist" style="font-size: 11px;color: red;" hidden="hidden">(Product Code "<b><span id="code_name"></span></b>" Already Exists)</span>
                                    </label>
                                    
                                    <div class="col-md-12">
                                        <input id="product_code" type="text" class="form-control" name="product_code" value="{{$product_code}}" required autofocus>
                                       <input type="hidden" name="type" value="0">
                                    </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 class="tags-field form-control select_sub_category" id={{str_replace(' ','_',$category->category_name)}}  name="{{$category->category_name}}">
                                            <option value = "">Please Select </option>
                                            @foreach($category->subCategory as $subcategory)

                                                <option value="{{$subcategory->childCategory->category_name}}"
                                                        @foreach($room_defaults as $key=>$value)
                                                        @if($subcategory->childCategory->category_name == $value)
                                                        selected = "selected"
                                                        @endif
                                                        @endforeach
                                                >
                                                    {{$subcategory->childCategory->category_name}}
                                                </option>


                                            @endforeach
                                        </select>
                                    </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" id="save" class="btn btn-green">
                                    Save And Continue
                                </button>
                            </div>
                        </div>
                        </div> 
                        
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //$('#Ceiling_Height').val() == "120\" Ceiling" ||
        if ($('#Ceiling_Height').val() == "120\" Ceiling with 26\" soffit" || $('#Ceiling_Height').val() == "108\" Ceiling" || $('#Ceiling_Height').val() == "120\" Ceiling" || $('#Ceiling_Height').val() == "96\" Ceiling" || $('#Ceiling_Height').val() == "108\" Ceiling with 14\" soffit") {
            $('#Upper_Cabinet_Height').val("36\"").attr('disabled', 'disabled');
            $('#Pantry_Cabinet_Height_with_Microwave').val("94\"").attr('disabled', 'disabled');
            $('#Refrigerator_Cabinet_Height').val("22\"").attr('disabled', 'disabled');
        } else {
            $('#Upper_Cabinet_Height').val("32\"").attr('disabled', 'disabled');
            $('#Pantry_Cabinet_Height_with_Microwave').val("90\"").attr('disabled', 'disabled');
            $('#Refrigerator_Cabinet_Height').val("18\"").attr('disabled', 'disabled');
        }


        $('#Ceiling_Height').on('change', function (e) {
            //$(this).val() == "120\" Ceiling" ||
            if ($(this).val() == "120\" Ceiling with 26\" soffit" || $(this).val() == "108\" Ceiling" || $(this).val() == "120\" Ceiling" ||  $(this).val() == "96\" Ceiling" ||$(this).val() == "108\" Ceiling with 14\" soffit") {
                $('#Upper_Cabinet_Height').val("36\"").attr('disabled', 'disabled');
                $('#Pantry_Cabinet_Height_with_Microwave').val("94\"").attr('disabled', 'disabled');
                $('#Refrigerator_Cabinet_Height').val("22\"").attr('disabled', 'disabled');
            } else {
                $('#Upper_Cabinet_Height').val("32\"").attr('disabled', 'disabled');
                $('#Pantry_Cabinet_Height_with_Microwave').val("90\"").attr('disabled', 'disabled');
                $('#Refrigerator_Cabinet_Height').val("18\"").attr('disabled', 'disabled');
            }

        });
        if( $('#Upper_Cabinet_Depth').val()=="13\""){
            $('#Refrigerator_Cabinet_Depth').val("13\"").attr('disabled','disabled');
        }else{
            $('#Refrigerator_Cabinet_Depth').val("15\"").attr('disabled','disabled');
        }

        $('#Upper_Cabinet_Depth').on('change',function(e){
            //$(this).val()=="120\" Ceiling" ||
            if( $(this).val()=="13\""){
                $('#Refrigerator_Cabinet_Depth').val("13\"").attr('disabled','disabled');
            }else{
                $('#Refrigerator_Cabinet_Depth').val("15\"").attr('disabled','disabled');
            }

        })
        $('#save').on('click',function () {
            $('#Upper_Cabinet_Height').removeAttr("disabled");
            $('#Pantry_Cabinet_Height_with_Microwave').removeAttr("disabled");
            $('#Refrigerator_Cabinet_Height').removeAttr("disabled");
            $('#Refrigerator_Cabinet_Depth').removeAttr("disabled");
            $('#Upper_Cabinet_Depth').removeAttr("disabled");
        })

         $("#product_code").focusout(function(){

            var product_code = $('#product_code').val();
            var room_id = $('#room_id').val();
            if(product_code.trim().length > 0){

                $.ajax({
                    type:'POST',
                    url: '{{route("check_product_code")}}',
                    data: {
                    "_token": "{{ csrf_token() }}",
                    "product_code":product_code,
                    "room_id":room_id

                    },                
                    success: function(result){
                        if(result == 'already_exist'){
                            var code_name = $("#product_code").val();
                            $('#code_name').html(code_name);
                            $('#product_code_exist').show();
                            $("#product_code").val('');
                        }else{
                            $('#product_code_exist').hide()
                        }
                    }
                });

            }
           
        });

         setTimeout(function() {
            $('#product_code_alert').fadeOut('fast');
        }, 3000);
    });
</script>