@extends('layout_forms')
@section('title', 'Area')
@section('style')
<style type="text/css" media="screen">
    .chosen-container{
        width: 100% !important;
        font-size: 10px !important;

    }

    .chosen-container-single .chosen-search input[type="text"]{
        width: 80%;
        font-size: 10px !important;
    }

    .chosen-search-input{
        font-size: 10px !important;
    }

    table .form-control, table .chosen-container, table .select{
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .chosen-container-single .chosen-single div:after{
        left: -0.1rem !important;
        height: 1.5rem !important;
    }
</style>
@stop
@section('content')
<div class="col-sm-12 col-md-10 col-lg-10 col-xl-10">
    <h3 class="text-center titulo">Area</h3>
    <div class="form-group row sin-salto">
        <div class="col-sm-2 col-md-2 col-lg-1 col-xl-1 superior">
            <a class="btn-sm btn-primary cursor" href="{{ route('infoPredio', encrypt($predio->id_unico)) }}" title="Volver"><i class="fa fa-arrow-left"></i></a>
        </div>
        <div class="col-sm-9 col-md-9 col-lg-10 col-xl-10">
            <h6 class="text-center marca-pagina">{{ "Predio: ".ucwords(mb_strtolower($predio->nombre))}}</h6>
        </div>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 superior2 tamaño-letra">
        <table class="table table-striped table-condensed table-bordered" id="table" data-toggle="dataTable" data-form="deleteForm">
            <thead>
                <tr>
                    <th>Año</th>
                    <th>Tipo Area</th>
                    <th>Unidad Area</th>
                    <th>Valor</th>
                    <th>Motivo Cambio Area</th>
                    <th>Area Construida</th>
                    <th>Metros</th>
                    <th width="5%"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <form id="form-table" method="post" accept-charset="utf-8" action="{{ route('GuardarArea') }}" novalidate>
                        {{ csrf_field() }}
                        <input type="hidden" name="txtPredio" value="{{ encrypt($predio->id_unico) }}">
                        <td>
                            <input class="form-control" type="text" name="txtAnno" id="txtAnno" placeholder="Año" title="Ingrese año" style="width: 80%;" onkeypress="return txtValida(event,'num')" readonly="" required="">
                        </td>
                        <td>
                            <select name="sltTipoArea" id="sltTipoArea" class="form-control select" title="Tipo Area" required="">
                                <option value="">Tipo Area</option>
                                @foreach($tiposareas as $row)
                                    <option value="{{ $row->id_unico }}">{{ $row->nombre }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <select name="sltUnidadArea" id="sltUnidadArea" class="form-control select" title="Unidad Area" required="">
                                <option value="">Unidad Area</option>
                                @foreach($unidadarea as $row)
                                    <option value="{{ $row->id_unico }}">{{ $row->nombre }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input class="form-control tamaño-letra" type="text" name="txtValor" id="txtValor" placeholder="Valor" title="Ingrese valor" value="" onkeypress="return txtValida(event,'num')" required="" style="width: 90%;">
                        </td>
                        <td>
                            <select name="sltMotivoCambio" id="sltMotivoCambio" class="form-control select" title="Unidad Area" required="">
                                <option value="">Motivo Cambio Area</option>
                                @foreach($motivoarea as $row)
                                    <option value="{{ $row->id_unico }}">{{ $row->nombre }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input class="form-control" type="text" name="txtAreaCons" id="txtMetros" placeholder="Area construida" title="Ingrese area construida" style="width: 80%;">
                        </td>
                        <td>
                            <input class="form-control" type="text" name="txtMetros" id="txtMetros" placeholder="Metros" title="Ingrese area en metros" style="width: 80%;"    >
                        </td>
                        <td>
                            <button type="submit" id="submit" class="btn-sin icons cursor fa fa-save"></button>
                        </td>
                    </form>
                </tr>
                    @foreach($data as $row)
                        <tr class="tamaño-letra">
                            <td>{{ $row->anio }}</td>
                            <td>{{ $row->tpanom }}</td>
                            <td>{{ $row->unanom }}</td>
                            <td>{{ $row->valor }}</td>
                            <td>{{ $row->mcanom }}</td>
                            <td>{{ $row->areacons }}</td>
                            <td>{{ $row->metros }}</td>
                            <td></td>
                        </tr>
                    @endforeach
            </tbody>
        </table>
    </div>
</div>
@stop
@include('modal-confirm')
@section('script')
<script>
    $("#form-table").on('submit', function(e){
        var anno  = $("#txtAnno").val();
        var tarea = $("#sltTipoArea").val();
        var uniar = $("#sltUnidadArea").val();
        var valor = $("#txtValor").val();
        var motC  = $("#sltMotivoCambio").val();
        var metrs = $("#txtMetros").val();
        var areaC = $("#txtAreaCons").val();

        if(anno.length > 0){
            $("#txtAnno").removeClass('is-invalid');
        }else{
            e.preventDefault();
            $("#txtAnno").addClass('is-invalid').removeClass('is-valid');
        }
        
        if(areaC.length > 0){
            $("#txtAreaCons").removeClass('is-invalid');
        }else{
            e.preventDefault();
            $("#txtAreaCons").addClass('is-invalid').removeClass('is-valid');
        }

        if(tarea.length > 0){
            $("#sltTipoArea_chosen").removeClass('borde-error');
        }else{
            e.preventDefault();
            $("#sltTipoArea_chosen").addClass('borde-error');
        }

        if(uniar.length > 0){
            $("#sltUnidadArea_chosen").removeClass('borde-error');
        }else{
            e.preventDefault();
            $("#sltUnidadArea_chosen").addClass('borde-error');
        }

        if(valor.length > 0){
            $("#txtValor").removeClass('is-invalid');
        }else{
            e.preventDefault();
            $("#txtValor").addClass('is-invalid').removeClass('is-valid');
        }
        
        if(valor.length > 0){
            $("#txtValor").removeClass('is-invalid');
        }else{
            e.preventDefault();
            $("#txtValor").addClass('is-invalid').removeClass('is-valid');
        }

        if(motC.length > 0){
            $("#sltMotivoCambio_chosen").removeClass('borde-error');
        }else{
            e.preventDefault();
            $("#sltMotivoCambio_chosen").addClass('borde-error');
        }
    });
</script>
@stop