@extends('layouts.app')

@section('title', 'Nuevo Equipo')
@section('page-title', 'Registrar Nuevo Equipo')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('web.inventario.index') }}">Inventario</a></li>
<li class="breadcrumb-item active">Nuevo</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;
    }

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

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

@section('content')
<div class="form-card">
    <div class="form-card-header">
        <h4>
            <i class="fas fa-plus-circle"></i>
            Registrar Nuevo Equipo
        </h4>
    </div>
    <div class="form-card-body">
        <form action="{{ route('web.inventario.store') }}" method="POST">
            @csrf

            {{-- 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') == $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') == $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') }}" required placeholder="Ej: TLP-300, ZK-4500">
                    @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') }}" required placeholder="Número de serie">
                        @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') }}" placeholder="Código interno (opcional)">
                        @error('codigo2')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Código secundario o de inventario interno</small>
                    </div>
                </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 (opcional)...">{{ old('observacion') }}</textarea>
                    @error('observacion')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            {{-- Información sobre ubicación --}}
            <div class="form-section">
                <div class="info-box">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Nota sobre la ubicación:</strong> La ubicación del equipo (peaje/vía) se asignará automáticamente cuando el técnico registre el primer mantenimiento del equipo.
                </div>
            </div>

            {{-- Acciones --}}
            <div class="form-actions">
                <a href="{{ route('web.inventario.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-times me-1"></i> Cancelar
                </a>
                <button type="submit" class="btn btn-success">
                    <i class="fas fa-save me-1"></i> Registrar Equipo
                </button>
            </div>
        </form>
    </div>
</div>
@endsection