@extends('admin.layouts.app')
@section('title', isset($menuItem) ? 'Editar Ítem de Menú' : 'Nuevo Ítem de Menú')
@section('styles')
<style>
:root{--m:#0a2e4d;--mg:#1b6ca8;}
.mod-hero{background:linear-gradient(135deg,#0a2e4d,#0f4c75,#1b6ca8);border-radius:20px;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:22px;box-shadow:0 8px 32px rgba(10,46,77,.3);}
.mod-hero h1{font-size:1.3rem;font-weight:800;color:#fff;margin:0;display:flex;align-items:center;gap:10px;}
.mod-hero p{color:rgba(255,255,255,.5);margin:0;font-size:.82rem;}
.btn-back{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);color:#fff;border-radius:12px;font-weight:700;font-size:.85rem;text-decoration:none;transition:all .2s;}
.btn-back:hover{background:rgba(255,255,255,.22);}
.form-card{background:#fff;border-radius:18px;box-shadow:0 4px 24px rgba(0,0,0,.07);overflow:hidden;margin-bottom:20px;max-width:660px;}
.form-card-hd{background:linear-gradient(135deg,#0a2e4d,#1b6ca8);padding:14px 22px;display:flex;align-items:center;gap:10px;}
.form-card-hd .ic{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;}
.form-card-hd .ic i{color:#90caf9;font-size:15px;}
.form-card-hd span{color:#fff;font-weight:800;font-size:.92rem;}
.form-card-body{padding:24px 28px;}
.fl{font-size:.82rem;font-weight:700;color:#475569;margin-bottom:6px;display:block;}
.fl .req{color:#ef4444;}
.fi{width:100%;border:1.5px solid #e2e8f0;border-radius:10px;padding:10px 14px;font-size:.88rem;color:#1e293b;transition:border-color .2s,box-shadow .2s;outline:none;background:#fff;}
.fi:focus{border-color:#1b6ca8;box-shadow:0 0 0 3px rgba(27,108,168,.1);}
.fi-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;}
.fg{margin-bottom:18px;}
.icon-row{display:flex;gap:10px;align-items:center;}
.icon-preview{width:44px;height:44px;border-radius:12px;background:#1b6ca818;border:1.5px solid #bfdbfe;display:flex;align-items:center;justify-content:center;font-size:20px;color:#0f4c75;flex-shrink:0;}
.toggle-lbl{display:flex;align-items:center;gap:10px;cursor:pointer;background:#fff;padding:10px 16px;border-radius:10px;border:1.5px solid #e2e8f0;transition:border-color .2s;}
.toggle-lbl:hover{border-color:#1b6ca8;}
.toggle-lbl input{width:18px;height:18px;cursor:pointer;accent-color:#1b6ca8;}
.toggle-lbl span{font-weight:700;color:#334155;font-size:.88rem;}
.submit-bar{background:#eff6ff;border-top:1.5px solid #bfdbfe;padding:18px 28px;display:flex;gap:12px;justify-content:flex-end;align-items:center;max-width:660px;border-radius:0 0 18px 18px;}
.btn-cancel{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;background:#f1f5f9;color:#64748b;border-radius:12px;font-weight:700;text-decoration:none;font-size:.88rem;}
.btn-cancel:hover{background:#e2e8f0;}
.btn-save{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:linear-gradient(135deg,#0a2e4d,#1b6ca8);color:#fff;border:none;border-radius:14px;font-weight:800;font-size:.9rem;cursor:pointer;box-shadow:0 4px 16px rgba(10,46,77,.3);transition:all .2s;}
.btn-save:hover{transform:translateY(-2px);}
.hint{font-size:.78rem;color:#94a3b8;margin-top:4px;}

/* Vista previa del menú */
.menu-live{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#f0f7ff;border:1.5px solid #bfdbfe;border-radius:12px;margin-bottom:4px;}
.menu-live-icon{width:38px;height:38px;border-radius:10px;background:#1b6ca818;display:flex;align-items:center;justify-content:center;font-size:18px;color:#0f4c75;flex-shrink:0;}
.menu-live-label{font-weight:800;color:#1e293b;font-size:.9rem;}
.menu-live-url{font-size:.78rem;color:#94a3b8;}
</style>
@endsection

@section('content')
<div class="mod-hero">
    <div>
        <h1>
            <div style="width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;">
                <i class="bi bi-list-ul" style="color:#90caf9;font-size:18px;"></i>
            </div>
            {{ isset($menuItem) ? 'Editar Ítem de Menú' : 'Nuevo Ítem de Menú' }}
        </h1>
        <p>{{ isset($menuItem) ? 'Modifica: '.$menuItem->label : 'Agrega un enlace al menú de navegación' }}</p>
    </div>
    <a href="{{ route('admin.menu-items.index') }}" class="btn-back"><i class="bi bi-arrow-left"></i> Volver</a>
</div>

<form action="{{ isset($menuItem) ? route('admin.menu-items.update', $menuItem) : route('admin.menu-items.store') }}" method="POST" id="frmMenu">
    @csrf @if(isset($menuItem)) @method('PUT') @endif

    <div class="form-card">
        <div class="form-card-hd"><div class="ic"><i class="bi bi-link-45deg"></i></div><span>Datos del Ítem</span></div>
        <div class="form-card-body">

            {{-- Preview en vivo --}}
            <div class="menu-live" id="menuLive" style="margin-bottom:20px;">
                <div class="menu-live-icon" id="livIcon"><i id="livIconEl" class="{{ old('icono', $menuItem->icono ?? 'bi bi-link-45deg') }}"></i></div>
                <div>
                    <div class="menu-live-label" id="livLabel">{{ old('label', $menuItem->label ?? 'Texto del enlace') }}</div>
                    <div class="menu-live-url" id="livUrl">{{ old('url', $menuItem->url ?? '/ruta') }}</div>
                </div>
            </div>

            <div class="fg">
                <label class="fl">Texto del enlace <span class="req">*</span></label>
                <input type="text" id="inLabel" name="label" class="fi"
                       value="{{ old('label', $menuItem->label ?? '') }}"
                       placeholder="Ej: Inicio, Servicios, Contacto…" required>
            </div>
            <div class="fg">
                <label class="fl">URL <span class="req">*</span></label>
                <div style="position:relative;">
                    <span style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:14px;"><i class="bi bi-link"></i></span>
                    <input type="text" id="inUrl" name="url" class="fi"
                           value="{{ old('url', $menuItem->url ?? '') }}"
                           placeholder="/servicios, https://… o /p/mi-pagina" required
                           style="padding-left:32px;">
                </div>
                <div class="hint">Rutas relativas (<code>/servicios</code>) o absolutas (<code>https://…</code>)</div>
            </div>
            <div class="fg">
                <label class="fl">Ícono Bootstrap <span style="font-weight:400;color:#94a3b8;">(opcional)</span></label>
                <div class="icon-row">
                    <input type="text" id="inIcono" name="icono" class="fi"
                           value="{{ old('icono', $menuItem->icono ?? '') }}"
                           placeholder="Ej: bi bi-house-fill">
                    <div class="icon-preview" id="iconPreview">
                        <i id="iconPreviewEl" class="{{ old('icono', $menuItem->icono ?? 'bi bi-link-45deg') }}"></i>
                    </div>
                </div>
                <div class="hint"><i class="bi bi-link me-1"></i><a href="https://icons.getbootstrap.com/" target="_blank" style="color:#1b6ca8;">icons.getbootstrap.com</a> — Ejemplo: <code>bi bi-star-fill</code></div>
            </div>
            <div class="fi-row">
                <div>
                    <label class="fl">Abrir en</label>
                    <select name="target" class="fi">
                        <option value="_self" {{ old('target', $menuItem->target ?? '_self') === '_self' ? 'selected' : '' }}>🔗 Misma pestaña</option>
                        <option value="_blank" {{ old('target', $menuItem->target ?? '') === '_blank' ? 'selected' : '' }}>↗ Nueva pestaña</option>
                    </select>
                </div>
                <div>
                    <label class="fl">Orden <span style="font-weight:400;color:#94a3b8;font-size:.78rem;">(también puedes arrastrar)</span></label>
                    <input type="number" name="orden" class="fi" value="{{ old('orden', $menuItem->orden ?? 0) }}" min="0">
                </div>
            </div>
            <label class="toggle-lbl">
                <input type="checkbox" name="activo" value="1"
                       {{ old('activo', $menuItem->activo ?? true) ? 'checked' : '' }}>
                <i class="bi bi-toggle-on" style="color:#10b981;"></i>
                <span>Ítem activo (visible en el menú)</span>
            </label>
        </div>
    </div>

    <div class="submit-bar">
        <a href="{{ route('admin.menu-items.index') }}" class="btn-cancel"><i class="bi bi-x-lg"></i> Cancelar</a>
        <button type="submit" class="btn-save">
            <i class="bi bi-save-fill"></i> {{ isset($menuItem) ? 'Actualizar Ítem' : 'Guardar Ítem' }}
        </button>
    </div>
</form>
@endsection

@section('scripts')
<script>
(function(){
    var inLabel = document.getElementById('inLabel');
    var inUrl   = document.getElementById('inUrl');
    var inIcono = document.getElementById('inIcono');
    var livLabel = document.getElementById('livLabel');
    var livUrl   = document.getElementById('livUrl');
    var livIconEl = document.getElementById('livIconEl');
    var iconPreviewEl = document.getElementById('iconPreviewEl');

    function refreshPreview() {
        livLabel.textContent = inLabel.value || 'Texto del enlace';
        livUrl.textContent   = inUrl.value   || '/ruta';
        var ico = inIcono.value.trim() || 'bi bi-link-45deg';
        livIconEl.className     = ico;
        iconPreviewEl.className = ico;
    }
    inLabel.addEventListener('input', refreshPreview);
    inUrl.addEventListener('input',   refreshPreview);
    inIcono.addEventListener('input', refreshPreview);
    refreshPreview();
})();
</script>
@endsection