@extends('layouts.app')

@section('title', 'Editar Equipo #' . $equipo->inventario_id)
@section('page-title', 'Editar Equipo')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('web.inventario.index') }}">Inventario</a></li>
<li class="breadcrumb-item"><a href="{{ route('web.inventario.show', $equipo->inventario_id) }}">#{{ $equipo->inventario_id }}</a></li>
<li class="breadcrumb-item active">Editar</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .form-card {
        background: #fff;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        max-width: 800px;
        margin: 0 auto;
    }

    .form-card-header {
        padding: 1.25rem;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .form-card-header h4 {
        margin: 0;
        color: #1a3a5c;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .form-card-body {
        padding: 1.5rem;
    }

    .form-section {
        margin-bottom: 1.5rem;
    }

    .form-section-title {
        font-size: 0.8rem;
        text-transform: uppercase;
        color: #64748b;
        letter-spacing: 0.5px;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e2e8f0;
    }

    .form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    @media (max-width: 576px) {
        .form-row {
            grid-template-columns: 1fr;
        }
    }

    .form-actions {
        display: flex;
        gap: 0.75rem;
        justify-content: flex-end;
        padding-top: 1rem;
        border-top: 1px solid #e2e8f0;
        margin-top: 1.5rem;
    }

    .ubicacion-info {
        background: #f0f9ff;
        border: 1px solid #bae6fd;
        border-radius: 6px;
        padding: 1rem;
    }

    .ubicacion-info i {
        color: #0284c7;
    }
</style>
@endpush

@section('content')
<div class="form-card">
    <div class="form-card-header">
        <h4>
            <i class="fas fa-edit"></i>
            Editar Equipo #{{ $equipo->inventario_id }}
        </h4>
    </div>
    <div class="form-card-body">
        <form action="{{ route('web.inventario.update', $equipo->inventario_id) }}" method="POST">
            @csrf
            @method('PUT')

            {{-- Información del equipo --}}
            <div class="form-section">
                <div class="form-section-title">Información del Equipo</div>
                <div class="form-row">
                    <div class="mb-3">
                        <label class="form-label">Tipo de Hardware <span class="text-danger">*</span></label>
                        <select name="maestro_id" class="form-select @error('maestro_id') is-invalid @enderror" required>
                            <option value="">Seleccione...</option>
                            @foreach($tiposHardware as $tipo)
                            <option value="{{ $tipo->hardware_id }}" {{ old('maestro_id', $equipo->maestro_id) == $tipo->hardware_id ? 'selected' : '' }}>
                                {{ $tipo->nombre }}
                            </option>
                            @endforeach
                        </select>
                        @error('maestro_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Marca <span class="text-danger">*</span></label>
                        <select name="marca_id" class="form-select @error('marca_id') is-invalid @enderror" required>
                            <option value="">Seleccione...</option>
                            @foreach($marcas as $marca)
                            <option value="{{ $marca->marca_id }}" {{ old('marca_id', $equipo->marca_id) == $marca->marca_id ? 'selected' : '' }}>
                                {{ $marca->nombre }}
                            </option>
                            @endforeach
                        </select>
                        @error('marca_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Modelo <span class="text-danger">*</span></label>
                    <input type="text" name="modelo" class="form-control @error('modelo') is-invalid @enderror"
                           value="{{ old('modelo', $equipo->modelo) }}" required>
                    @error('modelo')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            {{-- Códigos --}}
            <div class="form-section">
                <div class="form-section-title">Códigos de Identificación</div>
                <div class="form-row">
                    <div class="mb-3">
                        <label class="form-label">Código Principal <span class="text-danger">*</span></label>
                        <input type="text" name="codigo1" class="form-control @error('codigo1') is-invalid @enderror"
                               value="{{ old('codigo1', $equipo->codigo1) }}" required>
                        @error('codigo1')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Número de serie o código único del equipo</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Código Alternativo</label>
                        <input type="text" name="codigo2" class="form-control @error('codigo2') is-invalid @enderror"
                               value="{{ old('codigo2', $equipo->codigo2) }}">
                        @error('codigo2')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Código secundario o de inventario interno</small>
                    </div>
                </div>
            </div>

            {{-- Ubicación (informativo) --}}
            <div class="form-section">
                <div class="form-section-title">Ubicación Actual</div>
                <div class="ubicacion-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Nota:</strong> La ubicación del equipo se determina automáticamente según el último mantenimiento realizado.
                    @if($equipo->ultimaVia)
                        <div class="mt-2">
                            <strong>Última ubicación registrada:</strong>
                            {{ $equipo->ultimaVia->nombre }} - {{ $equipo->ultimaVia->centro->nombre_centro ?? 'N/A' }}
                        </div>
                    @else
                        <div class="mt-2 text-muted">
                            <em>Este equipo aún no ha sido asignado a ningún mantenimiento.</em>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Observaciones --}}
            <div class="form-section">
                <div class="form-section-title">Observaciones</div>
                <div class="mb-3">
                    <textarea name="observacion" class="form-control @error('observacion') is-invalid @enderror"
                              rows="3" placeholder="Ingrese observaciones adicionales sobre el equipo...">{{ old('observacion', $equipo->observacion) }}</textarea>
                    @error('observacion')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            {{-- Estado --}}
            <div class="form-section">
                <div class="form-section-title">Estado</div>
                <div class="mb-3">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="estado" id="estadoActivo"
                               value="1" {{ old('estado', $equipo->estado) == 1 ? 'checked' : '' }}>
                        <label class="form-check-label" for="estadoActivo">
                            <span class="badge bg-success">Activo</span>
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="estado" id="estadoInactivo"
                               value="0" {{ old('estado', $equipo->estado) == 0 ? 'checked' : '' }}>
                        <label class="form-check-label" for="estadoInactivo">
                            <span class="badge bg-danger">Inactivo</span>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Acciones --}}
            <div class="form-actions">
                <a href="{{ route('web.inventario.show', $equipo->inventario_id) }}" class="btn btn-outline-secondary">
                    <i class="fas fa-times me-1"></i> Cancelar
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-1"></i> Guardar Cambios
                </button>
            </div>
        </form>
    </div>
</div>
@endsection