@php
    $pageTitle = 'Unidades Regionais';
    $searchTerm = request()->input('search', '');
    $filterState = request()->input('state', '');
    $isArchived = request()->route()->getName() === 'v2.unidade-regional.cms.archived';

    $ufs = [
        'AC','AL','AP','AM','BA','CE','DF','ES','GO',
        'MA','MT','MS','MG','PA','PB','PR','PE','PI',
        'RJ','RN','RS','RO','RR','SC','SP','SE','TO',
    ];
@endphp

@extends('v2-cms::layouts.app', [
    'title'    => $pageTitle . ($isArchived ? ' — Arquivados' : ''),
])

@section('page-breadcrumbs')
    @include('v2-cms::partials.breadcrumb', ['items' => [
        ['label' => 'Conexões'],
        ['label' => 'Unidades Regionais' . ($isArchived ? ' — Arquivados' : '')],
    ]])
@endsection

@section('page-actions')
    <div class="d-flex gap-1">
        @include('v2-cms::partials.action-create', [
            'route' => route('v2.unidade-regional.cms.create'),
            'label' => 'Nova Regional'
        ])
        @if($isArchived)
            <a href="{{ route('v2.unidade-regional.cms.index') }}"
               class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center gap-1">
                <i class="bi bi-arrow-left"></i> Ativas
            </a>
        @else
            <a href="{{ route('v2.unidade-regional.cms.archived') }}"
               class="btn btn-sm btn-outline-warning d-inline-flex align-items-center gap-1">
                <i class="bi bi-archive"></i> Arquivadas
            </a>
        @endif
        <button type="button" class="btn btn-sm btn-outline-info d-inline-flex align-items-center gap-1"
                data-bs-toggle="modal" data-bs-target="#conexaoTagModal">
            <i class="bi bi-tags"></i> Gerenciar Tags
        </button>
        <a href="{{ route('v2.unidade-regional.cms.docs') }}"
           class="btn btn-sm btn-outline-info d-inline-flex align-items-center gap-1"
           title="Documentação da API">
            <i class="bi bi-book"></i> API Docs
        </a>
        <button type="button" class="btn btn-sm btn-outline-info d-inline-flex align-items-center gap-1"
                data-bs-toggle="modal" data-bs-target="#bgImageModal">
            <i class="bi bi-image"></i> Imagem de Fundo
        </button>
    </div>
@endsection

