362 lines
19 KiB
PHP
362 lines
19 KiB
PHP
@extends('companies.layout')
|
|
|
|
@section('company-content')
|
|
|
|
<!-- Header Section -->
|
|
<div class="bg-white p-6 mb-6 flex content-start justify-between">
|
|
<!-- User Info Left -->
|
|
<div class="flex content-start space-x-6">
|
|
<!-- User Photo -->
|
|
<flux:avatar
|
|
class="w-24 h-24 rounded-lg shadow-lg object-cover border-2 border-gray-600"
|
|
name="{{ $company->name }}"
|
|
src="{{ $company->logo ? Storage::disk('public')->url($company->logo) : null }}" />
|
|
|
|
<!-- User Details -->
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-700">
|
|
{{ $company->name }}
|
|
</h1>
|
|
|
|
<!-- Contact Info -->
|
|
<div class="mt-2 space-y-1">
|
|
@if($company->commercial_name )
|
|
<div class="flex items-center text-gray-600">
|
|
<p class="text-sm text-gray-700">
|
|
{{ $company->commercial_name }}
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
@if($company->address )
|
|
<div class="flex items-center text-gray-600">
|
|
<flux:icon.map-pin />
|
|
<p class="text-sm text-gray-700">
|
|
{{ $company->address }}
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
@if($company->email)
|
|
<div class="flex items-center text-gray-600">
|
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/>
|
|
</svg>
|
|
<a href="mailto:{{ $company->email }}" class="hover:text-blue-600">
|
|
{{ $company->email }}
|
|
</a>
|
|
</div>
|
|
@endif
|
|
|
|
@if($company->phone)
|
|
<div class="flex items-center text-gray-600">
|
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
|
|
</svg>
|
|
<a href="tel:{{ $company->phone }}" class="hover:text-blue-600">
|
|
{{ $company->phone }}
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Section -->
|
|
<div class="flex flex-col items-end space-y-4">
|
|
<!-- Navigation Toolbar -->
|
|
<div class="flex space-x-2">
|
|
|
|
<flux:button
|
|
href="{{ route('companies.index') }}"
|
|
icon:trailing="arrow-uturn-left"
|
|
variant="ghost"
|
|
>
|
|
</flux:button>
|
|
|
|
@if(true)
|
|
<flux:button
|
|
href="{{ route('companies.show', 1) }}"
|
|
icon:trailing="chevron-left"
|
|
variant="ghost"
|
|
>
|
|
</flux:button>
|
|
@endif
|
|
|
|
@if(true)
|
|
<flux:button
|
|
href="{{ route('companies.show', 2) }}"
|
|
icon:trailing="chevron-right"
|
|
variant="ghost"
|
|
>
|
|
</flux:button>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Status Badge -->
|
|
<span class="px-4 py-2 w-30 rounded-lg text-sm text-center font-semibold {{ $company->status_color }}">
|
|
{{ $company->status_text}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contend: -->
|
|
<div x-data="{ activeTab: 'info' }" class="bg-white rounded-lg shadow-md border-1">
|
|
<!-- Tab Headers -->
|
|
<div class="border-b border-gray-200">
|
|
<nav class="flex space-x-8 px-6">
|
|
<button @click="activeTab = 'info'"
|
|
:class="activeTab === 'info' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
|
class="py-4 px-1 border-b-2 font-medium">
|
|
Empresa
|
|
</button>
|
|
|
|
<button @click="activeTab = 'contacts'"
|
|
:class="activeTab === 'contacts' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
|
class="py-4 px-1 border-b-2 font-medium">
|
|
Contactos
|
|
</button>
|
|
|
|
<button @click="activeTab = 'projects'"
|
|
:class="activeTab === 'projects' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
|
class="py-4 px-1 border-b-2 font-medium">
|
|
Proyectos
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<!-- Info Tab -->
|
|
<div x-show="activeTab === 'info'">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@foreach(['name' => 'Nombre', 'commercial_name' => 'Nombre Comercial', 'cif' => 'CIF/NIF', 'created_at' => 'Creado el', 'updated_at' => 'Última actualización'] as $field => $label)
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $label }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ $company->$field ?? 'N/A' }}
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Action Buttons -->
|
|
<div class="mt-6 flex justify-end space-x-4">
|
|
<a href="{{ route('companies.edit', $company) }}"
|
|
class="w-[150px] px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center justify-center">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
|
|
</svg>
|
|
Editar
|
|
</a>
|
|
|
|
{{-- Formulario de Edición --}}
|
|
<form method="POST" action="{{ route('users.update', $company) }}">
|
|
@csrf
|
|
@method('PUT') <!-- Important! -->
|
|
<button type="submit"
|
|
class="w-[150px] px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg flex items-center justify-center">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
|
|
</svg>
|
|
{{ $company->is_active ? 'Desactivar' : 'Activar' }}
|
|
</button>
|
|
</form>
|
|
|
|
{{-- Formulario de Eliminación --}}
|
|
<form method="POST" action="{{ route('users.destroy', $company) }}">
|
|
@csrf
|
|
@method('DELETE') <!-- Important! -->
|
|
<button type="submit"
|
|
onclick="return confirm('¿Estás seguro de querer eliminar este usuario?')"
|
|
class="px-4 py-2 w-[150px] bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center justify-center">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
|
</svg>
|
|
Eliminar
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pestaña de Contactos -->
|
|
<div x-show="activeTab === 'contacts'">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h4 class="text-lg font-medium text-gray-900">Contactos de la Empresa</h4>
|
|
<button @click="openAddContactModal()" class="btn btn-primary btn-sm">
|
|
<flux:icon.plus class="w-4 h-4 mr-1" /> Nuevo Contacto
|
|
</button>
|
|
</div>
|
|
|
|
@if($contacts->isEmpty())
|
|
<div class="bg-gray-50 rounded-lg p-8 text-center">
|
|
<p class="text-gray-500">No hay contactos asociados a esta empresa.</p>
|
|
<button @click="openAddContactModal()" class="mt-4 btn btn-primary">
|
|
Agregar Contacto
|
|
</button>
|
|
</div>
|
|
@else
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cargo</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Teléfono</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@foreach($contacts as $contact)
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 h-10 w-10">
|
|
<img class="h-10 w-10 rounded-full"
|
|
src="{{ $contact->profile_photo_url }}"
|
|
alt="{{ $contact->name }}">
|
|
</div>
|
|
<div class="ml-4">
|
|
<div class="text-sm font-medium text-gray-900">{{ $contact->name }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ $contact->pivot->position }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ $contact->email }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ $contact->phone ?? 'N/A' }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<button @click="editContact({{ $contact->id }})"
|
|
class="text-yellow-600 hover:text-yellow-900 mr-3">
|
|
<flux:icon.pencil class="w-5 h-5" />
|
|
</button>
|
|
<button @click="confirmDeleteContact({{ $contact->id }})"
|
|
class="text-red-600 hover:text-red-900">
|
|
<flux:icon.trash class="w-5 h-5" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
{{ $contacts->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Pestaña de Proyectos -->
|
|
<div x-show="activeTab === 'projects'">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h4 class="text-lg font-medium text-gray-900">Proyectos de la Empresa</h4>
|
|
<a href="{{ route('projects.create', ['company_id' => $company->id]) }}"
|
|
class="btn btn-primary btn-sm">
|
|
<flux:icon.plus class="w-4 h-4 mr-1" /> Nuevo Proyecto
|
|
</a>
|
|
</div>
|
|
|
|
@if($projects->isEmpty())
|
|
<div class="bg-gray-50 rounded-lg p-8 text-center">
|
|
<p class="text-gray-500">No hay proyectos asociados a esta empresa.</p>
|
|
<a href="{{ route('projects.create', ['company_id' => $company->id]) }}"
|
|
class="mt-4 btn btn-primary">
|
|
Crear Proyecto
|
|
</a>
|
|
</div>
|
|
@else
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
@foreach($projects as $project)
|
|
<div class="border rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow">
|
|
<div class="p-4 bg-white">
|
|
<div class="flex justify-between items-start">
|
|
<h5 class="font-bold text-gray-900">{{ $project->name }}</h5>
|
|
<span class="px-2 py-1 text-xs font-semibold rounded-full
|
|
{{ $project->status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
|
|
{{ $project->status === 'active' ? 'Activo' : 'Completado' }}
|
|
</span>
|
|
</div>
|
|
|
|
<p class="mt-2 text-sm text-gray-600 line-clamp-2">
|
|
{{ $project->description }}
|
|
</p>
|
|
|
|
<div class="mt-4 flex items-center text-sm text-gray-500">
|
|
<flux:icon.calendar class="w-4 h-4 mr-1" />
|
|
<span>
|
|
{{ $project->created_at->format('d M Y') }} -
|
|
{{ $project->due_date?->format('d M Y') ?? 'Sin fecha límite' }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mt-4 flex justify-between items-center">
|
|
<div class="flex items-center">
|
|
<flux:icon.users class="w-4 h-4 mr-1 text-gray-500" />
|
|
<span class="text-sm text-gray-600">
|
|
{{ $project->users_count }} miembros
|
|
</span>
|
|
</div>
|
|
|
|
<a href="{{ route('projects.show', $project) }}"
|
|
class="text-blue-600 hover:text-blue-800 text-sm">
|
|
Ver detalles
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
{{ $projects->links('pagination::tailwind', ['pageName' => 'projects_page']) }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('companyShow', () => ({
|
|
// ... otras propiedades ...
|
|
|
|
openAddContactModal() {
|
|
this.contactModalTitle = 'Agregar Nuevo Contacto';
|
|
this.contactModalButton = 'Agregar Contacto';
|
|
this.contactMethod = 'POST';
|
|
|
|
this.selectedContactId = null;
|
|
this.contactPosition = '';
|
|
this.showContactModal = true;
|
|
},
|
|
|
|
editContact(contactId) {
|
|
const contact = @json($contacts->items()).find(c => c.id === contactId);
|
|
if (contact) {
|
|
this.contactModalTitle = 'Editar Contacto';
|
|
this.contactModalButton = 'Actualizar Contacto';
|
|
this.contactMethod = 'PUT';
|
|
|
|
this.selectedContactId = contact.id;
|
|
this.contactPosition = contact.pivot.position;
|
|
this.showContactModal = true;
|
|
}
|
|
},
|
|
|
|
confirmDeleteContact(contactId) {
|
|
|
|
this.showDeleteContactModal = true;
|
|
}
|
|
}));
|
|
});
|
|
</stringth>
|
|
|
|
@endsection |