@extends('layouts.app')

@section('header')
    Crear Área
@endsection

@section('content')
<div class="space-y-6">
    <!-- Back Button -->
    <div>
        <a href="{{ route('admin.departments.index') }}" class="inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            Volver a la lista
        </a>
    </div>

    <!-- Create Form -->
    <div class="bg-white rounded-lg shadow-lg border border-gray-300">
        <div class="px-6 py-4 border-b border-gray-300" style="background-color: #f9fafb;">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Nueva Área</h3>
                    <p class="text-sm text-gray-600 mt-1">Crea un nuevo departamento o área de la empresa</p>
                </div>
                <div class="w-12 h-12 rounded-full flex items-center justify-center font-bold text-white shadow-md" style="background-color: #ebe300; color: #404040;">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                    </svg>
                </div>
            </div>
        </div>

        <form action="{{ route('admin.departments.store') }}" method="POST" class="px-6 py-6">
            @csrf

            <div class="space-y-6">
                <!-- Name -->
                <div>
                    <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
                        Nombre del Área <span class="text-red-500">*</span>
                    </label>
                    <input type="text"
                           name="name"
                           id="name"
                           value="{{ old('name') }}"
                           required
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400 transition-all @error('name') border-red-500 @enderror"
                           placeholder="Ej: Recursos Humanos, Tecnología, Finanzas...">
                    @error('name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-xs text-gray-500">Ingresa un nombre descriptivo para el área o departamento.</p>
                </div>

                <!-- Description (opcional) -->
                <div>
                    <label for="description" class="block text-sm font-semibold text-gray-700 mb-2">
                        Descripción
                    </label>
                    <textarea
                        name="description"
                        id="description"
                        rows="4"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400 transition-all @error('description') border-red-500 @enderror"
                        placeholder="Describe las funciones o responsabilidades de esta área...">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-xs text-gray-500">Opcional: Agrega una descripción del área.</p>
                </div>

                <!-- Active Status -->
                <div>
                    <label class="flex items-center">
                        <input type="checkbox"
                               name="is_active"
                               id="is_active"
                               value="1"
                               {{ old('is_active', true) ? 'checked' : '' }}
                               class="w-4 h-4 text-yellow-500 border-gray-300 rounded focus:ring-yellow-400">
                        <span class="ml-2 text-sm font-medium text-gray-700">Área activa</span>
                    </label>
                    <p class="mt-1 text-xs text-gray-500">Las áreas activas están disponibles para asignar a usuarios y tickets.</p>
                </div>
            </div>

            <!-- Info Card -->
            <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                <div class="flex items-start">
                    <svg class="w-5 h-5 text-blue-600 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                    </svg>
                    <div>
                        <h4 class="text-sm font-semibold text-blue-900">Información</h4>
                        <p class="text-sm text-blue-700 mt-1">Las áreas se utilizan para organizar a los usuarios y las solicitudes. Cada usuario puede pertenecer a un área específica.</p>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="mt-8 flex items-center justify-end gap-3 pt-6 border-t border-gray-300">
                <a href="{{ route('admin.departments.index') }}" class="px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-semibold text-gray-700 bg-white hover:bg-gray-50 transition-all shadow-sm">
                    Cancelar
                </a>
                <button type="submit" class="px-6 py-2.5 rounded-lg text-sm font-semibold text-white transition-all shadow-md hover:shadow-lg" style="background-color: #ebe300; color: #404040;" onmouseover="this.style.opacity='0.9'" onmouseout="this.style.opacity='1'">
                    <svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    Crear Área
                </button>
            </div>
        </form>
    </div>
</div>
@endsection