@props(['text_orientation' => 'start', 'image', 'image_secondary' => '', 'titleTx', 'contentTx', 'button', 'title_type' => '1'])

<div class="row" style="position: relative; z-index: 3">
    <div class="col-12 col-xl-6 order-last order-xl-{{ $text_orientation === 'end' ? 'last' : 'first' }} text-center {{ $text_orientation === 'end' ? 'text-xl-start' : 'text-xl-end' }} my-auto mt-5 mt-xl-2">
        @switch($title_type)
            @case('underline')
                <h2 class="underline-xl-start" style="word-wrap: break-word">{{ __($titleTx) }}</h2>
                @break
            @default
                <h3 class="mb-4">{{ __($titleTx) }}</h3>
        @endswitch

        <div class="h3-div">{{ __($contentTx) }}</div>
        @if (isset($button))
            @switch($button)
                @case('download_the_app')
                    <div class="dropdown mt-4">
                        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                            {{ __('landing.button.download') }}
                            <i class="fas fa-chevron-down" style="margin-left: 0.25rem; font-size: 14px;"></i>
                        </button>

                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li>
                                <a class="dropdown-item" href="/" target="_blank"><img src="{{ asset('img/landing/android-new.png') }}" alt="" class="dropdown-icon" style="width: 20px;">
                                    {{ __('landing.button.android') }}
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="/" target="_blank"><img src="{{ asset('img/landing/ios.png') }}" alt="" class="dropdown-icon" style="width: 20px;">
                                    {{ __('landing.button.ios') }}
                                </a>
                            </li>
                        </ul>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            <li><a class="dropdown-item" href="#">{{ __('landing.button.android') }}</a></li>
                            <li><a class="dropdown-item" href="#">{{ __('landing.button.ios') }}</a></li>
                        </ul>
                    </div>
                    @break
                @case('contact_us')
                    <a href="{{route('landing.get_in_touch')}}" class="btn btn-primary mt-4">{{ __('landing.link.contact_us') }}</a>
                    @break
                @default

            @endswitch
        @endif
    </div>
    <div class="col-12 col-xl-6 d-flex justify-content-center order-first order-xl-{{ $text_orientation === 'end' ? 'first' : 'last ' }} text-center {{ $text_orientation === 'end' ? 'text-xl-end' : 'text-xl-start' }} my-auto">
        <img class="component_image {{ $image_secondary ? ' d-none d-xl-flex' : '' }} {{-- $text_orientation === 'end' ? '' : 'mirror ' --}}" src="{{ asset($image) }}" alt="Image">
        <img class="component_image {{ $image_secondary ? ' d-flex d-xl-none' : 'd-none' }} {{-- $text_orientation === 'end' ? '' : 'mirror ' --}}" src="{{ asset($image_secondary) }}" alt="Image">
    </div>
</div>