@extends('layouts.app')

@section('title', $usuario ? 'Editar Usuario Externo' : 'Nuevo Usuario Externo')
@section('page-title', $usuario ? 'Editar Usuario Externo' : 'Nuevo Usuario Externo')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('web.usuarios-externos.index') }}">Usuarios Externos</a></li>
<li class="breadcrumb-item active">{{ $usuario ? 'Editar' : 'Nuevo' }}</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .form-container { max-width: 700px; margin: 0 auto; }
    .form-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
    .form-card-header { padding: 1rem 1.5rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 0.75rem; }
    .form-card-header .icon-box { width: 40px; height: 40px; background: #7c3aed; color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
    .form-card-header h5 { margin: 0; font-size: 1.1rem; font-weight: 600; color: #1a3a5c; }
    .form-card-body { padding: 1.5rem; }
    .form-section-title { font-size: 0.85rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #f1f5f9; }
    .form-group { margin-bottom: 1.25rem; }
    .form-label-custom { font-size: 0.8rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; display: block; }
    .form-label-custom .required { color: #ef4444; margin-left: 0.25rem; }
    .form-control-custom { border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.625rem 0.875rem; font-size: 0.9rem; transition: border-color 0.2s, box-shadow 0.2s; }
    .form-control-custom:focus { border-color: #1a3a5c; box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.1); }
    .form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; padding: 1.25rem 1.5rem; background: #f8fafc; border-top: 1px solid #e2e8f0; }

    .estado-toggle { display: flex; gap: 1rem; }
    .estado-option { flex: 1; display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 2px solid #e2e8f0; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
    .estado-option:hover { border-color: #cbd5e1; }
    .estado-option input { display: none; }
    .estado-option.activo.selected { border-color: #059669; background: rgba(5, 150, 105, 0.04); }
    .estado-option.inactivo.selected { border-color: #dc2626; background: rgba(220, 38, 38, 0.04); }
    .estado-radio { width: 18px; height: 18px; border: 2px solid #e2e8f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .estado-option.activo.selected .estado-radio { border-color: #059669; background: #059669; }
    .estado-option.inactivo.selected .estado-radio { border-color: #dc2626; background: #dc2626; }
    .estado-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; display: none; }
    .estado-option.selected .estado-radio::after { display: block; }
    .estado-label { font-size: 0.85rem; font-weight: 500; color: #475569; }
    .estado-option.activo.selected .estado-label { color: #059669; }
    .estado-option.inactivo.selected .estado-label { color: #dc2626; }

    .info-box { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; }
    .info-box i { color: #0284c7; }
</style>
@endpush

@section('content')
<div class="form-container">
    <form action="{{ $usuario ? route('web.usuarios-externos.update', $usuario->id) : route('web.usuarios-externos.store') }}" method="POST">
        @csrf
        @if($usuario) @method('PUT') @endif

        <div class="form-card">
            <div class="form-card-header">
                <div class="icon-box"><i class="fas fa-user-tie"></i></div>
                <h5>{{ $usuario ? 'Editar Usuario Externo' : 'Nuevo Usuario Externo' }}</h5>
            </div>

            <div class="form-card-body">
                @if(!$usuario)
                <div class="info-box">
                    <i class="fas fa-info-circle me-2"></i>
                    Los usuarios externos son <strong>Jefes Operativos o Clientes</strong> que pueden acceder al sistema para ver reportes de mantenimientos y aprobar trabajos.
                    La contraseña inicial será <strong>0000</strong>.
                </div>
                @endif

                <div class="form-section-title">
                    <i class="fas fa-id-card me-1"></i> Datos de Identificación
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label-custom">Cédula <span class="required">*</span></label>
                            <input type="text" name="cedula" class="form-control form-control-custom @error('cedula') is-invalid @enderror"
                                   value="{{ old('cedula', $usuario->cedula ?? '') }}" required maxlength="13"
                                   placeholder="0912345678" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                            @error('cedula')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label-custom">Nombre Completo <span class="required">*</span></label>
                            <input type="text" name="name" class="form-control form-control-custom @error('name') is-invalid @enderror"
                                   value="{{ old('name', $usuario->name ?? '') }}" required
                                   placeholder="Juan Pérez García">
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label-custom">Correo Electrónico <span class="required">*</span></label>
                            <input type="email" name="email" class="form-control form-control-custom @error('email') is-invalid @enderror"
                                   value="{{ old('email', $usuario->email ?? '') }}" required
                                   placeholder="usuario@empresa.com">
                            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label-custom">Teléfono</label>
                            <input type="text" name="telefono" class="form-control form-control-custom @error('telefono') is-invalid @enderror"
                                   value="{{ old('telefono', $usuario->telefono ?? '') }}"
                                   placeholder="0999999999">
                            @error('telefono')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>

                <div class="form-section-title mt-4">
                    <i class="fas fa-building me-1"></i> Datos Laborales
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label-custom">Empresa / Concesión <span class="required">*</span></label>
                            <input type="text" name="empresa_externa" class="form-control form-control-custom @error('empresa_externa') is-invalid @enderror"
                                   value="{{ old('empresa_externa', $usuario->empresa_externa ?? '') }}" required
                                   placeholder="Nombre de la empresa">
                            @error('empresa_externa')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label-custom">Cargo</label>
                            <input type="text" name="cargo" class="form-control form-control-custom @error('cargo') is-invalid @enderror"
                                   value="{{ old('cargo', $usuario->cargo ?? '') }}"
                                   placeholder="Jefe de Operaciones">
                            @error('cargo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>

                <div class="form-section-title mt-4">
                    <i class="fas fa-shield-alt me-1"></i> Acceso al Sistema
                </div>

                <div class="form-group">
                    <label class="form-label-custom">Perfil de Acceso <span class="required">*</span></label>
                    <select name="per_id" class="form-select form-control-custom @error('per_id') is-invalid @enderror" required>
                        <option value="">Seleccione un perfil</option>
                        @foreach($perfiles as $perfil)
                        <option value="{{ $perfil->per_id }}" {{ old('per_id', $usuario->per_id ?? '') == $perfil->per_id ? 'selected' : '' }}>
                            {{ $perfil->per_nombre }}
                        </option>
                        @endforeach
                    </select>
                    @error('per_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                @if($usuario)
                <div class="form-group">
                    <label class="form-label-custom">Estado <span class="required">*</span></label>
                    <div class="estado-toggle">
                        <label class="estado-option activo {{ old('estado', $usuario->estado) == 1 ? 'selected' : '' }}" onclick="selectEstado(1)">
                            <input type="radio" name="estado" value="1" {{ old('estado', $usuario->estado) == 1 ? 'checked' : '' }}>
                            <span class="estado-radio"></span>
                            <span class="estado-label"><i class="fas fa-check-circle me-1"></i> Activo</span>
                        </label>
                        <label class="estado-option inactivo {{ old('estado', $usuario->estado) == 0 ? 'selected' : '' }}" onclick="selectEstado(0)">
                            <input type="radio" name="estado" value="0" {{ old('estado', $usuario->estado) == 0 ? 'checked' : '' }}>
                            <span class="estado-radio"></span>
                            <span class="estado-label"><i class="fas fa-times-circle me-1"></i> Inactivo</span>
                        </label>
                    </div>
                </div>
                @endif
            </div>

            <div class="form-actions">
                <a href="{{ route('web.usuarios-externos.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> {{ $usuario ? 'Guardar Cambios' : 'Crear Usuario' }}
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function selectEstado(valor) {
    document.querySelectorAll('.estado-option').forEach(opt => opt.classList.remove('selected'));
    const radio = document.querySelector('input[name="estado"][value="' + valor + '"]');
    radio.checked = true;
    radio.closest('.estado-option').classList.add('selected');
}
</script>
@endpush