@extends('layouts.app')

@section('title', $item ? 'Editar Marca' : 'Nueva Marca')
@section('page-title', $item ? 'Editar Marca' : 'Nueva Marca')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('web.catalogos.index') }}">Catálogos</a></li>
<li class="breadcrumb-item"><a href="{{ route('web.catalogos.marcas') }}">Marcas de Hardware</a></li>
<li class="breadcrumb-item active">{{ $item ? 'Editar' : 'Nueva' }}</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .form-container { max-width: 500px; margin: 0 auto; }
    .form-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
    .form-card-header { padding: 1rem 1.5rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 0.75rem; }
    .form-card-header .icon-box { width: 36px; height: 36px; background: #2563eb; color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
    .form-card-header h5 { margin: 0; font-size: 1rem; font-weight: 600; color: #1a3a5c; }
    .form-card-body { padding: 1.5rem; }
    .form-group { margin-bottom: 1.25rem; }
    .form-label-custom { font-size: 0.8rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; display: block; }
    .form-label-custom .required { color: #ef4444; margin-left: 0.25rem; }
    .form-control-custom { border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.625rem 0.875rem; font-size: 0.9rem; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; }
    .form-control-custom:focus { border-color: #1a3a5c; box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.1); outline: none; }
    .estado-toggle { display: flex; gap: 1rem; }
    .estado-option { flex: 1; display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 2px solid #e2e8f0; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
    .estado-option:hover { border-color: #cbd5e1; }
    .estado-option input { display: none; }
    .estado-option.activo.selected { border-color: #059669; background: rgba(5, 150, 105, 0.04); }
    .estado-option.inactivo.selected { border-color: #dc2626; background: rgba(220, 38, 38, 0.04); }
    .estado-radio { width: 18px; height: 18px; border: 2px solid #e2e8f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .estado-option.activo.selected .estado-radio { border-color: #059669; background: #059669; }
    .estado-option.inactivo.selected .estado-radio { border-color: #dc2626; background: #dc2626; }
    .estado-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; display: none; }
    .estado-option.selected .estado-radio::after { display: block; }
    .estado-label { font-size: 0.85rem; font-weight: 500; color: #475569; }
    .estado-option.activo.selected .estado-label { color: #059669; }
    .estado-option.inactivo.selected .estado-label { color: #dc2626; }
    .form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; padding: 1.25rem 1.5rem; background: #f8fafc; border-top: 1px solid #e2e8f0; }
</style>
@endpush

@section('content')
<div class="form-container">
    <form action="{{ $item ? route('web.catalogos.marcas.update', $item->marca_id) : route('web.catalogos.marcas.store') }}" method="POST">
        @csrf
        @if($item) @method('PUT') @endif

        <div class="form-card">
            <div class="form-card-header">
                <div class="icon-box"><i class="fas fa-tags"></i></div>
                <h5>{{ $item ? 'Editar Marca' : 'Nueva Marca de Hardware' }}</h5>
            </div>

            <div class="form-card-body">
                <div class="form-group">
                    <label class="form-label-custom">Nombre <span class="required">*</span></label>
                    <input type="text" name="nombre"
                           class="form-control form-control-custom @error('nombre') is-invalid @enderror"
                           value="{{ old('nombre', $item->nombre ?? '') }}" required
                           placeholder="Ej: Samsung, LG, Dell...">
                    @error('nombre')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                @if($item)
                <div class="form-group">
                    <label class="form-label-custom">Estado <span class="required">*</span></label>
                    <div class="estado-toggle">
                        <label class="estado-option activo {{ old('estado', $item->estado) == 1 ? 'selected' : '' }}" onclick="selectEstado(1)">
                            <input type="radio" name="estado" value="1" {{ old('estado', $item->estado) == 1 ? 'checked' : '' }}>
                            <span class="estado-radio"></span>
                            <span class="estado-label"><i class="fas fa-check-circle me-1"></i> Activo</span>
                        </label>
                        <label class="estado-option inactivo {{ old('estado', $item->estado) == 0 ? 'selected' : '' }}" onclick="selectEstado(0)">
                            <input type="radio" name="estado" value="0" {{ old('estado', $item->estado) == 0 ? 'checked' : '' }}>
                            <span class="estado-radio"></span>
                            <span class="estado-label"><i class="fas fa-times-circle me-1"></i> Inactivo</span>
                        </label>
                    </div>
                </div>
                @endif
            </div>

            <div class="form-actions">
                <a href="{{ route('web.catalogos.marcas') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-times me-1"></i> Cancelar
                </a>
                <button type="submit" class="btn btn-success">
                    <i class="fas fa-save me-1"></i> {{ $item ? 'Guardar Cambios' : 'Crear Marca' }}
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function selectEstado(valor) {
    document.querySelectorAll('.estado-option').forEach(opt => opt.classList.remove('selected'));
    const radio = document.querySelector('input[name="estado"][value="' + valor + '"]');
    radio.checked = true;
    radio.closest('.estado-option').classList.add('selected');
}
</script>
@endpush