@extends('admin.layouts.app')

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">{{ $template ? 'Editar' : 'Nueva' }} Plantilla</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.dashboard') }}">MarketPlace</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.templates.index') }}">Plantillas</a></li>
                    <li class="breadcrumb-item active">{{ $template ? 'Editar' : 'Nueva' }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="ri-file-edit-line me-1"></i>
                    {{ $template ? 'Editar Plantilla: ' . $template->des_planti : 'Crear Nueva Plantilla' }}
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ $template ? route('admin.meli.templates.update', $template->id) : route('admin.meli.templates.store') }}"
                      method="POST">
                    @csrf
                    @if($template)
                        @method('PUT')
                    @endif

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Código <span class="text-danger">*</span></label>
                            <input type="text" name="cod_planti" class="form-control @error('cod_planti') is-invalid @enderror"
                                   value="{{ old('cod_planti', $template->cod_planti ?? '') }}"
                                   maxlength="10" required placeholder="Ej: RESP001">
                            @error('cod_planti')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tipo <span class="text-danger">*</span></label>
                            <select name="tip_planti" class="form-select @error('tip_planti') is-invalid @enderror" required>
                                <option value="">Seleccionar...</option>
                                <option value="RESP" {{ old('tip_planti', $template->tip_planti ?? '') == 'RESP' ? 'selected' : '' }}>RESP - Respuesta</option>
                                <option value="MAIL" {{ old('tip_planti', $template->tip_planti ?? '') == 'MAIL' ? 'selected' : '' }}>MAIL - Email</option>
                                <option value="NOTI" {{ old('tip_planti', $template->tip_planti ?? '') == 'NOTI' ? 'selected' : '' }}>NOTI - Notificación</option>
                            </select>
                            @error('tip_planti')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Habilitada</label>
                            <div class="form-check form-switch mt-2">
                                <input type="hidden" name="habilitada" value="0">
                                <input type="checkbox" name="habilitada" value="1" class="form-check-input"
                                       {{ old('habilitada', $template->habilitada ?? true) ? 'checked' : '' }}>
                                <label class="form-check-label">Activa</label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Descripción <span class="text-danger">*</span></label>
                        <input type="text" name="des_planti" class="form-control @error('des_planti') is-invalid @enderror"
                               value="{{ old('des_planti', $template->des_planti ?? '') }}"
                               maxlength="30" required placeholder="Descripción corta de la plantilla">
                        @error('des_planti')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Título</label>
                        <input type="text" name="tit_planti" class="form-control @error('tit_planti') is-invalid @enderror"
                               value="{{ old('tit_planti', $template->tit_planti ?? '') }}"
                               maxlength="40" placeholder="Título (opcional)">
                        @error('tit_planti')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Asunto</label>
                        <input type="text" name="asu_planti" class="form-control @error('asu_planti') is-invalid @enderror"
                               value="{{ old('asu_planti', $template->asu_planti ?? '') }}"
                               maxlength="50" placeholder="Asunto (para emails)">
                        @error('asu_planti')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Mensaje</label>
                        <textarea name="msg_planti" class="form-control @error('msg_planti') is-invalid @enderror"
                                  rows="8" placeholder="Contenido del mensaje...">{{ old('msg_planti', $template->msg_planti ?? '') }}</textarea>
                        @error('msg_planti')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Puedes usar variables como {nombre}, {producto}, {orden} que serán reemplazadas al enviar.</div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="ri-save-line me-1"></i> {{ $template ? 'Actualizar' : 'Crear' }}
                        </button>
                        <a href="{{ route('admin.meli.templates.index') }}" class="btn btn-outline-secondary">Cancelar</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Side Info --}}
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-information-line me-1"></i> Ayuda</h5>
            </div>
            <div class="card-body">
                <h6 class="small fw-semibold">Tipos de Plantilla</h6>
                <ul class="small text-muted mb-3">
                    <li><strong>RESP:</strong> Respuestas a preguntas de MercadoLibre</li>
                    <li><strong>MAIL:</strong> Emails al comprador</li>
                    <li><strong>NOTI:</strong> Notificaciones internas</li>
                </ul>
                <h6 class="small fw-semibold">Variables Disponibles</h6>
                <ul class="small text-muted mb-0">
                    <li><code>{nombre}</code> - Nombre/nick del comprador</li>
                    <li><code>{comprador}</code> - Alias de {nombre}</li>
                    <li><code>{producto}</code> - Título de la publicación</li>
                    <li><code>{precio}</code> - Precio publicado</li>
                    <li><code>{stock}</code> - Stock disponible</li>
                    <li><code>{ml_id}</code> - ID de la publicación ML</li>
                    <li><code>{orden}</code> - Número de orden</li>
                    <li><code>{tracking}</code> - Número de tracking</li>
                </ul>
                <div class="alert alert-info alert-sm mt-2 py-1 px-2 small mb-0">
                    <i class="ri-information-line me-1"></i>
                    Las variables se reemplazan automáticamente al usar la plantilla en una respuesta.
                </div>
            </div>
        </div>
    </div>
</div>

@endsection