@extends('layouts.website')

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

@section('hero')
    <x-site.partials.inner-banner
        title="Contact Us"
        :breadcrumb="[['label' => 'Contact Us']]" />
@endsection

@section('content')

@if(session('success'))
<div class="container mt-4">
    <div class="alert alert-success">
        <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
    </div>
</div>
@endif

{{-- Page heading --}}
<section class="pt-5 pb-0 justify-text">
   
    <div class="container">
        <div class="section-title text-center">
            <h2 class="text-white mb-0">Get In Touch</h2>
            <div class="mt-3 mx-auto" style="width:60px;height:3px;background:var(--pgs_primary_color,#c0392b);border-radius:2px;"></div>
            <p class="text-white mt-4 mb-0">We'd love to hear from you. Reach us through any of the channels below and we will get back to you as soon as possible.</p>
        </div>
    </div>
</section>

{{-- SECTION 1: Contact info --}}
<section class="page-content">
    <div class="container">
        <div class="row justify-content-center">
        <div class="col-lg-8 col-xl-7">

        <div class="row justify-content-center g-4">

            {{-- Phone --}}
            <div class="col-md-4 text-center">
                <div class="mb-3">
                    <span style="display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;border:2px solid var(--pgs_primary_color, #c0392b);">
                        <i class="fas fa-phone-alt fa-lg text-primary"></i>
                    </span>
                </div>
                @if($settings && $settings->contact_no)
                    <p class="mb-0">{{ $settings->contact_no }}</p>
                @else
                    <p class="mb-0">—</p>
                @endif
            </div>

            {{-- Email --}}
            <div class="col-md-4 text-center">
                <div class="mb-3">
                    <span style="display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;border:2px solid var(--pgs_primary_color, #c0392b);">
                        <i class="fas fa-envelope fa-lg text-primary"></i>
                    </span>
                </div>
                @if($settings && $settings->email)
                    <p class="mb-0">{{ $settings->email }}</p>
                @else
                    <p class="mb-0">—</p>
                @endif
            </div>

            {{-- Address --}}
            <div class="col-md-4 text-center">
                <div class="mb-3">
                    <span style="display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;border:2px solid var(--pgs_primary_color, #c0392b);">
                        <i class="fas fa-map-marker-alt fa-lg text-primary"></i>
                    </span>
                </div>
                @if($settings && $settings->address)
                    <p class="mb-0">{{ $settings->address }}</p>
                @else
                    <p class="mb-0">—</p>
                @endif
            </div>

        </div>

        </div>
        </div>
    </div>
</section>

{{-- Page heading (Contact Form) --}}
<section class="pt-5 pb-0" style="background:#2d2d2d;">
    <div class="container">
        <div class="section-title text-center">
            <h2 class="text-white mb-0">Contact Us By Form</h2>
            <div class="mt-3 mx-auto" style="width:60px;height:3px;background:var(--pgs_primary_color,#c0392b);border-radius:2px;"></div>
            <p class="text-white-50 mt-4 mb-0">Fill in the form below and we will get back to you as soon as possible.</p>
        </div>
    </div>
</section>

{{-- SECTION 2: Contact form --}}
<section class="page-content" style="background:#2d2d2d;">
    <div class="container">
        <div class="row justify-content-center">
        <div class="col-lg-8 col-xl-7">
        <div class="contact-us-form" style="padding-left:0;">

        <form method="POST" action="{{ route('site.contact.send') }}">
            @csrf
            <div class="row g-3">

                <div class="col-md-6">
                    <input type="text" name="name"
                        class="form-control @error('name') is-invalid @enderror"
                        placeholder="Name"
                        value="{{ old('name') }}"
                        autocomplete="name"
                        inputmode="text"
                        maxlength="255"
                        pattern="^[^0-9]+$"
                        title="Name should not contain numbers."
                        required>
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-6">
                    <input type="tel" name="phone"
                        class="form-control @error('phone') is-invalid @enderror"
                        placeholder="Phone"
                        value="{{ old('phone') }}"
                        autocomplete="tel"
                        inputmode="numeric"
                        maxlength="10"
                        pattern="[0-9]{10}"
                        title="Phone number must contain exactly 10 numeric digits.">
                    @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

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

                <div class="col-md-6">
                    <input type="email" name="email"
                        class="form-control @error('email') is-invalid @enderror"
                        placeholder="Email"
                        value="{{ old('email') }}"
                        autocomplete="email"
                        maxlength="255"
                        required>
                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-12">
                    <textarea name="message" rows="6"
                        class="form-control @error('message') is-invalid @enderror"
                        placeholder="Message" required>{{ old('message') }}</textarea>
                    @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-12 text-end">
                    <button type="submit" class="btn btn-primary px-5 py-2 fw-bold text-uppercase" style="letter-spacing:1px;">
                        Send Us
                    </button>
                </div>

            </div>
        </form>

        </div>

        </div>
        </div>
        </div>
    </div>
</section>

@endsection