@extends('layouts.guest.general')

@section('main_content')
    {{-- nav --}}
    <section class="page-title"
             style="background-image: url({{ asset('images/resource/contacts/BannerContacts.png') }})"
             id="about">
        <h1 class="d-none">Contact us - ITG Group</h1>
        <div class="auto-container">
            <ul class="bread-crumb clearfix">
                <li><a href="#">{{ __('messages.home') }} </a></li>
                <li>{{ __('messages.contacts') }} </li>
            </ul>
            <h2>{{ __('messages.contacts') }} </h2>
        </div>
    </section>

    {{-- office  near yor  --}}
    @if ($division->id == 1)
        <section class="contact-page-section">
            <div class="auto-container">
                <!-- Sec Title Three -->
                <div class="sec-title-three centered">
                    <h2>{{ __('messages.contact-title') }} </h2>
                </div>

                <div class="row clearfix">

                    <!-- Location Block -->
                    <div class="location-block col-lg-4 col-md-6 col-sm-12">
                        <div class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <div class="content">
                                <img class="icon" src="{{ asset('images/resource/contacts/Icono Email.png') }}"
                                     alt="Icon Email">
                                <strong>{{ __('messages.contact-title-carad1') }} </strong>
                                {{ __('messages.contact-subtitle-carad1') }}
                            </div>
                            {!! __('messages.contact-text-card1') !!}

                        </div>
                    </div>

                    <!-- Location Block -->
                    <div class="location-block col-lg-4 col-md-6 col-sm-12">
                        <div class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <a class="color-black1" href="https://wa.me/522223628956" target=”_blank”>
                                <div class="content color-dark">
                                    <img class="icon" src="{{ asset('images/resource/contacts/Icono Numero.png') }}"
                                         alt="Icon Phone">
                                    <strong>{{ __('WhatsApp') }} </strong>
                                    {{ __('messages.contact-subtitle-carad2') }}
                                </div>
                            </a>
                            {{-- {!! __('messages.contact-text-card2') !!} --}}
                        </div>
                    </div>

                    <!-- Location Block -->
                    <div class="location-block col-lg-4 col-md-6 col-sm-12">
                        <div class="inner-box
                        wow fadeInLeft" data-wow-delay="0ms"
                             data-wow-duration="1500ms">
                            <div class="content">
                                <img class="icon" src="{{ asset('images/resource/contacts/Icono Direccion.png') }}"
                                     alt="Icon Address">
                                <strong>{{ __('messages.contact-title-carad3') }} </strong>
                                {{ __('messages.contact-subtitle-carad3') }}
                            </div>
                            {!! __('messages.contact-text-card3') !!}
                        </div>
                    </div>

                </div>

            </div>
        </section>
    @endif
    {{-- DIVISIONS --}}
    <section class="service-section-five">
        <div class="auto-container">
            <!-- Sec Title -->
            <div class="sec-title alternate centered">
                @if ($division->id == 1)
                    <h2 class="">{{ __('messages.contact-title-choose') }} </h2>
                @else
                    <h2 class="text-uppercase">{{ __('messages.contacts') }} </h2>
                    <h3 class="">{{ __('messages.contact-subtitle-contacts') }} </h3>
                @endif
            </div>
            <div class="row clearfix">
                <div class="sec-title alternate my-5 text-left">
                    <h3 class="color-green3 text-uppercase">{{ __('messages.contact-itg-worldwide') }} </h4>
                </div>
                @foreach ($util->contactDivisions->chunk(ceil($util->contactDivisions->count() / 2)) as $div)
                    <div class="card-chain mt-3 text-center">
                        <div class="card-connector inner-box wow fadeInLeft" data-wow-delay="0ms"
                             data-wow-duration="1500ms">
                        </div>
                        <div class="card-deck">
                            @foreach ($div as $item => $divisions)
                                <button type="button" data-toggle="modal" data-target="#DivisionModal"
                                        onclick="showCountryDetailsDivision ('{{ e($item) }}')"
                                        class="card container-card inner-box wow fadeInLeft card-division-check">
                                    <div class="circular-card" style="background-image: url('{{ $divisions->img }}')">
                                        <div class="card-body">
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <p class="color-green1 font-weight-bold  h5 m-0">
                                                {{ __('nationality.' . $divisions->id . '-division') }}</p>
                                            @isset($divisions->text)
                                                <p class="font-italic">{{ __('nationality.' . $divisions->id . '-text') }} </p>
                                            @endisset
                                        </div>
                                    </div>
                                </button>

                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    {{-- AGENTS --}}
    <section class="service-section-five">
        <div class="auto-container">
            <div class="row clearfix">
                <div class="sec-title alternate my-5 text-left">
                    <h3 class="color-green3 text-uppercase">{{ __('messages.commercial-agents') }} </h4>
                </div>
                {{-- section 1 --}}
                <div class="card-chain mt-3 text-center">
                    <div class="card-connector inner-box wow fadeInLeft" data-wow-delay="0ms"
                         data-wow-duration="1500ms">
                    </div>
                    <div class="card-deck">
                        @foreach ($util->continents as $item => $continent)
                            <x-card-contact img="{{ $continent->img }}">
                                <div class="">
                                    <a class="color-green1 font-weight-bold m-0 collapsed d-flex align-items-center text-center justify-content-center"
                                       type="button" data-toggle="collapse" data-target="#collapse{{ $continent->id }}"
                                       aria-expanded="true" aria-controls="collapseOne">
                                        <p class="color-green1 h5">
                                            {{ __('messages.contacty-agent-title' . $continent->id) }}
                                        </p>
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="icon icon-tabler icon-tabler-chevron-right" width="25" height="44"
                                             viewBox="0 0 24 24" stroke-width="1.5" stroke="#014023" fill="none"
                                             stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                            <path d="M9 6l6 6l-6 6"/>
                                        </svg>
                                    </a>
                                    <div id="collapse{{ $continent->id }}" class="collapse" aria-labelledby="headingOne"
                                         data-parent="#accordionExample">
                                        <div class="card-body">
                                            <ul id="country-list" class="list-group">
                                                @foreach (trans('countries.countries.' . $item) as $index => $country)
                                                    @if (is_array($country) && isset($country[0]) && is_array($country[0]))
                                                        {{-- Si es un array de arrays, usaremos solo el primer país --}}
                                                        @php
                                                            $country = $country[0];
                                                        @endphp
                                                    @endif
                                                    <li
                                                        class="list-group-item d-flex justify-content-between align-items-center border-0">
                                                        <button type="button" class="btn btn-link text-black"
                                                                style="color: black; text-decoration: none;"
                                                                data-toggle="modal" data-target="#contriesModal"
                                                                onclick="showCountryDetails('{{ e($item) }}', {{ $index }})">
                                                            {{ $country['country'] }}

                                                        </button>
                                                    </li>
                                                @endforeach

                                            </ul>

                                        </div>
                                    </div>
                                </div>
                            </x-card-contact>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- DIVISION MAIN --}}
    @if ($division->id == 1)
        {{-- section How It Work --}}
        <section class="process-section bg-r-black">
            <div class="auto-container">
                <div class="row clearfix">
                    <!-- Content Column -->
                    <div class="content-column col-lg-6 col-md-12 col-sm-12">
                        <div class="inner-column">
                            <!-- Sec Title -->
                            <div class="sec-title alternate">
                                <div class="title text-light">{{ __('messages.contact-title-how-it-work') }} </div>
                                <h2 class="color-yellow1">{{ __('messages.contact-subtitel-how-it-work') }} </h2>
                            </div>
                            <!-- Blocks Outer -->
                            <div class="blocks-outer">
                                <!-- Process Block -->
                                <div class="process-block">
                                    <div class="inner-box">
                                        <div class="number">01</div>
                                        <p class="text-light font-part-list">{!! __('messages.partner-list1-how-it-work') !!}
                                        </p>
                                    </div>
                                </div>
                                <!-- Process Block -->
                                <div class="process-block">
                                    <div class="inner-box">
                                        <div class="number">02</div>
                                        <p class="text-light font-part-list">
                                            {{ __('messages.partner-list2-how-it-work') }}
                                        </p>
                                    </div>
                                </div>
                                <!-- Process Block -->
                                <div class="process-block">
                                    <div class="inner-box">
                                        <div class="number">03</div>
                                        <p class="text-light font-part-list">
                                            {{ __('messages.contact-list-title3-how-it-work') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!-- End Blocks Outer -->
                        </div>
                    </div>
                    <!-- Images Column -->
                    <div class="images-column col-lg-6 col-md-12 col-sm-12">
                        <div class="inner-column">
                            <img class="w-100" src="{{ asset('images/resource/contacts/Rectangle 179.png') }}"
                                 alt="Agents network"/>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    {{-- form section careers --}}
    <section class="process-section" id="contactform">
        <div class="auto-container">
            <div class="sec-title-three centered">
                <h2 class="text-uppercase">{{ __('messages.careers-subtitle') }}</h2>
                <p class="my-5">{{ __('messages.careers-text') }} </p>
            </div>
            <div class="comment-form">
                @livewire('contact-form.contact-request-post', ['dataDivision' => $division])
            </div>
        </div>
    </section>

    <!-- Modal -->
    <div class="modal fade" id="contriesModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-green3 ">
                    <h5 class="modal-title text-white" id="exampleModalLabel">{{ __('messages.contact-details') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-body">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="DivisionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-green3 ">
                    <h5 class="modal-title text-white" id="exampleModalLabel">{{ __('messages.contact-details') }} </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-body2">
                        <p><strong>{{ __('messages.email') }}:</strong> <span id="DivisionMail"></span></p>
                        <p><strong>{{ __('messages.address') }}:</strong> <span id="DivisionDirection"></span></p>
                        <p><strong>{{ __('messages.phone') }}:</strong> <span id="DivisionPhone"></span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


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


@push('scripts')
    {{-- ajax --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script>
        // Definir variables globales que vienen de PHP
        window.appLocale = "{{ session('locale', 'es') }}";
        window.divisions = @json(trans('divisions.divisions'));
        window.countries = @json(trans('countries.countries'));
        window.translations = {
            company: "{{ __('messages.company') }}",
            country: "{{ __('messages.country') }}",
            email: "{{ __('messages.email') }}",
            address: "{{ __('messages.address') }}",
            phone: "{{ __('messages.phone') }}"
        };
    </script>

    <script src="{{ asset('js/guest/contact.js') }}"></script>
@endpush