@extends('admin.layouts.app')
@section('title', isset($servicio) ? 'Editar Servicio' : 'Nuevo Servicio')
@section('styles')
<style>
:root{--m:#064e3b;--mg:#0d9488;}
.mod-hero{background:linear-gradient(135deg,#064e3b,#0f766e,#0d9488);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(6,78,59,.28);}
.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;}
.form-card-hd{background:linear-gradient(135deg,#064e3b,#0d9488);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:#6ee7b7;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:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.1);}
.fi-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;}
.fi-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:18px;}
.fg{margin-bottom:18px;}
.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;width:fit-content;}
.toggle-lbl:hover{border-color:#0f766e;}
.toggle-lbl input{width:18px;height:18px;cursor:pointer;accent-color:#0f766e;}
.toggle-lbl span{font-weight:700;color:#334155;font-size:.88rem;}
.submit-bar{background:#f0fdf4;border-top:1.5px solid #bbf7d0;padding:18px 28px;display:flex;gap:12px;justify-content:flex-end;align-items:center;}
.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;transition:all .2s;}
.btn-cancel:hover{background:#e2e8f0;}
.btn-save{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:linear-gradient(135deg,#064e3b,#0d9488);color:#fff;border:none;border-radius:14px;font-weight:800;font-size:.9rem;cursor:pointer;box-shadow:0 4px 16px rgba(6,78,59,.3);transition:all .2s;}
.btn-save:hover{transform:translateY(-2px);}
.hint{font-size:.78rem;color:#94a3b8;margin-top:4px;}
</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-grid-fill" style="color:#6ee7b7;font-size:18px;"></i>
            </div>
            {{ isset($servicio) ? 'Editar Servicio' : 'Nuevo Servicio' }}
        </h1>
        <p>{{ isset($servicio) ? 'Modifica los datos del servicio' : 'Configura un nuevo servicio o producto' }}</p>
    </div>
    <a href="{{ route('admin.servicios.index') }}" class="btn-back"><i class="bi bi-arrow-left"></i> Volver</a>
</div>

<form action="{{ isset($servicio) ? route('admin.servicios.update', $servicio) : route('admin.servicios.store') }}" method="POST" enctype="multipart/form-data" id="frmSrv">
    @csrf @if(isset($servicio)) @method('PUT') @endif

    {{-- SECCIÓN 1 --}}
    <div class="form-card">
        <div class="form-card-hd"><div class="ic"><i class="bi bi-file-earmark-text-fill"></i></div><span>Datos Generales</span></div>
        <div class="form-card-body">
            <div class="fi-row">
                <div>
                    <label class="fl">Nombre <span class="req">*</span></label>
                    <input type="text" name="nombre" class="fi" value="{{ old('nombre',$servicio->nombre??'') }}" required>
                </div>
                <div>
                    <label class="fl">Ícono Bootstrap <span class="req">*</span></label>
                    <input type="text" name="icono" class="fi" value="{{ old('icono',$servicio->icono??'bi-laptop') }}" placeholder="bi-laptop">
                    <div class="hint"><i class="bi bi-link me-1"></i><a href="https://icons.getbootstrap.com" target="_blank" style="color:#0f766e;">icons.getbootstrap.com</a></div>
                </div>
            </div>
            <div class="fg">
                <label class="fl">Descripción</label>
                <textarea name="descripcion" class="fi" rows="3" placeholder="Descripción breve del servicio...">{{ old('descripcion',$servicio->descripcion??'') }}</textarea>
            </div>
            <div class="fg">
                <label class="fl">Características <span style="font-weight:400;color:#94a3b8;font-size:.78rem;">(una por línea)</span></label>
                <textarea name="caracteristicas" class="fi" rows="5" placeholder="Gestión de matrículas&#10;Registro de notas&#10;Horarios...">{{ old('caracteristicas',$servicio->caracteristicas??'') }}</textarea>
            </div>
        </div>
    </div>

    {{-- SECCIÓN 2 --}}
    <div class="form-card">
        <div class="form-card-hd"><div class="ic"><i class="bi bi-tag-fill"></i></div><span>Precio y Tipo</span></div>
        <div class="form-card-body">
            <div class="fi-row-3">
                <div>
                    <label class="fl">Tipo <span class="req">*</span></label>
                    <select name="tipo" class="fi" required>
                        <option value="venta" {{ old('tipo',$servicio->tipo??'')  === 'venta'   ? 'selected' : '' }}>🛒 Venta</option>
                        <option value="alquiler" {{ old('tipo',$servicio->tipo??'') === 'alquiler' ? 'selected' : '' }}>🔄 Alquiler</option>
                        <option value="ambos" {{ old('tipo',$servicio->tipo??'ambos') === 'ambos' ? 'selected' : '' }}>🛒/🔄 Ambos</option>
                    </select>
                </div>
                <div>
                    <label class="fl">Precio Desde</label>
                    <input type="text" name="precio_desde" class="fi" value="{{ old('precio_desde',$servicio->precio_desde??'') }}" placeholder="S/ 150">
                </div>
                <div>
                    <label class="fl">Orden</label>
                    <input type="number" name="orden" class="fi" value="{{ old('orden',$servicio->orden??0) }}" min="0">
                </div>
            </div>
            <div class="fi-row">
                <div>
                    <label class="fl">Badge / Etiqueta</label>
                    <input type="text" name="badge" class="fi" value="{{ old('badge',$servicio->badge??'') }}" placeholder="Más Popular">
                </div>
                <div>
                    <label class="fl">Color del Badge</label>
                    <input type="color" name="badge_color" class="fi" value="{{ old('badge_color',$servicio->badge_color??'#3b82f6') }}" style="height:44px;padding:4px 8px;cursor:pointer;">
                </div>
            </div>
        </div>
    </div>

    {{-- SECCIÓN 3 --}}
    <div class="form-card">
        <div class="form-card-hd"><div class="ic"><i class="bi bi-image-fill"></i></div><span>Imagen y Opciones</span></div>
        <div class="form-card-body">
            <div class="fi-row">
                <div>
                    <label class="fl">Imagen</label>
                    @if(isset($servicio) && $servicio->imagen)
                    <img src="{{ asset('storage/'.$servicio->imagen) }}" style="max-height:80px;border-radius:10px;border:2px solid #bbf7d0;display:block;margin-bottom:8px;">
                    @endif
                    <input type="file" name="imagen" class="fi" accept="image/*">
                </div>
                <div>
                    <label class="fl">URL Demo</label>
                    <input type="text" name="url_demo" class="fi" value="{{ old('url_demo',$servicio->url_demo??'') }}" placeholder="https://demo.sistema.com">
                    <div style="display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;">
                        <label class="toggle-lbl">
                            <input type="checkbox" name="destacado" value="1" {{ old('destacado',$servicio->destacado??false) ? 'checked' : '' }}>
                            <i class="bi bi-star-fill" style="color:#f59e0b;"></i><span>Destacado</span>
                        </label>
                        <label class="toggle-lbl">
                            <input type="checkbox" name="activo" value="1" {{ old('activo',$servicio->activo??true) ? 'checked' : '' }}>
                            <i class="bi bi-toggle-on" style="color:#10b981;"></i><span>Activo</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="submit-bar">
        <a href="{{ route('admin.servicios.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($servicio) ? 'Actualizar Servicio' : 'Guardar Servicio' }}</button>
    </div>
</form>
@endsection