@extends('theme')
@section('title', 'Decretos e Leis - Parque Tecnológico do Mar')
@section('content')

  @php
    $decretosLeis = $decretosLeis ?? [];
  @endphp
  <div class="page-wrapper overflow-hidden">
    <section class="banner-section banner-inner-section position-relative d-flex align-items-center"
      style="background: url(../assets/images/decretos-e-leis.png) center/cover no-repeat; min-height: 80vh;">
      <div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(0,0,0,0.45);"></div>
      <div class="container">
        <div class="d-flex flex-column gap-4 position-relative z-1" style="padding-top: 30vh;">
          <div class="row align-items-center">
            <div class="col-xl-4">
              <div class="d-flex align-items-center gap-4" data-aos="fade-up" data-aos-delay="100"
                data-aos-duration="1000">
                <img src="../assets/images/svgs/primary-leaf.svg" alt="" class="img-fluid animate-spin">
                <p class="mb-0 text-white fs-5 text-opacity-70">
                  Conheça toda a <span class="text-primary">legislação</span> que fundamenta e rege o Parque Tecnológico
                  do Mar.
                </p>
              </div>
            </div>
          </div>
          <div class="d-flex align-items-end gap-3" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
            <h1 class="mb-0 fs-16 text-white lh-1">Decretos e Lei</h1>
            <a href="javascript:void(0)" class="p-1 ps-7 bg-primary rounded-pill">
              <span class="bg-white round-52 rounded-circle d-flex align-items-center justify-content-center">
                <iconify-icon icon="lucide:arrow-up-right" class="fs-8 text-dark"></iconify-icon>
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>

    <section class="decretos-leis-list py-5 py-lg-11 py-xl-10 position-relative"
      style="background: linear-gradient(135deg, #f4f7fb 0%, #e9f1ff 100%);">

      <div class="container">

        <div class="d-flex flex-column gap-8 pb-5"> <a href="{{ route('index') }}#decretos-leis"
            class="btn py-2 ps-3 pe-5 bg-site" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
            <span class="btn-text pe-1">Voltar</span>
            <iconify-icon icon="lucide:arrow-up-right"
              class="btn-icon bg-white text-dark round-36 rounded-circle hstack justify-content-center fs-5 shadow-sm"></iconify-icon>
          </a>
        </div>

        @if(count($decretosLeis) > 0)
          <div class="row g-4">

            @foreach($decretosLeis as $index => $decretoLei)
              <div class="col-md-6 col-lg-4">

                <div class="card decreto-card h-100 border-0 rounded-4 overflow-hidden position-relative">

                  <div class="card-body d-flex flex-column gap-4 p-5">

                    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">

                      @if(!empty($decretoLei['numero_lei']))
                        <span class="badge-modern">
                          {{ $decretoLei['numero_lei'] }}
                        </span>
                      @endif

                      @if(!empty($decretoLei['data_publicacao']))
                        <div class="date-info">
                          <iconify-icon icon="lucide:calendar"></iconify-icon>
                          <span>
                            {{ \Carbon\Carbon::parse($decretoLei['data_publicacao'])->format('d/m/Y') }}
                          </span>
                        </div>
                      @endif

                    </div>

                    <h5 class="card-title fw-bold decreto-title">
                      {{ $decretoLei['titulo'] ?? '' }}
                    </h5>

                    <p class="card-text decreto-description flex-grow-1">
                      {{ $decretoLei['descricao_resumo'] ?? '' }}
                    </p>

                    @if(!empty($decretoLei['arquivo_url']))
                      <a href="{{ $decretoLei['arquivo_url'] }}" target="_blank" class="btn btn-download mt-auto">
                        <iconify-icon icon="lucide:file-text" class="me-2"></iconify-icon>
                        Visualizar Documento
                      </a>
                    @endif

                  </div>
                </div>

              </div>
            @endforeach

          </div>
        @else
          <div class="alert alert-light border shadow-sm rounded-4 p-4 text-center">
            <strong>Nenhum decreto ou lei disponível no momento.</strong>
          </div>
        @endif

      </div>
    </section>

  </div>
@endsection