@extends('front.app')
@section('content')
<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.viceprimar_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/viceprimar gardani.jpg')}}" alt="viceprimar 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.viceprimar_biography_1') !!}</p>
                                <p>{{ trans('module.viceprimar_biography_2') }}</p>
                                <p>{{ trans('module.viceprimar_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.viceprimar_about') }}</h2>
                <table class="table mt-6 tableLeo">
                    <thead class="p-md-0">
                        <tr>
                            <th scope="col" class="primarTh">
                            {{ trans('module.viceprimar_info_1_left') }}</th>
                            <th scope=" col"> {{ trans('module.viceprimar_info_1_right') }}</th>
                        </tr>
                        <tr>
                            <th scope="col" class="primarTh">
                            {{ trans('module.viceprimar_info_2_left') }}</th>
                            <th scope=" col" class="primarTh"> {{ trans('module.viceprimar_info_2_right') }}</th>
                        </tr>
                        <tr>
                            <th scope="col" class="primarTh">
                            {{ trans('module.viceprimar_info_3_left') }}</th>
                            <th scope=" col" class="primarTh"> {{ trans('module.viceprimar_info_3_right') }}</th>
                        </tr>
                        <tr>
                            <th scope="col" class="primarTh">
                            {{ trans('module.viceprimar_info_4_left') }}</th>
                            <th scope=" col" class="primarTh"> {{ trans('module.viceprimar_ino_4_right') }}</th>
                        </tr>
                        <tr>
                            <th scope="col" class="primarTh">
                            {{ trans('module.viceprimar_info_5_left') }}</th>
                            <th scope=" col" class="primarTh"> {{ trans('module.viceprimar_info_5_right') }}</th>
                        </tr>
                        <tr>
                            <th scope="col" class="primarTh">
                            {{ trans('module.viceprimar_info_6_left') }}</th>
                            <th scope=" col" class="primarTh"> {{ trans('module.viceprimar_info_6_right') }}</th>
                        </tr>
                        <tr>
                            <th scope="col" class="primarTh">
                            {{ trans('module.viceprimar_info_7_left') }} </th>
                            <th scope=" col" class="primarTh"> {{ trans('module.viceprimar_info_7_right') }}</th>
                        </tr>
                        <tr>
                            <th scope="col" class="primarTh">
                            {{ trans('module.viceprimar_info_8_left') }}</th>
                            <th scope=" col" class="primarTh"> <a href="tel:+0760264685"> {{ trans('module.viceprimar_info_8_right') }}</a></th>
                        </tr>
                        <tr>
                            <th scope="col" class="primarTh">
                            {{ trans('module.viceprimar_info_9_left') }}</th>
                            <th scope=" col" class="primarTh"> <a href="mailto:mircea.bora@comunaOlari.ro"> {{ trans('module.viceprimar_info_9_right') }}</a></th>
                        </tr>
                        <tr>
                            <th scope="col" class="primarTh">
                            {{ trans('module.viceprimar_info_10_left') }}</th>
                            <th scope=" col" class="primarTh">  {{ trans('module.viceprimar_info_10_right') }}</a></th>
                        </tr>
                    </thead>
                </table>

            </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.viceprimar_button_1_text') }}</button>
                    <button id="content2Btn" type="button" class="btn btn-danger" onclick="showContent2()">{{ trans('module.viceprimar_button_2_text') }}</button>
                </div>
                <div>
                    <div id="content1Primar">
                        <p>{{ trans('module.viceprimar_text_bottom_1') }}
                        </p>
                        <strong>{{ trans('module.viceprimar_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>
            </div>

        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>
<!-- /section -->
<script>
    function showContent1() {
        document.getElementById("content1Primar").style.display = "block";
        document.getElementById("content2Primar").style.display = "none";
        let content1Btn = document.getElementById("content1Btn");
        content1Btn.classList.remove('btn-danger');
        content1Btn.classList.add('btn-secondary');
        content2Btn.classList.remove('btn-secondary');
        content2Btn.classList.add('btn-danger');
    }

    function showContent2() {
        document.getElementById("content1Primar").style.display = "none";
        document.getElementById("content2Primar").style.display = "block";
        content2Btn.classList.remove('btn-danger');
        content2Btn.classList.add('btn-secondary');
        content1Btn.classList.remove('btn-secondary');
        content1Btn.classList.add('btn-danger');
    }
</script>
@endsection