@php
    $settings = getSettings();

@endphp



<div class="bg-gradient-reverse-color text-white-color rounded-top-xl footer-top">
    <div class="container">
        <div class="row">
            <div class="col-lg-7">
                <h4 class="title-lg title-animation mb-lg-0 mb-xl text-lg-start text-center">
                    <span>@lang('site.let_us_handle_all_your_technology_needs')</span>
                    <br />
                    <span>@lang('site.so_you_can_focus_on_what_you_do_best')</span>
                </h4>
            </div>
            <div class="col-lg-3 offset-lg-2">
                <a href="{{ route('contacts.index') }}"
                    class="btn btn-hover btn-secondary-color py-3 rounded-pill w-100 wow fadeInUp" data-wow-duration="1s">
                    <span class="text-uppercase">@lang('site.contact_us')</span>
                </a>
            </div>
        </div>
    </div>
</div>
<!--End Contact-->

<footer class="bg-light-color">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="bg-white py-xl px-lg-5 px-4 position-relative z-1" style="margin-top: -50px">
                    <h6 class="text-lg font-primary-bd text-uppercase mb-md">@lang('site.contact_us'):</h6>
                    <livewire:contact-us-form />
                </div>
            </div>
            <div class="col-lg-8">
                <div class="pt-md">
                    <div class="map mb-md">
                        <a href="{{ $settings->other_links['google_map_location_url'] }}">
                            <img src="{{ asset('assets/media/home/map.webp') }}" alt="map" class="w-100 rounded-4"
                                loading="lazy">
                        </a>
                    </div>
                    <div class="d-flex flex-wrap gap-3 justify-content-between">
                        <div class="text-primary-color text-xxl">
                            <p class="mb-0">{{ $settings->address_by_lang }}</p>
                        </div>
                        <div class="text-xxl">
                            <a class="text-primary-color d-block" href="tel:{{ $settings->support_phone }}">
                                {{ $settings->support_phone }}
                            </a>

                        </div>
                        <div class="text-xxl">

                            <a class="text-primary-color"
                                href="mail:{{ $settings->support_email }}">{{ $settings->support_email }}
                            </a>
                        </div>

                    </div>
                    <div class="socials d-flex column-gap-2 mt-5">
                        @if ($settings->social_network['youtube'])
                            <a href="{{ $settings->social_network['youtube'] }}">
                                <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M23.5 6.1a2.8 2.8 0 0 0-1.98-2c-1.74-.5-8.72-.5-8.72-.5s-6.98 0-8.72.5a2.8 2.8 0 0 0-1.98 2A29.3 29.3 0 0 0 2 12a29.3 29.3 0 0 0 .1 5.9 2.8 2.8 0 0 0 1.98 2c1.74.5 8.72.5 8.72.5s6.98 0 8.72-.5a2.8 2.8 0 0 0 1.98-2A29.3 29.3 0 0 0 24 12a29.3 29.3 0 0 0-.5-5.9zM9.5 15V9l6 3-6 3z" />
                                </svg>
                            </a>
                        @endif

                        @if ($settings->social_network['facebook'])
                            <a href="{{ $settings->social_network['facebook'] }}">
                                <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 8.19 15.51">
                                    <g id="Layer_2" data-name="Layer 2">
                                        <g id="Layer_1-2" data-name="Layer 1">
                                            <path fill="currentColor"
                                                d="M8.18,6.84,8,8.42a.54.54,0,0,1-.52.46H4.91v6.59a7.38,7.38,0,0,1-.82,0,8.93,8.93,0,0,1-1.8-.18V8.88h-2A.33.33,0,0,1,0,8.55v-2a.33.33,0,0,1,.33-.33h2v-3A3.28,3.28,0,0,1,5.57,0H7.86a.33.33,0,0,1,.33.33v2a.33.33,0,0,1-.33.33H6.22A1.32,1.32,0,0,0,4.91,4v2.3H7.66A.52.52,0,0,1,8.18,6.84Z" />
                                        </g>
                                    </g>
                                </svg>
                            </a>
                        @endif

                        @if ($settings->social_network['linkedin'])
                            <a href="{{ $settings->social_network['linkedin'] }}">
                                <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 14.77 15.1">
                                    <g id="Layer_2" data-name="Layer 2">
                                        <g id="Layer_1-2" data-name="Layer 1">
                                            <circle fill="currentColor" cx="1.97" cy="1.97" r="1.97" />
                                            <rect fill="currentColor" x="0.33" y="5.25" width="3.28" height="9.84"
                                                rx="1.64" />
                                            <path fill="currentColor"
                                                d="M14.77,8.86v5.58a.67.67,0,0,1-.66.66h-2a.66.66,0,0,1-.65-.66V9.84a1.65,1.65,0,0,0-3.29,0v4.6a.66.66,0,0,1-.65.66h-2a.67.67,0,0,1-.66-.66V5.91a.67.67,0,0,1,.66-.66h2a.66.66,0,0,1,.65.66v.42a3.75,3.75,0,0,1,3-1.41A3.63,3.63,0,0,1,14.77,8.86Z" />
                                        </g>
                                    </g>
                                </svg>
                            </a>
                        @endif

                        @if ($settings->social_network['whatsapp'])
                            <a target="_blank" href="https://wa.me/{{ $settings->social_network['whatsapp'] }}">
                                <svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 18.36 18.36">
                                    <g id="Layer_2" data-name="Layer 2">
                                        <g id="Layer_1-2" data-name="Layer 1">
                                            <path fill="currentColor"
                                                d="M.05,8.24a9.17,9.17,0,0,0,1,5.17L0,18a.29.29,0,0,0,.34.35l4.6-1H5a9.12,9.12,0,0,0,5.13,1A9.18,9.18,0,1,0,.05,8.24Zm9.13,8a7.21,7.21,0,0,1-3.66-1l-.3-.18-2.93.78.78-2.93a7.28,7.28,0,1,1,6.11,3.32Z" />
                                            <path fill="currentColor"
                                                d="M13.5,12.16a3.74,3.74,0,0,1-.47.58,2.18,2.18,0,0,1-1.77.64A7.44,7.44,0,0,1,7,11.17,7.42,7.42,0,0,1,4.76,6.89,2.19,2.19,0,0,1,5.4,5.11,3.74,3.74,0,0,1,6,4.64a.63.63,0,0,1,1,.32l.48,1.45a.71.71,0,0,1-.09.81l-.39.39a.56.56,0,0,0-.07.71A9.67,9.67,0,0,0,8.21,9.93a10.46,10.46,0,0,0,1.61,1.35.57.57,0,0,0,.71-.08l.39-.39a.71.71,0,0,1,.81-.09l1.45.48A.63.63,0,0,1,13.5,12.16Z" />
                                        </g>
                                    </g>
                                </svg>
                            </a>
                        @endif

                        @if ($settings->social_network['twitter'])
                            <a href="{{ $settings->social_network['twitter'] }}">
                                <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M24 4.6a10 10 0 0 1-2.83.78A4.94 4.94 0 0 0 23.3 3a10 10 0 0 1-3.16 1.2 4.92 4.92 0 0 0-8.4 4.48A14 14 0 0 1 1.67 3.2 4.92 4.92 0 0 0 3.2 9.86a4.92 4.92 0 0 1-2.23-.6v.06a4.92 4.92 0 0 0 3.95 4.83 5 5 0 0 1-1.3.17 5 5 0 0 1-.93-.09 4.93 4.93 0 0 0 4.6 3.42 9.88 9.88 0 0 1-6.13 2.11 10.33 10.33 0 0 1-1.17-.07A14 14 0 0 0 7.6 21c9.14 0 14.14-7.57 14.14-14.13 0-.21 0-.42-.01-.63A10.08 10.08 0 0 0 24 4.6z" />
                                </svg>
                            </a>
                        @endif

                        @if ($settings->social_network['tiktok'])
                            <a href="{{ $settings->social_network['tiktok'] }}">
                                <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M18.2 0H15.5a.5.5 0 0 0-.5.5v13.63a3.56 3.56 0 1 1-2.5-3.4.5.5 0 0 0 .67-.48V7.03a6.28 6.28 0 0 0-4.27 1.77A6.33 6.33 0 1 0 17 14.15v-6.4a7.1 7.1 0 0 0 2.24.34h.51a.5.5 0 0 0 .5-.5V.5a.5.5 0 0 0-.5-.5h-2.05z" />
                                </svg>
                            </a>
                        @endif

                        @if ($settings->social_network['snapchat'])
                            <a href="{{ $settings->social_network['snapchat'] }}">
                                <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M12 .5C7.08.5 3 4.58 3 9.5c0 3.87 1.83 7.7 5.27 10.52l.06.06c.61.5.78 1.36.38 2.07-.23.43-.66.65-1.12.68-.29.02-.56.12-.76.29-.2.17-.3.43-.28.7.05.48.35.93.8 1.16 2.3 1.12 4.84 1.18 7.27.24a5.75 5.75 0 0 0 1.6-.94c.3-.23.5-.57.59-.95a1.14 1.14 0 0 0-.44-1.06c-.2-.17-.46-.25-.73-.27-.43-.03-.84-.25-1.1-.63-.4-.71-.25-1.6.4-2.08l.05-.04C19.17 17.2 21 13.37 21 9.5 21 4.58 16.92.5 12 .5z" />
                                </svg>
                            </a>
                        @endif
                        @if ($settings->social_network['instagram'])
                            <a href="{{ $settings->social_network['instagram'] }}">
                                <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 2.2.5 3 1.2.8.7 1.1 1.7 1.2 3 .1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.5 2.2-1.2 3-.7.8-1.7 1.1-3 1.2-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-2.2-.5-3-1.2-.8-.7-1.1-1.7-1.2-3-.1-1.3-.1-1.7-.1-4.9s0-3.6.1-4.9c.1-1.2.5-2.2 1.2-3 .7-.8 1.7-1.1 3-1.2 1.3-.1 1.7-.1 4.9-.1zm0-2.2C8.6 0 8.1 0 6.8.1 5.1.2 3.6.8 2.4 2 1.2 3.2.6 4.7.5 6.8.4 8.1.4 8.6.4 12s0 3.9.1 5.2c.1 2.1.7 3.6 1.9 4.8 1.2 1.2 2.7 1.8 4.8 1.9 1.3.1 1.8.1 5.2.1s3.9 0 5.2-.1c2.1-.1 3.6-.7 4.8-1.9 1.2-1.2 1.8-2.7 1.9-4.8.1-1.3.1-1.8.1-5.2s0-3.9-.1-5.2c-.1-2.1-.7-3.6-1.9-4.8-1.2-1.2-2.7-1.8-4.8-1.9C15.9 0 15.4 0 12 0zm0 5.8a6.2 6.2 0 1 1 0 12.4 6.2 6.2 0 0 1 0-12.4zm0 10.2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm6.6-11.8a1.4 1.4 0 1 1-2.8 0 1.4 1.4 0 0 1 2.8 0z" />
                                </svg>
                            </a>
                        @endif

                    </div>
                </div>

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