@section('content')

    <p class="text-muted mb-3">
        Gerencie as unidades regionais da SUCESU.
        Total: <strong>{{ $unidades->total() }}</strong> registro(s){{ $isArchived ? ' arquivados' : '' }}.
    </p>

    @component('v2-cms::partials.filter-card', [
        'searchPlaceholder' => 'Buscar por nome, sigla...',
        'searchValue'       => $searchTerm,
        'action'            => $isArchived ? route('v2.unidade-regional.cms.archived') : route('v2.unidade-regional.cms.index'),
        'showDateRange'     => false,
    ])
        <div class="col-md-3">
            <label for="state" class="form-label small fw-medium text-muted mb-1">UF</label>
            <select name="state" class="form-select form-select-sm" aria-label="Filtrar por UF">
                <option value="">Todas as UFs</option>
                @foreach($ufs as $uf)
                    <option value="{{ $uf }}" @if($filterState === $uf) selected @endif>{{ $uf }}</option>
                @endforeach
            </select>
        </div>
    @endcomponent

    @if($unidades->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover align-middle" aria-label="Unidades Regionais">
                <thead class="table-light">
                    <tr>
                        <th scope="col" style="width: 50px;">Logo</th>
                        <th scope="col">Nome</th>
                        <th scope="col" style="width: 70px;">Sigla</th>
                        <th scope="col" style="width: 70px;">UF</th>
                        <th scope="col" style="width: 95px;">Criação</th>
                        <th scope="col" style="width: 70px;">Ativo</th>
                        <th scope="col" style="width: 80px;">API</th>
                        <th scope="col" style="width: 200px;">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($unidades as $unidade)
                        <tr>
                            <td>
                                @if($unidade->logo)
                                    <img alt="{{ $unidade->name }}" src="{{ v2_storage_url($unidade->logo) }}" loading="lazy"
                                         style="width: 36px; height: 36px; object-fit: contain;" class="rounded">
                                @else
                                    <span class="text-muted">
                                        <i class="bi bi-geo-alt" style="font-size: 1.3rem;"></i>
                                    </span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('v2.unidade-regional.cms.edit', ['id' => $unidade->id]) }}"
                                   class="text-decoration-none fw-medium">
                                    {{ $unidade->name }}
                                </a>
                            </td>
                            <td><span class="text-muted small">{{ $unidade->acronym ?? '-' }}</span></td>
                            <td><span class="text-muted small">{{ $unidade->state ?? '-' }}</span></td>
                            <td><small>{{ $unidade->created_at ? $unidade->created_at->format('d/m/Y') : '-' }}</small></td>
                            <td>
                                @include('v2-cms::partials.status-badge', ['active' => $unidade->is_active])
                            </td>
                            <td>
                                {!! $unidade->getTokenStatusBadge() !!}
                            </td>
                            <td>
                                <div class="d-flex gap-1 align-items-center">
                                    <a href="{{ route('v2.unidade-regional.portal.show', ['slug' => $unidade->slug]) }}"
                                       target="_blank" rel="noopener noreferrer"
                                       class="btn btn-sm btn-outline-success" title="Ver no portal">
                                        <i class="bi bi-globe"></i>
                                    </a>
                                    <a href="{{ route('v2.unidade-regional.cms.edit', ['id' => $unidade->id]) }}"
                                       class="btn btn-sm btn-outline-primary" title="Editar">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    @v2can('UnidadeRegional', 'write')
                                    @if(!$isArchived)
                                    <form action="{{ route('v2.unidade-regional.cms.destroy', ['id' => $unidade->id]) }}"
                                          method="POST" class="d-inline mb-0"
                                          onsubmit="return confirm('Deseja arquivar &quot;{{ $unidade->name }}&quot;?')">
                                        {{ csrf_field() }}
                                        {{ method_field('DELETE') }}
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Arquivar">
                                            <i class="bi bi-archive"></i>
                                        </button>
                                    </form>
                                    @else
                                    <form action="{{ route('v2.unidade-regional.cms.restore', ['id' => $unidade->id]) }}"
                                          method="POST" class="d-inline mb-0"
                                          onsubmit="return confirm('Restaurar &quot;{{ $unidade->name }}&quot;?')">
                                        {{ csrf_field() }}
                                        <button type="submit" class="btn btn-sm btn-outline-success" title="Restaurar">
                                            <i class="bi bi-arrow-counterclockwise"></i>
                                        </button>
                                    </form>
                                    @endif
                                    @endv2can
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($unidades->hasPages())
        <div class="d-flex justify-content-center mt-4">
            {{ $unidades->appends(request()->except('page'))->links('v2-cms::partials.pagination') }}
        </div>
        @endif
    @else
        <div class="text-center py-5">
            <i class="bi bi-geo-alt" style="font-size: 3rem; color: var(--bs-secondary-color);" aria-hidden="true"></i>
            <h2 class="h5 mt-3 text-muted">{{ $isArchived ? 'Nenhum registro arquivado' : 'Nenhum registro encontrado' }}</h2>
            @if(!empty($searchTerm) || !empty($filterState))
                <p class="text-muted">Tente ajustar os filtros ou limpar a busca.</p>
                <a href="{{ $isArchived ? route('v2.unidade-regional.cms.archived') : route('v2.unidade-regional.cms.index') }}"
                   class="btn btn-outline-primary">
                    <i class="bi bi-x-circle me-1" aria-hidden="true"></i> Limpar Filtros
                </a>
            @elseif(!$isArchived)
                <p class="text-muted">Comece criando a primeira unidade regional.</p>
                <a href="{{ route('v2.unidade-regional.cms.create') }}" class="btn btn-primary">
                    <i class="bi bi-plus-circle me-1" aria-hidden="true"></i> Criar Primeira
                </a>
            @endif
        </div>
    @endif

{{-- Modal Imagem de Fundo --}}
<div class="modal fade" id="bgImageModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form action="{{ route('v2.unidade-regional.cms.save-bg') }}" method="POST">
            {{ csrf_field() }}
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-image me-1 text-primary"></i> Imagem de Fundo — Regionais</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted small mb-3">Selecione uma imagem para o fundo da página principal de regionais. Recomendado: 1920×400px.</p>
                    @include('v2-service-media::components.media-input', [
                        'name' => 'image_id',
                        'label' => 'Imagem de Fundo',
                        'accept' => 'image/*',
                        'required' => true,
                        'ownerModule' => 'unidade-regional',
                        'currentId' => '',
                        'currentUrl' => '',
                        'currentAlt' => '',
                    ])
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Salvar</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@include('v2-cms::partials.conexao-tags-modal')