@extends(getTemplate() . '.layouts.app')

@push('styles_top')
    <link rel="stylesheet" href="/assets/vendors/leaflet/leaflet.css">
    <style type="text/css">
        :root {
            --contact-primary: #ff6b00;
            --contact-primary-dark: #b94d01;

            --contact-secondary: #6c757d;
        }

        .bg-overlay {
            background: linear-gradient(135deg, var(--contact-primary) 0%, var(--contact-primary-dark) 100%);
            min-height: 300px;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .bg-overlay::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
            animation: rotate 30s linear infinite;
        }

        @media (max-width: 768px) {
            .bg-overlay::before {
                top: -25%;
                left: -25%;
                width: 150%;
                height: 100%;
            }
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
@endpush


@section('content')
    <!-- Hero Banner Section -->
    <section class="bg-overlay position-relative mb-5">
        <div class="container text-center text-white position-relative">
            <h1 class="display-3 fw-bold mb-8 fade-up">Contact Us</h1>
        </div>
    </section>

    <!-- Contact Info Section -->
    <section class="py-5">
        <div class="container">
            <div class="row g-4 justify-content-center">


                <div class="col-md-6 col-12">
                    <div class="card h-100 border-0 shadow-sm text-center p-4">
                        <div class="contact-icon mx-auto">
                            <i class="bi bi-envelope fs-1"></i>
                        </div>
                        <div class="card-body">
                            <h4 class="card-title">Email us at</h4>
                            @if (!empty($contactSettings['emails']))
                                <p class="card-text">
                                    <a href="mailto:sales@theorangecard.com.au"
                                        class="text-white text-decoration-none d-block">
                                        {!! nl2br(str_replace(',', '<br/>', $contactSettings['emails'])) !!}
                                    </a>
                                </p>
                            @else
                                <p class="card-text text-muted">{{ trans('site.not_defined') }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Form Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <h2 class="display-5 mb-4 text-center">{{ trans('site.send_your_message_directly') }}</h2>

                    @if (!empty(session()->has('msg')))
                        <div class="alert alert-success my-4 d-flex align-items-center">
                            <i data-feather="check-square" width="24" height="24" class="me-2"></i>
                            {{ session()->get('msg') }}
                        </div>
                    @endif

                    <form action="/contact/store" method="post" class="needs-validation" novalidate>
                        {{ csrf_field() }}

                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" name="name"
                                        class="form-control @error('name') is-invalid @enderror" id="name"
                                        placeholder="{{ trans('site.your_name') }}" value="{{ old('name') }}">
                                    <label for="name">{{ trans('site.your_name') }}</label>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="email" name="email"
                                        class="form-control @error('email') is-invalid @enderror" id="email"
                                        placeholder="{{ trans('public.email') }}" value="{{ old('email') }}">
                                    <label for="email">{{ trans('public.email') }}</label>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="tel" name="phone"
                                        class="form-control @error('phone') is-invalid @enderror" id="phone"
                                        placeholder="{{ trans('site.phone_number') }}" value="{{ old('phone') }}">
                                    <label for="phone">{{ trans('site.phone_number') }}</label>
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" name="subject"
                                        class="form-control @error('subject') is-invalid @enderror" id="subject"
                                        placeholder="{{ trans('site.subject') }}" value="{{ old('subject') }}">
                                    <label for="subject">{{ trans('site.subject') }}</label>
                                    @error('subject')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-floating">
                                    <textarea name="message" class="form-control @error('message') is-invalid @enderror" id="message"
                                        style="height: 150px" placeholder="{{ trans('site.message') }}">{{ old('message') }}</textarea>
                                    <label for="message">{{ trans('site.message') }}</label>
                                    @error('message')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>



                            <div class="col-12 d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary btn-lg text-center">
                                    {{ trans('site.send_message') }}
                                    <i class="bi bi-send"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    @if (!empty($contactSettings['latitude']) and !empty($contactSettings['longitude']))
        <section class="map-section">
            <div id="contactMap" class="contact-map" data-latitude="{{ $contactSettings['latitude'] }}"
                data-longitude="{{ $contactSettings['longitude'] }}" data-zoom="{{ $contactSettings['map_zoom'] ?? 12 }}"
                style="height: 450px;">
            </div>
        </section>
    @endif
@endsection

@push('scripts_bottom')
    <script src="/assets/vendors/leaflet/leaflet.min.js"></script>
    <script>
        var leafletApiPath = '{{ getLeafletApiPath() }}';
    </script>
    <script src="/assets/default/js/parts/contact.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const contactForm = document.querySelector('form[action="/contact/store"]');

            if (contactForm) {
                contactForm.addEventListener('submit', function(e) {
                    e.preventDefault();

                    const formData = new FormData(this);

                    // Disable submit button and show loading state
                    const submitBtn = this.querySelector('button[type="submit"]');
                    const originalBtnText = submitBtn.innerHTML;
                    submitBtn.disabled = true;
                    submitBtn.innerHTML =
                        '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Sending...';

                    fetch('/contact/store', {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 'success') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success!',
                                    text: data.message,
                                    confirmButtonColor: '#ff6b00'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        contactForm.reset();
                                    }
                                });
                            } else {
                                let errorMessage = data.message;
                                if (typeof errorMessage === 'object') {
                                    errorMessage = Object.values(errorMessage).flat().join('\n');
                                }

                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error!',
                                    text: errorMessage,
                                    confirmButtonColor: '#ff6b00'
                                });
                            }
                        })
                        .catch(error => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong! Please try again later.',
                                confirmButtonColor: '#ff6b00'
                            });
                        })
                        .finally(() => {
                            // Re-enable submit button and restore original text
                            submitBtn.disabled = false;
                            submitBtn.innerHTML = originalBtnText;
                        });
                });
            }
        });
    </script>
@endpush