@extends('landing.layouts.landing')

@section('main-content')
{{-- <div class="container"> --}}
    <div id="section-header" class="section" style="background-image: unset;">
        <img class="city-background" src="{{ asset('img/landing/background/citysilhouette_5.png') }}" alt="" style="z-index: 1">
        <div class="container mt-5 py-5" style="position: relative; overflow: hidden; z-index: 2; margin-bottom: 5rem;">
            <div class="row mx-0">
              <div class="col-12 col-xl-6 my-auto">

                <div class="h2-title mb-3 text-center text-xl-start">{{ __('landing.contact_us.smalltitle') }}</div>
                <h2 class="underline-xl-start " style="word-wrap: break-word;">{{ __('landing.contact_us.title') }}</h2>

                <div class="h2-div mb-4 text-start">{{ __('landing.contact_us.description') }}</div>

                <div class="block mb-3">
                    <div class="block-title">
                        <span>1</span> {{ __('landing.contact_us.step1.title') }}
                    </div>
                    <div class="h2-div mb-4 text-start">{{ __('landing.contact_us.step1.description') }}</div>
                </div>

                <div class="block mb-3">
                    <div class="block-title">
                        <span>2</span> {{ __('landing.contact_us.step2.title') }}
                    </div>
                    <div class="h2-div mb-4 text-start">{{ __('landing.contact_us.step2.description') }}</div>
                </div>
                <div class="block mb-3">
                    <div class="block-title">
                        <span>3</span> {{ __('landing.contact_us.step3.title') }}
                    </div>
                    <div class="h2-div mb-4 text-start">{{ __('landing.contact_us.step3.description') }}</div>
                </div>
              </div>

              <div class="col-12 col-xl-6 d-flex justify-content-center justify-content-xl-end">
                <div class="contact-container">
                    @if(session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if(session('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif
                    <form action="{{ route('landing.send') }}" method="POST" class="w-100">
                        @csrf
                        <div class="w-100 mb-3">
                            <label for="name" class="form-label">{{ __('landing.input.name') }}</label>
                            <input type="text" class="form-control" id="name" name="name" style="max-width: 100%" required value="{{ old('name') }}">
                            @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="w-100 mb-3">
                            <label for="email" class="form-label">{{ __('landing.input.email') }}</label>
                            <input type="text" class="form-control" id="email" name="email" style="max-width: 100%" required value="{{ old('email') }}">
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="w-100 mb-3">
                            <label for="company_name" class="form-label">{{ __('landing.input.company') }}</label>
                            <input type="text" class="form-control" style="max-width: 100%" id="company_name" name="company_name" value="{{ old('company_name') }}">
                            @error('company_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <label for="options[]" class="form-label">{{ __('landing.input.category') }}</label>
                        <div class="btn-group mb-3" data-toggle="buttons">
                            @foreach ($categories as $category)
                                @php
                                    switch (app()->getLocale()) {
                                        case 'hu':
                                                $category_name = $category->name_hu;
                                            break;
                                        case 'en':
                                                $category_name = $category->name_en;
                                            break;
                                        default:
                                                $category_name = $category->name_en;
                                            break;
                                    }
                                @endphp
                                <label class="btn btn-checkbox">
                                    <input type="checkbox" name="options[]" value="{{ $category_name }}" onchange="toggleButtonStyle(this)">
                                    {{ $category_name }}
                                </label>
                            @endforeach
                            @error('options')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="w-100 mb-3">
                            <label for="message" class="form-label">{{ __('landing.input.message') }}</label>
                            <textarea class="form-control" id="message" name="message" rows="3" placeholder="{{ __('landing.input.message.placeholder') }}" required>{{ old('message') }}</textarea>
                            @error('message')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary">{{ __('landing.button.send') }}</button>
                        </div>
                    </form>
                </div>
                {{-- <img src="{{ asset('/img/landing/header-iphones.png') }}" alt="Kép leírása"> --}}
              </div>
            </div>
        </div>
        <img src="{{ asset('/img/landing/bg_item_2.png') }}" style="width: 129px; position:absolute; right: 0; top: 0; bottom: 0; margin: auto 0; margin-right: 100px">
        <img src="{{ asset('/img/landing/bg_item_7.png') }}" class="d-none d-xl-block" style="width: 76px; position:absolute; position:absolute; left: 50%; top: 60%; bottom: 0; margin: auto 0; z-index: 10">
        <img src="{{ asset('/img/landing/bg_item_8.png') }}" style="width: 131px; position:absolute; left: 0; bottom: 100px; margin-bottom: 200px;">
    </div>
{{-- </div> --}}
@endsection