473 lines
27 KiB
PHP
473 lines
27 KiB
PHP
<!-- resources/views/projects/create.blade.php -->
|
|
<x-layouts.app :title="__('Create Project')">
|
|
<x-slot name="header">
|
|
<h2 class="flex items-center gap-2 text-xl font-semibold leading-tight text-gray-800">
|
|
<!-- Icono (ejemplo con Heroicons) -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
|
</svg>
|
|
|
|
{{ __('Nuevo Proyecto') }}
|
|
</h2>
|
|
</x-slot>
|
|
|
|
<header class="bg-white shadow">
|
|
<div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
|
<h2 class="flex items-center text-xl font-semibold leading-tight text-gray-800">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
|
</svg>
|
|
{{ __('Nuevo Proyecto') }}
|
|
</h2>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="py-6">
|
|
<div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
|
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
|
|
<div class="p-6 bg-white border-b border-gray-200">
|
|
<form method="POST" action="{{ route('projects.store') }}" enctype="multipart/form-data">
|
|
@csrf
|
|
|
|
<table class="w-full mb-8">
|
|
<tbody>
|
|
<!-- Nombre -->
|
|
<tr>
|
|
<td class="w-1/4 py-3 pr-4 align-top">
|
|
<x-label for="name" :value="__('Nombre del Proyecto')" />
|
|
</td>
|
|
<td class="py-3">
|
|
<x-input id="name"
|
|
class="block w-[150px] mt-1 border-0 border-b border-gray-300 focus:ring-0 focus:border-blue-500"
|
|
type="text" name="name"
|
|
:value="old('name')"
|
|
required />
|
|
@error('name')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Descripción -->
|
|
<tr>
|
|
<td class="w-1/4 py-3 pr-4 align-top">
|
|
<x-label for="description" :value="__('Descripción')" />
|
|
</td>
|
|
<td class="py-3">
|
|
<x-textarea id="description" class="block w-full mt-1" name="description" rows="4" required>
|
|
{{ old('description') }}
|
|
</x-textarea>
|
|
@error('description')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Editor Enriquecido -->
|
|
<tr>
|
|
<td class="w-1/4 py-3 pr-4 align-top">
|
|
<x-label for="description" :value="__('Descripción Detallada')" />
|
|
</td>
|
|
<td class="py-3">
|
|
<div id="editor-container">
|
|
<!-- Barra de herramientas -->
|
|
<div id="toolbar">
|
|
<button class="ql-bold"></button>
|
|
<button class="ql-italic"></button>
|
|
<button class="ql-underline"></button>
|
|
<button class="ql-strike"></button>
|
|
<button class="ql-blockquote"></button>
|
|
<button class="ql-code-block"></button>
|
|
<button class="ql-link"></button>
|
|
<button class="ql-image"></button>
|
|
</div>
|
|
|
|
<!-- Editor -->
|
|
<input type="hidden" name="description">
|
|
<div id="rich-editor" class="h-48">{!! old('description') !!}</div>
|
|
</div>
|
|
@error('description')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Estado -->
|
|
<tr>
|
|
<td class="w-1/4 py-3 pr-4 align-top">
|
|
<x-label for="status" :value="__('Estado del Proyecto')" />
|
|
</td>
|
|
<td class="py-3">
|
|
<x-select id="status" name="status" class="block w-full mt-1">
|
|
<option :value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Activo</option>
|
|
<option :value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactivo</option>
|
|
</x-select>
|
|
@error('status')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<!-- Imagen de Referencia -->
|
|
<tr>
|
|
<td class="w-1/4 py-3 pr-4 align-top">
|
|
<x-label for="reference_image" :value="__('Imagen de Referencia')" />
|
|
</td>
|
|
<td class="py-3">
|
|
<div class="relative mt-1">
|
|
<input type="file" id="project_image" name="project_image"
|
|
class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
|
|
file:rounded-md file:border-0
|
|
file:text-sm file:font-semibold
|
|
file:bg-blue-50 file:text-blue-700
|
|
hover:file:bg-blue-100"
|
|
accept="image/*"
|
|
onchange="previewImage(event)">
|
|
<div class="mt-2" id="image-preview-container" style="display:none;">
|
|
<img id="image-preview" class="object-cover h-48 w-full rounded-lg">
|
|
</div>
|
|
</div>
|
|
@error('project_image')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Dirección -->
|
|
<tr>
|
|
<td class="w-1/4 py-3 pr-4 align-top">
|
|
<x-label :value="__('Ubicación')" />
|
|
</td>
|
|
<td class="py-3">
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<x-input id="address" class="block w-full mt-1"
|
|
type="text" name="address"
|
|
:value="old('address')"
|
|
placeholder="Dirección" />
|
|
@error('address')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<x-input id="postal_code" class="block w-full mt-1"
|
|
type="text" name="postal_code"
|
|
:value="old('postal_code')"
|
|
placeholder="Código Postal" />
|
|
@error('postal_code')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<x-input id="province" class="block w-full mt-1"
|
|
type="text" name="province"
|
|
:value="old('province')"
|
|
placeholder="Provincia" />
|
|
@error('province')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<x-select id="country" name="country" class="block w-full mt-1">
|
|
<option :value="">Seleccione País</option>
|
|
@foreach(config('countries') as $code => $name)
|
|
<option :value="{{ $code }}" {{ old('country') == $code ? 'selected' : '' }}>
|
|
{{ $name }}
|
|
</option>
|
|
@endforeach
|
|
</x-select>
|
|
@error('country')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Mapa para Coordenadas -->
|
|
<tr>
|
|
<td class="w-1/4 py-3 pr-4 align-top">
|
|
<x-label :value="__('Seleccione Ubicación en el Mapa')" />
|
|
</td>
|
|
<td class="py-3">
|
|
<div id="map" class="h-64 rounded-lg border-2 border-gray-200"></div>
|
|
<div class="grid grid-cols-2 gap-4 mt-2">
|
|
<div>
|
|
<x-label for="latitude" :value="__('Latitud')" />
|
|
<x-input id="latitude" name="latitude"
|
|
type="number" step="any"
|
|
:value="old('latitude')" required />
|
|
</div>
|
|
<div>
|
|
<x-label for="longitude" :value="__('Longitud')" />
|
|
<x-input id="longitude" name="longitude"
|
|
type="number" step="any"
|
|
:value="old('longitude')" required />
|
|
</div>
|
|
</div>
|
|
@error('latitude')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
@error('longitude')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Icono y Categorías -->
|
|
<tr>
|
|
<td class="w-1/4 py-3 pr-4 align-top">
|
|
<x-label :value="__('Identificación Visual')" />
|
|
</td>
|
|
<td class="py-3">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<x-label for="icon" :value="__('Icono del Proyecto')" />
|
|
<div class="relative mt-1">
|
|
<select id="icon" name="icon"
|
|
class="w-full rounded-md shadow-sm border-gray-300 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
|
<option :value="">Seleccionar Icono</option>
|
|
@foreach(config('project.icons') as $icon)
|
|
<option :value="{{ $icon }}"
|
|
{{ old('icon') == $icon ? 'selected' : '' }}>
|
|
<i class="fas fa-{{ $icon }} mr-2"></i>
|
|
{{ Str::title($icon) }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<x-label for="categories" :value="__('Categorías')" />
|
|
<x-multiselect
|
|
name="categories[]"
|
|
:options="$categories"
|
|
:selected="old('categories', [])"
|
|
placeholder="Seleccione categorías"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Fechas Importantes -->
|
|
<tr>
|
|
<td class="w-1/4 py-3 pr-4 align-top">
|
|
<x-label for="start_date" :value="__('Fechas')" />
|
|
</td>
|
|
<td class="py-3">
|
|
<div class="flex items-center gap-4 mt-2">
|
|
<span class="text-gray-700">de</span>
|
|
<x-input id="start_date" type="date" name="start_date" :value="old('start_date')" />
|
|
<span class="text-gray-700">a</span>
|
|
<x-input id="deadline" type="date" name="deadline" :value="old('deadline')" min="{{ now()->format('Y-m-d') }}" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Archivos Adjuntos -->
|
|
<tr>
|
|
<td class="w-1/4 py-3 pr-4 align-top">
|
|
<x-label :value="__('Documentos Iniciales')" />
|
|
</td>
|
|
<td class="py-3">
|
|
<div x-data="{ files: [] }" class="mt-1">
|
|
<div class="flex items-center justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
|
<div class="text-center">
|
|
<input type="file"
|
|
name="documents[]"
|
|
multiple
|
|
class="absolute opacity-0"
|
|
x-ref="fileInput"
|
|
@change="files = Array.from($event.target.files)">
|
|
|
|
<template x-if="files.length === 0">
|
|
<div>
|
|
<x-icons.upload class="mx-auto h-12 w-12 text-gray-400" />
|
|
<p class="mt-1 text-sm text-gray-600">
|
|
Arrastra archivos o haz clic para subir
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="files.length > 0">
|
|
<div class="space-y-2">
|
|
<template x-for="(file, index) in files" :key="index">
|
|
<div class="flex items-center text-sm text-gray-600">
|
|
<x-icons icon="document" class="w-5 h-5 mr-2" />
|
|
<span x-text="file.name"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Miembros del Equipo -->
|
|
<tr>
|
|
<td class="w-1/4 py-3 pr-4 align-top">
|
|
<x-label :value="__('Miembros del Equipo')" />
|
|
</td>
|
|
<td class="py-3">
|
|
<div class="grid grid-cols-1 mt-2 gap-y-2 gap-x-4 sm:grid-cols-2">
|
|
@foreach($users as $user)
|
|
<label class="flex items-center space-x-2">
|
|
<input type="checkbox"
|
|
name="team[]"
|
|
value="{{ $user->id }}"
|
|
{{ in_array($user->id, old('team', [])) ? 'checked' : '' }}
|
|
class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500">
|
|
<span class="text-sm text-gray-700">{{ $user->name }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
@error('team')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Botones de Acción -->
|
|
<div class="flex justify-end mt-8 space-x-4">
|
|
<a href="{{ route('projects.index') }}"
|
|
class="px-4 py-2 text-gray-600 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50">
|
|
{{ __('Cancelar') }}
|
|
</a>
|
|
<x-button type="submit" class="bg-blue-600 hover:bg-blue-700">
|
|
<x-icons icon="save" class="w-5 h-5 mr-2" />
|
|
{{ __('Crear Proyecto') }}
|
|
</x-button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('styles')
|
|
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
|
|
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
|
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
|
crossorigin=""/>
|
|
|
|
@endpush
|
|
|
|
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
|
|
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
|
crossorigin=""></script>
|
|
<script>
|
|
// Editor Quill
|
|
const toolbarOptions = [
|
|
['bold', 'italic', 'underline', 'strike'], // toggled buttons
|
|
['blockquote', 'code-block'],
|
|
['link', 'image', 'video', 'formula'],
|
|
|
|
[{ 'header': 1 }, { 'header': 2 }], // custom button :values
|
|
[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
|
|
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
|
|
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
|
|
[{ 'direction': 'rtl' }], // text direction
|
|
|
|
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
|
|
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
|
|
|
|
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
|
|
[{ 'font': [] }],
|
|
[{ 'align': [] }],
|
|
|
|
['clean'] // remove formatting button
|
|
];
|
|
|
|
const quill = new Quill('#rich-editor', {
|
|
theme: 'snow',
|
|
modules: {
|
|
toolbar: toolbarOptions,
|
|
placeholder: 'Description...',
|
|
}
|
|
});
|
|
|
|
// Tagify para categorías
|
|
new Tagify(document.querySelector('[name="categories[]"]'), {
|
|
enforceWhitelist: true,
|
|
whitelist: @json($categories->pluck('name')),
|
|
dropdown: {
|
|
enabled: 1,
|
|
maxItems: 5
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
function previewImage(event) {
|
|
const reader = new FileReader();
|
|
const preview = document.getElementById('image-preview');
|
|
|
|
reader.onload = function() {
|
|
preview.innerHTML = `
|
|
<img src="${reader.result}"
|
|
class="object-cover w-full h-48 rounded-lg shadow-sm"
|
|
alt="Vista previa de la imagen">
|
|
`;
|
|
}
|
|
|
|
if(event.target.files[0]) {
|
|
reader.readAsDataURL(event.target.files[0]);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
let map;
|
|
let marker;
|
|
|
|
function initMap() {
|
|
// Coordenadas iniciales (usar valores por defecto o geolocalización)
|
|
const defaultLat = {{ old('latitude', 40.4168) }};
|
|
const defaultLng = {{ old('longitude', -3.7038) }};
|
|
|
|
map = L.map('map').setView([defaultLat, defaultLng], 13);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
// Marcador inicial si hay valores
|
|
if(defaultLat && defaultLng) {
|
|
marker = L.marker([defaultLat, defaultLng]).addTo(map);
|
|
}
|
|
|
|
// Manejar clic en el mapa
|
|
map.on('click', function(e) {
|
|
if(marker) map.removeLayer(marker);
|
|
marker = L.marker(e.latlng).addTo(map);
|
|
document.getElementById('latitude').:value = e.latlng.lat.toFixed(6);
|
|
document.getElementById('longitude').:value = e.latlng.lng.toFixed(6);
|
|
});
|
|
}
|
|
|
|
// Inicializar después de cargar Leaflet
|
|
window.onload = function() {
|
|
initMap();
|
|
};
|
|
</script>
|
|
|
|
@endpush
|
|
</x-layouts.app> |