@extends('layouts.app')

@section('title', 'Nueva Empresa')

@section('content')
<div class="page-header">
    <div style="display: flex; align-items: center; gap: 15px;">
        <a href="{{ route('empresas.index') }}" style="color: var(--text-muted); text-decoration: none;"><i class="fa-solid fa-arrow-left"></i> Volver</a>
        <h1 class="page-title" style="margin-bottom: 0;">Registrar Nueva Empresa</h1>
    </div>
</div>

<div class="card" style="max-width: 800px;">
    
    @if ($errors->any())
        <div style="background: rgba(248, 81, 73, 0.1); border: 1px solid rgba(248, 81, 73, 0.4); color: var(--danger); padding: 15px; border-radius: 8px; margin-bottom: 20px;">
            <ul style="margin-left: 20px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('empresas.store') }}" method="POST">
        @csrf
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px;">
            <!-- Fila 1 -->
            <div>
                <label style="display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem;">RUC *</label>
                <input type="text" name="ruc" value="{{ old('ruc') }}" required style="width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
            </div>
            <div>
                <label style="display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem;">Razón Social *</label>
                <input type="text" name="razon_social" value="{{ old('razon_social') }}" required style="width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
            </div>

            <!-- Fila 2 -->
            <div>
                <label style="display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem;">Representante/Responsable</label>
                <input type="text" name="responsable" value="{{ old('responsable') }}" style="width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
            </div>
            <div>
                <label style="display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem;">Email</label>
                <input type="email" name="email" value="{{ old('email') }}" style="width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
            </div>

            <!-- Fila 3 -->
            <div>
                <label style="display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem;">Teléfono</label>
                <input type="text" name="telefono" value="{{ old('telefono') }}" style="width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
            </div>
            <div>
                <label style="display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem;">Estado *</label>
                <select name="estado" required style="width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
                    <option value="ACTIVO">ACTIVO</option>
                    <option value="INACTIVO">INACTIVO</option>
                </select>
            </div>
        </div>

        <div style="margin-bottom: 25px;">
            <label style="display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem;">Dirección Física</label>
            <input type="text" name="direccion" value="{{ old('direccion') }}" style="width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main);">
        </div>

        <div style="display: flex; justify-content: flex-end; gap: 10px;">
            <a href="{{ route('empresas.index') }}" class="btn" style="background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-main);">Cancelar</a>
            <button type="submit" class="btn btn-primary"><i class="fa-solid fa-save"></i> Guardar Empresa</button>
        </div>
    </form>
</div>
@endsection
