@extends('frontend.layouts.app')
@section('title')
{{ $title ?? 'Page header' }}
@endsection

@section('meta')
<meta property="og:title" content="{{ $og_title }}" />
<meta property="og:description" content="{{ $og_description }}" />
<meta property="og:image" content="{{ getSeoImage($og_image) }}" />
@endsection

@push('style')
@endpush

@section('content')
    <!-- ======================= breadcrumb start  ============================ -->
    @include('frontend.layouts.includes.breadcrumb',
    ['links'=>[[$title=>route('frontend.contact')]]])
    <!-- ======================= breadcrumb end  ============================ -->

<!-- ======================= contact start  ============================ -->
    <div class="contact-section pt-2 pb-5">
    <div class="container">
        <div class="contain_info pt-4">
            <div class="row">

                @if($setting?->phone_no)
                <div class="col-lg-4">
                    <div class="d-flex align-items-center justify-content-lg-center mb-4 h-100">
                        <div class="me-2">
                            <img src="{{asset('assets/images/icons/phone.svg')}}" alt="Phone">
                        </div>
                        <div>
                            <span>Call us</span> <br>
                            <a href="tel:{{$setting?->phone_no}}">{{$setting?->phone_no}}</a>
                        </div>
                    </div>
                </div>
                @endif

                @if($setting?->email)
                <div class="col-lg-4">
                    <div class="d-flex align-items-center justify-content-lg-center mb-4 h-100">
                        <div class="me-2">
                            <img src="{{asset('assets/images/icons/email.svg')}}" alt="Email">
                        </div>
                        <div>
                            <span>Email us</span> <br>
                            <a href="mailto:{{$setting?->email}}">{{$setting?->email}}</a>
                        </div>
                    </div>
                </div>
                @endif

                @if($setting?->office_address)
                <div class="col-lg-4">
                    <div class="d-flex align-items-center justify-content-lg-center mb-4 h-100">
                        <div class="me-2">
                            <img src="{{asset('assets/images/icons/address.svg')}}" alt="Address">
                        </div>
                        <div>
                            <span>Address</span> <br>
                            <p class="m-0">{{$setting?->office_address}}</p>
                        </div>
                    </div>
                </div>
                @endif

            </div>
        </div>
        <hr>
        <div class="row d-flex pt-4 pb-3 justify-content-center">
            <div class="col-lg-7">
                <div class="contact-form ">
                    <form action="{{route('contact.store')}}" method="post">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="first_name" class="form-label">First Name <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="first_name" value="{{old('first_name')}}" autofocus id="first_name"
                                           class="form-control shadow-none @error('first_name') border-danger @enderror" required placeholder="Enter your first name">
                                    @error('first_name')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="last_name" class="form-label">Last Name <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="last_name" value="{{old('last_name')}}" id="last_name"
                                           class="form-control shadow-none @error('last_name') border-danger @enderror" required placeholder="Enter your last name">
                                    @error('last_name')
                                    <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email <span
                                            class="text-danger">*</span></label>
                                    <input type="email" name="email" value="{{old('email')}}" id="email" class="form-control shadow-none @error('email') border-danger @enderror"
                                           required placeholder="Enter your email">
                                    @error('email')
                                    <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <input type="tel" name="phone" value="{{old('phone')}}" id="phone" class="form-control shadow-none @error('phone') border-danger @enderror"
                                            placeholder="Enter your phone number">
                                    @error('phone')
                                    <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="phone" class="form-label">Reason</label>
                                    <input type="text" name="reason" value="{{old('reason')}}" id="reason" class="form-control shadow-none @error('reason') border-danger @enderror"
                                           placeholder="Enter your reason for contacting us">
                                    @error('reason')
                                    <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="message" class="form-label">Message <span
                                            class="text-danger">*</span></label>
                                    <textarea name="message"  id="message" class="form-control shadow-none @error('message') border-danger @enderror"
                                              placeholder="Message" cols="30" rows="5" required>{{old('message')}}</textarea>
                                    @error('message')
                                    <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary px-4">
                                    Submit
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"
                                         stroke-linecap="round" stroke-linejoin="round"
                                         class="icon icon-tabler icons-tabler-outline icon-tabler-send">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                        <path d="M10 14l11 -11"/>
                                        <path
                                            d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ======================= contact end  ============================ -->
@endsection
@push('scripts')
@endpush