@extends('layouts.app')
@section('title', __('Proveedores'))

@push('styles')
<style>
/* ── Layout dos paneles (reutiliza clases de app.css) ──────── */
.panel-lista .lista-header h6 { color: var(--primary); }

/* Campos detalle */
.detalle-label {
    font-size: .77rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 3px;
    display: block;
}
.detalle-value {
    font-size: .88rem;
    padding: 7px 11px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    min-height: 36px;
}
.detalle-value.textarea { min-height: 70px; white-space: pre-wrap; }

/* Subgrid composiciones */
.tabla-comp { font-size: .8rem; }
.tabla-comp thead th {
    background: #f1f5f9;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
    font-weight: 700;
    padding: 7px 10px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.tabla-comp tbody tr { transition: background .1s; }
.tabla-comp tbody tr:hover { background: #f8fafc; }
.tabla-comp tbody tr.editing-comp { background: #fffbeb !important; }
.tabla-comp td {
    padding: 7px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.edit-comp-row td { background: #fffbeb; padding: 6px 6px; }
.edit-comp-row .form-select,
.edit-comp-row .form-control {
    font-size: .78rem;
    border: 1.5px solid #fbbf24;
    border-radius: 6px;
    padding: 4px 7px;
}

/* 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; }

.add-comp-form {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 12px;
}
</style>
@endpush

@section('content')

<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-building me-2" style="color:#0891b2"></i>{{ __('Proveedores') }}
        </h1>
        <p class="text-muted mb-0" style="font-size:.82rem">{{ __('Gestión de proveedores y sus composiciones aprobadas') }}</p>
    </div>
    <button onclick="toggleNuevo()" class="btn-guardar" style="font-size:.82rem">
        <i class="bi bi-plus-lg me-1"></i>{{ __('Nuevo Proveedor') }}
    </button>
</div>

@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 proveedor --}}
<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 Proveedor') }}
        </span>
        <button type="button" onclick="toggleNuevo()" class="btn-close" style="font-size:.7rem"></button>
    </div>
    <form method="POST" action="{{ route('admin.proveedores.store') }}">
        @csrf
        @include('admin.proveedores._form', ['proveedor' => 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>

{{-- Layout dos paneles --}}
<div class="diseno-layout">

    {{-- ══ LISTA ══ --}}
    <div class="panel-lista">
        <div class="lista-header">
            <h6><i class="bi bi-building me-1"></i>{{ __('Proveedores') }}</h6>
            <form method="GET" action="{{ route('admin.proveedores.index') }}" class="search-box" id="searchForm">
                @if($proveedor)
                <input type="hidden" name="id" value="{{ $proveedor->idProveedor }}">
                @endif
                <input type="text" name="buscar" id="searchInput"
                       placeholder="{{ __('Buscar...') }}" value="{{ $buscar }}"
                       oninput="debounceSearch()">
                <button type="button" class="btn-search" onclick="clearSearch()">
                    <i class="bi bi-x"></i>
                </button>
            </form>
        </div>
        <div class="lista-count">
            {{ $proveedores->count() }} {{ __('proveedor') }}{{ $proveedores->count() !== 1 ? 'es' : '' }}
            {{ $buscar ? '· ' . __('filtrado') : '' }}
        </div>
        <div class="lista-scroll">
            @forelse($proveedores as $item)
            <a href="{{ route('admin.proveedores.index', array_filter(['id' => $item->idProveedor, 'buscar' => $buscar])) }}"
               class="lista-item {{ $proveedor && $proveedor->idProveedor == $item->idProveedor ? 'active' : '' }}">
                <span class="item-id">#{{ $item->idProveedor }}</span>
                <span class="text-truncate">{{ $item->Proveedor }}</span>
            </a>
            @empty
            <div class="text-center text-muted py-4" style="font-size:.8rem">
                <i class="bi bi-inbox d-block opacity-25 mb-1" style="font-size:1.5rem"></i>
                {{ __('Sin resultados') }}
            </div>
            @endforelse
        </div>
    </div>

    {{-- ══ DETALLE ══ --}}
    <div class="panel-detalle">
        @if($proveedor)

        {{-- Header --}}
        <div class="detalle-header">
            <div>
                <div style="font-size:.7rem;color:var(--text-muted)">ID #{{ $proveedor->idProveedor }}</div>
                <h4>{{ $proveedor->Proveedor }}</h4>
            </div>
            <div class="d-flex gap-2">
                <button onclick="toggleEdit()" class="btn btn-sm btn-outline-primary" style="border-radius:7px;font-size:.8rem">
                    <i class="bi bi-pencil me-1"></i>{{ __('Editar') }}
                </button>
                <form method="POST" action="{{ route('admin.proveedores.destroy', $proveedor->idProveedor) }}"
                      onsubmit="return confirm('{{ __('¿Eliminar el proveedor') }} «{{ addslashes($proveedor->Proveedor) }}»?\n{{ __('Se eliminarán también sus composiciones.') }}')">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn-peligro">
                        <i class="bi bi-trash me-1"></i>{{ __('Eliminar') }}
                    </button>
                </form>
            </div>
        </div>

        <div class="detalle-body">

            {{-- Formulario editar (oculto) --}}
            <div id="editForm" style="display:none" class="mb-4">
                <div class="seccion-label"><i class="bi bi-pencil-square me-1"></i>{{ __('Editar proveedor') }}</div>
                <form method="POST" action="{{ route('admin.proveedores.update', $proveedor->idProveedor) }}">
                    @csrf @method('PUT')
                    @include('admin.proveedores._form', ['proveedor' => $proveedor])
                    <div class="d-flex gap-2 mt-3">
                        <button type="submit" class="btn-guardar">
                            <i class="bi bi-check-lg me-1"></i>{{ __('Guardar') }}
                        </button>
                        <button type="button" onclick="toggleEdit()"
                                class="btn btn-sm btn-outline-secondary" style="border-radius:8px">
                            {{ __('Cancelar') }}
                        </button>
                    </div>
                </form>
            </div>

            {{-- Vista lectura --}}
            <div id="infoView">
                <div class="seccion-label"><i class="bi bi-info-circle me-1"></i>{{ __('Datos del proveedor') }}</div>
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="detalle-label">{{ __('Proveedor') }}</label>
                        <div class="detalle-value fw-semibold">{{ $proveedor->Proveedor }}</div>
                    </div>
                    <div class="col-md-3">
                        <label class="detalle-label">{{ __('País') }}</label>
                        <div class="detalle-value">{{ $proveedor->pais->Pais ?? '—' }}</div>
                    </div>
                    <div class="col-md-2">
                        <label class="detalle-label">{{ __('Divisa') }}</label>
                        <div class="detalle-value fw-semibold" style="color:var(--primary)">
                            {{ $proveedor->Divisa ?? '—' }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="detalle-label">{{ __('Teléfono') }}</label>
                        <div class="detalle-value">{{ $proveedor->Telefono ?? '—' }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="detalle-label">{{ __('Detalle') }}</label>
                        <div class="detalle-value textarea">{{ $proveedor->Detalle ?? '—' }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="detalle-label">{{ __('Dirección') }}</label>
                        <div class="detalle-value textarea">{{ $proveedor->Direccion ?? '—' }}</div>
                    </div>
                </div>

                {{-- Subgrid composiciones/calidad ── zona amarilla Access --}}
                <div class="seccion-label" style="color:#d97007;border-bottom-color:#fde68a">
                    <i class="bi bi-table me-1"></i>{{ __('Composiciones y Calidades aprobadas') }}
                    <span class="badge bg-secondary ms-1" style="font-size:.68rem;border-radius:6px">
                        {{ $proveedor->composicionesCalidad->count() }}
                    </span>
                </div>

                @if($proveedor->composicionesCalidad->isNotEmpty())
                <div class="table-responsive mb-3">
                    <table class="table tabla-comp mb-0">
                        <thead>
                            <tr>
                                <th>{{ __('Composición') }}</th>
                                <th>{{ __('Calidad') }}</th>
                                <th class="text-center">{{ __('Aprobado') }}</th>
                                <th>{{ __('Comentario') }}</th>
                                <th style="width:80px"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($proveedor->composicionesCalidad as $c)
                            {{-- Fila lectura --}}
                            <tr id="rowComp_{{ $c->Id }}">
                                <td class="fw-semibold">{{ $c->composicion->Composicion ?? '—' }}</td>
                                <td>{{ $c->calidad->Calidad ?? '—' }}</td>
                                <td class="text-center">
                                    @if($c->Aprobado)
                                    <i class="bi bi-check-circle-fill text-success" style="font-size:.9rem"></i>
                                    @else
                                    <i class="bi bi-circle text-muted" style="font-size:.9rem"></i>
                                    @endif
                                </td>
                                <td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    data-bs-title="{{ $c->Comentario }}">
                                    {{ $c->Comentario ?? '—' }}
                                </td>
                                <td>
                                    <div class="d-flex gap-1">
                                        <button type="button"
                                                onclick="editComp({{ $c->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('admin.proveedores.composicion.destroy', ['id' => $proveedor->idProveedor, 'compId' => $c->Id]) }}"
                                            style="display:inline"
                                            onsubmit="return confirm('{{ __('¿Eliminar esta composición?') }}')">
                                            @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="editComp_{{ $c->Id }}" class="edit-comp-row" style="display:none">
                                <td colspan="5">
                                    <form method="POST"
                                        action="{{ route('admin.proveedores.composicion.update', ['id' => $proveedor->idProveedor, 'compId' => $c->Id]) }}">
                                        @csrf
                                        @method('PUT')

                                        <div class="d-flex flex-wrap gap-2 align-items-end">
                                            <div style="min-width:200px">
                                                <div style="font-size:.7rem;color:var(--text-muted);margin-bottom:2px">{{ __('Composición') }} *</div>
                                                <select name="idComposicion" class="form-select form-select-sm" required>
                                                    <option value="">—</option>
                                                    @foreach($composiciones as $comp)
                                                    <option value="{{ $comp->IdComposicion }}"
                                                        {{ $c->idComposicion == $comp->IdComposicion ? 'selected' : '' }}>
                                                        {{ $comp->Composicion }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div style="min-width:150px">
                                                <div style="font-size:.7rem;color:var(--text-muted);margin-bottom:2px">{{ __('Calidad') }}</div>
                                                <select name="idCalidad" class="form-select form-select-sm">
                                                    <option value="">—</option>
                                                    @foreach($calidades as $cal)
                                                    <option value="{{ $cal->idCalidad }}"
                                                        {{ $c->idCalidad == $cal->idCalidad ? 'selected' : '' }}>
                                                        {{ $cal->Calidad }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div style="min-width:200px">
                                                <div style="font-size:.7rem;color:var(--text-muted);margin-bottom:2px">{{ __('Comentario') }}</div>
                                                <input type="text" name="Comentario" class="form-control form-control-sm"
                                                    value="{{ $c->Comentario }}">
                                            </div>

                                            <div class="form-check mb-1">
                                                <input class="form-check-input" type="checkbox" name="Aprobado" value="1"
                                                    {{ $c->Aprobado ? 'checked' : '' }}>
                                                <label class="form-check-label" style="font-size:.78rem">{{ __('Aprobado') }}</label>
                                            </div>

                                            <button type="submit" class="btn-accion save" data-bs-toggle="tooltip"
                                                data-bs-placement="top"
                                                data-bs-title="{{ __('Guardar') }}">
                                                <i class="bi bi-check-lg"></i>
                                            </button>

                                            <button type="button"
                                                    onclick="editComp({{ $c->Id }})"
                                                    class="btn-accion"
                                                    style="background:#f1f5f9;color:#64748b">
                                                <i class="bi bi-x"></i>
                                            </button>
                                        </div>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center text-muted py-3 mb-3" style="font-size:.84rem">
                    <i class="bi bi-table d-block opacity-25 mb-1" style="font-size:1.8rem"></i>
                    {{ __('Sin composiciones registradas') }}
                </div>
                @endif

                {{-- Añadir composición --}}
                <div class="add-comp-form">
                    <div class="seccion-label mb-2">
                        <i class="bi bi-plus-circle me-1"></i>{{ __('Añadir composición / calidad') }}
                    </div>
                    <form method="POST"
                          action="{{ route('admin.proveedores.composicion.store', $proveedor->idProveedor) }}">
                        @csrf
                        <div class="d-flex flex-wrap gap-2 align-items-end">
                            <div style="min-width:220px">
                                <label style="font-size:.77rem;font-weight:600;display:block;margin-bottom:3px">
                                    {{ __('Composición') }} *
                                </label>
                                <select name="idComposicion" class="form-select form-select-sm" required
                                        style="border:1.5px solid var(--border);border-radius:8px">
                                    <option value="">— {{ __('Seleccionar') }} —</option>
                                    @foreach($composiciones as $comp)
                                    <option value="{{ $comp->IdComposicion }}">{{ $comp->Composicion }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div style="min-width:160px">
                                <label style="font-size:.77rem;font-weight:600;display:block;margin-bottom:3px">
                                    {{ __('Calidad') }}
                                </label>
                                <select name="idCalidad" class="form-select form-select-sm"
                                        style="border:1.5px solid var(--border);border-radius:8px">
                                    <option value="">—</option>
                                    @foreach($calidades as $cal)
                                    <option value="{{ $cal->idCalidad }}">{{ $cal->Calidad }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div style="min-width:220px">
                                <label style="font-size:.77rem;font-weight:600;display:block;margin-bottom:3px">
                                    {{ __('Comentario') }}
                                </label>
                                <input type="text" name="Comentario" class="form-control form-control-sm"
                                       style="border:1.5px solid var(--border);border-radius:8px">
                            </div>
                            <div class="form-check mb-1">
                                <input class="form-check-input" type="checkbox" name="Aprobado" value="1"
                                       id="chkAprobado" checked>
                                <label class="form-check-label" for="chkAprobado" style="font-size:.78rem">
                                    {{ __('Aprobado') }}
                                </label>
                            </div>
                            <button type="submit" class="btn-guardar" style="font-size:.82rem">
                                <i class="bi bi-plus-lg me-1"></i>{{ __('Añadir') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>{{-- /infoView --}}
        </div>{{-- /detalle-body --}}

        @else
        <div class="d-flex flex-column align-items-center justify-content-center h-100 text-muted" style="gap:8px">
            <i class="bi bi-building" style="font-size:3rem;opacity:.2"></i>
            <p style="font-size:.88rem">{{ __('Selecciona un proveedor de la lista') }}</p>
        </div>
        @endif
    </div>{{-- /panel-detalle --}}
</div>{{-- /diseno-layout --}}

@endsection

@push('scripts')
<script>
function toggleNuevo() {
    var p = document.getElementById('panelNuevo');
    p.style.display = p.style.display === 'none' ? 'block' : 'none';
}
function toggleEdit() {
    var e = document.getElementById('editForm');
    var v = document.getElementById('infoView');
    var open = e.style.display !== 'none';
    e.style.display = open ? 'none' : 'block';
    v.style.display = open ? 'block' : 'none';
}
function editComp(id) {
  
    var row  = document.getElementById('rowComp_' + id);
    var edit = document.getElementById('editComp_' + id);

    if (!row || !edit) {
        console.log('No se encontró la fila para editar:', id, row, edit);
        return;
    }

    var open = window.getComputedStyle(edit).display !== 'none';

    edit.style.display = open ? 'none' : 'table-row';
    row.classList.toggle('editing-comp', !open);
}
document.addEventListener('DOMContentLoaded', function () {
    var a = document.querySelector('.lista-item.active');
    if (a) a.scrollIntoView({ block: 'nearest' });
});
var st;
function debounceSearch() {
    clearTimeout(st);
    st = setTimeout(function () { document.getElementById('searchForm').submit(); }, 420);
}
function clearSearch() {
    document.getElementById('searchInput').value = '';
    document.getElementById('searchForm').submit();
}
</script>
@endpush