@extends('layouts.app')
@section('title', __('Códigos Arancelarios'))

@push('styles')
<style>
.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-arancel{font-size:.82rem}
.tabla-arancel thead th{background:#f1f5f9;font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);font-weight:700;padding:8px 12px;border-bottom:2px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:5}
.tabla-arancel tbody tr{transition:background .1s}
.tabla-arancel tbody tr:hover{background:#f8fafc}
.tabla-arancel tbody tr.editing{background:#fffbeb!important}
.tabla-arancel td{padding:8px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.edit-row td{background:#fffbeb;padding:8px 8px}
.edit-row .form-select,.edit-row .form-control{font-size:.8rem;border:1.5px solid #fbbf24;border-radius:6px;padding:5px 8px}
.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.del{background:#fee2e2;color:#dc2626}
.tabla-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#fff}
.arancel-pct{font-weight:700;color:var(--primary)}
</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-globe-americas me-2" style="color:#4f46e5"></i>{{ __('Códigos Arancelarios') }}
        </h1>
        <p class="text-muted mb-0" style="font-size:.82rem">
            {{ $registros->total() }} {{ __('registros') }}
            @if(request()->hasAny(['idMuestra','IdPais','buscar']))
                <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>

@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

{{-- Panel nuevo --}}
<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 Código Arancelario') }}
        </span>
        <button type="button" onclick="toggleNuevo()" class="btn-close" style="font-size:.7rem"></button>
    </div>
    <form method="POST" action="{{ route('codigos-arancelarios.store') }}">
        @csrf
        @include('codigos-arancelarios._form', ['reg' => 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('codigos-arancelarios.index') }}">
        <div class="row g-2 align-items-end">
            <div class="col-md-4">
                <label style="font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px">{{ __('Muestra') }}</label>
                <select name="idMuestra" class="form-select" onchange="this.form.submit()">
                    <option value="">— {{ __('Todas') }} —</option>
                    @foreach($muestras as $m)
                    <option value="{{ $m->Id }}" {{ request('idMuestra') == $m->Id ? 'selected':'' }}>{{ $m->Nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label style="font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px">{{ __('País') }}</label>
                <select name="IdPais" class="form-select" onchange="this.form.submit()">
                    <option value="">— {{ __('Todos') }} —</option>
                    @foreach($paises as $p)
                    <option value="{{ $p->IdPais }}" {{ request('IdPais') == $p->IdPais ? 'selected':'' }}>{{ $p->Pais }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4 d-flex gap-1 align-items-end">
                <input type="text" name="buscar" class="form-control"
                       placeholder="{{ __('Muestra, país, HS Code...') }}"
                       value="{{ request('buscar') }}">
                <button type="submit" class="btn btn-sm btn-primary" style="background:var(--primary);border:none;border-radius:8px;padding:7px 12px">
                    <i class="bi bi-search"></i>
                </button>
                @if(request()->hasAny(['idMuestra','IdPais','buscar']))
                <a href="{{ route('codigos-arancelarios.index') }}" class="btn btn-sm btn-outline-secondary" style="border-radius:8px">
                    <i class="bi bi-x"></i>
                </a>
                @endif
            </div>
        </div>
    </form>
</div>

{{-- Tabla --}}
<div class="tabla-wrap">
    <table class="table tabla-arancel mb-0">
        <thead>
            <tr>
                <th style="width:60px">{{ __('id') }}</th>
                <th>{{ __('Muestra') }}</th>
                <th>{{ __('País') }}</th>
                <th>{{ __('HS Code') }}</th>
                <th>{{ __('Arancel') }}</th>
                <th style="min-width:80px"></th>
            </tr>
        </thead>
        <tbody>
            @forelse($registros as $r)
            {{-- Fila lectura --}}
            <tr id="row_{{ $r->idCodigoArancelario }}">
                <td style="color:var(--text-muted);font-size:.75rem">{{ $r->idCodigoArancelario }}</td>
                <td class="fw-semibold">{{ $r->muestra->Nombre ?? '—' }}</td>
                <td>
                    @if($r->pais)
                    <span class="d-inline-flex align-items-center gap-1">
                        <i class="bi bi-geo-alt-fill" style="font-size:.7rem;color:#4f46e5"></i>
                        {{ $r->pais->Pais }}
                    </span>
                    @else — @endif
                </td>
                <td>
                    <span style="font-family:'Courier New',monospace;background:#f1f5f9;border-radius:5px;padding:2px 8px;font-size:.8rem">
                        {{ $r->HSCode ?? 0 }}
                    </span>
                </td>
                <td>
                    <span class="arancel-pct">{{ number_format($r->Arancel ?? 0, 2) }}%</span>
                </td>
                <td>
                    <div class="d-flex gap-1">
                        <button onclick="editRow({{ $r->idCodigoArancelario }})" 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('codigos-arancelarios.destroy', $r->idCodigoArancelario) }}"
                              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->idCodigoArancelario }}" class="edit-row" style="display:none">
                <td colspan="6">
                    <form method="POST" action="{{ route('codigos-arancelarios.update', $r->idCodigoArancelario) }}">
                        @csrf @method('PUT')
                        @include('codigos-arancelarios._form', ['reg' => $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->idCodigoArancelario }})"
                                    class="btn btn-sm btn-outline-secondary" style="border-radius:8px">
                                {{ __('Cancelar') }}
                            </button>
                        </div>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" 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  


@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);
}
</script>
@endpush