@extends('layouts.app')

@section('title', $item ? 'Editar Estado' : 'Nuevo Estado')
@section('page-title', $item ? 'Editar Estado' : 'Nuevo Estado')

@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.estados') }}">Estados de Mantenimiento</a></li>
<li class="breadcrumb-item active">{{ $item ? 'Editar' : 'Nuevo' }}</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .form-container {
        max-width: 700px;
        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: #059669;
        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-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        margin-bottom: 1.25rem;
    }

    @media (max-width: 576px) {
        .form-row {
            grid-template-columns: 1fr;
        }
    }

    .form-row .full-width {
        grid-column: 1 / -1;
    }

    .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;
    }

    .color-input-wrapper {
        display: flex;
        gap: 0.75rem;
        align-items: center;
    }

    .color-input-wrapper input[type="color"] {
        width: 50px;
        height: 42px;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        padding: 2px;
        cursor: pointer;
    }

    .color-input-wrapper input[type="text"] {
        flex: 1;
    }

    .checkbox-custom {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .checkbox-custom:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .checkbox-custom.checked {
        background: rgba(26, 58, 92, 0.04);
        border-color: #1a3a5c;
    }

    .checkbox-custom input {
        display: none;
    }

    .checkbox-box {
        width: 22px;
        height: 22px;
        border: 2px solid #e2e8f0;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    .checkbox-custom.checked .checkbox-box {
        background: #1a3a5c;
        border-color: #1a3a5c;
        color: #fff;
    }

    .checkbox-info h6 {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #1a3a5c;
    }

    .checkbox-info span {
        font-size: 0.75rem;
        color: #64748b;
    }

    .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.estados.update', $item->estado_id) : route('web.catalogos.estados.store') }}"
          method="POST" id="formEstado">
        @csrf
        @if($item)
        @method('PUT')
        @endif

        <div class="form-card">
            <div class="form-card-header">
                <div class="icon-box"><i class="fas fa-traffic-light"></i></div>
                <h5>{{ $item ? 'Editar Estado' : 'Nuevo Estado de Mantenimiento' }}</h5>
            </div>

            <div class="form-card-body">
                <div class="form-row">
                    <div>
                        <label class="form-label-custom">
                            Código <span class="required">*</span>
                        </label>
                        <input type="text" name="estado_codigo"
                               class="form-control form-control-custom @error('estado_codigo') is-invalid @enderror"
                               value="{{ old('estado_codigo', $item->estado_codigo ?? '') }}" required
                               placeholder="Ej: EN_PROCESO" style="text-transform: uppercase;">
                        @error('estado_codigo')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label class="form-label-custom">
                            Orden <span class="required">*</span>
                        </label>
                        <input type="number" name="orden"
                               class="form-control form-control-custom @error('orden') is-invalid @enderror"
                               value="{{ old('orden', $item->orden ?? 0) }}" required min="0">
                        @error('orden')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="full-width">
                        <label class="form-label-custom">
                            Nombre <span class="required">*</span>
                        </label>
                        <input type="text" name="estado_nombre"
                               class="form-control form-control-custom @error('estado_nombre') is-invalid @enderror"
                               value="{{ old('estado_nombre', $item->estado_nombre ?? '') }}" required
                               placeholder="Ej: En Proceso">
                        @error('estado_nombre')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="full-width">
                        <label class="form-label-custom">Descripción</label>
                        <textarea name="estado_descripcion" rows="2"
                                  class="form-control form-control-custom @error('estado_descripcion') is-invalid @enderror"
                                  placeholder="Describe cuándo se utiliza este estado...">{{ old('estado_descripcion', $item->estado_descripcion ?? '') }}</textarea>
                        @error('estado_descripcion')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="full-width">
                        <label class="form-label-custom">
                            Color <span class="required">*</span>
                        </label>
                        <div class="color-input-wrapper">
                            <input type="color" id="colorPicker"
                                   value="{{ old('color_hex', $item->color_hex ?? '#1a3a5c') }}"
                                   onchange="document.getElementById('colorHex').value = this.value">
                            <input type="text" name="color_hex" id="colorHex"
                                   class="form-control form-control-custom @error('color_hex') is-invalid @enderror"
                                   value="{{ old('color_hex', $item->color_hex ?? '#1a3a5c') }}" required
                                   placeholder="#1a3a5c" maxlength="7"
                                   onchange="document.getElementById('colorPicker').value = this.value">
                        </div>
                        @error('color_hex')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="full-width">
                        <label class="checkbox-custom {{ old('requiere_gps', $item->requiere_gps ?? false) ? 'checked' : '' }}"
                               id="checkbox-gps" onclick="toggleCheckbox('gps')">
                            <input type="checkbox" name="requiere_gps" value="1"
                                   {{ old('requiere_gps', $item->requiere_gps ?? false) ? 'checked' : '' }}>
                            <span class="checkbox-box"><i class="fas fa-check"></i></span>
                            <div class="checkbox-info">
                                <h6><i class="fas fa-satellite-dish me-1"></i> Requiere GPS</h6>
                                <span>El técnico debe registrar ubicación GPS al cambiar a este estado</span>
                            </div>
                        </label>
                    </div>

                    @if($item)
                    <div class="full-width">
                        <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>

            <div class="form-actions">
                <a href="{{ route('web.catalogos.estados') }}" 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 Estado' }}
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function toggleCheckbox(id) {
    const wrapper = document.getElementById('checkbox-' + id);
    const checkbox = wrapper.querySelector('input[type="checkbox"]');
    checkbox.checked = !checkbox.checked;
    wrapper.classList.toggle('checked', checkbox.checked);
}

function selectEstado(valor) {
    document.querySelectorAll('.estado-option').forEach(function(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