@extends('layouts.pmar.theme')
@section('title', env('APP_NAME') . ' - ' . __('Carta de Serviços'))

@push('styles')
<link rel="stylesheet" href="{{ asset('pmar/css/servicos/cartaservicos.css') }}">
@endpush

@section('content')
@php
    $categoriaAtiva = $categorias->firstWhere('id_tipo', (int) $filtroTipo);
@endphp

{{-- Breadcrumb --}}
<section>
    <div class="container">
        <div class="row">
            <hr />
            <div class="col-12">
                <x-portal.breadcrumb :items="[
                    \App\Support\PortalBreadcrumb::home(),
                    \App\Support\PortalBreadcrumb::current(__('Carta de Serviços')),
                ]" />
            </div>
        </div>
    </div>
</section>

{{-- Cabeçalho da página --}}
<section class="bg-light py-4">
    <div class="container">
        <div class="row align-items-center g-3">
            <div class="col-12 col-md">
                <div class="d-flex align-items-center gap-3">
                    <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary text-white flex-shrink-0 cs-page-icon"
                        aria-hidden="true">
                        <i class="fa-solid fa-layer-group"></i>
                    </div>
                    <div>
                        <h1 class="h4 fw-bold text-primary mb-0">{{ __('Carta de Serviços') }}</h1>
                        <p class="text-muted small mb-0">
                            {{ __('Serviços municipais oferecidos pela Prefeitura de Angra dos Reis') }}
                            @if ($categoriaAtiva)
                                &mdash; <strong>{{ $categoriaAtiva->tip_descricao }}</strong>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-xl-5">
                <form method="GET" action="{{ route('servicos.index') }}" role="search">
                    @if ((int) $filtroTipo > 0)
                        <input type="hidden" name="t" value="{{ $filtroTipo }}">
                    @endif
                    <div class="input-group shadow-sm rounded-5 overflow-hidden">
                        <label for="busca-servicos" class="visually-hidden">{{ __('Pesquisar serviços') }}</label>
                        <input
                            id="busca-servicos"
                            name="pq"
                            type="search"
                            class="form-control border-0 py-2 px-3"
                            value="{{ $filtroPesquisa }}"
                            placeholder="{{ __('Buscar serviço por nome ou palavra-chave...') }}"
                            autocomplete="off"
                            aria-label="{{ __('Pesquisar serviços') }}"
                        >
                        <button type="submit" class="btn btn-success fw-bold px-4 text-secondary border-0">
                            <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                            <span class="d-none d-sm-inline ms-1">{{ __('Buscar') }}</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