<div class="copyrights">
    <div class="container">
        <div class="row">
            <div class="col-md-4 order-md-0 order-last">
                <p class="text-md-start text-center mb-0">
                    @lang('site.all_rights_reversed') {{ date('Y') }}@
                    <a href="{{ route('home') }}">{{ $settings->name_by_lang }}</a>
                </p>
            </div>

            <div class="col-md-4 order-md-1 order-first">
                @if ($settings->isMultiLang())
                    <div class="text-center dropdown mb-md-0 mb-3">
                        @if (isLang('ar'))
                            <a href="{{ route('change.language', ['lang' => 'en']) }}">
                                <img width="25" src="{{ asset('assets/media/icons/globe.svg') }}"
                                    alt="globe icon" loading="lazy"> <span class="ms-1 text-gray-color">
                                    @lang('site.english')
                                </span></a>
                        @else
                            <a href="{{ route('change.language', ['lang' => 'ar']) }}">
                                <img width="25" src="{{ asset('assets/media/icons/globe.svg') }}"
                                    alt="globe icon" loading="lazy"> <span class="ms-1 text-gray-color">
                                    @lang('site.arabic')
                                </span></a>
                        @endif
                    </div>
                @endif
            </div>
            <div class="col-md-4 order-md-2 order-1">
                <p class="text-md-end text-center mb-md-0 mb-2"> @lang('site.developed_by') <a
                        class="text-primary-color text-decoration-underline" target="_blank"
                        href="http://www.mix-code.com">@lang('site.mixCode')</a></p>
            </div>
        </div>
    </div>
</div>
</div>
</div>