@extends('frontend.layouts.app')
@push('style')
    <style>
        .confirmwrap {
            min-height: 53.8vh;
        }
    </style>
@endpush
@section('content')
    <div class="confirmwrap">
        <div class="container mt-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Contact Us</li>
                </ol>
            </nav>
        </div>
        <section>
            <div class="container mt-4">
                <div class="row contact-section">
                    <div class="contact col-12 col-sm-12 col-md-12 col-lg-6">
                        <div class="contact-call border-bottom mb-4">
                            <div class="innercon">
                                <div class="iconcall">
                                    <i class="fa-solid fa-phone fs-6"></i> <span class="fs-5 calltext ms-2">Call Us:</span>
                                </div>
                                <div class="call">
                                    <p class="mt-2 mb-0 calnumber">{{ getOption('phone') }}</p>
                                    <p class="fs-6 cantactinfo">7 days a week, {{ getOption('start_time') }}AM to
                                        {{ getOption('end_time') }}PM</p>
                                </div>
                            </div>
                        </div>

                        <div class="contact-call border-bottom mb-4">
                            <div class="innercon">
                                <div>
                                    <i class="fa-solid fa-phone fs-6"></i> <span class="fs-5 calltext ms-2">WhatsApp:</span>
                                </div>
                                <div class="call">
                                    <p class="mt-2 mb-0 calnumber">{{ getOption('Whats_app') }}</p>
                                    <p class="fs-6 cantactinfo">7 days a week, {{ getOption('start_time') }}AM to
                                        {{ getOption('end_time') }}PM</p>
                                </div>
                            </div>
                        </div>
                        <div class="contact-call">
                            <div class="innercon">
                                <div>
                                    <i class="fa-solid fa-envelope"></i> <span class="fs-5 calltext ms-2">Email:</span>
                                </div>
                                <div class="call">
                                    <p class="mt-2 mb-0 calnumber">{{ getOption('email') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                        <div class="message">
                            @if (session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {{ session('success') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            @endif

                            <h3 class="mb-3">Send Us Message</h3>
                            <form action="{{ route('message.store') }}" method="post">
                                @csrf

                                <div class="mb-3">
                                    <input type="text" class="form-control rounded-0 p-3 bor" id="name"
                                        placeholder="name" name="name">
                                </div>
                                <div class="mb-3">
                                    <input type="email" class="form-control rounded-0" id="email" placeholder="email"
                                        name="email">
                                </div>
                                <div class="mb-3">
                                    <input type="text" class="form-control rounded-0" id="phone" placeholder="phone"
                                        name="phone">
                                </div>
                                <div class="mb-3">
                                    <textarea class="form-control rounded-0" id="message" name="message" rows="3"></textarea>
                                </div>
                                <button type="submit" class="btn btn-dark rounded-0 mt-3">Send Message</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection