@php
$title = __('services.list_title');
$categoriaSelecionada = request('categoria_servico_id');
$moedaSelecionada = request('moeda', 'BRL');
$somenteVisualizacao = in_array(strtoupper((string) $moedaSelecionada), ['USD', 'EUR'], true);
$labelTodosTiposServico = __('services.label_all_types_service');

if (!$categoriaSelecionada && isset($tiposServico) && request('tipo_servico_id')) {
    $tipoSelecionado = $tiposServico->firstWhere('id', (int) request('tipo_servico_id'));
    $categoriaSelecionada = $tipoSelecionado ? $tipoSelecionado->categoria_servico_id : '';
}
@endphp

<div class="container-fluid pt-1" style="margin-top: -32px;">
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: -18px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">{{ __('services.breadcrumb_home') }}</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">{{ __('services.breadcrumb_services') }}</li>
        </ol>
    </nav>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-tools me-2 text-primary"></i>{{ __('services.breadcrumb_services') }}
            </h1>
            <span class="text-muted small">{{ __('services.list_title') }}</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-primary" onclick="carregarConteudo(`{{ route('cadastro.servicos.novo') }}?moeda={{ urlencode($moedaSelecionada) }}`)">
                <i class="bi bi-plus-circle me-2"></i>{{ __('services.button_new') }}
            </button>
        </div>
    </div>
    <div class="card shadow border-0">
        <div class="card-body">
            <div class="filter-section mb-4" data-base-url="{{ route('cadastro.servicos') }}" data-initial-category="{{ request('categoria_servico_id', '') }}" data-initial-type="{{ request('tipo_servico_id', '') }}">
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <fieldset class="h-100 border rounded-3 px-3 px-md-4 pb-3 pt-2 bg-light-subtle" style="border-color: #d7e3f4 !important;">
                            <legend class="float-none w-auto px-2 mb-2 fs-6 fw-semibold text-primary">{{ __('services.label_service_category') }}</legend>
                            <p class="text-muted small mb-3">{{ __('services.label_select_category_hint') }}</p>
                            <div class="d-flex flex-wrap gap-3">
                                @if(isset($categoriasServico))
                                    @foreach($categoriasServico as $index => $categoria)
                                    @php
                                        $labelCategoria = $categoria->nome;
                                        $categoriaTraduzida = __('services.service_categories_by_id.' . $categoria->id);
                                        if ($categoriaTraduzida !== 'services.service_categories_by_id.' . $categoria->id) {
                                            $labelCategoria = $categoriaTraduzida;
                                        }
                                    @endphp
                                    <div class="form-check form-check-inline mb-0">
                                        <input class="form-check-input" type="radio" name="categoria_servico_ui_servicos" id="categoriaServicoListagem{{ $categoria->id }}" value="{{ $categoria->id }}" {{ (string) $categoriaSelecionada === (string) $categoria->id ? 'checked' : ($index === 0 && !$categoriaSelecionada ? 'checked' : '') }}>
                                        <label class="form-check-label" for="categoriaServicoListagem{{ $categoria->id }}">{{ $labelCategoria }}</label>
                                    </div>
                                    @endforeach
                                @endif
                            </div>
                        </fieldset>
                    </div>
                    <div class="col-md-6">
                        <fieldset class="h-100 border rounded-3 px-3 px-md-4 pb-3 pt-2 bg-light-subtle" style="border-color: #d7e3f4 !important;">
                            <legend class="float-none w-auto px-2 mb-2 fs-6 fw-semibold text-primary">{{ __('services.label_currency') }}</legend>
                            <p class="text-muted small mb-3">{{ __('services.label_select_currency_hint') }}</p>
                            <div class="d-flex flex-wrap gap-3">
                                @foreach($moedas as $codigoMoeda => $labelMoeda)
                                <div class="form-check form-check-inline mb-0">
                                    <input class="form-check-input" type="radio" name="moeda_ui_servicos" id="moedaServicoListagem{{ $codigoMoeda }}" value="{{ $codigoMoeda }}" {{ $moedaSelecionada === $codigoMoeda ? 'checked' : '' }}>
                                    <label class="form-check-label" for="moedaServicoListagem{{ $codigoMoeda }}">{{ $codigoMoeda }}</label>
                                </div>
                                @endforeach
                            </div>
                        </fieldset>
                    </div>
                </div>

                <div class="row g-2 align-items-end">
                    <div class="col-md-2">
                        <select class="form-select" id="filtroStatusServicos" name="status" onchange="aplicarFiltroServicos('{{ route('cadastro.servicos') }}')">
                            <option value="todos" {{ request('status', 'todos') === 'todos' ? 'selected' : '' }}>{{ __('services.label_all') }}</option>
                            <option value="ativo" {{ request('status') === 'ativo' ? 'selected' : '' }}>{{ __('services.label_active') }}</option>
                            <option value="inativo" {{ request('status') === 'inativo' ? 'selected' : '' }}>{{ __('services.label_inactive') }}</option>
                        </select>
                    </div>                    
                    <div class="col-md-7">
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="text" class="form-control" id="filtroBuscaServicos" name="busca" placeholder="{{ __('services.label_search_service') }}" value="{{ request('busca') }}" onkeydown="aplicarFiltroServicosPorEnter(event, '{{ route('cadastro.servicos') }}')">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <select class="form-select" id="filtroTipoServicoServicos" name="tipo_servico_id" onchange="aplicarFiltroServicos('{{ route('cadastro.servicos') }}')">
                            <option value="">{{ $labelTodosTiposServico }}</option>
                            @if(isset($tiposServico))
                                @foreach($tiposServico as $tipo)
                                <option value="{{ $tipo->id }}" data-categoria-id="{{ $tipo->categoria_servico_id }}" {{ (string) request('tipo_servico_id') === (string) $tipo->id ? 'selected' : '' }}>{{ $tipo->nome_exibicao ?? $tipo->nome }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="col-md-1 d-grid">
                        <button type="button" class="btn btn-outline-primary" onclick="aplicarFiltroServicos('{{ route('cadastro.servicos') }}')">
                            <i class="bi bi-funnel me-1"></i>{{ __('services.button_filter') }}
                        </button>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-hover table-fixed-column" id="tabelaServicos">
                    <thead>
                        <tr>
                            <th class="sortable">{{ __('services.label_code') }}</th>
                            <th class="sortable">{{ __('services.label_name') }}</th>
                            <th class="sortable">{{ __('services.label_service_type') }}</th>
                            <th class="sortable">{{ __('services.label_currency') }}</th>
                            <th class="sortable">{{ __('services.label_unit') }}</th>
                            <th class="sortable">{{ __('services.label_sale_value') }}</th>
                            <th class="sortable">{{ __('services.label_cost_value') }}</th>
                            <th class="sortable">{{ __('services.label_status') }}</th>
                            <th>{{ __('services.label_actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(isset($servicos) && $servicos->count() > 0)
                            @foreach($servicos as $servico)
                                <tr>
                                    <td>{{ $servico->codigo }}</td>
                                    <td>{{ $servico->nome_exibicao ?? $servico->nome }}</td>
                                    <td>{{ $servico->tipo_servico_nome_exibicao ?? ($servico->tipoServico ? ($servico->tipoServico->nome_exibicao ?? $servico->tipoServico->nome) : '-') }}</td>
                                    <td>{{ $servico->moeda_exibicao ?? $servico->moeda ?? '-' }}</td>
                                    <td>{{ ucfirst($servico->unidade) }}</td>
                                    <td>{{ $servico->valor_venda_formatado_exibicao ?? $servico->valor_venda_formatado ?? '-' }}</td>
                                    <td>{{ $servico->valor_custo_formatado_exibicao ?? $servico->valor_custo_formatado ?? '-' }}</td>
                                    <td>
                                        @if($servico->status === 'ativo')
                                            <span class="badge bg-success">{{ __('services.label_active') }}</span>
                                        @else
                                            <span class="badge bg-danger">{{ __('services.label_inactive') }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="#" onclick="carregarConteudo(`{{ route('cadastro.servicos.visualizar', $servico->id) }}?moeda={{ urlencode($moedaSelecionada) }}`)" class="text-decoration-none"><i class="bi bi-eye icon-action view" data-bs-toggle="tooltip" title="Visualizar"></i></a>
                                        @if(!$somenteVisualizacao)
                                        <a href="#" onclick="carregarConteudo(`{{ route('cadastro.servicos.editar', $servico->id) }}?moeda={{ urlencode($moedaSelecionada) }}`)" class="text-decoration-none"><i class="bi bi-pencil-square icon-action edit" data-bs-toggle="tooltip" title="Editar"></i></a>
                                        <a href="#" onclick="excluir(`{{ route('servicos.destroy', $servico->id) }}`)" class="text-decoration-none"><i class="bi bi-trash icon-action delete" data-bs-toggle="tooltip" title="Excluir"></i></a>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="9" class="text-center">
                                    @if(isset($error))
                                        <span class="text-danger">{{ $error }}</span>
                                    @else
                                        <div class="py-4">
                                            <div class="mb-2"><i class="bi bi-tools" style="font-size: 3rem; color: #6c757d;"></i></div>
                                            <h4 class="mb-2">Nenhum serviço encontrado</h4>
                                            <p class="text-muted mb-3">
                                                {{ request('busca') || (request('status') && request('status') !== 'todos') || request('categoria_servico_id') || request('tipo_servico_id') || request('moeda')
                                                    ? 'Tente ajustar os filtros para localizar registros.'
                                                    : 'Comece cadastrando seu primeiro serviço' }}
                                            </p>
                                            <button type="button" class="btn btn-primary" onclick="carregarConteudo(`{{ route('cadastro.servicos.novo') }}?moeda={{ urlencode($moedaSelecionada) }}`)">
                                                <i class="bi bi-plus-circle me-2"></i>Novo Serviço
                                            </button>
                                        </div>
                                    @endif
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>

            <x-pagination :items="$servicos" :baseUrl="route('cadastro.servicos')" />
        </div>
    </div>
</div>