@extends('layouts.app')
@section('title', __('Seguimiento Nuevos Desarrollos'))

@push('styles')
<style>
/* ── Filtros ─────────────────────────────────────────────── */
.filtros-bar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.filtros-bar .form-select,
.filtros-bar .form-control {
    font-size: .83rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
}

/* ── Tabla ───────────────────────────────────────────────── */
.tabla-seg { font-size: .8rem; }
.tabla-seg thead th {
    background: #f1f5f9;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
    font-weight: 700;
    padding: 8px 10px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 5;
}
.tabla-seg tbody tr { transition: background .1s; }
.tabla-seg tbody tr:hover { background: #f8fafc; }
.tabla-seg tbody tr.editing { background: #fffbeb !important; }
.tabla-seg td {
    padding: 7px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    white-space: nowrap;
}

/* Foto thumb */
.foto-thumb {
    width: 48px; height: 48px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform .15s;
}
.foto-thumb:hover { transform: scale(1.08); }
.foto-placeholder {
    width: 48px; height: 48px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1.5px dashed #cbd5e1;
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: .7rem; cursor: pointer;
}

/* Badge estado */
.badge-estado {
    border-radius: 6px;
    padding: 3px 9px;
    font-size: .72rem;
    font-weight: 600;
}
.estado-APROBADO    { background:#dcfce7;color:#16a34a; }
.estado-PENDIENTE   { background:#fef9c3;color:#a16207; }
.estado-RECHAZADO   { background:#fee2e2;color:#dc2626; }
.estado-EN.PROCESO  { background:#e0f2fe;color:#0369a1; }
.estado-CANCELADO   { background:#f1f5f9;color:#64748b; }

/* Botones acción */
.btn-accion {
    border: none; border-radius: 6px;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .75rem; transition: opacity .15s;
}
.btn-accion:hover { opacity: .8; }
.btn-accion.edit { background:#dbeafe;color:#1d4ed8; }
.btn-accion.save { background:#dcfce7;color:#16a34a; }
.btn-accion.del  { background:#fee2e2;color:#dc2626; }

/* Fila edición */
.edit-row td { background:#fffbeb; padding:8px 6px; }
.edit-row .form-select,
.edit-row .form-control {
    font-size:.78rem;
    border:1.5px solid #fbbf24;
    border-radius:6px;
    padding:4px 7px;
}

.tabla-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: #fff;
}
</style>
@endpush

@section('content')

{{-- Cabecera --}}
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h1 style="font-family:'Poppins',sans-serif;font-size:1.4rem;font-weight:700;color:var(--primary);margin:0">
            <i class="bi bi-graph-up-arrow me-2" style="color:#d97007"></i>{{ __('Seguimiento Nuevos Desarrollos') }}
        </h1>
        <p class="text-muted mb-0" style="font-size:.82rem">
            {{ $registros->total() }} {{ __('registros') }}
            @if(request()->hasAny(['buscar','idProveedor','idComposicion','estado']))
                <span class="badge bg-warning text-dark ms-1" style="font-size:.7rem;border-radius:6px">{{ __('filtrado') }}</span>
            @endif
        </p>
    </div>
    <button onclick="toggleNuevo()" class="btn-guardar" style="font-size:.82rem">
        <i class="bi bi-plus-lg me-1"></i>{{ __('Nuevo Registro') }}
    </button>
</div>

{{-- Alertas --}}
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show py-2 mb-3" style="font-size:.84rem">
    <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show py-2 mb-3" style="font-size:.84rem">
    <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

{{-- Panel nuevo registro --}}
<div id="panelNuevo" class="panel-nuevo mb-3" style="display:none">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <span style="font-weight:700;font-size:.88rem;color:var(--primary)">
            <i class="bi bi-plus-circle me-1"></i>{{ __('Nuevo Registro') }}
        </span>
        <button type="button" onclick="toggleNuevo()" class="btn-close" style="font-size:.7rem"></button>
    </div>
    <form method="POST" action="{{ route('seguimiento-desarrollos.store') }}" enctype="multipart/form-data">
        @csrf
        @include('seguimiento-desarrollos._form', ['registro' => null])
        <div class="mt-3">
            <button type="submit" class="btn-guardar">
                <i class="bi bi-check-lg me-1"></i>{{ __('Crear') }}
            </button>
        </div>
    </form>
</div>

{{-- Filtros --}}
<div class="filtros-bar">
    <form method="GET" action="{{ route('seguimiento-desarrollos.index') }}">
        <div class="row g-2 align-items-end">
            <div class="col-md-3">
                <label style="font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px">{{ __('Buscar') }}</label>
                <div class="d-flex gap-1">
                    <input type="text" name="buscar" class="form-control"
                           placeholder="{{ __('Nombre, comentario, proveedor...') }}"
                           value="{{ request('buscar') }}">
                </div>
            </div>
            <div class="col-md-2">
                <label style="font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px">{{ __('Proveedor') }}</label>
                <select name="idProveedor" class="form-select" onchange="this.form.submit()">
                    <option value="">— {{ __('Todos') }} —</option>
                    @foreach($proveedores as $p)
                    <option value="{{ $p->idProveedor }}" {{ request('idProveedor') == $p->idProveedor ? 'selected':'' }}>
                        {{ $p->Proveedor }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label style="font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px">{{ __('Composición') }}</label>
                <select name="idComposicion" class="form-select" onchange="this.form.submit()">
                    <option value="">— {{ __('Todas') }} —</option>
                    @foreach($composiciones as $c)
                    <option value="{{ $c->IdComposicion }}" {{ request('idComposicion') == $c->IdComposicion ? 'selected':'' }}>
                        {{ $c->Composicion }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label style="font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px">{{ __('Estado') }}</label>
                <select name="estado" class="form-select" onchange="this.form.submit()">
                    <option value="">— {{ __('Todos') }} —</option>
                    @foreach($estados as $e)
                    <option value="{{ $e }}" {{ request('estado') == $e ? 'selected':'' }}>{{ $e }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex gap-1 align-items-end">
                <button type="submit" class="btn btn-sm btn-primary" style="background:var(--primary);border:none;border-radius:8px;padding:7px 14px">
                    <i class="bi bi-search me-1"></i>{{ __('Filtrar') }}
                </button>
                @if(request()->hasAny(['buscar','idProveedor','idComposicion','estado']))
                <a href="{{ route('seguimiento-desarrollos.index') }}"
                   class="btn btn-sm btn-outline-secondary" style="border-radius:8px">
                    <i class="bi bi-x me-1"></i>{{ __('Limpiar') }}
                </a>
                @endif
            </div>
        </div>
    </form>
</div>

{{-- Tabla --}}
<div class="tabla-wrap">
    <table class="table tabla-seg mb-0">
        <thead>
            <tr>
                <th>{{ __('Foto') }}</th>
                <th>{{ __('Nombre') }}</th>
                <th>{{ __('Composición') }}</th>
                <th>{{ __('Calidad') }}</th>
                <th>{{ __('Proveedor') }}</th>
                <th>{{ __('Comentario') }}</th>
                <th>{{ __('Sol. Precio') }}</th>
                <th>{{ __('Rec. Precio') }}</th>
                <th>{{ __('Precio') }}</th>
                <th>{{ __('Sol. Muestra') }}</th>
                <th>{{ __('Rec. Muestra') }}</th>
                <th>{{ __('Estado') }}</th>
                <th>{{ __('Fecha') }}</th>
                <th style="min-width:80px"></th>
            </tr>
        </thead>
        <tbody>
            @forelse($registros as $r)

            {{-- Fila lectura --}}
            <tr id="row_{{ $r->id }}">
                <td>
                    @if($r->Foto)
                        <img src="{{ asset('storage/seguimiento/'.$r->Foto) }}"
                             alt="foto"
                             class="foto-thumb"
                             onclick="verFoto('{{ asset('storage/seguimiento/'.$r->Foto) }}', '{{ addslashes($r->Nombre) }}')"
                             data-bs-toggle="tooltip"
                             data-bs-placement="top"
                             data-bs-title="{{ __('Ver imagen') }}">
                    @else
                        <label for="fotoInput_{{ $r->id }}" class="foto-placeholder" 
                        data-bs-toggle="tooltip"
                        data-bs-placement="top"
                        data-bs-title="{{ __('Subir foto') }}">
                            <i class="bi bi-camera" style="font-size:.9rem"></i>
                        </label>
                        <form method="POST" action="{{ route('seguimiento-desarrollos.foto', $r->id) }}"
                              enctype="multipart/form-data" id="formFoto_{{ $r->id }}">
                            @csrf @method('PUT')
                            <input type="file" name="foto" accept="image/*" class="d-none"
                                   id="fotoInput_{{ $r->id }}"
                                   onchange="document.getElementById('formFoto_{{ $r->id }}').submit()">
                        </form>
                    @endif
                    @if($r->Foto)
                        <form method="POST" action="{{ route('seguimiento-desarrollos.foto', $r->id) }}"
                              enctype="multipart/form-data" id="formFoto_{{ $r->id }}" style="display:inline">
                            @csrf @method('PUT')
                            <input type="file" name="foto" accept="image/*" class="d-none"
                                   id="fotoInput_{{ $r->id }}"
                                   onchange="document.getElementById('formFoto_{{ $r->id }}').submit()">
                        </form>
                        <label for="fotoInput_{{ $r->id }}" class="btn-accion edit mt-1" style="cursor:pointer" 
                        data-bs-toggle="tooltip"
                        data-bs-placement="top"
                        data-bs-title="{{ __('Cambiar foto') }}">
                            <i class="bi bi-camera"></i>
                        </label>
                    @endif
                </td>
                <td class="fw-semibold" style="max-width:160px;overflow:hidden;text-overflow:ellipsis" 
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    data-bs-title="{{ $r->Nombre }}">
                    {{ $r->Nombre }}
                </td>
                <td>{{ $r->composicion->Composicion ?? '—' }}</td>
                <td>{{ $r->calidad->Calidad ?? '—' }}</td>
                <td style="max-width:140px;overflow:hidden;text-overflow:ellipsis" 
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    data-bs-title="{{ $r->proveedor->Proveedor ?? '' }}">
                    {{ $r->proveedor->Proveedor ?? '—' }}
                </td>
                <td style="max-width:160px;overflow:hidden;text-overflow:ellipsis" 
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    data-bs-title="{{ $r->Comentario }}">
                    {{ $r->Comentario ? \Illuminate\Support\Str::limit($r->Comentario, 35) : '—' }}
                </td>
                <td>{{ $r->SolicitudPrecio ? $r->SolicitudPrecio->format('d/m/Y') : '—' }}</td>
                <td>{{ $r->RecepcionPrecio ? $r->RecepcionPrecio->format('d/m/Y') : '—' }}</td>
                <td class="fw-semibold" style="white-space:nowrap">
                    @if($r->Precio !== null)
                        {{ number_format($r->Precio, 2) }}
                        <span style="font-size:.72rem;color:var(--text-muted);margin-left:2px">{{ $r->proveedor->Divisa ?? '' }}</span>
                    @else —
                    @endif
                </td>
                <td>{{ $r->SolicitudMuestra ? $r->SolicitudMuestra->format('d/m/Y') : '—' }}</td>
                <td>{{ $r->RecepcionMuestra ? $r->RecepcionMuestra->format('d/m/Y') : '—' }}</td>
                <td>
                    @if($r->Estado)
                        @php $cls = 'estado-' . str_replace(' ','.', $r->Estado); @endphp
                        <span class="badge-estado {{ $cls }}">{{ $r->Estado }}</span>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>
                <td>{{ $r->Fecha ? $r->Fecha->format('d/m/Y') : '—' }}</td>
                <td>
                    <div class="d-flex gap-1">
                        <button onclick="editRow({{ $r->id }})" class="btn-accion edit" 
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            data-bs-title="{{ __('Editar') }}">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <form method="POST" action="{{ route('seguimiento-desarrollos.destroy', $r->id) }}"
                              style="display:inline"
                              onsubmit="return confirm('{{ __('¿Eliminar este registro?') }}')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn-accion del" ç
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            data-bs-title="{{ __('Eliminar') }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>

            {{-- Fila edición inline --}}
            <tr id="editRow_{{ $r->id }}" class="edit-row" style="display:none">
                <td colspan="14">
                    <form method="POST"
                          action="{{ route('seguimiento-desarrollos.update', $r->id) }}"
                          enctype="multipart/form-data">
                        @csrf @method('PUT')
                        @include('seguimiento-desarrollos._form', ['registro' => $r])
                        <div class="d-flex gap-2 mt-2">
                            <button type="submit" class="btn-guardar" style="font-size:.8rem;background:#d97007">
                                <i class="bi bi-check-lg me-1"></i>{{ __('Guardar') }}
                            </button>
                            <button type="button" onclick="editRow({{ $r->id }})"
                                    class="btn btn-sm btn-outline-secondary" style="border-radius:8px">
                                {{ __('Cancelar') }}
                            </button>
                        </div>
                    </form>
                </td>
            </tr>

            @empty
            <tr>
                <td colspan="15" class="text-center py-5 text-muted">
                    <i class="bi bi-inbox d-block opacity-25 mb-2" style="font-size:2rem"></i>
                    {{ __('No se encontraron registros') }}
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>


{{-- Paginación --}}
@if($registros->hasPages())
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-3">
    <div style="font-size:.82rem;color:var(--text-muted)">
        {{ __('Mostrando') }} {{ $registros->firstItem() }}–{{ $registros->lastItem() }}
        {{ __('de') }} {{ $registros->total() }}
    </div>

    <div class="paginacion-wrap">
        {{ $registros->withQueryString()->links('pagination::bootstrap-5') }}
    </div>
</div>
@endif  


{{-- Modal preview foto --}}
<div id="fotoModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;align-items:center;justify-content:center">
    <div style="position:relative;max-width:90vw;max-height:90vh">
        <button onclick="cerrarFoto()" style="position:absolute;top:-12px;right:-12px;background:#fff;border:none;border-radius:50%;width:30px;height:30px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.3)">
            <i class="bi bi-x"></i>
        </button>
        <img id="fotoModalImg" src="" alt=""
             style="max-width:90vw;max-height:85vh;object-fit:contain;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.4)">
        <div id="fotoModalTitulo" style="text-align:center;color:#fff;font-size:.85rem;margin-top:8px;font-weight:600"></div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function toggleNuevo() {
    var p = document.getElementById('panelNuevo');
    p.style.display = p.style.display === 'none' ? 'block' : 'none';
}
function editRow(id) {
    var row  = document.getElementById('row_' + id);
    var edit = document.getElementById('editRow_' + id);
    var open = edit.style.display !== 'none';
    edit.style.display = open ? 'none' : 'table-row';
    row.classList.toggle('editing', !open);
}
function verFoto(url, titulo) {
    document.getElementById('fotoModalImg').src     = url;
    document.getElementById('fotoModalTitulo').textContent = titulo;
    document.getElementById('fotoModal').style.display = 'flex';
}
function cerrarFoto() {
    document.getElementById('fotoModal').style.display = 'none';
}
document.getElementById('fotoModal').addEventListener('click', function(e) {
    if (e.target === this) cerrarFoto();
});

// ── Auto-fill divisa al cambiar proveedor ─────────────────────────
document.addEventListener('change', function(e) {
    if (!e.target.classList.contains('seg-prov-select')) return;
    var opt    = e.target.options[e.target.selectedIndex];
    var divisa = opt.getAttribute('data-divisa') || '—';
    var target = e.target.getAttribute('data-target');
    var el     = document.getElementById(target);
    if (el) el.textContent = divisa || '—';
});
</script>
@endpush