@extends('front.app')
@section('content')
  <link rel="stylesheet" href="http://cdn.quilljs.com/1.3.6/quill.snow.css"/>
<section class="wrapper bg-soft-primary">
  <div class="container pt-16 pb-14 pb-md-0">
    <h1 class="display-5 mx-md-n5 mx-lg-0 mb-3 text-center">{{ trans('module.mayor_title') }}</h1>
    <div class="row gx-lg-8 gx-xl-0 align-items-center">
      <div class="col-md-5 col-lg-5 col-xl-4 offset-xl-1 d-md-flex position-relative align-self-end">
        <figure><img class="rounded-circle imageScaleLeo" src="{{asset('front/img/PRIMAR GARDANI.JPG')}}" alt="primar img"></figure>
      </div>
      <!--/column -->
      <div class="col-md-7 col-lg-6 col-xl-6 col-xxl-5 offset-xl-1">
        <div class="swiper-container dots-start dots-closer mt-md-10 mb-md-15" data-margin="30" data-dots="true">
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <p>{!! trans('module.mayor_biography_1') !!}</p>
                <p>{{ trans('module.mayor_biography_2') }}</p>
                <p>{{ trans('module.mayor_biography_3') }}</p>
                 <a href="https://legislatie.just.ro/Public/DetaliiDocumentAfis/215925" target="_blank">Legislația în vigoare privind Codul Administrativ:</a>
              </div>

              <!--/.swiper-slide -->

              <!--/.swiper-slide -->
            </div>
            <!--/.swiper-wrapper -->
          </div>
          <!-- /.swiper -->
        </div>
        <!-- /.swiper-container -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-md-8 gx-xl-12 gy-6 align-items-center">
      <div class="col-md-8 col-lg-6 order-lg-2 mx-auto">
        <!--<div class="img-mask mask-2"><img src="./assets/img/photos/about30.jpg" alt="" /></div>-->
      </div>
      <!--/column -->
      <div class="col-lg-12">
        <h2 class="display-5 mb-3 text-center">{{ trans('module.mayor_about') }}</h2>
        <table class="table mt-6 tableLeo">
          <thead class="p-md-0">
            <tr>
              <th scope="col" class="primarTh">
              {{ trans('module.mayor_info_1_left') }}</th>
              <th scope=" col">{{ trans('module.mayor_info_1_right') }}</th>
            </tr>
            <tr>
              <th scope="col" class="primarTh">
              {{ trans('module.mayor_info_2_left') }}</th>
              <th scope=" col" class="primarTh"> {{ trans('module.mayor_info_2_right') }}</th>
            </tr>
            <tr>
              <th scope="col" class="primarTh">
              {{ trans('module.mayor_info_3_left') }}</th>
              <th scope=" col" class="primarTh">{{ trans('module.mayor_info_3_right') }}</th>
            </tr>
            <tr>
              <th scope="col" class="primarTh">
              {{ trans('module.mayor_info_4_left') }}</th>
              <th scope=" col"> {{ trans('module.mayor_info_4_right') }}</th>
            </tr>
            <tr>
              <th scope="col" class="primarTh">
              {{ trans('module.mayor_info_5_left') }}</th>
              <th scope=" col" class="primarTh"> {{ trans('module.mayor_info_5_right') }}</th>
            </tr>
            <tr>
              <th scope="col" class="primarTh">
              {{ trans('module.mayor_info_6_left') }}</th>
              <th scope=" col" class="primarTh"> {{ trans('module.mayor_info_6_right') }}</th>
            </tr>
            <tr>
              <th scope="col" class="primarTh">
              {{ trans('module.mayor_info_7_left') }} </th>
              <th scope=" col" class="primarTh"> {{ trans('module.mayor_info_7_right') }}</th>
            </tr>
            <tr>
              <th scope="col" class="primarTh">
              {{ trans('module.mayor_info_8_left') }}</th>
              <th scope=" col" class="primarTh"> <a href="tel:+0760264688"> {{ trans('module.mayor_info_8_right') }}</a></th>
            </tr>
          </thead>
        </table>
        <div class="raport-primar"></div>

      </div>
      <!--/column -->
    </div>
    <!-- /.row -->
    <div class="row gx-md-8 gx-xl-12 mt-10 mt-md-13 ">
      <div class="d-flex flex-column align-items-center justify-content-center shadow p-3 mb-5 bg-body-tertiary rounded tableLeo">
        <div class="d-flex flex-wrap align-items-center justify-content-center gap-1 mb-6">
          <button id="content1Btn" type="button" class="btn btn-secondary" onclick="showContent1()">{{ trans('module.mayor_button_1_text') }}</button>
          <button id="content2Btn" type="button" class="btn btn-danger" onclick="showContent2()">{{ trans('module.mayor_button_2_text') }}</button>
          <button id="content3Btn" type="button" class="btn btn-danger" onclick="showContent3()">Raportul Primarului</button>
        </div>
        <div>
          <div id="content1Primar">
            <p>{{ trans('module.mayor_text_bottom_1') }}
            </p>
            <strong>{{ trans('module.mayor_text_bottom_2') }}
            </strong>
          </div>
          <div id="content2Primar">
            <p>
                    
                    @foreach($files as $file)
                        <div>
                            <!-- Displaying the document name without extension -->
                            <a href="{{ asset('storage/uploads/' . $file) }}">{{ removeExtension($file) }}</a>
                        </div>
                    @endforeach</p>
          </div>

          <div id="content3Primar" style="display: none" >
            <div>
              {!! App\Models\MayorOnHomepage::first()?->full_description !!}
            </div>

          </div>

        </div>
      </div>

    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->
@endsection