{{-- Conteúdo principal --}}
<section class="py-4 py-md-5">
    <div class="container">

        @if ($servicos === null)

            {{-- === Vista de categorias === --}}
            @if ($categorias->isEmpty())
                <div class="text-center py-5 text-muted">
                    <i class="fa-regular fa-folder-open fa-3x mb-3 d-block" aria-hidden="true"></i>
                    <p>{{ __('As categorias de serviço ainda não foram cadastradas.') }}</p>
                </div>
            @else
                <div class="d-flex align-items-end justify-content-between mb-4 pb-2 border-bottom">
                    <div>
                        <span class="text-uppercase fw-bold small text-success d-block mb-1 cs-results-subtitle">
                            {{ __('Serviços Municipais') }}
                        </span>
                        <h2 class="h4 fw-bold text-primary mb-0">{{ __('Navegue por categoria') }}</h2>
                    </div>
                    <p class="text-muted small mb-0 text-end d-none d-md-block">
                        {{ __('Escolha uma área para ver os serviços disponíveis.') }}
                    </p>
                </div>

                <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-5 g-3" role="list">
                    @foreach ($categorias as $categoria)
                        @php
                            $imgFallback = "temp/cartadeservicos.angra.rj.gov.br/servicos/images/CDS/0.png";
                            $imgPublic   = public_path("temp/cartadeservicos.angra.rj.gov.br/servicos/images/CDS/{$categoria->id_tipo}.jpg");
                            $imgLegacy   = file_exists($imgPublic)
                                ? "temp/cartadeservicos.angra.rj.gov.br/servicos/images/CDS/{$categoria->id_tipo}.jpg"
                                : $imgFallback;
                            $imgSrc = \Illuminate\Support\Str::startsWith((string) $categoria->tip_class, 'storage/')
                                ? $categoria->tip_class
                                : $imgLegacy;
                        @endphp
                        <div class="col" role="listitem">
                            <a
                                href="{{ route('servicos.index', ['t' => $categoria->id_tipo, 'p' => 1]) }}"
                                class="card h-100 border-0 shadow-sm text-decoration-none overflow-hidden categoria-card"
                                aria-label="{{ $categoria->tip_descricao }}"
                            >
                                <div class="ratio ratio-4x3 overflow-hidden bg-light">
                                    <img
                                        src="{{ asset($imgSrc) }}"
                                        alt="{{ $categoria->tip_descricao }}"
                                        class="object-fit-cover w-100 h-100 card-img-zoom"
                                        loading="lazy"
                                    >
                                </div>
                                <div class="card-body p-2 p-sm-3 d-flex flex-column">
                                    <p class="card-title fw-semibold text-primary small mb-2 lh-sm flex-grow-1">
                                        {{ $categoria->tip_descricao }}
                                    </p>
                                    <span class="mt-auto text-success fw-bold cs-cat-card-cta">
                                        {{ __('Ver serviços') }}
                                        <i class="fa-solid fa-arrow-right ms-1" aria-hidden="true"></i>
                                    </span>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            @endif

        @else

            {{-- === Vista de resultados === --}}
            <div class="row g-4">

                {{-- Lista de serviços --}}
                <div class="col-12 col-lg-8">

                    {{-- Barra de resultados --}}
                    <div class="d-flex align-items-center gap-2 mb-3 px-3 py-2 rounded-3 bg-light border small text-muted">
                        <i class="fa-solid fa-magnifying-glass flex-shrink-0 text-success" aria-hidden="true"></i>
                        <span>
                            @if ($filtroPesquisa !== '')
                                {{ __('Resultados para') }}
                                <strong class="text-primary">"{{ $filtroPesquisa }}"</strong>
                                &mdash;
                            @endif
                            <strong>{{ $servicos->total() }}</strong>
                            {{ __('serviço(s) encontrado(s)') }}
                        </span>
                        @if ($filtroPesquisa !== '' || (int) $filtroTipo > 0)
                            <a href="{{ route('servicos.index') }}" class="ms-auto text-danger text-decoration-none small fw-semibold flex-shrink-0">
                                <i class="fa-solid fa-xmark me-1" aria-hidden="true"></i>{{ __('Limpar filtros') }}
                            </a>
                        @endif
                    </div>

                    @if ($servicos->isEmpty())
                        <div class="text-center py-5 text-muted">
                            <i class="fa-regular fa-folder-open fa-3x mb-3 d-block" aria-hidden="true"></i>
                            <p>{{ __('Nenhum serviço encontrado para os filtros informados.') }}</p>
                            <a href="{{ route('servicos.index') }}" class="btn btn-outline-secondary btn-sm mt-2">
                                {{ __('Ver todos os serviços') }}
                            </a>
                        </div>
                    @else
                        <div role="list">
                            @foreach ($servicos as $servico)
                                <article class="card border-0 shadow-sm mb-3 rounded-3 overflow-hidden servico-card" role="listitem">
                                    <div class="card-body p-3 p-md-4">

                                        {{-- Tags de categoria + badge online --}}
                                        <div class="d-flex flex-wrap gap-1 mb-2" aria-label="{{ __('Categorias') }}">
                                            @foreach ($servico->categorias as $cat)
                                                <a
                                                    href="{{ route('servicos.index', ['t' => $cat->id_tipo, 'p' => 1]) }}"
                                                    class="badge rounded-pill text-decoration-none bg-primary bg-opacity-10 text-white fw-semibold cs-badge-cat"
                                                    title="{{ $cat->tip_descricao }}"
                                                >
                                                    @if(\Illuminate\Support\Str::startsWith((string) $cat->tip_class, 'storage/'))
                                                        <img src="{{ asset($cat->tip_class) }}" alt="" width="12" height="12" class="rounded-1 me-1 cs-badge-img">
                                                    @else
                                                        <i class="fa {{ $cat->tip_class ?? 'fa-circle' }} me-1 cs-badge-icon" aria-hidden="true"></i>
                                                    @endif
                                                    {{ $cat->tip_descricao }}
                                                </a>
                                            @endforeach

                                            @if ($servico->tem_solicitacao_online)
                                                <span class="badge rounded-pill bg-success bg-opacity-15 text-white fw-semibold cs-badge-cat">
                                                    <i class="fa-solid fa-phone me-1 cs-badge-icon" aria-hidden="true"></i>
                                                    {{ __('Online') }}
                                                </span>
                                            @endif
                                        </div>

                                        {{-- Título --}}
                                        <h3 class="h6 fw-bold text-primary mb-2 lh-sm">
                                            <a
                                                href="{{ route('servicos.show', ['id' => $servico->id_cds]) }}"
                                                class="text-decoration-none stretched-link text-primary servico-title-link"
                                            >
                                                {{ $servico->cds_titulo }}
                                            </a>
                                        </h3>

                                        {{-- Descrição --}}
                                        <p class="text-muted small mb-0 lh-lg">
                                            {{ \Illuminate\Support\Str::limit(strip_tags((string) $servico->cds_descricao), 300) }}
                                        </p>

                                    </div>
                                    <div class="card-footer bg-transparent border-top border-light d-flex justify-content-end px-3 px-md-4 py-3">
                                    <span class="text-success small fw-bold cs-servico-footer-cta" aria-hidden="true">
                                        {{ __('Ver detalhes') }}
                                        <i class="fa-solid fa-arrow-right ms-1 servico-arrow-icon"></i>
                                    </span>
                                    </div>
                                </article>
                            @endforeach
                        </div>

                        @if ($servicos->total() > 0)
                            <div class="d-flex justify-content-center mt-4">
                                {{ $servicos->links() }}
                            </div>
                        @endif
                    @endif
                </div>

                {{-- Sidebar --}}
                <aside class="col-12 col-lg-4" aria-label="{{ __('Navegação lateral') }}">
                        <div class="sticky-top cs-sidebar-sticky">

                        {{-- Widget: Categorias --}}
                        <nav class="card-slug mb-3" aria-label="{{ __('Categorias de serviço') }}">
                            <h3 class="slug-telefone">{{ __('Categorias') }}</h3>
                            <ul class="list-unstyled mb-0">
                                @forelse ($categorias as $categoria)
                                    <li>
                                        <a
                                            href="{{ route('servicos.index', ['t' => $categoria->id_tipo, 'p' => 1]) }}"
                                            class="link-secretarias {{ (int) $filtroTipo === (int) $categoria->id_tipo ? 'fw-bold text-primary' : 'text-dark' }}"
                                        >
                                            <span>{{ $categoria->tip_descricao }}</span>
                                            <i class="fa-solid fa-angle-right text-primary" aria-hidden="true"></i>
                                        </a>
                                    </li>
                                @empty
                                    <li class="text-muted small">{{ __('Sem categorias disponíveis.') }}</li>
                                @endforelse
                            </ul>
                        </nav>

                        {{-- Widget: Acesso Rápido --}}
                        <div class="card-slug">
                            <h3 class="slug-telefone">{{ __('Acesso Rápido') }}</h3>
                            <ul class="list-unstyled mb-0">
                                <li>
                                    <a href="https://siarm.angra.rj.gov.br/arrecadacao/cobranca/iptu" target="_blank" rel="noopener"
                                        class="link-secretarias text-dark">
                                        <span>IPTU</span>
                                        <i class="fa-solid fa-angle-right text-primary" aria-hidden="true"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.spe.angra.rj.gov.br/senhaweb/login.aspx" target="_blank" rel="noopener"
                                        class="link-secretarias text-dark">
                                        <span>{{ __('Nota Fiscal') }}</span>
                                        <i class="fa-solid fa-angle-right text-primary" aria-hidden="true"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://portaldoservidor.angra.rj.gov.br/" target="_blank" rel="noopener"
                                        class="link-secretarias text-dark">
                                        <span>{{ __('Recursos') }}</span>
                                        <i class="fa-solid fa-angle-right text-primary" aria-hidden="true"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://portaldoservidor.angra.rj.gov.br/nomeacoes-designacoes" target="_blank" rel="noopener"
                                        class="link-secretarias text-dark">
                                        <span>{{ __('Matrícula') }}</span>
                                        <i class="fa-solid fa-angle-right text-primary" aria-hidden="true"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{{ route('sei.index') }}"
                                        class="link-secretarias text-dark">
                                        <span>{{ __('Abertura de Processo') }}</span>
                                        <i class="fa-solid fa-angle-right text-primary" aria-hidden="true"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </aside>

            </div>
        @endif

    </div>
</section>

@endsection