{{-- resources/views/contact.blade.php --}}
@extends('layouts.horizontalLayoutMaster')

@section('title', 'Contact Us')

@section('content')
    <div class="auth-wrapper auth-cover contact-page-bg">
        <div class="auth-inner row m-0 justify-content-center">
            <div class="col-lg-10 d-flex align-items-start px-3 px-lg-5 pt-5 pb-5">
                <div class="w-100">
                    <div class="row g-5 align-items-start justify-content-center mx-auto" style="max-width: 1100px;">
                        {{-- LEFT SIDE --}}
                        <div class="col-lg-6">
                            <div class="contact-form-section" style="margin-top: var(--excerpt-margin-top, 0);">
                                {{-- Excerpt Title --}}
                                <h2 class="editable-title contact-header">
                                    {{ $settings['excerpt_title']->value ?? 'Drop Us A Message' }}
                                </h2>

                                {{-- Excerpt Text --}}
                                <p class="editable-text excerpt-control">
                                    {{ $settings['excerpt']->value ?? 'Our objective at CourageBulksms is to provide prompt responses to your needs. Don\'t hesitate! Let us hear from you.' }}
                                </p>

                                <div style="height: 40px;"></div>

                                {{-- Contact Form Title --}}
                                <h3 class="editable-subtitle contact-header">
                                    {{ $settings['contact_form_title']->value ?? 'Contact Form' }}
                                </h3>

                                {{-- Success Message --}}
                                @if (session('success'))
                                    <div class="alert alert-success">{{ session('success') }}</div>
                                @endif

                                {{-- Validation Errors --}}
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul class="mb-0">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                {{-- Contact Form --}}
                                <form method="POST" action="{{ route('contact.submit') }}">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6 mb-2">
                                            <input type="text" name="first_name" class="form-control"
                                                placeholder="First Name" required value="{{ old('first_name') }}">
                                            @error('first_name')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <input type="text" name="last_name" class="form-control"
                                                placeholder="Last Name" required value="{{ old('last_name') }}">
                                            @error('last_name')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>

                                        <div class="col-md-6 mb-2">
                                            <input type="email" name="email" class="form-control" placeholder="Email"
                                                required value="{{ old('email') }}">
                                            @error('email')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <input type="text" name="subject" class="form-control" placeholder="Subject"
                                                required value="{{ old('subject') }}">
                                            @error('subject')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>

                                        <div class="col-12 mb-3">
                                            <textarea name="message" class="form-control" rows="4" placeholder="Comments/Questions" required>{{ old('message') }}</textarea>
                                            @error('message')
                                                <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>

                                        <div class="col-12">
                                            <button class="btn btn-primary" type="submit">Send</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        {{-- RIGHT SIDE --}}
                        <div class="col-lg-5 right-side">
                            <h4 class="editable-title contact-header">
                                {{ $settings['company_name']->value ?? 'CourageBulksms' }}</h4>
                            <p class="editable-text">
                                {{ $settings['business_address']->value ?? 'Rancho Cucamonga, CA 91701' }}</p>
                            <p class="editable-text">
                                {{ $settings['company_email']->value ?? 'support@couragebulksms.com' }}</p>
                            <hr>
                            <h5 class="editable-subtitle contact-header">Call Us at:</h5>
                            <p class="editable-text">{{ $settings['company_phone_number']->value ?? '+(866)-331-1980' }}
                            </p>
                            <h5 class="editable-subtitle mt-4 contact-header">Work Hours</h5>
                            <p class="editable-text">{!! nl2br($settings['work_hours']->value ?? "Monday - Saturday\n9:00 AM to 5:30 PM\nSunday Closed") !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        :root {
            --excerpt-width: 300px;
            --excerpt-margin-top: 20px;
        }

        .editable-title {
            font-size: 26px;
            font-weight: 600;
        }

        .editable-subtitle {
            font-size: 18px;
            font-weight: 500;
        }

        .editable-text {
            font-size: 15px;
        }

        .excerpt-control {
            max-width: var(--excerpt-width);
        }

        .contact-page-bg {
            background-color: #f9f9f9;
            min-height: 100vh;
        }

        .contact-header {
            color: #0B1970;
        }

        .right-side {
            padding-left: 40px;
            /* Space between sides */
            margin-top: 220px;
            /* Moves company name down for alignment */
        }

        @media (max-width: 991px) {
            .right-side {
                padding-left: 0;
                margin-top: 30px;
                /* Less space on mobile */
            }
        }

        small.text-danger {
            display: block;
            margin-top: -5px;
            margin-bottom: 10px;
        }
    </style>
@endsection