@extends('admin.layouts.app')
@section('title', isset($servicio) ? 'Editar Servicio' : 'Nuevo Servicio')
@section('icon', 'grid-fill')
@section('page-title', isset($servicio) ? 'Editar Servicio' : 'Nuevo Servicio')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <h1><i class="bi bi-grid-fill"></i> {{ isset($servicio) ? 'Editar' : 'Nuevo' }} Servicio</h1>
        <div class="breadcrumb"><a href="{{ route('admin.dashboard') }}">Dashboard</a> <span class="breadcrumb-sep">/</span> <a href="{{ route('admin.servicios.index') }}">Servicios</a> <span class="breadcrumb-sep">/</span> <span>{{ isset($servicio) ? 'Editar' : 'Nuevo' }}</span></div>
    </div>
    <a href="{{ route('admin.servicios.index') }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Volver</a>
</div>
<div class="card">
    <div class="card-body">
        <form action="{{ isset($servicio) ? route('admin.servicios.update', $servicio) : route('admin.servicios.store') }}"
              method="POST" enctype="multipart/form-data">
            @csrf @if(isset($servicio)) @method('PUT') @endif

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Nombre <span class="required">*</span></label>
                    <input type="text" name="nombre" class="form-control" value="{{ old('nombre', $servicio->nombre ?? '') }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Ícono Bootstrap <span class="required">*</span></label>
                    <input type="text" name="icono" class="form-control" value="{{ old('icono', $servicio->icono ?? 'bi-laptop') }}" placeholder="bi-laptop">
                    <span class="form-hint">Ver íconos en <a href="https://icons.getbootstrap.com" target="_blank">icons.getbootstrap.com</a></span>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Descripción</label>
                <textarea name="descripcion" class="form-control" rows="3">{{ old('descripcion', $servicio->descripcion ?? '') }}</textarea>
            </div>

            <div class="form-group">
                <label class="form-label">Características (una por línea)</label>
                <textarea name="caracteristicas" class="form-control" rows="6" placeholder="Gestión de matrículas&#10;Registro de notas&#10;Horarios...">{{ old('caracteristicas', $servicio->caracteristicas ?? '') }}</textarea>
            </div>

            <div class="form-row-3">
                <div class="form-group">
                    <label class="form-label">Tipo <span class="required">*</span></label>
                    <select name="tipo" class="form-control" 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 class="form-group">
                    <label class="form-label">Precio Desde</label>
                    <input type="text" name="precio_desde" class="form-control" value="{{ old('precio_desde', $servicio->precio_desde ?? '') }}" placeholder="S/ 150">
                </div>
                <div class="form-group">
                    <label class="form-label">Orden</label>
                    <input type="number" name="orden" class="form-control" value="{{ old('orden', $servicio->orden ?? 0) }}" min="0">
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Badge / Etiqueta</label>
                    <input type="text" name="badge" class="form-control" value="{{ old('badge', $servicio->badge ?? '') }}" placeholder="Más Popular">
                </div>
                <div class="form-group">
                    <label class="form-label">Color del Badge</label>
                    <input type="color" name="badge_color" class="form-control" value="{{ old('badge_color', $servicio->badge_color ?? '#3b82f6') }}" style="height:44px;">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">URL Demo</label>
                <input type="text" name="url_demo" class="form-control" value="{{ old('url_demo', $servicio->url_demo ?? '') }}" placeholder="https://demo.sistema.com">
            </div>

            <div class="form-group">
                <label class="form-label">Imagen</label>
                @if(isset($servicio) && $servicio->imagen)<img src="{{ asset('storage/'.$servicio->imagen) }}" style="max-height:100px;border-radius:8px;display:block;margin-bottom:.5rem;">@endif
                <input type="file" name="imagen" class="form-control" accept="image/*">
            </div>

            <div style="display:flex;gap:2rem;margin-bottom:1.25rem;">
                <label class="form-check"><input type="checkbox" name="destacado" value="1" {{ old('destacado', $servicio->destacado ?? false) ? 'checked' : '' }}> ⭐ Destacado</label>
                <label class="form-check"><input type="checkbox" name="activo" value="1" {{ old('activo', $servicio->activo ?? true) ? 'checked' : '' }}> Activo</label>
            </div>

            <div style="display:flex;gap:1rem;justify-content:flex-end;">
                <a href="{{ route('admin.servicios.index') }}" class="btn btn-secondary">Cancelar</a>
                <button type="submit" class="btn btn-primary"><i class="bi bi-save-fill"></i> {{ isset($servicio) ? 'Actualizar' : 'Guardar' }}</button>
            </div>
        </form>
    </div>
</div>
@endsection