@extends('layouts.app')

@section('content')
<div class="tk-card">
    <div class="tk-card-hdr"><i class="bi bi-person-badge me-1"></i> Técnicos</div>
    <div class="tk-card-body">
        <div class="row g-2 mb-3 align-items-end">
            <div class="col-md-2">
                <div class="tk-label">Nombre</div>
                <input type="text" id="catTecNombre" class="tk-input" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Email</div>
                <input type="email" id="catTecEmail" class="tk-input" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Tel&eacute;fono</div>
                <input type="text" id="catTecTelefono" class="tk-input" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Especialidad</div>
                <input type="text" id="catTecEspecialidad" class="tk-input" placeholder="Ej: Redes, Software" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Intercompany</div>
                <select id="catTecIntercompany" class="tk-input">
                    <option value="">-- Seleccione --</option>
                    @foreach($intercompanies as $item)
                        <option value="{{ $item->value }}">{{ $item->text }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto">
                <button type="button" class="btn tk-btn tk-btn-primary" onclick="insertarCatTecnico()">
                    <i class="bi bi-plus-lg me-1"></i>Agregar
                </button>
            </div>
        </div>

        <div id="editTecnicoPanel" style="display:none" class="row g-2 mb-3 align-items-end p-2 tk-edit-panel">
            <div class="col-auto"><small class="text-warning">Editando ID: <strong id="editTecnicoId"></strong></small></div>
            <div class="col-md-2">
                <div class="tk-label">Nombre</div>
                <input type="text" id="editTecnicoNombre" class="tk-input" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Email</div>
                <input type="email" id="editTecnicoEmail" class="tk-input" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Tel&eacute;fono</div>
                <input type="text" id="editTecnicoTelefono" class="tk-input" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Especialidad</div>
                <input type="text" id="editTecnicoEspecialidad" class="tk-input" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Intercompany</div>
                <select id="editTecnicoInter" class="tk-input">
                    <option value="">-- Seleccione --</option>
                    @foreach($intercompanies as $item)
                        <option value="{{ $item->value }}">{{ $item->text }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-1">
                <div class="tk-label">Activo</div>
                <select id="editTecnicoActivo" class="tk-input">
                    <option value="1">S&iacute;</option>
                    <option value="0">No</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="button" class="btn tk-btn tk-btn-primary" onclick="modificarCatTecnico()">
                    <i class="bi bi-pencil me-1"></i>Guardar
                </button>
                <button type="button" class="btn tk-btn tk-btn-secondary ms-1" onclick="cancelarEditTecnico()">Cancelar</button>
            </div>
        </div>

        <div id="gridTecnicos"></div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/Tickets/funciones_tickets_catalogos.js') }}"></script>
<script>$(function(){ cargarCatTecnicos(); });</script>
@endpush