@extends('layouts.pmar.theme')
@section('title', env('APP_NAME') . ' - ' . ($servico->cds_titulo ?? __('Serviço')))

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

@section('content')

{{-- Breadcrumb --}}
<section>
    <div class="container">
        <div class="row">
            <hr />
            <div class="col-12">
                <x-portal.breadcrumb :items="[
                    \App\Support\PortalBreadcrumb::home(),
                    \App\Support\PortalBreadcrumb::cartaServicos(),
                    \App\Support\PortalBreadcrumb::current(\Illuminate\Support\Str::limit($servico->cds_titulo ?? __('Serviço'), 60)),
                ]" />
            </div>
        </div>
    </div>
</section>

{{-- Hero --}}
<section class="bg-light py-4 border-bottom">
    <div class="container">

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

        {{-- Título --}}
        <h1 class="h3 fw-bold text-primary mb-3 lh-sm">{{ $servico->cds_titulo }}</h1>

        {{-- Ações do hero --}}
        <div class="d-flex flex-wrap align-items-center gap-2 mt-1">
            <a href="{{ route('servicos.index') }}"
                class="d-inline-flex align-items-center gap-1 text-muted text-decoration-none fw-semibold cs-back-link">
                <i class="fa-solid fa-chevron-left cs-back-chevron" aria-hidden="true"></i>
                {{ __('Voltar aos Serviços') }}
            </a>

            @if (!empty($servico->cds_solicitacao))
                <span class="text-muted" aria-hidden="true">·</span>
                <a href="{{ $servico->cds_solicitacao }}" target="_blank" rel="noopener noreferrer"
                    class="btn btn-success btn-sm rounded-pill fw-semibold px-3 shadow-sm cs-online-btn">
                    <i class="fa-solid fa-up-right-from-square me-1" aria-hidden="true"></i>
                    {{ __('Acessar Serviço Online') }}
                </a>
            @endif
        </div>

    </div>
