@extends('layouts.app')

@section('header')
    Editar Á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>

    <!-- Edit 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">Editar Área</h3>
                    <p class="text-sm text-gray-600 mt-1">Actualiza la información del área {{ $department->name }}</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.update', $department->id) }}" method="POST" class="px-6 py-6">
            @csrf
            @method('PUT')

            <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', $department->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', $department->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', $department->is_active) ? '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>

            <!-- Department Info Card -->
            <div class="mt-6 p-4 bg-gray-50 border border-gray-200 rounded-lg">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">Información del Área</h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                    <div>
                        <span class="text-gray-600">ID:</span>
                        <span class="ml-2 font-semibold text-gray-900">{{ $department->id }}</span>
                    </div>
                    <div>
                        <span class="text-gray-600">Usuarios:</span>
                        <span class="ml-2 font-semibold text-gray-900">{{ $department->users->count() ?? 0 }}</span>
                    </div>
                    <div>
                        <span class="text-gray-600">Creado:</span>
                        <span class="ml-2 font-semibold text-gray-900">{{ $department->created_at ? $department->created_at->format('d/m/Y') : 'N/A' }}</span>
                    </div>
                </div>
            </div>

            <!-- Warning Message -->
            @if($department->users->count() > 0)
            <div class="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                <div class="flex items-start">
                    <svg class="w-5 h-5 text-yellow-600 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                    </svg>
                    <div>
                        <h4 class="text-sm font-semibold text-yellow-900">Advertencia</h4>
                        <p class="text-sm text-yellow-700 mt-1">Esta área tiene {{ $department->users->count() }} usuario(s) asignado(s). Cambiar el nombre o desactivarla puede afectar la organización del sistema.</p>
                    </div>
                </div>
            </div>
            @endif

            <!-- 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>
                    Guardar Cambios
                </button>
            </div>
        </form>
    </div>

    <!-- Danger Zone -->
    <div class="bg-white rounded-lg shadow-lg border border-red-300">
        <div class="px-6 py-4 border-b border-red-300 bg-red-50">
            <h3 class="text-lg font-bold text-red-900">Zona de Peligro</h3>
            <p class="text-sm text-red-700 mt-1">Acciones que desactivan el área</p>
        </div>
        <div class="px-6 py-6">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <h4 class="text-base font-semibold text-gray-900">Desactivar Área</h4>
                    <p class="text-sm text-gray-600 mt-1">
                        Al desactivar esta área, ya no estará disponible para asignar a nuevos usuarios ni tickets. Los usuarios y tickets actuales mantendrán la referencia a esta área, pero no podrán crear nuevos registros con ella.
                    </p>
                </div>
                <form action="{{ route('admin.departments.destroy', $department->id) }}" method="POST" onsubmit="return confirm('¿Estás seguro de desactivar esta área?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            class="ml-6 px-6 py-2.5 rounded-lg text-sm font-semibold transition-all shadow-md hover:shadow-lg bg-red-600 text-white hover:bg-red-700">
                        <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="M6 18L18 6M6 6l12 12"/>
                        </svg>
                        Desactivar Área
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection