@extends('layout.main')
@section('content')

    <div class="sixteen wide tablet twelve wide computer column ">
        <div class="ui segment">
            
            <h4 class="ui dividing header teal centered">REGISTRAR NUEVA HABITACION</h4>
            <br>

            <form class="ui form" id="frmNuevo" autocomplete="off">
               
                <div class="three fields">
                    <div class="five wide field">
                        <div class="ui fluid large white label">Numero de Habitacion</div>
                    </div>
                    <div class="three wide field">
                        <div class="ui small input">
                            <input type="text" name="numero" maxlength="5" placeholder="201, 302, 403, etc...">
                        </div> 
                    </div>
                </div>

                <div class="three fields">
                    <div class="five wide field">
                        <div class="ui fluid large white label">Precio de la habitacion</div>
                    </div>
                    <div class="three wide field">
                        <div class="ui labeled small input">
                            <label class="ui label">S/</label>
                            <input type="text" name="precio" maxlength="7">
                        </div> 
                    </div>
                </div>

                <div class="three fields">
                   <div class="five wide field">
                        <div class="ui fluid large white label">Tipo de Habitacion</div>
                    </div>
                    <div class="field">
                        <select class="ui fluid small input dropdown" name="id_tipo_habitacion">
                            <option value="">Seleccione</option>
                            @foreach($tipo_habitacion as $tipo)
                                <option value="{{ $tipo->id_tipo_habitacion }}">{{ $tipo->nombre }}</option>
                            @endforeach
                        </select> 
                    </div>
                </div>

                <div class="three fields">
                    <div class="five wide field">
                        <div class="ui fluid large white label">Descripcion de la habitacion</div>
                    </div>
                    <div class="ten wide field">
                        <div class="ui small input ">
                          <input type="text" name="descripcion" maxlength="100" oninput="$.upperCase(this)" placeholder="Ejemplo: Habitacion amplia con vista panoramica">
                        </div>
                    </div>
                </div>

                <div class="form_footer">
                    <div class="ui right floated primary button btn_registrar"><i class="check icon"></i>REGISTRAR</div>
                </div>  


            </form>

        </div>
    </div>
    
    <!--start register modal -->
    <div class="ui small basic modal" id="register_modal">
        <div class="ui icon header"><i class="check circle icon"></i>Registrar Información</div>
        <div class="content" style="text-align: center; font-size: 16px">
          <p>¿Desea registrar esta información en el sistema?</p>
        </div>
        <div class="actions">
            <div class="ui red basic cancel inverted button" title="Haga clic para salir"><i class="remove icon"></i>Cancelar</div>
            <div class="ui green ok inverted button" title="Haga clic para registrar"> <i class="checkmark icon"></i>Registrar</div>
        </div>
    </div>
    <!--end register modal -->
@stop

@section('scripts')
    <script src="{{ asset('js/habitacion/nuevo.js') }}"></script>
@stop