</section>

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

            {{-- Coluna principal --}}
            <div class="col-12 col-lg-8">

                {{-- Card de detalhes --}}
                <div class="card border-0 shadow-sm rounded-3 overflow-hidden">

                    {{-- Descrição --}}
                    @if (!empty($servico->cds_descricao))
                        <div class="card-body border-bottom px-4 py-4">
                            <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-file-lines" aria-hidden="true"></i>
                                {{ __('Descrição') }}
                            </p>
                            <div class="text-secondary lh-lg cs-desc-text">
                                {!! nl2br(e($servico->cds_descricao)) !!}
                            </div>
                        </div>
                    @endif

                    {{-- Órgão Responsável + Setor --}}
                    @if (!empty($servico->orgao_responsavel) || !empty($servico->cds_setor))
                        <div class="card-body border-bottom px-4 py-4">
                            @if (!empty($servico->orgao_responsavel))
                                <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                    <i class="fa-solid fa-building" aria-hidden="true"></i>
                                    {{ __('Órgão Responsável') }}
                                </p>
                                <p class="mb-0 @if(!empty($servico->cds_setor)) mb-3 @endif">
                                    <span class="badge bg-light text-primary border fw-semibold px-3 py-2 rounded-3 cs-badge-detail">
                                        {{ $servico->orgao_responsavel }}
                                    </span>
                                </p>
                            @endif
                            @if (!empty($servico->cds_setor))
                                <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                    <i class="fa-solid fa-briefcase" aria-hidden="true"></i>
                                    {{ __('Setor') }}
                                </p>
                                <p class="mb-0">
                                    <span class="badge bg-light text-primary border fw-semibold px-3 py-2 rounded-3 cs-badge-detail">
                                        {{ $servico->cds_setor }}
                                    </span>
                                </p>
                            @endif
                        </div>
                    @endif

                    {{-- Quem pode solicitar --}}
                    @if (!empty($servico->cds_quem))
                        <div class="card-body border-bottom px-4 py-4">
                            <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-user" aria-hidden="true"></i>
                                {{ __('Quem pode solicitar') }}
                            </p>
                            <div class="text-secondary lh-lg cs-body-text">
                                {!! nl2br(e($servico->cds_quem)) !!}
                            </div>
                        </div>
                    @endif

                    {{-- Quando pode solicitar --}}
                    @if (!empty($servico->cds_quando))
                        <div class="card-body border-bottom px-4 py-4">
                            <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-calendar" aria-hidden="true"></i>
                                {{ __('Quando pode solicitar') }}
                            </p>
                            <div class="text-secondary lh-lg cs-body-text">
                                {!! nl2br(e($servico->cds_quando)) !!}
                            </div>
                        </div>
                    @endif

                    {{-- Atendimento --}}
                    @if (!empty($servico->cds_atendimento))
                        <div class="card-body border-bottom px-4 py-4">
                            <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-users" aria-hidden="true"></i>
                                {{ __('Atendimento') }}
                            </p>
                            <div class="text-secondary lh-lg cs-body-text">
                                {!! nl2br(e($servico->cds_atendimento)) !!}
                            </div>
                        </div>
                    @endif

                    {{-- Local(is) de entrada --}}
                    @if (!empty($servico->cds_entrada))
                        <div class="card-body border-bottom px-4 py-4">
                            <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
                                {{ __('Local(is) de entrada') }}
                            </p>
                            <div class="text-secondary lh-lg cs-body-text">
                                {!! nl2br(e($servico->cds_entrada)) !!}
                            </div>
                        </div>
                    @endif

                    {{-- Requisitos e Documentos --}}
                    @if (!empty($servico->cds_requisitos))
                        <div class="card-body border-bottom px-4 py-4">
                            <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-list-check" aria-hidden="true"></i>
                                {{ __('Requisitos e Documentos necessários') }}
                            </p>
                            <div class="text-secondary lh-lg cs-body-text">
                                {!! nl2br(e($servico->cds_requisitos)) !!}
                            </div>
                        </div>
                    @endif

                    {{-- Prazos --}}
                    @if (!empty($servico->cds_prazo) && $servico->cds_prazo !== '0')
                        <div class="card-body border-bottom px-4 py-4">
                            <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-clock" aria-hidden="true"></i>
                                {{ __('Prazos') }}
                            </p>
                            <span class="badge bg-light text-primary border fw-semibold px-3 py-2 rounded-3 cs-badge-detail">
                                {{ $servico->cds_prazo }}
                            </span>
                        </div>
                    @endif

                    {{-- Taxas --}}
                    @if (!empty($servico->cds_taxas))
                        <div class="card-body border-bottom px-4 py-4">
                            <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-dollar-sign" aria-hidden="true"></i>
                                {{ __('Taxas') }}
                            </p>
                            <div class="text-secondary lh-lg cs-body-text">
                                {!! nl2br(e($servico->cds_taxas)) !!}
                            </div>
                        </div>
                    @endif

                    {{-- Legislação --}}
                    @if (!empty($servico->cds_legislacao))
                        <div class="card-body border-bottom px-4 py-4">
                            <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-book" aria-hidden="true"></i>
                                {{ __('Legislação') }}
                            </p>
                            <div class="text-secondary lh-lg cs-body-text">
                                {!! nl2br(e($servico->cds_legislacao)) !!}
                            </div>
                        </div>
                    @endif

                    {{-- Etapas --}}
                    @if (!empty($servico->cds_etapas))
                        <div class="card-body border-bottom px-4 py-4">
                            <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-stairs" aria-hidden="true"></i>
                                {{ __('Etapas') }}
                            </p>
                            <div class="text-secondary lh-lg cs-body-text">
                                {!! nl2br(e($servico->cds_etapas)) !!}
                            </div>
                        </div>
                    @endif

                    {{-- Contato / Telefone / E-mail --}}
                    @if (!empty($servico->cds_contato) || !empty($servico->cds_telefone) || !empty($servico->cds_email))
                        <div class="card-body border-bottom px-4 py-4">
                            <p class="text-uppercase fw-bold mb-3 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-phone" aria-hidden="true"></i>
                                {{ __('Contato') }}
                            </p>
                            <div class="d-flex flex-column gap-2">
                                @if (!empty($servico->cds_contato))
                                    <div class="text-secondary lh-lg cs-body-text">
                                        {!! nl2br(e($servico->cds_contato)) !!}
                                    </div>
                                @endif
                                @if (!empty($servico->cds_telefone))
                                    <span class="badge bg-light text-primary border fw-semibold px-3 py-2 rounded-3 d-inline-flex align-items-center gap-2 cs-badge-detail cs-badge-fit">
                                        <i class="fa-solid fa-phone fa-xs" aria-hidden="true"></i>
                                        {{ $servico->cds_telefone }}
                                    </span>
                                @endif
                                @if (!empty($servico->cds_email))
                                    <a href="mailto:{{ $servico->cds_email }}"
                                        class="badge bg-light text-primary border fw-semibold px-3 py-2 rounded-3 d-inline-flex align-items-center gap-2 text-decoration-none cs-badge-detail cs-badge-fit">
                                        <i class="fa-solid fa-envelope fa-xs" aria-hidden="true"></i>
                                        {{ $servico->cds_email }}
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endif

                    {{-- Observações --}}
                    @if (!empty($servico->cds_obs))
                        <div class="card-body border-bottom px-4 py-4">
                            <p class="text-uppercase fw-bold mb-2 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
                                {{ __('Observações') }}
                            </p>
                            <div class="alert alert-warning border-0 rounded-3 mb-0 lh-lg cs-body-text">
                                {!! nl2br(e($servico->cds_obs)) !!}
                            </div>
                        </div>
                    @endif

                    {{-- Mapa --}}
                    @if ($servico->tem_mapa)
                        <div class="card-body px-4 py-4">
                            <p class="text-uppercase fw-bold mb-3 d-flex align-items-center gap-2 cs-section-label">
                                <i class="fa-solid fa-map" aria-hidden="true"></i>
                                {{ __('Mapa de Localização') }}
                            </p>
                            <div class="ratio ratio-16x9 rounded-3 overflow-hidden">
                                <iframe
                                    src="{{ $servico->cds_mapa }}"
                                    title="{{ __('Mapa do serviço') }}"
                                    loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade">
                                </iframe>
                            </div>
                        </div>
                    @endif

                </div>{{-- /card --}}
            </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') }}">
                        <h2 class="slug-telefone">{{ __('Categorias') }}</h2>
                        <ul class="list-unstyled mb-0">
                            @forelse ($categorias as $categoria)
                                <li>
                                    <a
                                        href="{{ route('servicos.index', ['t' => $categoria->id_tipo]) }}"
                                        class="link-secretarias {{ in_array((int) $categoria->id_tipo, $tipoIdsAtivos, true) ? '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">
                        <h2 class="slug-telefone">{{ __('Acesso Rápido') }}</h2>
                        <ul class="list-unstyled mb-0">
                            <li>
                                <a href="{{ route('servicos.index', ['pq' => 'IPTU']) }}"
                                    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="{{ route('servicos.index', ['pq' => 'Nota Fiscal']) }}"
                                    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="{{ route('servicos.index', ['pq' => 'Recursos']) }}"
                                    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="{{ route('servicos.index', ['pq' => 'Matrícula']) }}"
                                    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('servicos.index', ['pq' => 'Abertura de Processo']) }}"
                                    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>
    </div>
</section>

@endsection