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

    <div class="sixteen wide tablet fourteen wide computer column ">
        <div class="ui segment">
            
            <h4 class="ui dividing header teal centered">LISTADO DE HABITACIONES</h4>

            <div class="ui equal width grid">
                <div class="row">
                     <div class="column">
                        <form id="frmBuscar" autocomplete="off" method="GET" action="{{ url('habitacion/buscar') }}" >
                            <div class="ui action small input" >
                                  <input type="text" placeholder="Buscar..." name="search">
                                  <button type="submit" class="ui icon button " title="Clic para buscar"><i class="search icon"></i></button>
                            </div>
                        </form>
                    </div>
                    
                    <div class="column export_files" style="text-align: right">
                        <select class="ui small input dropdown" name="situacion">
                            <option value="">Seleccione</option>
                            <option value="TODOS">Todos</option>
                            <option value="0">Disponibles</option>
                            <option value="1">Ocupados</option>
                            <option value="2">En mantenimiento</option>
                        </select>  
                    </div>
                
                   
                </div>
            </div>
            
            <table class="ui celled striped table">
                <thead>
                    <tr>
                        <th class="head_table">N°</th>
                        <th class="head_table">Numero</th>
                        <th class="head_table">Tipo</th>
                        <th class="head_table">Precio S/</th>
                        <th class="head_table">Estado</th>
                        <th class="head_table">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                                       @foreach ($data as $habitacion)
                    <tr data-table="{{ $habitacion->id_habitacion }}">
                        <td>{{ $i }}</td>
                        <td><div class="ui violet label">{{ $habitacion->numero }}</div></td>
                        <td>{{ $habitacion->tipo_habitacion->nombre }}</td>
                        <td>{{ $habitacion->precio }}</td>
                        <td>{{ $habitacion->situacion }}</td>
                        {{-- <td>@if($habitacion->situacion == "DISPONIBLE")
                                <div class="ui green label">{{ $habitacion->situacion }}</div>
                            @elseif ($habitacion->situacion == "MANTENIMIENTO")
                                <div class="ui yellow label">{{ $habitacion->situacion }}</div>
                            @elseif ($habitacion->situacion == "OCUPADO")
                                <div class="ui red label">{{ $habitacion->situacion }}</div>
                            @endif
                        </td> --}}
                        <td>        
                            <div class="ui mini vertical animated positive button button_info_modal" title="Ver informacion detallada" data-id="{{ $habitacion->id_habitacion }}">
                                <div class="hidden content">Info</div>
                                <div class="visible content"><i class="search icon"></i></div>
                            </div>                    
                            <a class="ui mini vertical animated blue button" title="Editar datos" href="{{ url('habitacion/editar/'.$habitacion->id_habitacion) }}">
                                <div class="hidden content">Editar</div>
                                <div class="visible content"><i class="pencil alternate  icon"></i></div>
                            </a>
                            @if($habitacion->situacion == "DISPONIBLE")
                                <div class="ui mini vertical animated red button button_delete_modal" title="Eliminar registro" data-id="{{ $habitacion->id_habitacion }}">
                                    <div class="hidden content">Eliminar</div>
                                    <div class="visible content"><i class="trash alternate icon"></i></div>
                                </div>
                            @endif
                        </td>
                    </tr>
                                        @endforeach
                </tbody>
                {{-- <tfoot>
                    <tr>
                        <th colspan="6">
                            @include('layout.includes.pagination')
                        </th>
                    </tr>
                </tfoot> --}}
                
            </table>

        </div>
    </div>

    <!--start delete modal -->
    <div class="ui small basic modal" id="delete_modal">
        <div class="ui icon header"><i class="trash alternate icon"></i>Eliminar Registro</div>
        <div class="content" style="text-align: center; font-size: 16px">
          <p>¿Está seguro que quiere eliminar este registro del 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 eliminar"> <i class="checkmark icon"></i>Eliminar</div>
        </div>
    </div>
    <!--end delete modal -->

    <!--start details modal -->
    <div class="ui standard small modal" id="detalles_modal">
        <div class="header">Información de la habitacion</div>
        <div class="content">
            <div class="description">
                <div class="ui equal width grid">
                    <div class="row" style="padding-bottom: 0 !important">
                        <div class="six wide column " style="text-align: right"><b>Numero : </b></div>
                        <div class="ten wide column"><span id="_1"></span></div>
                    </div>
                   <div class="row" style="padding-bottom: 0 !important">
                        <div class="six wide column " style="text-align: right"><b>Tipo de Habitacion : </b></div>
                        <div class="ten wide column"><span id="_2"></span></div>
                    </div>
                    <div class="row" style="padding-bottom: 0 !important">
                        <div class="six wide column " style="text-align: right"><b>Precio: </b></div>
                        <div class="ten wide column"><span id="_3"></span></div>
                    </div>
                    <div class="row" style="padding-bottom: 0 !important">
                        <div class="six wide column " style="text-align: right"><b>Descripcion : </b></div>
                        <div class="ten wide column"><span id="_4"></span></div>
                    </div>
                    <div class="row" style="padding-bottom: 0 !important">
                        <div class="six wide column " style="text-align: right"><b>Estado : </b></div>
                        <div class="ten wide column"><span id="_5"></span></div>
                    </div>
                </div>
            </div>
        </div>   
        <div class="actions">
            <div class="ui primary right labeled icon deny button">Cerrar<i class="times icon"></i></div>
        </div>
    </div>
    <!--end details modal -->

@stop

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