@extends('layouts.default')
@section('content')

<div class="row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
        <div class="card">
            <div class="card-body">                    
                <div class="row">
                    <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-3 col-lg-5 col-xl-5">     
                                <span class="x-label">FOLIO:</span>
                                <div class="input-group">
                                    <input type="hidden" id="idActivo">
                                    <input type="text" class="form-control x-form-control-sm" style="padding:5px !important" id="codigo" placeholder="----" readonly autocomplete="off" />
                                    <div class="input-group-append" style="height:30px">
                                        <button class="btn btn-sm btn-primary" style="height:30px" onclick="abreModalDoctos()">
                                            <i class="mdi mdi-magnify" style="font-size:1em"></i>
                                        </button>
                                    </div>
                                </div>   
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-7 col-xl-7">
                                <div class="form-group">
                                    <span class="x-label">Tipo de activo:*</span>
                                    <select id="tipo" class="x-form-control" onchange="changeTipoActivo()">
        
                                    </select>
                                </div>
                            </div>
                        </div>   
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">                      
                        <div class="form-group">
                            <span class="x-label">Descripción:*</span>
                            <input type="text" class="form-control x-form-control-sm" id="descripcion" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 col-lg-5 col-xl-5">
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Estatus:*</span>
                                    <select id="estatus" class="x-form-control">
                                        <option value="Nuevo">Nuevo</option>
                                        <option value="Usado">Usado</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Valor:*</span>
                                    <input type="number" class="form-control x-form-control-sm" id="valor" autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-4 col-xl-4">
                                <div class="form-group">
                                    <span class="x-label">Forma de pago:</span>
                                    <select id="formapago" class="x-form-control">
        
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                                <div class="form-group">
                                    <span class="x-label">% Depre:</span>
                                    <input type="number" class="form-control x-form-control-sm" id="depreciacion" autocomplete="off"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 col-lg-6 col-xl-6">
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Fecha Ini. Deprec.:*</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechainicialdepreciacion" value="10/12/2025" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Fecha de adqui.:*</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechaadquisicion" value="10/12/2025" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Fecha Fin Deprec.:*</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechafinaldepreciacion" readonly autocomplete="off"/>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3">
                                <div class="form-group">
                                    <span class="x-label">Fecha de baja:*</span>
                                    <input type="text" class="form-control x-form-control-sm" id="fechabaja" readonly autocomplete="off"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4">
                        <div class="form-group">
                            <span class="x-label">Observaciones:</span>
                            <textarea class="form-control x-form-control-sm" rows="2" id="observaciones"></textarea>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
                        <button type="button" id="buttonAgregar" class="btn btn-info btn-icon-text" onclick="registrarActivo()" style="margin:3px; width:72px">
                            <i class="mdi mdi-plus" style="font-size:1.6em"></i>                                                                          
                        </button>    
                        <button type="button" id="buttonLimpiar" class="btn btn-secondary btn-icon-text" onclick="reinicia()" style="margin:3px; width:72px">
                            <i class="mdi mdi-file" style="font-size:1.6em"></i>                                                                          
                        </button>  
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-12 col-sm-6 col-md-3 col-lg-2 col-xl-2">
                        <div class="form-group">
                            <span class="x-label">Tipo de activo:*</span>
                            <select id="filtrotipo" class="x-form-control" onchange="getAllActivosFijos()">

                            </select>
                        </div>
                    </div>
                </div>
                <div class="row" style="height:300px; overflow:auto">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead style="background-color:#777">
                                <tr>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Codigo</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Descripcion</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Tipo</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Valor</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Estatus</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Depreciación</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Fecha Adquisición</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Fecha Ini. Deprec.</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Fecha Baja</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Fecha Fin Deprec.</th>
                                    <th style="padding: 10px; text-align: center; color: #FFF">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="detalle"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('jspage')
  <script src="jsprod/misc.js"></script>
  <script src="jsprod/activosfijos.js"></script>
@stop