@extends('front/layouts.app')

@section('title', 'Contact')

@section('content')

    <section class="page-title">
        <div class="container">
            <div class="page-title-wrap">
                <h1 class="title">Contact</h1>
                <ul>
                    <li><a href="/">Accueil</a></li>
                    <li><i class="fas fa-chevron-right"></i></li>
                    <li><span>Contact</span></li>
                </ul>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="section-title-wrap center">
                <h2 class="title">Adresse</h2>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <div class="contact-card">
                        <img src="/images/content/icon-adresse.svg" alt="Adresse">
                        <div class="content">
                            <span class="value">252, Rue KA 022, Boulbinet, Conakry</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="contact-card">
                        <img src="/images/content/icon-phone.svg" alt="Adresse">
                        <div class="content">
                            <span class="value">+224 656 31 11 13 / +224 656 31 11 14</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="contact-card">
                        <img src="/images/content/icon-mail.svg" alt="Adresse">
                        <div class="content">
                            <span class="value">info@apip.gov.gn</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="container">
        <hr class="separator">
    </div>
    <section>
        <div class="container">
            <div class="section-title-wrap center">
                <h2 class="title">Les antennes APIP à l’intérieur du pays </h2>
            </div>
            <div class="row">
                <div class="col-lg-12 text-center">
                    <ul class="nav nav-pills" id="pills-tab" role="tablist">
                        @foreach ($antennes as $antenne)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{ $loop->first ? 'active' : '' }}"
                                    id="pills-{{ $antenne->id }}-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-{{ $antenne->id }}" type="button" role="tab"
                                    aria-controls="pills-{{ $antenne->id }}"
                                    aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                                    {{ $antenne->nom }}
                                </button>
                            </li>
                        @endforeach
                    </ul>

                    <div class="tab-content" id="pills-tabContent">
                        @foreach ($antennes as $antenne)
                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                id="pills-{{ $antenne->id }}" role="tabpanel"
                                aria-labelledby="pills-{{ $antenne->id }}-tab" tabindex="0">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="contact-card">
                                            <img src="/images/content/icon-phone.svg" alt="Téléphone">
                                            <div class="content">
                                                <span class="value">{{ $antenne->telephone }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="contact-card">
                                            <img src="/images/content/icon-mail.svg" alt="Email">
                                            <div class="content">
                                                <span class="value">{{ $antenne->email }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="contact-card">
                                            <img src="/images/content/icon-adresse.svg" alt="Adresse">
                                            <div class="content">
                                                <span class="value">{{ $antenne->adresse }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="container">
        <hr class="separator">
    </div>
    <section>
        <div class="container">
            <div class="section-title-wrap center">
                <h2 class="title">{{ __('messages.menu_contact.nous_ecrire.titre') }}</h2>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="custom-card">
                        <form action="{{ route('save_contact') }}" method="post">
                            @csrf

                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="name">{{ __('messages.menu_contact.nous_ecrire.nom_complet') }} <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="nom" id="name"
                                            class="form-control @error('nom') is-invalid @enderror"
                                            placeholder="{{ __('messages.menu_contact.nous_ecrire.entrez_nom_complet') }}">
                                        @error('nom')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email">{{ __('messages.menu_contact.nous_ecrire.email') }} <span
                                                class="text-danger">*</span></label>
                                        <input type="email" name="email" id="email"
                                            class="form-control @error('email') is-invalid @enderror"
                                            placeholder="{{ __('messages.menu_contact.nous_ecrire.entrez_email') }}">
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="phone">{{ __('messages.menu_contact.nous_ecrire.telephone') }} <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="telephone" id="phone"
                                            class="form-control @error('telephone') is-invalid @enderror"
                                            placeholder="{{ __('messages.menu_contact.nous_ecrire.entrez_telephone') }}">
                                        @error('telephone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="subject">{{ __('messages.menu_contact.nous_ecrire.objet') }} <span
                                            class="text-danger">*</span></label>
                                    <input type="text" id="subject" name="objet"
                                        class="form-control @error('objet') is-invalid @enderror"
                                        placeholder="{{ __('messages.menu_contact.nous_ecrire.entrez_objet') }}">
                                    @error('objet')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="message">{{ __('messages.menu_contact.nous_ecrire.message') }} <span
                                            class="text-danger">*</span></label>
                                    <textarea name="message" id="message" rows="6" class="form-control @error('message') is-invalid @enderror"
                                        placeholder="{{ __('messages.menu_contact.nous_ecrire.entrez_message') }}"></textarea>
                                    @error('message')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <button type="submit" class="btn main-btn">{{ __('messages.menu_contact.nous_ecrire.envoyer_message') }}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>


@endsection