@extends('layouts.app')

@section('title', 'Nueva Plantilla de Documento')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-dark">
                <i class="fas fa-file-plus me-2 text-primary"></i>Nueva Plantilla de Documento
            </h1>
            <p class="text-muted mb-0 small">Crea una nueva plantilla de documento para el sistema</p>
        </div>
        <div>
            <a href="{{ route('plantillas.documentos.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
        </div>
    </div>

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Formulario -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Información de la Plantilla</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('plantillas.documentos.store') }}" enctype="multipart/form-data">
                        @csrf

                        <div class="mb-3">
                            <label for="name" class="form-label">
                                Nombre de la Plantilla <span class="text-danger">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control @error('name') is-invalid @enderror" 
                                   id="name" 
                                   name="name" 
                                   value="{{ old('name') }}" 
                                   required 
                                   placeholder="Ej: Factura de Venta Estándar">
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">Ingrese un nombre descriptivo para la plantilla</small>
                        </div>

                        <div class="mb-3">
                            <label for="module" class="form-label">
                                Módulo <span class="text-danger">*</span>
                            </label>
                            <select class="form-select @error('module') is-invalid @enderror" 
                                    id="module" 
                                    name="module" 
                                    required>
                                <option value="">Seleccionar módulo</option>
                                @foreach($modules as $key => $label)
                                    <option value="{{ $key }}" {{ old('module') == $key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('module')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">Seleccione el módulo al que pertenece esta plantilla</small>
                        </div>

                        <div class="mb-3">
                            <label for="file_path" class="form-label">
                                Archivo de Plantilla <span class="text-danger">*</span>
                            </label>
                            <input type="file" 
                                   class="form-control @error('file_path') is-invalid @enderror" 
                                   id="file_path" 
                                   name="file_path" 
                                   accept=".doc,.docx" 
                                   required>
                            @error('file_path')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                Formatos permitidos: .doc, .docx (Tamaño máximo: 10MB)
                            </small>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       id="is_default" 
                                       name="is_default" 
                                       value="1"
                                       {{ old('is_default') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_default">
                                    Marcar como plantilla por defecto
                                </label>
                            </div>
                            <small class="form-text text-muted">
                                Si se marca, esta plantilla será la predeterminada para el módulo seleccionado
                            </small>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('plantillas.documentos.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>Cancelar
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Guardar Plantilla
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Panel de Ayuda -->
        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-lightbulb me-2"></i>Información de Ayuda</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info border-0 mb-3">
                        <h6 class="alert-heading">
                            <i class="fas fa-info-circle me-1"></i>Formatos Soportados
                        </h6>
                        <p class="mb-0 small">
                            Las plantillas deben estar en formato Microsoft Word (.doc o .docx). 
                            Asegúrese de que el archivo no exceda los 10MB.
                        </p>
                    </div>

                    <div class="alert alert-warning border-0 mb-3">
                        <h6 class="alert-heading">
                            <i class="fas fa-exclamation-triangle me-1"></i>Plantilla por Defecto
                        </h6>
                        <p class="mb-0 small">
                            Si marca una plantilla como predeterminada, automáticamente se desmarcarán 
                            las otras plantillas del mismo módulo.
                        </p>
                    </div>

                    <div class="alert alert-success border-0">
                        <h6 class="alert-heading">
                            <i class="fas fa-check-circle me-1"></i>Campos Requeridos
                        </h6>
                        <p class="mb-0 small">
                            Los campos marcados con <span class="text-danger">*</span> son obligatorios 
                            para crear la plantilla.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .card {
        border-radius: 8px;
    }
    
    .form-label {
        font-weight: 600;
        color: #495057;
    }
    
    .form-control:focus,
    .form-select:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }
</style>
@endpush