@extends('layouts.layout')
@section('title') {{ __('Kontakt') }} @stop
@section('content')
<style>
    .fs-text-btn {
        font-size: 0.75rem;
    }
    @media (min-width: 1200px) {
        .fs-text-btn {
            font-size: 1rem;
        }
    }
</style>
<script>
    $(document).ready(function() {
        $('#send-email-button').on('click', function (e) {
            e.preventDefault();
            $('#contact-form').trigger('submit');
            let current_html = $(this).html();
            $(this).attr('disabled', 'disabled').addClass('disabled');
            $(this).html('{{ __('Proszę czekać') }}');
            setTimeout(() => {
                $(this).removeAttr('disabled').removeClass('disabled');
                $(this).html(current_html);
            }, 5000);
        });
    });
</script>
    <div class="container my-lg-5 py-lg-5">
        @if (isset($error))
            <div class="row">
                <div class="col-12 py-3 bg-danger text-center rounded-3">
                    <p class=" my-2 font-white" style="font-size: 1.4rem">{{ $error }}</p>
                </div>
            </div>
        @endif
        @if (isset($message))
            <div class="row">
                <div class="col-12 py-3 bg-success text-center rounded-3">
                    <p class=" my-2 font-white" style="font-size: 1.4rem">{{ $message }}</p>
                </div>
            </div>
        @endif
        <div class="row contact-section my-lg-5 py-lg-5">
            <!-- Informacje kontaktowe -->
            <div class="col-lg-5">
                <h1 class="fw-light font-libre" style="font-size: 4rem"><span class="golden-half px-2 py-1 mb-5 mt-5 mt-lg-0">{{ __('Kontakt') }}</span></h1>

                <div class="ms-2 company-info font-open-sans" style="font-size: 1.2rem">
                    <p><b>Best Finance P.S.A.</b></p>
                    <p>NIP: 764 272 44 53</p>
                    <p>Tel: <a href="tel:+48604052276" class="text-dark">+48 604 052 276</a> </p>
                    <p>Email: <a href="mailto:kontakt@best-finance.eu" class="text-dark">kontakt@best-finance.eu</a></p>
                </div>
            </div>

            <!-- Formularz kontaktowy -->
            <div class="col-lg-7 font-open-sans">
                <hr class="d-lg-none">
                <form method="POST" action="/kontakt/send-email" id="contact-form">
                    @csrf
                    <div class="row mb-lg-4 px-2 px-lg-0">
                        <!-- Imię i nazwisko -->
                        <div class="col-md-6 mb-4">
                            <label for="name" class="form-label">{{ __('Imię i nazwisko') }}</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" placeholder="John Doe" required>
                            @error('name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <!-- Firma -->
                        <div class="col-md-6 mb-4">
                            <label for="company" class="form-label">{{ __('Firma')}}</label>
                            <input type="text" class="form-control @error('company') is-invalid @enderror" id="company" name="company" value="{{ old('company') }}" placeholder="Example Company">
                            @error('company')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-lg-4 px-2 px-lg-0">
                        <!-- Email -->
                        <div class="col-md-6 mb-4">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" placeholder="example@email.com" required>
                            @error('email')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <!-- Numer telefonu -->
                        <div class="col-md-6 mb-4">
                            <label for="phone" class="form-label">{{ __('Numer telefonu') }}</label>
                            <input type="tel" class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ old('phone') }}" placeholder="+48 123 456 789">
                            @error('phone')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>

                    <!-- Wybierz temat -->
                    <div class="topic-section fs-text-btn mt-2 mb-3">
                        <input type="radio" class="btn-check" name="topic" id="topic1" value="topic1" {{ old('topic') == 'topic1' ? 'checked' : 'checked' }} autocomplete="off">
                        <label class="btn" for="topic1">{{ __('Pytanie o ofertę') }}</label>

                        <input type="radio" class="btn-check" name="topic" id="topic2" value="topic2" {{ old('topic') == 'topic2' ? 'checked' : '' }} autocomplete="off">
                        <label class="btn" for="topic2">{{ __('Zakup usługi') }}</label>

                        <input type="radio" class="btn-check" name="topic" id="topic3" value="topic3" {{ old('topic') == 'topic3' ? 'checked' : '' }} autocomplete="off">
                        <label class="btn" for="topic3">{{ __('Obsługa klienta') }}</label>

                        <input type="radio" class="btn-check" name="topic" id="topic4" value="topic4" {{ old('topic') == 'topic4' ? 'checked' : '' }} autocomplete="off">
                        <label class="btn" for="topic4">{{ __('Inne') }}</label>

                        @error('topic')
                            <div class="text-danger mt-2">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <!-- Wiadomość -->
                    <div class="mb-4 pt-4">
                        <label for="message" class="form-label">{{ __('Wiadomość') }}</label>
                        <textarea class="form-control @error('message') is-invalid @enderror" id="message" name="message" rows="4" placeholder="{{ __('Napisz wiadomość...') }}">{{ old('message') }}</textarea>
                        @error('message')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <!-- Przycisk wysyłania -->
                    <div class="text-lg-end text-center mt-5 mb-5">
                        <button type="submit" class="btn btn-main px-5 py-3" id="send-email-button">
                            {{ __('Wyślij wiadomość') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection