<?php $__env->startSection('title', 'Nueva Solicitud'); ?>
<?php $__env->startSection('content'); ?>


<div class="flex items-center gap-3 mb-5">
    <a href="<?php echo e(route('portal.index')); ?>"
       class="w-9 h-9 flex items-center justify-center rounded-full bg-white border border-gray-200 text-gray-500 hover:bg-gray-50 shadow-sm transition flex-shrink-0">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
        </svg>
    </a>
    <div>
        <h1 class="text-xl font-bold text-gray-900">Nueva solicitud</h1>
        <p class="text-xs text-gray-400">Cuéntanos qué necesitas</p>
    </div>
</div>


<div class="bg-blue-50 border border-blue-100 rounded-2xl px-4 py-3 mb-5 flex gap-3">
    <div class="flex-shrink-0 mt-0.5">
        <svg class="h-4 w-4 text-blue-500" 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>
    <p class="text-xs text-blue-700 leading-relaxed">
        Entre más detallada sea tu descripción, más rápido te podemos ayudar. Incluye qué pasó, desde cuándo y qué ya intentaste.
    </p>
</div>


<form method="POST" action="<?php echo e(route('portal.store')); ?>" class="space-y-4" enctype="multipart/form-data">
    <?php echo csrf_field(); ?>

    
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
        <label class="block text-sm font-semibold text-gray-700 mb-2">
            ¿Qué necesitas? <span class="text-red-400">*</span>
        </label>
        <input type="text" name="title" value="<?php echo e(old('title')); ?>"
               autocomplete="off"
               placeholder="Ej: No puedo acceder a mi correo"
               class="w-full rounded-xl border-gray-200 text-sm px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-gray-50 <?php $__errorArgs = ['title'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-400 bg-red-50 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['title'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
        <p class="text-red-500 text-xs mt-1.5 flex items-center gap-1">
            <svg class="h-3 w-3" 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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
            <?php echo e($message); ?>

        </p>
        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

    
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
        <label class="block text-sm font-semibold text-gray-700 mb-2">
            Descripción detallada <span class="text-red-400">*</span>
        </label>
        <textarea name="description" rows="5"
                  placeholder="Describe qué está pasando, desde cuándo, qué pasos intentaste y cualquier mensaje de error..."
                  class="w-full rounded-xl border-gray-200 text-sm px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-gray-50 resize-none <?php $__errorArgs = ['description'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-400 bg-red-50 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"><?php echo e(old('description')); ?></textarea>
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['description'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
        <p class="text-red-500 text-xs mt-1.5 flex items-center gap-1">
            <svg class="h-3 w-3" 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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
            <?php echo e($message); ?>

        </p>
        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

    
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 space-y-4">
        <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">
                ¿Qué tan urgente es?
            </label>
            <div class="grid grid-cols-2 gap-2" id="priority-group">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $priorities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $priority): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <label class="priority-option flex items-center gap-3 p-3 rounded-xl border-2 border-gray-100 cursor-pointer transition hover:border-gray-300 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50">
                    <input type="radio" name="priority_id" value="<?php echo e($priority->id); ?>"
                           class="sr-only"
                           <?php echo e(old('priority_id') == $priority->id || ($loop->first && !old('priority_id')) ? 'checked' : ''); ?>>
                    <div class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: <?php echo e($priority->color); ?>"></div>
                    <span class="text-sm font-medium text-gray-700"><?php echo e($priority->name); ?></span>
                </label>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </div>
        </div>

        <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">
                Categoría <span class="text-gray-400 font-normal text-xs">(opcional)</span>
            </label>
            <select name="category_id"
                    class="w-full rounded-xl border-gray-200 text-sm px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-gray-50">
                <option value="">— Selecciona una categoría —</option>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <option value="<?php echo e($cat->id); ?>" <?php echo e(old('category_id') == $cat->id ? 'selected' : ''); ?>>
                    <?php echo e($cat->name); ?>

                </option>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $cat->children ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $child): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <option value="<?php echo e($child->id); ?>" <?php echo e(old('category_id') == $child->id ? 'selected' : ''); ?>>
                    &nbsp;&nbsp;└ <?php echo e($child->name); ?>

                </option>
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $child->children ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $grandchild): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <option value="<?php echo e($grandchild->id); ?>" <?php echo e(old('category_id') == $grandchild->id ? 'selected' : ''); ?>>
                    &nbsp;&nbsp;&nbsp;&nbsp;└ <?php echo e($grandchild->name); ?>

                </option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </select>
        </div>
    </div>


    
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
        <label class="block text-sm font-semibold text-gray-700 mb-1">
            Archivos adjuntos <span class="text-gray-400 font-normal text-xs">(opcional — máx. 5 archivos, 10MB c/u)</span>
        </label>
        <p class="text-xs text-gray-400 mb-3">Imágenes, PDF, Word, Excel, ZIP</p>
        <label class="flex flex-col items-center justify-center w-full h-28 border-2 border-dashed border-gray-200 rounded-xl cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition bg-gray-50">
            <svg class="h-7 w-7 text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"/>
            </svg>
            <span class="text-sm text-gray-400" id="file-label">Toca para adjuntar archivos</span>
            <input type="file" name="attachments[]" multiple accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip"
                   class="hidden" onchange="updateFileLabel(this)">
        </label>
        <div id="file-list" class="mt-2 space-y-1"></div>
    </div>

    
    <button type="submit"
            class="w-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-semibold py-4 rounded-2xl shadow-md transition flex items-center justify-center gap-2 text-base">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
        </svg>
        Enviar solicitud
    </button>

    <a href="<?php echo e(route('portal.index')); ?>"
       class="block w-full text-center text-sm text-gray-400 py-2">
        Cancelar
    </a>
</form>


<script>
function updateFileLabel(input) {
    const label = document.getElementById('file-label');
    const list  = document.getElementById('file-list');
    list.innerHTML = '';
    if (input.files.length === 0) {
        label.textContent = 'Toca para adjuntar archivos';
        return;
    }
    label.textContent = input.files.length + ' archivo(s) seleccionado(s)';
    Array.from(input.files).forEach(f => {
        const div = document.createElement('div');
        div.className = 'flex items-center gap-2 text-xs text-gray-600 bg-gray-50 rounded-lg px-3 py-1.5';
        div.innerHTML = '<svg class="h-3.5 w-3.5 text-blue-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>' + f.name + ' <span class="text-gray-400 ml-auto">' + (f.size < 1048576 ? Math.round(f.size/1024) + ' KB' : (f.size/1048576).toFixed(1) + ' MB') + '</span>';
        list.appendChild(div);
    });
}
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.portal', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/evolucionamos/public_html/fedef/resources/views/portal/create.blade.php ENDPATH**/ ?>